qa-prevention-xgf-app/pages/train_management/realname_info_auth.vue

<template>
	<view class="content">
		<view class="top-title">学员信息</view>

		<u-gap height="20" bgColor="#f2f2f2" />

		<view class="content_body">
			<u--form labelPosition="left" :model="ruleFormData" :rules="rules" ref="uFormRef">
				<u-form-item labelWidth="70" label="姓名" prop="userInfo.name" borderBottom required>
					<u--input v-model="ruleFormData.userInfo.name" placeholder="请输入姓名..." border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80" label="联系电话" prop="userInfo.phone" borderBottom required>
					<u--input v-model="ruleFormData.userInfo.phone" type="number" placeholder="请输入联系电话..." border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80" label="身份证号" prop="userInfo.userIdCard" borderBottom required>
					<u--input v-model="ruleFormData.userInfo.userIdCard" placeholder="请输入身份证号..." border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" label="性别" prop="userInfo.sex" borderBottom required>
					<u-radio-group v-model="ruleFormData.userInfo.sex" placement="row" class="radio-group__style">
						<u-radio v-for="(item, index) in sexsList" :key="index" :label="item.name" :name="item.name"> </u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="70" label="学历" prop="userInfo.degreeOfEducation" borderBottom required @click="handleEducationClick">
					<u--input v-model="ruleFormData.userInfo.degreeOfEducation" readonly placeholder="请选择学历..." border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" label="职业" prop="userInfo.job" borderBottom required>
					<u--input v-model="ruleFormData.userInfo.job" placeholder="请输入职业..." border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="125" label="职业资格等级证书" prop="userInfo.gradeCertificate" borderBottom required>
					<u-upload :fileList="ruleFormData.userInfo.gradeCertificate" previewFullImage @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
				</u-form-item>
				<u-form-item labelWidth="120" label="获得证书时间" prop="userInfo.certificateAcquisitionTime" borderBottom required @click="showCertificateGetTime">
					<u--input v-model="ruleFormData.userInfo.certificateAcquisitionTime" readonly placeholder="请选择获得证书时间..." border="none"></u--input>
				</u-form-item>
				<u-form-item label="手写签字" prop="userInfo.writeSign" borderBottom required labelPosition="top" labelWidth="auto">
					<view style="flex: 1">
						<u-button type="primary" size="mini" text="签字" :customStyle="{ position: 'absolute', top: '-46upx', right: '20upx', width: '100upx' }" @click="signVisible = true" />
						<view v-if="ruleFormData.userInfo.writeSign">
							<u-image width="400rpx" height="200rpx" :src="ruleFormData.userInfo.writeSign" />
						</view>
					</view>
				</u-form-item>
			</u--form>

			<view class="mt-10">
				<u-button type="primary" text="下一步" @click="$u.debounce(fnSubmit, 1000, true)" />
			</view>
		</view>

		<sign :signShow.sync="signVisible" @confirm="handleSign" />
		<u-datetime-picker
			:show="showCertificateGetTimePopper"
			mode="datetime"
			v-model="defaultDatetimePicker"
			:round="12"
			:custom-style="{
				borderRadius: '24rpx',
				overflow: 'hidden',
				'--picker-header-radius': '24rpx 24rpx 0 0',
				'--picker-confirm-radius': '12rpx'
			}"
			@confirm="handleCertificateGetTimeConfirm"
			@cancel="handleCertificateGetTimeCancel"
		></u-datetime-picker>

		<u-picker ref="uPicker" :show="singleChoice" :columns="singleChoiceColumns" keyName="NAME" @confirm="fnSingleChoiceConfirm" @cancel="fnSingleChoiceCancel"></u-picker>
	</view>
</template>

<script>
import { getDataDictionary, joinClass } from '@/api';
import Sign from '@/components/sign/sign.vue'
import { validateFieldPhone, validateFieldIdCard } from '@/utils/formValidateField.js'
import store from "@/store";

