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.classKey && serviceItems2 && serviceItems2.length > 0">
					<view class="font-title">服务项</view>
					<view class="service-list">
						<view v-for="item in serviceItems2" :key="item.id" @click="serviceChange(item, 'threeKey')"
							:class="serviceKeys.threeKey === 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.threeKeyname ||
						serviceKeys.itemKeyname ||
						serviceKeys.classKeyname }}</text>）</view>
					<view class="service-list price-box">
						<up-input
							v-model="serviceKeys.time"
							placeholder="请输入服务时长"
							@blur="validateTimeInput"
							class="price-input"
						>
							<template #suffix>
								<text>分钟</text>
							</template>
						</up-input>
					</view>

					<view class="font-title">最少购买</view>
					<view class="service-list price-box">
						<up-input
							v-model="serviceKeys.minQuantity"
							placeholder="用户每次下单最少购买数量"
							class="price-input"
							@blur="validateMinQuantity"
						></up-input>
					</view>

					<view class="font-title">购买单位</view>
					<view class="service-list price-box">
						<up-input
							v-model="serviceKeys.businessUnit"
							placeholder="请输入购买单位，如：(次、平方、小时)"
							class="price-input"
						></up-input>
					</view>

					<view class="font-title">服务描述</view>
					<view class="service-list">
						<up-textarea
							v-model="serviceKeys.businessDescribe"
							placeholder="服务描述内容，如：提供上门取衣、送衣服服务、您只需线上下单，我们工作人员便会按约定时间上门收取衣物"
						></up-textarea>
					</view>

					<view class="font-title">服务价格（<text class="activeColor">{{ serviceKeys.threeKeyname ||
						serviceKeys.itemKeyname ||
						serviceKeys.classKeyname }}</text>）</view>
					<view class="service-list price-box">
						<up-input v-model="serviceKeys.price"
							:placeholder="min_max_price.minPrice && min_max_price.maxPrice ? `${min_max_price.minPrice}-${min_max_price.maxPrice}` : '请设置服务价格'"
							@blur="validatePriceInput" class="price-input">
							<template #suffix>
								<text>元</text>
							</template>
						</up-input>
					</view>

					<view class="price-describe" v-if="min_max_price.minPrice && min_max_price.maxPrice">
						价格说明
					</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" :fileCount="item.fileCount" ref="zsImg" @onSubmit="onChange"  />
		</view>


		<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 { column } 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 min_max_price = ref({
	minPrice: undefined,
	maxPrice: undefined
})


const updata_list = [
	{
		title: '上传服务图片',
		text: '用于服务展示',
		img: '/static/img/updata-user-img.png',
		key: 'volunteerPicture',
		ref: userImg,
		// permission: [1, 2],
		required: true,
		fileCount:1,
		dece:'点击服务图片'
	},
	{
		title: '身份证国徽面',
		text: '上传您的身份证国徽面',
		img: '/static/img/updata-user-img.png',
		key: 'idCardPictureFront',
		ref: zsImg,
		// permission: [1, 2],
		required: true,
		fileCount:1,
		dece:'点击上传身份证国徽面'
	},
	{
		title: '身份证人像面',
    text: '上传您的身份证人像面',
		img: '/static/img/updata-user-img.png',
		key: 'idCardPictureBack',
		ref: zsImg,
		// permission: [1, 2],
		required: true,
		fileCount:1,
    dece:'点击上传身份证人像面'
	},
	{
		title: '职业、资质证书',
		text: '上传您的职业、资质证书',
		img: '/static/img/updata-user-img.png',
		key: 'certificationPicture',
		ref: zsImg,
		// permission: [1, 2],
		required: false,
		fileCount:6,
		dece:'点击上传职业、资质证书'
	}
]

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 serviceItems2 = ref([]);//服务小类目


const serviceKeys = reactive({
	classKey: '',//服务类别
	classKeyname: '',
	itemKey: '',//服务项目
	itemKeyname: '',
	threeKey: '',//服务项
	threeKeyname: '',
	time: '',//时间
  price: '',//价格
  minQuantity: '',//最小购买次数
  businessUnit: '',//购买单位
  businessDescribe: '',//服务描述
})

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

const sex_status = {
	'男': 0,
	'女': 1
}

const validatePriceInput = (value) => {
	// 确保输入是纯数字
	if (!/^\d*$/.test(value)) {
		serviceKeys.price = value.replace(/[^0-9.]/g,  '');// 移除非数字字符
		return;
	}

	const price = parseFloat(serviceKeys.price, 10);

	// 检查是否在允许的范围之内
	if (min_max_price.value.minPrice !== undefined && min_max_price.value.maxPrice !== undefined) {
		if (price >= min_max_price.value.minPrice && price <= min_max_price.value.maxPrice) {
			serviceKeys.price = serviceKeys.price.toString();
		} else {
			serviceKeys.price = null;
			uni.showToast({
				title: '请输入价格区间内的价格',
				icon: 'none'
			})
		}
	}
};

const validateTimeInput = (value) => {
	// 确保输入是纯数字
	if (!/^\d*$/.test(value)) {
		serviceKeys.time = value.replace(/\D/g, ''); // 移除非数字字符
		return;
	}

	const time = parseInt(serviceKeys.time, 10);

	// 检查是否大于0
	if (time <= 0) {
		serviceKeys.time = null;
		uni.showToast({
			title: '请输入大于0的服务时长',
			icon: 'none'
		});
	}
};

const validateMinQuantity = (value) => {
	// 确保输入是纯数字
	if (!/^\d*$/.test(value)) {
		serviceKeys.minQuantity = value.replace(/\D/g, ''); // 移除非数字字符
		return;
	}

	const quantity = parseInt(serviceKeys.minQuantity, 10);

	// 检查是否大于0
	if (quantity <= 0) {
		serviceKeys.minQuantity = null;
		uni.showToast({
			title: '请输入大于0的购买数量',
			icon: 'none'
		});
	}
};

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

