zc_saas_h5/pages2/verify/input.vue

<template>
	<view style="padding: 30rpx;">
		<view class="topBox">
			<view>
				<u-icon name="error-circle-fill" color="#FF3B30" size="28"></u-icon>
				<text style="color: #FF3B30;margin-left: 10rpx;">学习前请提交完整审核资料</text>
			</view>
			<view style="color: #007AFF;" @click="backPage">稍后再填</view>
		</view>
		<u-collapse v-if="remarkStatus" :item-style="itemStyle" event-type="close">
			<u-collapse-item title="审核结果反馈">
				<view style="padding-bottom: 30rpx;">
					<text class="collapse-item">{{ remark }}</text>
				</view>
			</u-collapse-item>
		</u-collapse>
		<view class="bodyBox" style="margin-top: 30rpx;padding:0 20rpx;">
			<u-form :model="form" ref="uForm">
				<template v-for="(item, index) in listData">
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'name'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.name" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'idcard'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.idcard" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'telphone'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.telphone" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'school'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.school" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'work_unit'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.work_unit" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'unit_contact'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.unit_contact" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'unit_tel'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.unit_tel" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'apply_post'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.apply_post" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'major'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.major" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.fieldKey == 'apply_post'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form.apply_post" :placeholder="`请输入${item.fieldName}`" />
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.inputType == 2"
						:label="item.fieldName"
						:label-width="auto"
						:required="item.required"
						:prop="item.required ? item.fieldKey : ''"
					>
						<picker @change="bindPickerChange(item.fieldKey, $event)" :value="form[item.fieldKey]" :range="getarrays(item.fieldKey)">
							<view class="picker">{{ returnName(item.fieldKey) }}</view>
						</picker>
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.inputType == 5"
						:label="item.fieldName"
						:label-width="auto"
						:required="item.required"
						:prop="item.required ? item.fieldKey : ''"
					>
						<picker mode="date" :value="form[item.fieldKey]" @change="bindDateChange(item.fieldKey, $event)">
							<view class="picker">{{ getTimes(item.fieldKey) }}</view>
						</picker>
					</u-form-item>
					<u-form-item
						:key="index"
						v-if="item.inputType == 3 && item.fieldKey !== 'commitment_electr_signature'"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						label-position="top"
						:prop="item.required ? item.fieldKey : ''"
					>
						<text v-if="item.fieldKey === 'recent_photos'" style="color: #999999;position: absolute;top: 20rpx;left: 130rpx;">竖向证件照 文件大小≤2M</text>
						<text
							v-if="item.fieldKey === 'idcard_face_photo' || item.fieldKey === 'idcard_national_photo'"
							style="color: #999999;position: absolute;top: 20rpx;left: 180rpx;"
						>
							文件大小≤2M
						</text>
						<u-upload
							:show-progress="false"
							:max-size="2097152"
							@on-list-change="
								item.fieldKey === 'recent_photos'
									? changePhotoListHeader1($event)
									: item.fieldKey === 'idcard_face_photo'
									? changePhotoListHeader2($event)
									: item.fieldKey === 'idcard_national_photo'
									? changePhotoListHeader3($event)
									: ''
							"
							:auto-upload="false"
							custom-btn="true"
							:action="action"
							:file-list="
								item.fieldKey === 'recent_photos'
									? fileList1
									: item.fieldKey === 'idcard_face_photo'
									? fileList2
									: item.fieldKey === 'idcard_national_photo'
									? fileList3
									: ''
							"
							width="120"
							height="120"
							size-type="['compressed']"
							max-count="1"
						>
							<template v-slot:addBtn>
								<image
									:src="
										item.fieldKey === 'recent_photos'
											? '/static/info_1.png'
											: item.fieldKey === 'idcard_face_photo'
											? '/static/info_2.png'
											: item.fieldKey === 'idcard_national_photo'
											? '/static/info_3.png'
											: ''
									"
									:style="
										item.fieldKey === 'recent_photos'
											? 'width: 120rpx; height: 169rpx;'
											: item.fieldKey === 'idcard_face_photo'
											? 'width: 120rpx; height: 82rpx;'
											: item.fieldKey === 'idcard_national_photo'
											? 'width: 120rpx; height: 82rpx;'
											: ''
									"
								></image>
							</template>
						</u-upload>
					</u-form-item>
					<view :key="index" v-if="item.inputType == 3 && item.fieldKey === 'commitment_electr_signature'">
						<u-form-item
							v-if="item.inputType == 3 && item.fieldKey === 'commitment_electr_signature'"
							label="承诺书"
							:required="true"
							:label-width="auto"
							label-position="top"
						>
							<view style="line-height: 40rpx;text-indent:2em">
								<text>
									本人自愿做出如下承诺：本人己仔细阅读《广东省住房和城乡建设厅关于推进住房和城乡建设领域施工现场专业人员职业培训工作的通知》
									全部内容并知晓和理解，本人的学历证书、身份证、工作年限、相片等所有资料完全真实、符合报名条件、资格审查要求和相关规定，本人在报名、审查、培训、测试等有关的事项中会严格道守相关规定和要求，如有虛假或与实际规定不符等情况造成的一切后果由本人承担。
								</text>
								<view style="line-height: 40rpx;text-indent:2em"><text>特此承诺！</text></view>
							</view>
						</u-form-item>
						<u-form-item
							v-if="item.inputType == 3 && item.fieldKey === 'commitment_electr_signature'"
							label="签名板"
							:required="true"
							:label-width="auto"
							label-position="top"
							:prop="item.required ? item.fieldKey : ''"
						>
							<view class="dis_stys">
								<text style="color: #999999;">请在下方签名区进行签名</text>
								<text @click="retDraw" mode="">清空</text>
							</view>
							<view class="handCenter">
								<canvas
									v-if="!form[item.fieldKey]"
									class="handWriting"
									disable-scroll="true"
									@touchstart="uploadScaleStart"
									@touchmove="uploadScaleMove"
									@touchend="uploadScaleEnd"
									@tap="mouseDown"
									canvas-id="handWriting"
								></canvas>
								<image v-else style="width:100%;height:100%;" :src="$method.splitImgHost(form[item.fieldKey])" mode=""></image>
							</view>
						</u-form-item>
					</view>
				</template>
			</u-form>
		</view>
		<view @click="submits" class="submit_btn">提交资料</view>
	</view>
