zc_saas_h5/pages2/verify/input.vue

<template>
	<view style="padding: 30rpx;">
		
		<view v-show="!agreementModal">
			<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" :error-type="errorType">
					<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" disabled :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.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) }}
									<image
										src="@/static/icon/clears.png"
										v-if="clearWatch(item.fieldKey)"
										@click.stop="clearFun(item.fieldKey)"
										mode=""
										style="width:30rpx;height:30rpx;vertical-align: middle;margin-left:10rpx;"
									></image>
								</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) }}
									<image
										src="@/static/icon/clears.png"
										v-if="clearWatch(item.fieldKey)"
										@click.stop="clearFun(item.fieldKey)"
										mode=""
										style="width:30rpx;height:30rpx;vertical-align: middle;margin-left:10rpx;"
									></image>
								</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="item.required"
								: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="item.required"
								: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"
										:catchtouchmove="true"
										@touchstart="uploadScaleStart"
										@touchmove="uploadScaleMove"
										@touchend="uploadScaleEnd"
										canvas-id="handWriting"
									></canvas>
									<view v-else style="width:100%;height: 100%;position: relative;">
										<view class="ctoples">图片</view>
										<image style="width:100%;height:100%;" :src="$method.splitImgHost(form[item.fieldKey])" mode=""></image>
									</view>
								</view>
							</u-form-item>
						</view>
					</template>
				</u-form>
			</view>
			<view @click="submits" class="submit_btn">提交资料</view>
		</view>
		
		
		<u-popup class="modal" catchtouchmove='return' v-model="agreementModal" mode="center" border-radius="24" :mask-close-able="false">
			<view class="agreement">
				<view class="body">
					<scroll-view scroll-y="true" style="height:600rpx;">
						<view class="content">
							<view>本产品（或服务）提供【{{goodsData.goodsName}}】课程的在线学习功能，为使用这些功能，我们需要使用您设备上的摄像头，并收集以下个人信息：
								<text v-for="(item,listIndex) in listData" :key="listIndex">{{item.fieldName}}、</text>
								<!-- 姓名、性别、身份证号码、移动电话号码、身份证照片、一寸照、证书名称/岗位、证书编号、有效期、人脸照片（每节课随机拍摄三张）、 -->
							学习详细记录。</view>
							<view>我们会将上述信息提供至广东省建设执业注册管理中心等第三方组织使用，用于继续教育备案等。如果您拒绝，将导致这些功能无法实现，但不影响您使用本产品（或服务）的其他业务功能。</view>
						</view>
					</scroll-view>
				</view>
				<view class="footer">
					<view class="btn cancel" @click="refuseAgreement">取消</view>
					<view class="btn ok" @click="agree">同意并继续</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import * as baseUrls from '@/common/request.js';
