leromro-mini/pages/register/register.vue

<template>
	<view class="register-main">
		<view class="register-user-info">
			<FontTitle title="请完成注册信息填报" />
			<CustForm :column="com_column" ref="cust_form_ref" />
		</view>
		<view class="updata-imgs">
			
		</view>
		<!-- <UpdataImgs :data="updata_list[0]" ref="userImg" v-if="updata_list[0].permission.includes(data.key)" />
		<UpdataImgs :data="updata_list[1]" ref="zsImg" v-if="updata_list[1].permission.includes(data.key)" /> -->

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

		<up-button type="primary" text="确定" @click="onSubmit"></up-button>

	</view>
</template>

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


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],
		required: false
	}
]

const cust_form_ref = ref(null);

const data = ref(null);

const file_url=reactive({});


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

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

function onSubmit() {
	try {
		// 校验表单并获取数据
		// const res = await ;
		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;
				}
			}

			const parmas = {
				serviceCategory: data.value.key,
				...file_url
			};
			for (const key in res) {
				parmas[key] = key == 'sex' ? sex_status[res[key]] : res[key];
			}

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

			// return;
			// 提交接口，注册人员
			const submit_res = await add(parmas);
			if(submit_res.code == 200){
				uni.showToast({
					title: '注册成功',
					icon: 'none'
				})
				uni.navigateBack();
				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
	})
}


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

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


</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;

	}
}
</style>