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

<template>
	<view class="register-main">
		<up-alert description="您已完成账户注册" type="success" showIcon closable v-if="!isAdd"></up-alert>
		<view class="register-user-info">
			<FontTitle title="请完成注册信息填报" />
			<CustForm :column="com_column" ref="cust_form_ref" :isCode="isAdd"/>
		</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 type="primary" text="确定" @click="onSubmit" v-if="isAdd"></up-button>

	</view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } 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, getVolunteerInfo } 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, 2],
		required: false
	}
]

const cust_form_ref = ref(null);

const data = ref(null);

const file_url = reactive({});

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

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

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

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

function getRegister() {
	getVolunteerInfo({ serviceCategory: data.value.key }).then(res => {
		console.log('xxxxxxxxxxres', res, cust_form_ref.value);
		if (res.data) {
			cust_form_ref.value.setData(res.data);
			Object.assign(file_url, {
				volunteerPicture: res.data.volunteerPicture,
				idCardPicture: res.data.idCardPicture,
				certificationPicture: res.data.certificationPicture
			})
			isAdd.value = false;
		}



	})
}

// onMounted(() => {
// 	nextTick(() => {

// 	});

// })

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;

	}
}
</style>