saas_miniprogram/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;">稍后再填</view>
		</view>
		<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.inputType == 1"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
					>
						<u-input v-model="form[item.fieldKey]" :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
							: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
									class="handWriting"
									disable-scroll="true"
									@touchstart="uploadScaleStart"
									@touchmove="uploadScaleMove"
									@touchend="uploadScaleEnd"
									@tap="mouseDown"
									canvas-id="handWriting"
								></canvas>
							</view>
						</u-form-item>
					</view>
				</template>
			</u-form>
		</view>
		<view @click="submits" class="submit_btn">{{ nextStatus ? '下一步' : '提交资料' }}</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import Handwriting from '@/common/signature.js';
export default {
	data() {
		return {
			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: ''
			},
			array_sex: ['男', '女'],
			pageInfo: {},
			lineColor: 'black',
			slideValue: 50,
			handwriting: '',
			goodsId: null,
			listData: {}, //页面数据
			fileList1: [], //个人近照
			fileList2: [], //人像
			fileList3: [], //国徽
			openVerify: false, // 控制是否手动验证
			nextStatus: false, //是否有下一步
			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']
					}
				]
			}
		};
	},
	created() {},
	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: {
		//提交表单
		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);
			}
			if (this.nextStatus) {
				this.$store.commit('updataCopyData', data);
				this.$navTo.togo('/pages2/verify/input2', {
					id: this.goodsId
				});
			} else {
				console.log(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;
				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;
				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;
				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() {
			this.$api.getbaseprofiletpId(this.goodsId).then(res => {
				var ast = JSON.parse(res.data.data.keyValue);
				const key2 = JSON.parse(res.data.data.keyValue2);
				if (key2.length) {
					this.nextStatus = true;
				}
				ast.forEach(item => {
					if (item.fieldKey === 'school' || item.fieldKey === 'major') {
						item.inputType = 1;
					}
				});
				this.listData = ast;
			});
		},
		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;
				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>
.dis_stys {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.handCenter {
	background: #f7f7f7;
	border: 2rpx solid #eeeeee;
	border-radius: 24rpx;
}
.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>