import { mapGetters } from 'vuex';
import Handwriting from '@/common/signature.js';
export default {
	data() {
		return {
			errorType: ['message'],
			agreementModal:true,
			goodsData:{},
			itemStyle: {
				marginTop: '20px',
				backgroundColor: '#fff',
				borderRadius: '24rpx',
				padding: '0rpx 20rpx'
			},
			isUploading:false,
			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) => {
							var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
							if (this.$u.test.mobile(value) || vartest.test(value)) {
								return true;
							} else {
								return false;
							}
						},
						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) => {
							var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
							var vartest1 = /^([0-9]{3,4})?[0-9]{7,8}$/;
							if (this.$u.test.mobile(value) || vartest.test(value) || vartest1.test(value)) {
								return true;
							} else {
								return false;
							}
						},
						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']
					}
				]
			},
			isRequired: false
		};
	},
	created() {
		this.$store.getters.dictObj;
	},
	async onLoad(option) {
		this.goodsId = Number(option.id);
		await this.getGoodsDetail()
		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','userInfo']) },
	watch:{
		userInfo(val, oldVal){//普通的watch监听
		     if(val){
				 
				 this.listData.forEach(item => {
				 	if(item.fieldKey == "idcard") {
				 		this.form.idcard = this.userInfo.idCard;
				 	}
				 	if(item.fieldKey == "telphone") {
				 		this.form.telphone = this.userInfo.telphone;
				 	}
					
					if(item.fieldKey == "name") {
						this.form.name = this.userInfo.realname
					}
				 })
			}
		 },
	},
	methods: {
		getGoodsDetail() {
			return new Promise(resolve => {
				
				this.$api.goodsDetail(this.goodsId).then(res => {
					this.goodsData = res.data.data;
					if(this.goodsData.categoryName) {
						this.form.apply_post = this.goodsData.categoryName;
					}
					resolve()
				})
			})
		},
		agree() {
			this.agreementModal = false;
		},
		refuseAgreement() {
			uni.navigateBack({
				delta:1
			})
		},
		clearFun(key) {
			this.form[key] = '';
		},
		//清除按钮
		clearWatch(key) {
			if (this.form[key]) {
				return true;
			} else {
				return false;
			}
		},
		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)
				};
				if(this.isUploading) {
					return;
				}
				this.isUploading = true;
				this.$api.editbaseprofiletp(datas).then(res => {
					this.isUploading = false;
					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,
					profileTpId: this.goodsId,
					keyValue: JSON.stringify(objs)
				};
				if(this.isUploading) {
					return;
				}
				this.isUploading = true;
				this.$api.addbaseprofiletp(datas).then(res => {
					this.isUploading = false;
					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) {
				if (this.isRequired) {
					this.submitApi();
				} else {
					if(int === 1) {
						this.errorType = ['toast'];
					} else {
						this.errorType = ['message'];
					}
					this.$nextTick(() => {
						this.$refs.uForm.validate(valid => {
							if (valid) {
								if (int === 1) {
									this.submitApi();
								}
							} else {
								this.errorType = ['message'];
								console.log('验证失败');
							}
						});
					})
					
				}
			}
		},
		async submits() {
			var ast = this.listData.some(item => {
				return item.fieldKey === 'commitment_electr_signature';
			});
			if (ast) {
				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 || lists[0].url.indexOf('//temp') !== -1) {
					this.$set(this.form, 'recent_photos', await this.$method.imageInfos(lists[0].url));
				}
			} else {
				this.fileList1 = [];
				this.$set(this.form, 'recent_photos', '');
				console.log(3, this.form.recent_photos);
			}
			this.$nextTick(function() {
				console.log(4);
				this.resultForm();
			});
		},
		async changePhotoListHeader2(lists, name) {
			if (lists.length) {
				this.fileList2 = lists;
				console.log(lists,'lists')
				if (lists[0].url.indexOf('//tmp') !== -1 || lists[0].url.indexOf('//temp') !== -1) {
					this.$set(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 || lists[0].url.indexOf('//temp') !== -1) {
					this.$set(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 '请选择工作年限';
				}
			}
		},
		/**
		 *  getbaseprofiletpgetInfo接口返回值result.data.data不存在的话说明是第一次填写资料
		 */
		getInfo() {
			var self = this;
			this.$api.getbaseprofiletpId(this.goodsId).then(res => {
				self.listData = JSON.parse(res.data.data.keyValue);
				
				
				self.listData.forEach(item => {
					if(item.fieldKey == "idcard") {
						this.form.idcard = this.userInfo.idCard;
					}
					if(item.fieldKey == "telphone") {
						this.form.telphone = this.userInfo.telphone;
					}
					
					if(item.fieldKey == "name") {
						this.form.name = this.userInfo.realname
					}
				})
				self.isRequired = self.listData.every(ims => {
					return ims.required === false;
				});
				this.$nextTick(() => {
					this.agreementModal = true;
				})
				self.$api.getbaseprofiletpgetInfo({ goodsId: self.goodsId }).then(result => {
					if (result.data.code === 200) {
						if (!result.data.data) {
							self.$api.getbaseprofiletplistProfile({ pageNum: 1, pageSize: 1, status: 1 }).then(kit => {
								if (kit.data.rows.length) {
									var ajson = JSON.parse(kit.data.rows[0].keyValue);
									self.listData.forEach((zyitem, zyindex) => {
										for (let k in ajson) {
											if (zyitem.fieldKey == k && ajson[k].value) {
												if (k === 'sex') {
													const sexIndex = self.dictObj['sys_user_sex'].indexOf(ajson[k].value) + '';
													self.$set(self.form, k, sexIndex);
												} else if (k === 'education') {
													const sexIndex = self.dictObj['edu_level'].indexOf(ajson[k].value) + '';
													self.$set(self.form, k, sexIndex);
												} else if (k === 'working_years') {
													const sexIndex = self.dictObj['working_years'].indexOf(ajson[k].value) + '';
													self.$set(self.form, k, sexIndex);
												} else if (k === 'recent_photos') {
													self.$set(self.form, k, ajson[k].value);
													if (ajson[k].value) {
														self.fileList1 = [{ url: baseUrls.BASE_IMG_URL + ajson[k].value }];
													}
												} else if (k === 'idcard_face_photo') { 
													self.$set(self.form, k, ajson[k].value);
													if (ajson[k].value) {
														self.fileList2 = [{ url: baseUrls.BASE_IMG_URL + ajson[k].value }];
													}
												} else if (k === 'idcard_national_photo') {
													self.$set(self.form, k, ajson[k].value);
													if (ajson[k].value) {
														self.fileList3 = [{ url: baseUrls.BASE_IMG_URL + ajson[k].value }];
													}
												} else {
													if(k === 'name'){
														self.$set(self.form, k, this.$store.state.userInfo.realname);
													} else if(k === 'idcard'){
														self.$set(self.form, k, this.$store.state.userInfo.idCard);
													} else if(k === 'telphone'){
														self.$set(self.form, k, this.$store.state.userInfo.telphone);
													} else if(k !== 'commitment_electr_signature'){
														self.$set(self.form, k, ajson[k].value);
													}
												}
											}
										}
									});
								}
							});
						}
						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 => {
						console.log(res,'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 lang="scss">
.ctoples {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2rpx 23rpx;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.4);
	font-size: 28rpx;
	color: #fff;
	border-bottom-right-radius: 24rpx;
}
.handWriting {
	width: 100%;
	height: 100%;
}
/deep/ .u-collapse-title {
	color: #FF3B30;
	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;
	overflow: hidden;
}
.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;
}

.modal {
	.agreement {
		width: 640rpx;
		height: 740rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		
		.body {
			flex:1;
			
			.content {
				padding:30rpx 40rpx 28rpx;
				line-height: 40rpx;
				font-size: 26rpx;
				color:#666;
				
				.bold {
					color:#333;
					font-size: 26rpx;
					font-weight: bold;
				}
				
				.center {
					text-align: center;
				}
			}
		}
		
		.footer {
			height:140rpx;
			border-top:1px solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.btn {
				margin:0 12rpx;
				width: 200rpx;
				height: 80rpx;
				color:#007AFF;
				font-size: 30rpx;
				text-align: center;
				line-height: 80rpx;
				background: #F5F5F5;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				
				&.ok {
					width: 336rpx;
					height: 80rpx;
					background: #007AFF;
					color:#fff;
				}
				
				&.close {
					color:#fff;
					width: 560rpx;
					height: 80rpx;
					background: #007AFF;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}
			}
		}
	}
}
</style>