</template>

<script>
import * as baseUrls from '@/common/request.js';
import { mapGetters } from 'vuex';
import Handwriting from '@/common/signature.js';
export default {
	data() {
		return {
			itemStyle: {
				marginTop: '20px',
				backgroundColor: '#fff',
				borderRadius: '24rpx',
				padding: '0rpx 20rpx'
			},
			form: {
				name: '',
				sex: '',
				idcard: '',
				telphone: '',
				education: '',
				school: '',
				graduation_time: '',
				work_unit: '',
				unit_contact: '',
				unit_tel: '',
				apply_post: '',
				major: '',
				working_years: '',
				recent_photos: '',
				idcard_face_photo: '',
				idcard_national_photo: '',
				commitment_electr_signature: ''
			},
			lineColor: 'black',
			slideValue: 50,
			handwriting: '',
			goodsId: null,
			listData: [], //页面数据
			fileList1: [], //个人近照
			fileList2: [], //人像
			fileList3: [], //国徽
			openVerify: false, // 控制是否手动验证
			id: null, //获取修改ID内容
			remark: '', //反馈文本
			remarkStatus: false, //是否存在审核结果反馈
			// nextStatus: false, //是否有下一步
			copyData: [], //备份数据
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur']
					}
				],
				sex: [
					{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}
				],
				idcard: [
					{
						required: true,
						message: '请输入身份证号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: '身份证号不正确',
						trigger: ['change', 'blur']
					}
				],
				telphone: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				education: [
					{
						required: true,
						message: '请选择学历',
						trigger: 'change'
					}
				],
				school: [
					{
						required: true,
						message: '请输入毕业院校',
						trigger: ['change', 'blur']
					}
				],
				graduation_time: [
					{
						required: true,
						message: '请选择毕业时间',
						trigger: 'change'
					}
				],
				work_unit: [
					{
						required: true,
						message: '请输入工作单位',
						trigger: ['change', 'blur']
					}
				],
				unit_contact: [
					{
						required: true,
						message: '请输入单位联系人',
						trigger: ['change', 'blur']
					}
				],
				unit_tel: [
					{
						required: true,
						message: '请输入单位联系电话',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '单位联系电话不正确',
						trigger: ['change', 'blur']
					}
				],
				apply_post: [
					{
						required: true,
						message: '请输入报名岗位',
						trigger: ['change', 'blur']
					}
				],
				major: [
					{
						required: true,
						message: '请输入所学专业',
						trigger: ['change', 'blur']
					}
				],
				working_years: [
					{
						required: true,
						message: '请选择工作年限',
						trigger: 'change'
					}
				],
				recent_photos: [
					{
						required: true,
						message: '请上传个人近照',
						trigger: ['change', 'blur']
					}
				],
				idcard_face_photo: [
					{
						required: true,
						message: '请上传身份证正面照',
						trigger: ['change', 'blur']
					}
				],
				idcard_national_photo: [
					{
						required: true,
						message: '请上传身份证国徽照',
						trigger: ['change', 'blur']
					}
				],
				commitment_electr_signature: [
					{
						required: true,
						message: '请签写承诺书电子签',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	onLoad(option) {
		this.goodsId = Number(option.id);
		this.getInfo();
	},
	onReady(res) {
		this.handwriting = new Handwriting({
			lineColor: this.lineColor,
			slideValue: this.slideValue, // 0, 25, 50, 75, 100
			canvasName: 'handWriting'
		});
		this.$refs.uForm.setRules(this.rules);
	},
	computed: { ...mapGetters(['dictObj']) },
	methods: {
		cahngeText() {
			this.$set(this.form, 'name', '唐');
			console.log(this.form.name, 123);
		},
		uploadDatas(data) {
			var self = this;
			if (self.remarkStatus) {
				var arsty = {};
				for (let k in data) {
					for (let j in self.copyData) {
						if (k === j) {
							if (self.copyData[j].value === data[k]) {
								arsty[k] = {
									fieldKey: k,
									value: data[k],
									fieldName: (function() {
										for (let i = 0; i < self.listData.length; i++) {
											if (self.listData[i].fieldKey == k) {
												return self.listData[i].fieldName;
											}
										}
									})(),
									status: 0
								};
							} else {
								arsty[k] = {
									fieldKey: k,
									value: data[k],
									fieldName: (function() {
										for (let i = 0; i < self.listData.length; i++) {
											if (self.listData[i].fieldKey == k) {
												return self.listData[i].fieldName;
											}
										}
									})(),
									status: 1
								};
							}
						}
					}
				}
				var datas = {
					id: this.id,
					goodsId: this.goodsId,
					keyValue: JSON.stringify(arsty)
				};
				this.$api.editbaseprofiletp(datas).then(res => {
					if (res.data.code === 200) {
						this.$method.showToast('提交成功');
						uni.navigateBack();
					}
				});
			} else {
				var objs = {};
				for (let k in data) {
					objs[k] = {
						fieldKey: k,
						value: data[k],
						fieldName: (function() {
							for (let i = 0; i < self.listData.length; i++) {
								if (self.listData[i].fieldKey == k) {
									return self.listData[i].fieldName;
								}
							}
						})(),
						status: 0
					};
				}
				var datas = {
					goodsId: this.goodsId,
					keyValue: JSON.stringify(objs)
				};
				this.$api.addbaseprofiletp(datas).then(res => {
					if (res.data.code === 200) {
						this.$method.showToast('提交成功');
						uni.navigateBack();
					}
				});
			}
		},
		backPage() {
			uni.navigateBack();
		},
		//提交表单
		async submitApi() {
			var data = JSON.parse(JSON.stringify(this.form));
			if (data['sex']) {
				data.sex = this.dictObj['sys_user_sex'][Number(data.sex)];
			}
			if (data['education']) {
				data.education = this.dictObj['edu_level'][Number(data.education)];
			}
			if (data['working_years']) {
				data.working_years = this.dictObj['working_years'][Number(data.working_years)];
			}
			if (data['recent_photos']) {
				data.recent_photos = await this.$method.uploadFile(data.recent_photos, 0);
			}
			if (data['idcard_face_photo']) {
				data.idcard_face_photo = await this.$method.uploadFile(data.idcard_face_photo, 0);
			}
			if (data['idcard_national_photo']) {
				data.idcard_national_photo = await this.$method.uploadFile(data.idcard_national_photo, 0);
			}
			if (data['commitment_electr_signature']) {
				data.commitment_electr_signature = await this.$method.uploadFile(data.commitment_electr_signature, 0);
			}
			this.uploadDatas(data);
		},
		//验证表单
		resultForm(int) {
			if (this.openVerify) {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (int === 1) {
							this.submitApi();
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		async submits() {
			await this.subCanvas();
			this.openVerify = true;
			this.resultForm(1);
		},
		async changePhotoListHeader1(lists, name) {
			if (lists.length) {
				this.fileList1 = lists;
				if (lists[0].url.indexOf('//tmp/') !== -1) {
					this.form.recent_photos = await this.$method.imageInfos(lists[0].url);
				}
			} else {
				this.fileList1 = [];
				this.$set(this.form, 'recent_photos', '');
			}
			this.$nextTick(function() {
				this.resultForm();
			});
		},
		async changePhotoListHeader2(lists, name) {
			if (lists.length) {
				this.fileList2 = lists;
				if (lists[0].url.indexOf('//tmp/') !== -1) {
					this.form.idcard_face_photo = await this.$method.imageInfos(lists[0].url);
				}
			} else {
				this.fileList2 = [];
				this.$set(this.form, 'idcard_face_photo', '');
			}
			this.$nextTick(function() {
				this.resultForm();
			});
		},
		async changePhotoListHeader3(lists, name) {
			if (lists.length) {
				this.fileList3 = lists;
				if (lists[0].url.indexOf('//tmp/') !== -1) {
					this.form.idcard_national_photo = await this.$method.imageInfos(lists[0].url);
				}
			} else {
				this.fileList3 = [];
				this.$set(this.form, 'idcard_national_photo', '');
			}
			this.$nextTick(function() {
				this.resultForm();
			});
		},
		getTimes(key) {
			if (this.form[key]) {
				return this.form[key];
			} else {
				return '请选择时间';
			}
		},
		getarrays(key) {
			if (key === 'sex') {
				return this.dictObj['sys_user_sex'];
			}
			if (key === 'education') {
				return this.dictObj['edu_level'];
			}
			if (key === 'working_years') {
				return this.dictObj['working_years'];
			}
		},
		returnName(key) {
			if (key === 'sex') {
				if (this.form[key]) {
					return this.dictObj['sys_user_sex'][Number(this.form[key])];
				} else {
					return '请选择性别';
				}
			}
			if (key === 'education') {
				if (this.form[key]) {
					return this.dictObj['edu_level'][Number(this.form[key])];
				} else {
					return '请选择学历';
				}
			}
			if (key === 'working_years') {
				if (this.form[key]) {
					return this.dictObj['working_years'][Number(this.form[key])];
				} else {
					return '请选择工作年限';
				}
			}
		},
		getInfo() {
			var self = this;
			this.$api.getbaseprofiletpId(this.goodsId).then(res => {
				self.listData = JSON.parse(res.data.data.keyValue);
				self.$api.getbaseprofiletpgetInfo({ goodsId: self.goodsId }).then(result => {
					if (result.data.code === 200) {
						if (result.data.data && result.data.data.status === 3) {
							self.remark = result.data.data.text;
							self.remarkStatus = true;
							self.id = result.data.data.id;
							var arrays = JSON.parse(result.data.data.keyValue);
							self.copyData = JSON.parse(JSON.stringify(arrays));
							for (let k in arrays) {
								if (k === 'sex') {
									if (arrays[k].value) {
										const sexIndex = self.dictObj['sys_user_sex'].indexOf(arrays[k].value) + '';
										self.$set(self.form, k, sexIndex);
									}
								} else if (k === 'education') {
									if (arrays[k].value) {
										const sexIndex = self.dictObj['edu_level'].indexOf(arrays[k].value) + '';
										self.$set(self.form, k, sexIndex);
									}
								} else if (k === 'working_years') {
									if (arrays[k].value) {
										const sexIndex = self.dictObj['working_years'].indexOf(arrays[k].value) + '';
										self.$set(self.form, k, sexIndex);
									}
								} else if (k === 'recent_photos') {
									self.$set(self.form, k, arrays[k].value);
									if (arrays[k].value) {
										self.fileList1 = [{ url: baseUrls.BASE_IMG_URL + arrays[k].value }];
									}
								} else if (k === 'idcard_face_photo') {
									self.$set(self.form, k, arrays[k].value);
									if (arrays[k].value) {
										self.fileList2 = [{ url: baseUrls.BASE_IMG_URL + arrays[k].value }];
									}
								} else if (k === 'idcard_national_photo') {
									self.$set(self.form, k, arrays[k].value);
									if (arrays[k].value) {
										self.fileList3 = [{ url: baseUrls.BASE_IMG_URL + arrays[k].value }];
									}
								} else {
									self.$set(self.form, k, arrays[k].value);
								}
							}
						} else if (result.data.data && (result.data.data.status === 1 || result.data.data.status === 2)) {
							uni.showModal({
								showCancel: false,
								content:
									result.data.data.status === 1
										? '该商品审核资料已通过，不可重复提交资料'
										: result.data.data.status === 2
										? '该商品审核资料处于待审核状态，不可重复提交资料'
										: '请联系管理员',
								success: function(k) {
									if (k.confirm) {
										uni.navigateBack();
									}
								}
							});
						}
					}
				});
			});
		},
		bindPickerChange(key, e) {
			this.$set(this.form, key, e.detail.value);
			this.$nextTick(function() {
				this.resultForm();
			});
		},
		bindDateChange(key, e) {
			this.form[key] = e.detail.value;
		},
		retDraw() {
			this.handwriting.retDraw();
			this.$set(this.form, 'commitment_electr_signature', '');
			this.$nextTick(function() {
				this.resultForm();
			});
		},
		uploadScaleStart(event) {
			this.handwriting.uploadScaleStart(event);
		},
		uploadScaleMove(event) {
			this.handwriting.uploadScaleMove(event);
		},
		uploadScaleEnd(event) {
			this.handwriting.uploadScaleEnd(event);
		},
		subCanvas() {
			return new Promise((resolve, reject) => {
				var self = this;
				if (self.form.commitment_electr_signature) {
					resolve();
					return;
				}
				self.handwriting
					.saveCanvas()
					.then(res => {
						if (this.handwriting.linePrack.length) {
							this.$set(this.form, 'commitment_electr_signature', res);
						}
						resolve(res);
					})
					.catch(err => {
						uni.showToast({
							title: '签名上传失败',
							icon: 'error'
						});
					});
			});
		}
	}
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scope>
.handWriting {
	width: 100%;
	height: 100%;
}
/deep/ .u-collapse-title {
	color: red;
	font-size: 24rpx;
}
.collapse-item {
	color: #666;
	font-size: 24rpx;
	padding-bottom: 30rpx;
}
.dis_stys {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.handCenter {
	background: #f7f7f7;
	border: 2rpx solid #eeeeee;
	border-radius: 24rpx;
	width: 100%;
	height: 300rpx;
}
.headerSDels {
	height: 58rpx;
	padding: 0rpx 24rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}
.listBox {
	margin: 24rpx 32rpx 0rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	background-color: #fff;
	overflow: hidden;
}
.imgBoxs {
	width: 156rpx;
	height: 203rpx;
}
.imgBoxs2 {
	width: 171rpx;
	height: 108rpx;
}
.submit_btn {
	width: 526rpx;
	height: 80rpx;
	background: #007aff;
	border-radius: 40rpx;
	text-align: center;
	line-height: 80rpx;
	color: #ffffff;
	margin: 30rpx auto;
}
.picker {
	text-align: right;
}
input {
	text-align: right;
}
.bodyBox {
	background: #ffffff;
	border-radius: 24rpx;
	width: 100%;
}
.topBox {
	height: 80rpx;
	background: #ffffff;
	border-radius: 24rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	line-height: 80rpx;
	padding: 0 20rpx;
	font-size: 24rpx;
}
</style>