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

<template>
	<view class="register-main">
		<view class="register-user-info">
			<FontTitle title="请完成注册信息填报" />
			<CustForm :column="com_column" ref="cust_form_ref" :isCode="isAdd" />
		</view>
		<view class="register-card">

			<view class="info-list">
				<view class="font-title">服务类别（ {{ serviceOptions.length }} ）</view>
				<view class="service-list">
					<view v-for="item in serviceOptions" :key="item.id" @click="serviceChange(item, 'classKey')"
						:class="serviceKeys.classKey === item.id ? 'servicetab classActive' : 'servicetab'">
						{{ item.businessName }}
					</view>
				</view>
				<view v-if="serviceKeys.classKey && serviceItems && serviceItems.length > 0">
					<view class="font-title">服务项目</view>
					<view class="service-list">
						<view v-for="item in serviceItems" :key="item.id" @click="serviceChange(item, 'itemKey')"
							:class="serviceKeys.itemKey === item.id ? 'servicetab classActive' : 'servicetab'">
							{{ item.businessName }}
						</view>
					</view>
				</view>
				<view v-if="serviceKeys.itemKeyname || serviceKeys.classKeyname">
					<view class="font-title">服务时长（<text class="activeColor">{{ serviceKeys.itemKeyname ||
						serviceKeys.classKeyname }}</text>）</view>
					<view class="service-list">
						<view v-for="item in timeList" :key="item.id" @click="serviceChange(item, 'time')"
							:class="serviceKeys.time === item.id ? 'servicetab classActive' : 'servicetab'">
							{{ item.lable }}
						</view>
					</view>
					<view class="font-title">服务价格（<text class="activeColor">{{ serviceKeys.itemKeyname ||
						serviceKeys.classKeyname }}</text>）</view>
					<view class="service-list">
						<up-input v-model="serviceKeys.price" placeholder="请设置服务价格">
							<template #suffix>
								<text>元</text>
							</template>
						</up-input>
					</view>
				</view>



			</view>
		</view>

		<view class="register-card" v-if="details.appStatus === '3'">
			<view class="font-title">驳回原因</view>
			<view class="info-list">
				{{ details.rejectReason }}
			</view>
		</view>


		<view v-for="item in updata_list" :key="item.key" class="updata-imgs">
			<UpdataImgs :fileList="file_url[item.key]" :data="item" ref="zsImg"
				v-if="item.permission.includes(data.key)" @onSubmit="onChange" />
		</view>



		<!-- <up-button  color="rgba(221, 94, 69, 1)" text="确定" @click="onSubmit" ></up-button> -->
		<view class="status-btn" @click="onSubmit">确定</view>

	</view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import FontTitle from "@/pages_home/components/font-title/index.vue";
import CustForm from "@/pages_home/components/cust-form/index";
import UpdataImgs from "@/pages_home/components/updata-imgs/index.vue";
import { chatting, education } from "./data";
import { add, getVolunteerInfo } from "@/api/volunteer";
import { computed } from 'vue';
import { getTreeList } from '@/api/volunteer'

const userImg = ref(null);
const zsImg = ref(null);


const updata_list = [
	{
		title: '上传头像',
		text: '上传您的头像',
		img: '/static/img/updata-user-img.png',
		key: 'volunteerPicture',
		ref: userImg,
		permission: [1, 2],
		required: true
	},
	{
		title: '个人身份证',
		text: '上传您的个人身份证',
		img: '/static/img/updata-user-img.png',
		key: 'idCardPicture',
		ref: zsImg,
		permission: [1, 2],
		required: true
	},
	{
		title: '职业、资质证书',
		text: '上传您的职业、资质证书',
		img: '/static/img/updata-user-img.png',
		key: 'certificationPicture',
		ref: zsImg,
		permission: [1, 2],
		required: false
	}
]

const cust_form_ref = ref(null);

const data = ref(null);

const file_url = reactive({});

const isAdd = ref(true);//是否已经注册

const details = ref({});//详情数据
const serviceOptions = ref([]);//服务类目
const serviceItems = ref([]);//服务项目

const serviceKeys = reactive({
	classKey: '',//服务类别
	classKeyname: '',
	itemKey: '',//服务项目
	itemKeyname: '',
	time:'',//时间
	price:'',//价格
})

const timeList = [
	{
		lable: '60分钟',
		id: 60
	},
	{
		lable: '90分钟',
		id: 90
	},
	{
		lable: '120分钟',
		id: 120
	},
]

const sex_status = {
	'男': 0,
	'女': 1
}
const register_column = {
	1: chatting,
	2: education,
}

//根据类型获取表单item 值
const com_column = computed(() => {
	let column_list = data.value ? register_column[data.value.key] : [];
	return column_list
})

