vue-insagent-app/pages/user/certification.vue

<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="posi p-3 d-flex j-center">
			<view class="posi2">推荐关系</view>
			<view class="posi2 on">实名认证</view>
		</view>

		<view class="IDcardInfo p-3 mb-3" style="background-color: #FFFFFF;">
			<view class="cardImages d-flex j-sb">
				<view :class="(IdCardBefore=='')?'idCardBefore':'imageBorder'" @click="chooseImage('IdCardBefore')">
					<template v-if="IdCardBefore!=''">
						<image :src="IdCardBefore" mode="aspectFill"></image>
					</template>
				</view>
				<view :class="(IdCardAfter=='')?'idCardAfter':'imageBorder'" @click="chooseImage('IdCardAfter')">
					<template v-if="IdCardAfter!=''">
						<image :src="IdCardAfter" mode="aspectFill"></image>
					</template>
				</view>
			</view>
			<view class="d-flex a-center j-center"><text class="IDcardNotice main-text-color"
					@tap="showPopup(1)">点击查看证件上传实例</text></view>


			<view class="inputView d-flex">
				<view class="d-flex a-center">姓名</view>
				<view class="d-flex a-center"><input placeholder="请输入姓名" v-model="staffInfo.name" /></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">性别</view>
				<view class="d-flex a-center" style="width: 100%;">
					<picker style="width: 100%;" @change="bindPickerChange($event,'sex')" :value="sexList[sexIndex]"
						:range="sexList">
						<view style="color: #999;font-size: 30upx;">{{sexList[sexIndex]}}</view>
					</picker>
				</view>
				<view style="color: #999;font-size: 28upx;padding-right: 20upx;flex-shrink: 0;"
					class="icon iconfont icon-youjiantou d-flex a-center"></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">出生日期</view>
				<view class="d-flex a-center"><input placeholder="请输入出生日期" v-model="staffInfo.birthday" /></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">户口所在地</view>
				<view class="d-flex a-center"><input placeholder="请输入户口所在地" type="Textarea"
						v-model="staffInfo.addressresident" /></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">证件号码</view>
				<view class="d-flex a-center"><input placeholder="请输入证件号码" @blur="validateIdCard"
						v-model="staffInfo.identity" /> </view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">民族</view>
				<view class="d-flex a-center" style="width: 100%;">
					<picker style="width: 100%;" @change="bindPickerChange($event,'nations')"
						:value="nationsList[nationsIndex]" :range="nationsList">
						<view style="color: #999;font-size: 30upx;">{{nationsList[nationsIndex]}}</view>
					</picker>
				</view>
				<view style="color: #999;font-size: 28upx;padding-right: 20upx;flex-shrink: 0;"
					class="icon iconfont icon-youjiantou d-flex a-center"></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">学历</view>
				<view class="d-flex a-center" style="width: 100%;">
					<picker style="width: 100%;" @change="bindPickerChange($event,'education')"
						:value="educationList[educationIndex]" :range="educationList">
						<view style="color: #999;font-size: 30upx;">{{educationList[educationIndex]}}</view>
					</picker>
				</view>
				<view style="color: #999;font-size: 28upx;padding-right: 20upx;flex-shrink: 0;"
					class="icon iconfont icon-youjiantou d-flex a-center"></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">居住地址</view>
				<view class="d-flex a-center"><input placeholder="请输入通讯地址" v-model="staffInfo.addressnow" /> </view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">毕业院校</view>
				<view class="d-flex a-center"><input placeholder="请输入毕业院校" v-model="staffInfo.college" /> </view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">邮箱号</view>
				<view class="d-flex a-center"><input placeholder="请输入邮箱号" v-model="staffInfo.email" /> </view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">婚姻状况</view>
				<view class="d-flex a-center" style="width: 100%;">
					<picker style="width: 100%;" @change="bindPickerChange($event,'marrycode')"
						:value="marrycodeList[marrycodeIndex]" :range="marrycodeList">
						<view style="color: #999;font-size: 30upx;">{{marrycodeList[marrycodeIndex]}}</view>
					</picker>
				</view>
				<view style="color: #999;font-size: 28upx;padding-right: 20upx;flex-shrink: 0;"
					class="icon iconfont icon-youjiantou d-flex a-center"></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">血型</view>
				<view class="d-flex a-center" style="width: 100%;">
					<picker style="width: 100%;" @change="bindPickerChange($event,'blood')"
						:value="bloodList[bloodIndex]" :range="bloodList">
						<view style="color: #999;font-size: 30upx;">{{bloodList[bloodIndex]}}</view>
					</picker>
				</view>
				<view style="color: #999;font-size: 28upx;padding-right: 20upx;flex-shrink: 0;"
					class="icon iconfont icon-youjiantou d-flex a-center"></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">政治面貌</view>
				<view class="d-flex a-center" style="width: 100%;">
					<picker style="width: 100%;" @change="bindPickerChange($event,'politicalstatus')"
						:value="politicalstatusList[politicalstatusIndex]" :range="politicalstatusList">
						<view style="color: #999;font-size: 30upx;">{{politicalstatusList[politicalstatusIndex]}}</view>
					</picker>
				</view>
				<view style="color: #999;font-size: 28upx;padding-right: 20upx;flex-shrink: 0;"
					class="icon iconfont icon-youjiantou d-flex a-center"></view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">紧急联系人姓名</view>
				<view class="d-flex a-center"><input placeholder="请输入紧急联系人姓名" v-model="staffInfo.namespecial" /> </view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">紧急联系人电话</view>
				<view class="d-flex a-center"><input placeholder="请输入紧急联系人电话" v-model="staffInfo.phonespecial" />
				</view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">开户行</view>
				<view class="d-flex a-center"><input disabled placeholder="系统自动识别" v-model="staffInfo.bankname" />
				</view>
			</view>
			<view class="inputView d-flex">
				<view class="d-flex a-center">银行卡号</view>
				<view class="d-flex a-center"><input placeholder="请输入银行卡号" @blur="validateBankCard"
						v-model="staffInfo.accountno" /> </view>
			</view>
		</view>
		<z-popup v-model="popupShow" :hideOnBlur="false" type="center" width="600upx" radius="12upx">
			<view class="popup_title">
				<text @click="popupShow = false">取消</text>
				<view>{{(popupType=='1')?'证件上传实例':'指定开户行'}}</view>
				<text @click="popupShow = false">确定</text>
			</view>
			<view class="popup_content">
				<view class="body d-flex a-center j-center">
					<template v-if="popupType=='1'">
						<image src="/static/image/certification/certification.jpg" mode="widthFix"></image>
					</template>
					<template v-if="popupType=='2'">
						<view>中国建设银行(储蓄卡)</view>
					</template>
				</view>
			</view>
		</z-popup>

		<button class="mx-3 my-5 d-flex a-center j-center  main-bg-color" type="primary" @tap="submit">提 交</button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import bankBin from "@/common/bankcardinfo.js"
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import zPopup from "@/components/common/z-popup.vue"
	export default {
		components: {
			zPopup
		},
		data() {
			return {
				popupShow: false, //弹窗开启关闭
				popupType: 1, //表示证件上传，2表示银行卡指定开户行
				IdCardBefore: "", //身份证正影像
				IdCardAfter: "", //身份证反影像
				bankCard: "", //银行卡影像
				validateBankCardStatus: false, //银行卡验证状态
				//民族
				nationsList: ['汉族', '壮族', '满族', '回族', '苗族', '维吾尔族', '土家族', '彝族', '蒙古族', '藏族', '布依族', '侗族', '瑶族', '朝鲜族',
					'白族', '哈尼族', '哈萨克族', '黎族', '傣族', '畲族', '傈僳族', '仡佬族', '东乡族', '高山族', '拉祜族', '水族', '佤族', '纳西族', '羌族',
					'土族', '仫佬族', '锡伯族', '柯尔克孜族', '达斡尔族', '景颇族', '毛南族', '撒拉族', '布朗族', '塔吉克族', '阿昌族', '普米族', '鄂温克族',
					'怒族', '京族', '基诺族', '德昂族', '保安族', '俄罗斯族', '裕固族', '乌兹别克族', '门巴族', '鄂伦春族', '独龙族', '塔塔尔族', '赫哲族', '珞巴族'
				],
				nationsIndex: 0,
				userLoginId: "",
				//学历
				educationList: ["小学", "初中", "高中", "专科", "本科", "硕士", "博士"],
				educationIndex: 0,
				// 婚姻状况
				marrycodeList: ["未婚", "已婚", "离异", "再婚"],
				marrycodeIndex: 0,

				//政治面貌
				politicalstatusList: ["群众", "共青团员", "中共党员"],
				politicalstatusIndex: 0,
				//血型
				bloodList: ["A型", "B型", "O型", "AB型"],
				bloodIndex: 0,
				sexList: ["男", "女"],
				sexIndex: 0,
				staffInfo: {
					id: "",
					name: "", //姓名
					sex: "", //性别
					birthday: "", //出生日期
					addressresident: "", //户口地址
					email: "", //邮箱
					identity: '', //身份证号
					college: "", //毕业院校
					accountno: '', //开户账号
					bankname: '', //开户行
					namespecial: '', //紧急联系人姓名
					phonespecial: '', //紧急联系人电话
					marrycode: '未婚', //婚姻状况
					blood: 'A型', //血型
					education: '小学', //学历
					addressnow: '', //居住地址
					nations: '汉族', //民族
					politicalstatus: '群众', //政治面貌

				}

			}
		},
		async onLoad() {
			this.staffInfo.id = this.userInfo.sysUser.id;
			let res = await this.$http.get('/apps/getApplicationInfo?jobNumber=' + this.staffInfo.id);
			if (res.code == 200) {
				console.log(res)
				this.staffInfo = res.data;
			}

		},
		computed: {
			...mapState(["userInfo", "userCheckInfo"]),
		},
		methods: {
			...mapMutations(['setUserModules']),
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			// 下拉选择
			bindPickerChange(e, type) {
				this[type + 'Index'] = e.detail.value;
				this.staffInfo[type] = this[type + 'List'][this[type + 'Index']];
			},

			// 验证身份证号
			validateIdCard() {
				var that = this;
				that.staffInfo.birthday = "";
				that.staffInfo.sex = "";
				let mPattern = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/;
				let validateResult = mPattern.test(this.staffInfo.identity);
				if (validateResult) {
					let upperCaseValue = this.staffInfo.identity.toUpperCase();
					var such = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
					var sum = 0;
					for (var i = 0; i < upperCaseValue.length - 1; i++) {
						var product = upperCaseValue[i] * such[i];
						sum += product;
					}
					var result = sum % 11;
					var example = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
					if (upperCaseValue[17] == example[result]) {
						that.staffInfo.identity = upperCaseValue;
						that.staffInfo.birthday = upperCaseValue.substr(6, 4) + '-' + upperCaseValue.substr(10, 2) + '-' +
							upperCaseValue.substr(12, 2);
						that.staffInfo.sex = (upperCaseValue.substr(16, 1) % 2 == 0) ? '女' : '男';
						return true;
					} else {
						return false;
					}
				} else {
					return false;
				}
			},

			// 验证银行卡号
			validateBankCard() {
				var that = this;
				that.staffInfo.bankname = "";
				bankBin.getBankBin(this.staffInfo.accountno)
					.then((data) => {
						that.staffInfo.bankname = data.bankName;
						if (data.bankCode == "CCB" && data.cardType == "DC") {
							that.validateBankCardStatus = true;
						} else {
							that.validateBankCardStatus = false;
							uni.showToast({
								title: '请选择中国建设银行储蓄卡',
								icon: "none",
								duration: 2000
							});

						}
					})
					.catch((err) => {
						that.validateBankCardStatus = false;
						uni.showToast({
							title: err.split(":")[1],
							icon: "none"
						});
					})
			},

			async chooseImage(type) {
				let [err, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				if (!chooseImageRes) return;
				// 上传
				const isLt2M = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 2;
				if (!isLt2M) {
					return uni.showToast({
						title: '上传图片大小不能超过 2M!',
						icon: "none"
					});
				}

				pathToBase64(chooseImageRes.tempFilePaths[0])
					.then(async base64 => {
						this[type] = base64;

						if (type == 'IdCardBefore') {
							var paramImg = {
								"image": base64, //图片base64
								"imgType": "1" //1身份证 2表示行驶证
							}
							let imgRes = await this.$http.post('/api/huanong/imgAI', paramImg, {
								timeout: 30000
							});
							if (!!imgRes.data.customerInfo && !!imgRes.data.customerInfo.identifyNumber) {
								this.staffInfo.name = imgRes.data.customerInfo.name; //姓名
								this.staffInfo.identity = imgRes.data.customerInfo.identifyNumber; //身份证号
								this.staffInfo.sex = imgRes.data.customerInfo.identifyIssuedCom; //性别
								this.staffInfo.birthday = imgRes.data.customerInfo.identifyValidDate; //出生日期
								this.staffInfo.addressresident = imgRes.data.customerInfo.addr; //户口所在地
							} else {
								return uni.showToast({
									title: '请上传正确的证件',
									icon: "none"
								});
							}
						}
					})
			},

			showPopup(type) {
				this.popupShow = true;
				this.popupType = type;
			},

			// 验证手机号码
			isPhone() {
				let mPattern = /^1[3456789]\d{9}$/;
				return mPattern.test(this.staffInfo.phonespecial);
			},
			// 验证邮箱
			isEmail() {
				let mPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				return mPattern.test(this.staffInfo.email);
			},
			// 验证名字
			isName() {
				let mPattern = /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/;
				return mPattern.test(this.staffInfo.name);
			},
			isNamespecial() {
				let mPattern = /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/;
				return mPattern.test(this.staffInfo.namespecial);
			},

			async submit() {
				if (this.IdCardBefore == "") {
					return uni.showToast({
						title: '请上传身份证正面影像',
						icon: "none"
					});
				}
				if (!this.isName()) {
					return uni.showToast({
						title: '请输入正确的姓名',
						icon: "none"
					});
				}
				if (!this.validateIdCard()) {
					return uni.showToast({
						title: '请输入正确的身份证号',
						icon: "none"
					});
				}
				if (this.staffInfo.addressnow == "") {
					return uni.showToast({
						title: '请输入居住地址',
						icon: "none"
					});
				}
				if (!this.isNamespecial()) {
					return uni.showToast({
						title: '请输入正确的紧急联系人姓名',
						icon: "none"
					});
				}
				if (!this.isPhone()) {
					return uni.showToast({
						title: '请输入紧急联系人电话',
						icon: "none"
					});
				}
				//验证银行卡号
				await this.validateBankCard();
				if (!this.validateBankCardStatus) {
					uni.showToast({
						title: '请输入正确的银行卡号',
						icon: "none"
					});
					return;
				}
				var info = {
					sysUser: {},
					esmUserInternal: {},
					esmUserAgent: {}
				};
				Object.assign(info.sysUser, this.userCheckInfo.sysUser)
				Object.assign(info.esmUserInternal, this.userCheckInfo.esmUserInternal)
				Object.assign(info.esmUserAgent, this.userCheckInfo.esmUserAgent)
				info.sysUser.name = this.staffInfo.name; //姓名
				info.sysUser.email = this.staffInfo.email; //邮箱
				info.sysUser.sex = this.staffInfo.sex; //性别
				info.sysUser.jobCode = "17";
				info.esmUserInternal.birthday = this.staffInfo.birthday; //出生日期
				info.esmUserInternal.isteamleader = '0';
				info.esmUserInternal.addressnow = this.staffInfo.addressnow; //
				info.esmUserInternal.addressresident = this.staffInfo.addressresident; //户口地址
				info.esmUserInternal.college = this.staffInfo.college; //毕业院校
				info.esmUserInternal.identity = this.staffInfo.identity; //
				info.esmUserInternal.accountno = this.staffInfo.accountno; //
				info.esmUserInternal.bankname = this.staffInfo.bankname; //
				info.esmUserInternal.namespecial = this.staffInfo.namespecial; //
				info.esmUserInternal.phonespecial = this.staffInfo.phonespecial; //
				info.esmUserInternal.marrycode = this.staffInfo.marrycode; //
				info.esmUserInternal.blood = this.staffInfo.blood; //
				info.esmUserInternal.education = this.staffInfo.education; //
				info.esmUserInternal.nations = this.staffInfo.nations; //
				info.esmUserInternal.politicalstatus = this.staffInfo.politicalstatus; //
				// 修改并保存人员信息
				let res = await this.$http.post('/apps/certification', this.staffInfo);
				if (res.code == 200) {
					//保存临时数据到本地
					this.setUserModules({
						title: 'sysUser',
						data: info
					})
					var params1 = {
						taskid: this.userInfo.sysUser.id,
						imgtype: "T1",
						imgList: [this.IdCardBefore]
					}
					await this.$http.post('/insTaskImage/save', params1);
					var params2 = {
						taskid: this.userInfo.sysUser.id,
						imgtype: "T2",
						imgList: [this.IdCardAfter]
					}
					await this.$http.post('/insTaskImage/save', params2);

					uni.showToast({
						title: '提交成功',
						icon: "none",
						duration: 1000
					});
					this.setUserModules({
						title: 'userStatus',
						data: '2'
					})
					setTimeout(() => {
						return uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 500);
				} else if (res.code == 500) {
					uni.showToast({
						title: '已提交过实名认证',
						icon: "none",
						duration: 2000
					});
				} else {
					uni.showToast({
						title: '系统错误',
						icon: "none",
						duration: 2000
					});
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.idCardBefore {
		background: rgba($themeColor, 0.1) url('/static/image/user/identy2.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
	}

	.idCardAfter {
		background: rgba($themeColor, 0.1) url('/static/image/user/identy1.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
	}

	.bankCardImage {
		background: rgba($themeColor, 0.1) url('/static/image/user/card.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
	}

	.imageBorder {
		border: 2px solid #ddd;
		padding: 10upx;
	}


	.posi {
		counter-reset: num;
	}

	.posi2 {
		position: relative;
		display: inline-block;
		height: 40rpx;
		line-height: 40rpx;
		text-align: right;
		padding-right: 15rpx;
		width: 140rpx;
		border-radius: 30rpx;
		border: 1px solid #F0F0F0;
		background: #F0F0F0;
		margin-left: 30rpx;
		color: #999;
		font-size: 24rpx;
	}

	.posi2.on {
		border: 1px solid $themeColor;
		background: #FFFFFF;
		color: $themeColor;
	}

	.posi2:before {
		position: absolute;
		display: block;
		left: 2rpx;
		top: 6rpx;
		width: 28rpx;
		height: 28rpx;
		border-radius: 100%;
		background: #fff;
		color: #999;
		counter-increment: num;
		content: counter(num);
		text-align: center;
		line-height: 28rpx;
	}

	.posi2.on:before {
		background: $themeColor;
		color: #FFF;
	}

	.posi>view:nth-of-type(1):after {
		position: absolute;
		display: block;
		content: "";
		right: -20rpx;
		top: 12rpx;
		width: 16rpx;
		height: 16rpx;
		border-top: 1px solid #eee;
		border-right: 1px solid #eee;
		transform: rotate(45deg);
	}

	.posi>.posi2:nth-of-type(1) {
		margin-left: 0;
	}


	.cardImages>view {
		width: 310rpx;
		height: 260rpx;
	}

	.cardImages>view>image {
		width: 100%;
		height: 100%;
	}

	.IDcardInfo .IDcardNotice,
	.BankCardInfo .BankCardNotice {
		text-align: center;
		height: 110rpx;
		line-height: 110rpx;
	}

	.inputView {
		border-bottom: 1px solid #ddd;
		height: 90upx;
	}

	.inputView>view:nth-of-type(1) {
		flex-shrink: 0;
		font-size: 32upx;
		width: 135px;
		padding-left: 12px;
		color: #333;
	}

	.inputView>view:nth-of-type(2)>input {
		font-size: 30upx;
		color: #999;
	}

	.BankCardInfo {
		background-color: #FFFFFF;
		padding: 30upx;
	}

	.popup_box {
		width: 100%;
		// border-radius: 12upx;
	}

	.popup_title {
		display: flex;
		justify-content: space-between;
		height: 88upx;
		line-height: 88upx;
		border-bottom: 2upx solid #ebebeb;
		padding: 0 20upx;
		background-color: #FFF;
	}

	.popup_title view {
		font-size: 32upx;
		display: flex;
		align-items: center;
	}

	.popup_title text {
		width: 80upx;
		flex-shrink: 0;
		text-align: center;
	}

	.popup_title text {
		font-size: 28upx;
		color: #999;
	}

	.popup_title text:last-child {
		color: $themeColor;
	}

	.popup_content {
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		text-align: center;
	}

	.popup_content .body {
		padding: 20upx 30upx;
	}

	.popup_content .body image {
		width: 540upx;
	}
</style>