const onSubmit = () =>{
	uni.$u.debounce(submitForm, 300)
}
function submitForm() {
		try {

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

			//文件必传校验
			for (let i = 0; i < updata_list.length; i++) {
				const element = updata_list[i];


				const type = element.required && !file_url[element.key];

				if (type) {
					uni.showToast({
						title: '请上传' + element.title,
						icon: 'error'
					})
					return;
				}
			}

			if (!(serviceKeys.threeKeyname || 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
			}
			if (!serviceKeys.minQuantity) {
				uni.showToast({
					title: '请输入最少购买数量',
					icon: 'none'
				})
				return
			}
			if (!serviceKeys.businessUnit) {
				uni.showToast({
					title: '请输入购买单位',
					icon: 'none'
				})
				return
			}
			if (!serviceKeys.businessDescribe) {
				uni.showToast({
					title: '请输入服务描述',
					icon: 'none'
				})
				return
			}

			const parmas = {
				serviceCategory: data.value.key,
				...file_url,
				businessManagementId: serviceKeys.threeKey || serviceKeys.itemKey || serviceKeys.classKey,
				businessPrice: serviceKeys.price,
				businessDuration: serviceKeys.time,
				businessUnit: serviceKeys.businessUnit,
				minQuantity: serviceKeys.minQuantity,
				businessDescribe: serviceKeys.businessDescribe
			};
			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'
			})
		})


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

	} finally {

	}

}

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

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

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

		if (item.id === targetId) {
			return item
		}

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

	return null; // 如果没有找到对应的项，返回 null
}
/**
 * 根据目标id查找所有父级路径
 * @param {Array} data 树形数据源（如 serviceOptions.value）
 * @param {String|Number} targetId 要查找的目标id
 * @param {String} [idKey='id'] id字段名
 * @param {String} [childrenKey='children'] 子级字段名
 * @returns {Object|null}
 */
function findParentPath(data, targetId, idKey = 'id', childrenKey = 'children') {
	for (const node of data) {
		// 当前节点匹配
		if (node[idKey] == targetId) {
			return {
				parentIdPath: [node[idKey]],
				businessTierName: node.businessName || ''
			};
		}

		// 搜索子级
		const result = node[childrenKey]?.length > 0
			? findParentPath(node[childrenKey], targetId, idKey, childrenKey)
			: null;

		if (result) {
			return {
				parentIdPath: [...result.parentIdPath, node[idKey]],
				businessTierName: `${result.businessTierName}-${node.businessName || ''}`
			};
		}
	}

	return null;
}
function idToIndexs(targetId) {
	const res = findParentPath(serviceOptions.value, targetId);
	return res || {
		parentIdPath: [],
		businessTierName: ''
	};
}

const backfill = {
	2: 'threeKey',
	1: 'itemKey',
	0: 'classKey',
}
//重新提交的服务信息回显
function servesInit() {
	const indexs = idToIndexs(details.value.businessManagementId + '');
	const names = indexs.businessTierName.split('-').reverse();
	const ids = indexs.parentIdPath.reverse();
	const obj = {};
	for (let i = 0; i < names.length; i++) {
		obj[backfill[i]] = ids[i];
		obj[backfill[i] + 'name'] = names[i];
	}


	if (obj.itemKey) {
		const row = handlerList(serviceOptions.value, obj.classKey)
		serviceItems.value = row.children;
	}
	if (obj.threeKey) {
		const row = handlerList(serviceOptions.value, obj.itemKey)
		serviceItems2.value = row.children;
	}
	Object.assign(serviceKeys, {
		time: details.value.businessDuration,//时间
		price: details.value.businessPrice,//价格
		...obj
	})


	handlerList(serviceOptions.value, serviceKeys.itemKey)


}
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,
				idCardPictureFront: res.data.idCardPictureFront,
				idCardPictureBack: res.data.idCardPictureBack,
				certificationPicture: res.data.certificationPicture
			})
			servesInit(data)
			isAdd.value = false;
		}

		if (data.value.record) {
			Object.assign(serviceKeys, {
				classKey: data.value.record.id,//服务类别
				classKeyname: data.value.record.businessName,
			})
		}
	} catch (error) {
		console.log('error', error);
		uni.showToast({
			title: error.msg,
			icon: 'error',
		});
	} finally {
		// uni.hideLoading();
	}
}



const serviceChange = (item, key) => {

	if (item.maxPrice && item.minPrice) {
		min_max_price.value = {
			minPrice: item.minPrice,
			maxPrice: item.maxPrice,
		}
	}
	if (key === 'classKey') {
		serviceItems.value = item.children;
		serviceKeys['itemKey'] = '';
		serviceKeys['itemKeyname'] = '';
		serviceKeys['threeKey'] = '';
		serviceKeys['threeKeyname'] = '';
		serviceItems2.value = [];
	}
	if (key === 'itemKey') {
		serviceItems2.value = item.children;
		serviceKeys['threeKey'] = '';
		serviceKeys['threeKeyname'] = '';
	}
	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 => {
		serviceOptions.value = res.data;
	})
}
onMounted(() => {
	getTreeListInit();
})

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

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

	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: 10rpx;
	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);
}

.price-box {
	display: flex;
	align-items: center;
}

.price-describe {
	font-size: 24rpx;
	font-weight: 500;
	letter-spacing: 0rpx;
	line-height: 34.76rpx;
	color: rgba(153, 153, 153, 1);
	margin-top: 16rpx;
}
</style>