export default {
	data() {
		return {
			routeQuery: {}, // 上一个页面带过来的路由参数
			sexsList: [
				{
					label: '1',
					name: '男'
				},
				{
					label: '0',
					name: '女'
				}
			],
			singleChoice: false,
			showCertificateGetTimePopper: false,
			signVisible: false,
			defaultDatetimePicker: Number(new Date()),
			singleChoiceColumns: [],
			ruleFormData: {
				userInfo: {
					name: '', // 姓名
					phone: '', // 联系电话
					userIdCard: '', // 身份证号
					sex: '男', // 性别
					degreeOfEducation: '', // 学历
					job: '', // 职业
					gradeCertificate: [], // 等级证书
					certificateAcquisitionTime: '', // 获取证书时间
					writeSign: '' // 手写签字
				}
			},
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.phone': [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: validateFieldPhone,
						trigger: ['change', 'blur']
					}
				],
				'userInfo.userIdCard': [
					{
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					},
					{
						validator: validateFieldIdCard,
						trigger: ['change', 'blur']
					}
				],
				'userInfo.sex': {
					type: 'string',
					required: true,
					message: '请选择性别',
					trigger: ['change']
				},
				'userInfo.degreeOfEducation': {
					type: 'string',
					required: true,
					message: '请选择学历',
					trigger: ['blur', 'change']
				},
				'userInfo.job': {
					type: 'string',
					required: true,
					message: '请输入职业',
					trigger: ['blur', 'change']
				},
				'userInfo.gradeCertificate': [
					{
						type: 'array',
						required: true,
						message: '请上传等级证书',
						trigger: ['blur', 'change']
					}
				],
				'userInfo.certificateAcquisitionTime': {
					type: 'string',
					required: true,
					message: '请选择获取证书时间',
					trigger: ['blur', 'change']
				},
				'userInfo.writeSign': [
					{
						type: 'string',
						required: true,
						message: '请填写手写签字',
						trigger: ['blur', 'change']
					}
				]
			}
		}
	},

	onLoad(query) {
		this.routeQuery = query // 接收上一个页面传递过来的路由参数1
  },

	methods: {
		handleEducationClick() {
			this.$refs.uPicker.setIndexs([0])
			this.fnGetDataDictionary('d7d80f08d73a4accbccf4fd3d8d1d867')
			this.singleChoice = true
		},
		fnSingleChoiceConfirm(event) {
			this.$set(this.ruleFormData.userInfo, 'degreeOfEducation', event.value[0].NAME)
			this.$set(this.ruleFormData.userInfo, 'degreeOfEducation' + '_BIANMA', event.value[0].BIANMA)
			this.fnSingleChoiceCancel()
		},
		fnSingleChoiceCancel() {
			this.singleChoice = false
		},
		async fnGetDataDictionary(DICTIONARIES_ID) {
			let resData = await getDataDictionary({
				DICTIONARIES_ID
			})
			this.singleChoiceColumns = [resData.list]
		},
		handleSelectEducation(event) {
			this.ruleFormData.userInfo.degreeOfEducation = event.name
		},
		async afterRead(event) {
			let lists = [].concat(event.file)
			lists.map((item) => {
				this.ruleFormData.userInfo.gradeCertificate.push({
					...item,
					status: 'success',
					message: ''
				})
			})
		},
		deletePic(event) {
			this.ruleFormData.userInfo.gradeCertificate.splice(event.index, 1)
		},
		showCertificateGetTime() {
			this.showCertificateGetTimePopper = true
		},
		handleCertificateGetTimeConfirm(event) {
			this.ruleFormData.userInfo.certificateAcquisitionTime = uni.$u.timeFormat(event.value, 'yyyy-mm-dd hh:MM')
			this.handleCertificateGetTimeCancel()
		},
		handleCertificateGetTimeCancel() {
			this.showCertificateGetTimePopper = false
		},
		handleSign(event) {
			this.ruleFormData.userInfo.writeSign = event.filePath
		},
		async fnSubmit() {
			const classId = this.routeQuery.classId
			await this.$refs.uFormRef
				.validate()
				.then(async () => {
					let files = []
					if (this.ruleFormData.userInfo.gradeCertificate[0]) {
						files.push({
							name: 'certificatefile',
							file: this.ruleFormData.userInfo.gradeCertificate[0],
							uri: this.ruleFormData.userInfo.gradeCertificate[0].url
						})
					}
					if (this.ruleFormData.userInfo.writeSign) {
						files.push({
							name: 'signfile',
							uri: this.ruleFormData.userInfo.writeSign
						})
					}
					// const certificatefileLists = this.ruleFormData.userInfo.gradeCertificate.map(so => so.url); // 接入组合多个证书的上传, 返回数组
					const params = { ...this.ruleFormData.userInfo }
					delete params.gradeCertificate
					delete params.writeSign
					await joinClass({
						files,
						formData: { ...params, classId,USER_ID:this.$store.getters.getUserInfo.USER_ID }
					})
						.then(() => {
							uni.$u.toast('保存成功')
							setTimeout(() => {
								uni.$u.route({
									url: '/pages/train_management/face_authentication',
									params: { ...this.routeQuery, type: 'scan_face' }
								})
							}, 1500)
						})
						.catch((err) => {
							if (err) uni.$u.toast(err.msg)
						})
				})
				.catch((e) => {
					uni.$u.toast('请补全必填项')
				})
		}
	}
}
</script>

<style scoped lang="scss">
.content {
	.top-title {
		padding: 20rpx;
		text-align: center;
		font-size: 54rpx;
		font-weight: bold;
	}

	.content_body {
		padding: 20rpx 30rpx;

		.radio-group__style {
			display: flex;
			flex-direction: row;
			gap: 60rpx;
		}
	}
}
</style>