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

<template>
    <view class="certification-main">
        <Step :step="step" />
        <view v-if="data.appStatus === '3'" class="certification-error">
            <view class="appStatus-error-icon"></view>
           <view>审核失败。</view>
        </view>
        <view class="certification-scroll">
            <view>
                <view class="certification-content">
                    <!-- 上传资质 -->
                    <view class="flex_c_l certification-title"><text class="text-red" v-if="viewStatus">*</text>{{
                        viewStatus ? '请选择' : '' }}发布服务类目：</view>
                    <!-- 服务类目 -->
                    <Category  />
                    <view class="flex_c_l certification-title"><text class="text-red" v-if="viewStatus">*</text>{{
                        viewStatus ? '请填写' : '' }}服务信息：</view>
                    <CategoryInfo  />

                    <CategoryImags />

                     <!-- 规格信息 -->
                     <Specifications :viewStatus="viewStatus"/>
                </view>
            </view>
        </view>
        <view class="certification-footer flex_c_c">
            <view v-if="[0].includes(step)">
                <view class="btn-w certification-btn flex_c_c" @click="goNext">提交</view>
            </view>
            <view v-if="[1].includes(step)" class="flex_c_c flex-gap">
                <view class="certification-btn-bols flex_c_c btn-p2" @click="returnStep" >删除</view>
                <view class="certification-btn flex_c_c btn-p" @click="onSubmit">修改</view>
            </view>
            <view v-if="[2].includes(step)" class="flex_c_c flex-gap-30 step-more-main">
                <view class="more-btns" v-if="moreBtn">
                    <view class="more-btn" @click="onDelete">删除</view>
                    <view class="more-btn" @click="onAdd">新增</view>
                </view>
                <view class="more-box" @click="moreBtn = !moreBtn">
                    <view  :class="[moreBtn ? 'icon-down' : 'icon-up']"></view>
                    更多</view>
                <view class="certification-btn-bols flex_c_c btn-p2" @click="onDown" v-if="data.appStatus === '2'">下线</view>
                <view class="certification-btn flex_c_c btn-p" @click="onEdit" v-if="data.appStatus === '2'">修改</view>
                <view class="certification-btn-bols flex_c_c btn-p3" @click="onEdit" v-if="data.appStatus === '3'">修改</view>
            </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 CategoryInfo from './CategoryInfo.vue';
import CategoryImags from './CategoryImags.vue';
import Specifications from './Specifications.vue';

const step = ref(0);
const moreBtn = ref(false);


// true: 显示1、2步骤 false: 2、3步骤（查看）
const viewStatus = computed(() => {
    return ![1, 2].includes(step.value)
})
provide('viewStatus', viewStatus);
const data = reactive({
    //服务
    project: {
        id: '13',
        businessName: '居家陪伴',
        parentId: '1',
        isFiles: true,//上传文件
    },
    activeProjects: [
        {
            id: '13',
            businessName: '居家陪伴',
            parentId: '1',
            isFiles: true,//上传文件
        },
        {
            id: '14',
            businessName: '出行陪伴',
            parentId: '1',
            isFiles: false,//上传文件
        }
    ],
    // 是否展示资质
    whether: '1',
    // 请上传个人形象照
    volunteerPicture: null,

    projectImages:['https://leromro.oss-cn-hangzhou.aliyuncs.com/test/684a38246f14b870873333c3.png','https://leromro.oss-cn-hangzhou.aliyuncs.com/test/684a38246f14b870873333c3.png'],//图片  注:第一张用于封面展示
   
    appStatus: '1',  //审批状态 1待审批2已通过3已驳回

    businessName:'致力于解决行动不便患者就医难题，让专业医疗服务突破空间限制，直达患者身边。',//服务名称
    businessDescribe:'依托先进的便携式检测设备与专业检测技术，打破传统检测的时空限制，可提供上门检测服务，让客户在舒适的环境中完成健康筛查',//服务描述
    businessSpecifications:[{}],//服务规格
   
});

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.businessName.trim().length === 0) reject('请填写服务名称');
        if (data.businessDescribe.trim().length === 0) reject('请填写服务描述');
        if (data.projectImages.length === 0) reject('请上传服务相关图片');
        //服务规格描述校验
        const isVer = data.businessSpecifications && data.businessSpecifications.length > 0;
        if (!isVer) reject('请完成服务规格信息的填写');

        resolve(true)
    })
}

const goNext = async () => {
    try {
        if (step.value === 0) {
            const verify = await projectVerify();
            verify && onSubmit()
        }
       
        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 onDelete = async () => {
    try {
        
    } catch (error) {
		console.log("TCL: onDelete -> error", error)
        
    }
}
const onAdd = async () => {
    try {
        
    } catch (error) {
		console.log("TCL: onAdd -> error", error)
        
    }
}
const onEdit = async () => {
    try {
        
    } catch (error) {
		console.log("TCL: onDown -> onEdit", error)
        
    }
}

const onDown = async () => {
    try {
        
    } catch (error) {
		console.log("TCL: onDown -> error", error)
        
    }
}

//选取服务返回
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>