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;">稍后再填</view>
		</view>
		<view class="bodyBox" style="margin-top: 30rpx;padding:0 20rpx;">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" :required="true" :label-width="auto"><u-input v-model="form.schoolName" /></u-form-item>
				<u-form-item label="性别" :required="true" prop="sex">
					<picker @change="bindPickerChangeSex" :value="form.sex" :range="array_sex">
						<view class="picker">{{ array_sex[form.sex] }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="身份证号" :required="true" prop="idCard" :label-width="auto"><u-input placeholder="请输入身份证号"  v-model="form.idCard" /></u-form-item>
				<u-form-item label="手机号码" :required="true" prop="telphone" :label-width="auto"><u-input :disabled="true" v-model="form.telphone" /></u-form-item>
				<u-form-item label="学历" :required="true">
					<picker @change="bindPickerChangeLevel"  :value="index_level" :range="dictObj['edu_level']">
								  <view class="picker">
									{{index_level?dictObj['edu_level'][index_level]:'未知'}}
								  </view>
						</picker>
				</u-form-item>
			 <u-form-item label="工作单位" :required="true" :label-width="auto"><u-input v-model="form.schoolName" /></u-form-item>
			 <u-form-item label="报名岗位" :required="true" :label-width="auto"><u-input v-model="form.schoolName" /></u-form-item>
			 <u-form-item label="所学专业" :required="true" :label-width="auto"><u-input v-model="form.schoolName" /></u-form-item>
			 <u-form-item label="工作年限" :required="true" :label-width="auto"><u-input v-model="form.schoolName" /></u-form-item>
			<u-form-item label="个人近照" :required="true" :label-width="auto" label-position="top">
				<text style="color: #999999;position: absolute;top: 20rpx;left: 130rpx;">竖向证件照 文件大小≤2M</text>
				<u-upload @on-list-change="changePhotoListHeader" :auto-upload="false" custom-btn="true" :action="action" :file-list="fileList" width="120" height ="120" size-type="['compressed']" max-count="1">
					<template v-slot:addBtn >
						<image src="/static/info_1.png" style="width: 120rpx; height: 169rpx;"></image>
					</template>  
				</u-upload> 
			</u-form-item>
			<u-form-item label="身份证人像面" :required="true" :label-width="auto" label-position="top">
				<text style="color: #999999;position: absolute;top: 20rpx;left: 180rpx;">文件大小≤2M</text>
				<u-upload
					:auto-upload="false"
					custom-btn="true"
					:action="action"
					:file-list="fileList1"
					width="120"
					height="82"
					size-type="['compressed']"
					max-count="1"
					@on-list-change="changePhotoListZ"
				>
					<template v-slot:addBtn>
						<image src="/static/info_2.png" style="width: 120rpx; height: 82rpx;"></image>
					</template>
				</u-upload>
			</u-form-item>
			<u-form-item label="身份证国徽面" :required="true" :label-width="auto" label-position="top">
				<text style="color: #999999;position: absolute;top: 20rpx;left: 180rpx;">文件大小≤2M</text>
				<u-upload
					:auto-upload="false"
					custom-btn="true"
					:action="action"
					:file-list="fileList2"
					width="120"
					height="82"
					size-type="['compressed']"
					max-count="1"
					@on-list-change="changePhotoListF"
				>
					<template v-slot:addBtn>
						<image src="/static/info_3.png" style="width: 120rpx; height: 82rpx;"></image>
					</template>
				</u-upload>
			</u-form-item>
			<u-form-item 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 label="签名板" :required="true" :label-width="auto" label-position="top">
				<text style="color: #999999;position: absolute;top: 20rpx;left: 100rpx;">请在下方签名区进行签名</text>
				<view class="headerSDels">
					<text @click="retDraw" style="width: 80rpx;height: 50rpx;" 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>
			</u-form>
		</view>
		<view @click="resultForm" class="submit_btn">提交资料</view>
	</view>
</template>

<script>
	import Handwriting from '@/common/signature.js';
export default {
	data() {
		return {
			form:{
				sex: 0,
			},
			array_sex: ['男', '女'],
			pageInfo: {},
			lineColor: 'black',
			slideValue: 50,
			handwriting: ''
		};
	},
	onReady(res) {
		this.handwriting = new Handwriting({
			lineColor: this.lineColor,
			slideValue: this.slideValue, // 0, 25, 50, 75, 100
			canvasName: 'handWriting'
		});
	},
	methods: {
		bindPickerChangeSex(e) {
			this.form.sex = e.detail.value;
		},
		retDraw() {
			this.handwriting.retDraw();
		},
		uploadScaleStart(event) {
			this.handwriting.uploadScaleStart(event);
		},
		uploadScaleMove(event) {
			this.handwriting.uploadScaleMove(event);
		},
		uploadScaleEnd(event) {
			this.handwriting.uploadScaleEnd(event);
		},
		subCanvas() {
			var self = this;
			self.handwriting
				.saveCanvas()
				.then(res => {
					console.log(res);
				})
				.catch(err => {
					uni.showToast({
						title: '签名上传失败',
						icon: 'error'
					});
				});
		}
	}
};
</script>
<style >
	page {
			background: #EAEEF1;
		}
</style>
<style scope>
	.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>