function onSubmit() {
	try {

		// return;
		// 校验表单并获取数据
		cust_form_ref.value.onSubmit().then(async (res) => {
			console.log('===res===>', res, file_url);

			//文件必传校验
			for (let i = 0; i < updata_list.length; i++) {
				const element = updata_list[i];
				console.log(element.required, element.permission.includes(data.value.key), file_url[element.key]);


				const type = element.required && element.permission.includes(data.value.key) && !file_url[element.key];
				console.log('element', element, type);

				if (type) {
					uni.showToast({
						title: '请上传' + element.title,
						icon: 'error'
					})
					return;
				}
			}
		
			if(!(serviceKeys.itemKeyname || serviceKeys.classKeyname)){
				uni.showToast({
						title: '请选择服务',
						icon: 'none'
					})
				return
			}
			if(!serviceKeys.time){
				uni.showToast({
						title: '请选择服务时长',
						icon: 'none'
					})
				return
			}
			if(!serviceKeys.price){
				uni.showToast({
						title: '请输入服务价格',
						icon: 'none'
					})
				return
			}

			const parmas = {
				serviceCategory: data.value.key,
				...file_url,
				businessManagementId:serviceKeys.itemKey || serviceKeys.classKey,
				businessPrice: serviceKeys.price,
				businessDuration: serviceKeys.time
			};
			for (const key in res) {
				parmas[key] = key == 'sex' ? sex_status[res[key]] : res[key];
				if (key === 'businessManagementIdkey') {
					parmas['businessManagementId'] = res[key]
					delete parmas['businessManagementIdkey'];
				}
			}

			console.log('提交', parmas);

			// return;
			// 提交接口，注册人员
			const submit_res = await add(parmas);
			if (submit_res.code == 200) {
				uni.showToast({
					title: '申请成功',
					icon: 'success',
					success: () => {
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}
				})
				return;
			}
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			console.log('==submit_res====>', submit_res);
		})


	} catch (error) {
		console.log('error', error);

	} finally {

	}

}

function onChange({ key, url }) {
	console.log('onChange', key, url);
	Object.assign(file_url, {
		[key]: url
	})
}

function idToIndexs(array, targetId, path = []) {

    for (let i = 0; i < array.length; i++) {
        const item = array[i];
        const currentPath = path.concat(i);

        if (item.id === targetId) {
			console.log('indexs',item);
            return item
        }

        if (item.children) {
            const result = idToIndexs(item.children, targetId, currentPath);
            if (result) {
                return result;
            }
        }
    }

    return null; // 如果没有找到对应的项，返回 null
}
//重新提交的服务信息回显
function servesInit(){
	const indexs =  idToIndexs(serviceOptions.value,details.value.businessManagementId +'')
	const names = indexs.businessTierName.split('-');
	Object.assign(serviceKeys, {
					classKey: String(indexs.parentId)===String(data.value.key)? indexs.id :indexs.parentId,//服务类别
					classKeyname:names[1],
					itemKey: indexs.id,//服务项目
					itemKeyname: indexs.businessName,
					time:details.value.businessDuration,//时间
					price:details.value.businessPrice,//价格
				})
}
async function getRegister() {

	try {
		uni.showLoading({
			title: '数据加载中...'
		});
		const res = await getVolunteerInfo({ serviceCategory: data.value.key });
		if (res.data) {
			details.value = { ...res.data, age: res.data.age + '' };
			cust_form_ref.value.setData(details.value);
			Object.assign(file_url, {
				volunteerPicture: res.data.volunteerPicture,
				idCardPicture: res.data.idCardPicture,
				certificationPicture: res.data.certificationPicture
			})

			 servesInit(data)

		
			isAdd.value = false;
			
		}
	} catch (error) {
		console.log('error', error);
		uni.showToast({
			title: error.msg,
			icon: 'error',
		});
	} finally {
		uni.hideLoading();
	}
}



const serviceChange = (item, key) => {
	console.log('----', item);
	if (key === 'classKey') {
		serviceItems.value = item.children;
		serviceKeys['itemKey'] = '';
	}
	Object.assign(serviceKeys, {
		[key]: serviceKeys[key] === item.id ? '' : item.id,
		[key + 'name']: serviceKeys[key + 'name'] === item.businessName ? '' : item.businessName,
	})

}
const getTreeListInit = () => {
	getTreeList({ parentId: data.value.key }).then(res => {
		console.log('----', res.data);
		serviceOptions.value = res.data;
	})
}
onMounted(() => {
	getTreeListInit();
})

onLoad((options) => {
	const option = JSON.parse(decodeURIComponent(options.data));
	data.value = option;
	console.log("option", option);

	uni.setNavigationBarTitle({
		title: option.name  // 根据业务逻辑调整 
	});

	setTimeout(() => {
		getRegister();

	}, 500);

})


</script>

<style lang="scss" scoped>
.register-main {
	padding: 12px;
	background-color: rgba(245, 245, 245, 1);

	// height: 100vh;
	.register-user-info {
		margin-bottom: 12px;
		background-color: #fff;
		border-radius: 8px;
		padding: 18px 16px;
	}

	.updata-imgs {
		margin-bottom: 12px;

	}
}

.register-card {
	margin-bottom: 12px;
	background-color: #fff;
	border-radius: 8px;
	padding: 18px 16px;
}

.info-list {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0px;
	line-height: 23.27px;
	color: rgba(51, 51, 51, 1);
}

.status-btn {
	// width: 716rpx;
	height: 96rpx;
	border-radius: 16rpx;
	background: rgba(221, 94, 69, 1);

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 32rpx;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	margin-bottom: 88rpx;
}

.font-title {
	margin-bottom: 32rpx;
}

.service-tile {
	font-size: 32rpx;
	font-weight: 400;
	line-height: 48rpx;
	color: rgba(51, 51, 51, 1);
	margin-bottom: 16rpx;
}

.service-list {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 16rpx;
}

.servicetab {
	background: rgba(249, 250, 251, 1);
	color: rgba(51, 51, 51, 1);
	border: 1px solid #fff;
	padding: 8rpx 16rpx;
	border-radius: 16rpx;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
}

.classActive {
	background: rgba(251, 229, 225, 1);
	color: rgba(221, 94, 69, 1);
	border: 1px solid rgba(221, 94, 69, 1);
}

.activeColor {
	color: rgba(221, 94, 69, 1);
}
</style>