leromro-mini/pages_home/pages/certification/index.vue

<template>
    <view class="certification-main">
        <Step :step="step" />
        <view v-if="data.appStatus === '3'" class="certification-error">
            居家陪伴的证件不齐全，审核失败。居家陪伴的证件不齐全，审核失败。居家陪伴的证件不齐全，审核失败。居家陪伴的证件不齐全，审核失败。</view>
        <view class="certification-scroll">
            <view>
                <view class="certification-content">
                    <!-- 上传资质 -->
                    <view v-if="[0, 2, 3].includes(step)">
                        <view class="flex_c_l certification-title"><text class="text-red"
                                v-if="viewStatus">*</text>{{ viewStatus ? '请选择' : '' }}服务类目：</view>
                        <!-- 服务类目 -->
                        <Category :viewStatus="viewStatus" />
                    </view>
                    <!-- 填写信息 -->
                    <view v-if="[1, 2, 3].includes(step)">
                        <view class="flex_c_l certification-title"><text class="text-red"
                                v-if="viewStatus">*</text>{{ viewStatus ? '请填写' : '' }}个人信息：</view>
                        <!-- 请上传个人形象照 -->
                        <UserA :viewStatus="viewStatus" />
                        <!-- 个人信息 -->
                        <Form :viewStatus="viewStatus" />
                        <!-- 个人简介 -->
                        <Synopsis :viewStatus="viewStatus" />
                    </view>
                </view>
            </view>
        </view>
        <view class="certification-footer flex_c_c">
            <view class="certification-btn-bols flex_c_c btn-p" @click="returnStep" v-if="step === 1">返回</view>
            <view :class="step === 1 ? 'certification-btn flex_c_c btn-p ' : 'btn-w certification-btn flex_c_c'"
                @click="goNext" v-if="[0, 1].includes(step)">{{step === 0?'下一步':'提交'}}</view>
            <view class="btn-w certification-btn flex_c_c" @click="onSubmit" v-if="[2].includes(step)">重新提交</view>

        </view>
    </view>


</template>

<script setup>
import { computed, ref, reactive, watch } from 'vue';
import { provide, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import store from '@/store'

import Step from './Step.vue';
import Category from './Category.vue';
import UserA from './UserA.vue';
import Form from './Form.vue';
import Synopsis from './Synopsis.vue';


const step = ref(0);

// true: 显示1、2步骤 false: 2、3步骤（查看）
const viewStatus = computed(() => {
    return ![2, 3].includes(step.value)
})

const data = reactive({
    //服务
    project: [
        // {
        //     id: '13',
        //     businessName: '居家陪伴',
        //     parentId: '1',
        //     isFiles: true,//上传文件
        // },
        // {
        //     id: '14',
        //     businessName: '出行陪伴',
        //     parentId: '1',
        //     isFiles: false,//上传文件
        // }
    ],
    // 是否展示资质
    whether: '1',
    // 请上传个人形象照
    volunteerPicture: null,

    // name:'陈陈',//姓名
    // sex:'1',//性别
    // age:'23',//年龄
    // phonenumber:'1696601943',//手机号
    // code:'',//验证码
    // districtName:'重庆市丰都县',//地区
    // address:'阿布阿布阿布',//详细地址

    // skillDescribe:'我的个人简介呀',//个人简介

    // appStatus:'1',  //审批状态 1待审批2已通过3已驳回


    name: '',//姓名
    sex: '',//性别
    age: '',//年龄
    phonenumber: '',//手机号
    code: '',//验证码
   
    skillDescribe: '',//个人简介

    appStatus: '1',  //审批状态 1待审批2已通过3已驳回


    provinceName: '', // 省
    provinceCode: '',
    provinceInd: 21,

    cityName: '', // 市
    cityCode: '',
    cityInd: 0,

    districtName: '',//地区
    districtCode: '',
    districtInd: 17,

    address: '',//详细地址
});

provide('formData', data);


watch(data, (newVal, oldVal) => {
    uni.$u.debounce(storageData, 500)
})

const storageData = () => {
    console.log('存储数据', data);
    store.dispatch('handlerCertificationInfo', data)
}

//服务必选验证
const projectVerify = async () => {
    return new Promise((resolve, reject) => {
        if (data.project.length === 0) {
            reject('请选择服务')
        }
        // 资质文件必传校验
        const verify_data = data.project.filter(item => item.isFiles);
        const verify_files = verify_data.filter(item => item.files && item.files.length > 0);
        if (verify_data.length !== verify_files.length) {
            reject('请上传相关服务的资质证件!')
        }

        resolve(true)
    })
}

//基本信息验证
const userInfoVerify = async () => {
    return new Promise((resolve, reject) => {
        if(!data.volunteerPicture) reject('请上传头像');
        if(data.name.trim().length === 0) reject('请填写姓名');
        if(!data.sex) reject('请选择性别');
        if(data.phonenumber.trim().length === 0) reject('请填写手机号');
        if(data.code.trim().length === 0) reject('请填写短信验证码');
        if(data.districtName.trim().length === 0) reject('请选择地区');
        if(data.address.trim().length === 0) reject('请填写详细地址');
        if(data.skillDescribe.trim().length === 0) reject('请填写个人简介');
        resolve(true)
    })
} 

const goNext = async () => {
    try {
        if (step.value === 0) {
            const verify = await projectVerify();
            if (!verify) return;
        }
        if (step.value === 1) {
            const verify = await userInfoVerify();
            verify && onSubmit()
            return;
        }
        step.value = step.value + 1;
    } catch (error) {
        uni.showToast({
            title: error,
            icon: 'none'
        })
        console.log("TCL: goNext -> error", error)
    }
}
const returnStep = () => {
    step.value = 0;
}
const onSubmit = () => {
    console.log('提交', data);
}

const getServeDetails = async () => {
    // data.appStatus = '2';
    // step.value = 3;
}

//选取服务返回
const activeProjectBack = (options) => {

    if (options.serves) {
        const serves = JSON.parse(decodeURIComponent(options.serves));
        Object.assign(data, { project: serves });
    }
}

// 初始化数据
const initData = () => {
    try {
        const initD = store.state.business.certificationInfo;
        if (initD) {
            Object.assign(data, initD);
        }
    } catch (error) {
        console.log("TCL: initData -> error", error)
    }
}

onLoad((options) => {
    console.log("TCL: options", options)
    initData();
})

getServeDetails();

defineExpose({ activeProjectBack });
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>