yl-gzh/pages/info/add.vue

<template>
	<view class="content">
		<uni-card class="card">
			<uni-section title="基本信息" type="line">

				<view>
					<view class="lzcOCR">
						<view class="imgBox">
							<image :src="zjcaijianSrc" style="width: 40vw;" mode="widthFix" @click="paizhao('front')">
							</image>
							<view class="text">拍摄人像面</view>
						</view>
						<view class="imgBox">
							<image :src="zjcaijianSrcFan" style="width: 40vw;" mode="widthFix" @click="paizhao('back')">
							</image>
							<view class="text">拍摄国徽面</view>
						</view>
					</view>

					<view class="miaoshu">
						身份信息会跟进拍照的证件照片白动识别，不支持手动输入。如果识别错误，可尝试再次拍照.
					</view>
				</view>


				<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" style="margin-top: 5vh;">


					<uni-forms-item label="姓名" required name="lrXm">
						<uni-easyinput ref="xm" type="text" :disabled="disabled" v-model="baseFormData.lrXm"
							placeholder="请输入姓名" :inputBorder="true"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="手机号" required name="lrCydh">
						<uni-easyinput type="text" v-model="baseFormData.lrCydh" :disabled="disabled"
							placeholder="请输入手机号" :inputBorder="true"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="街道社区">
						<uni-easyinput type="text" v-model="baseFormData.diqu" @focus="toggle('bottom')"
							placeholder="请选择街道社区" :clearable="false"></uni-easyinput>


					</uni-forms-item>
					<uni-forms-item label="住址" required name="jzdz">
						<uni-easyinput type="text" v-model="baseFormData.jzdz" :disabled="disabled" placeholder="请输入住址"
							:inputBorder="true"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item label="是否特困">
						<uni-data-checkbox v-model="baseFormData.istk" :localdata="radioData"></uni-data-checkbox>
					</uni-forms-item>

					<uni-forms-item label="特困证明" v-if="baseFormData.istk == 1">
						<myfile :zczmList="tkzmList" @recordsChange="tkChange"></myfile>
					</uni-forms-item>

					<uni-forms-item label="是否低保">
						<uni-data-checkbox v-model="baseFormData.isdb" :localdata="radioData"></uni-data-checkbox>
					</uni-forms-item>

					<uni-forms-item label="低保证明" v-if="baseFormData.isdb == 1">
						<myfile :zczmList="dbzmList" @recordsChange="dbChange"></myfile>
					</uni-forms-item>

					<uni-forms-item label="是否重残">
						<uni-data-checkbox v-model="baseFormData.iszc" :localdata="radioData"></uni-data-checkbox>
					</uni-forms-item>

					<uni-forms-item label="重残证明" v-if="baseFormData.iszc == 1">
						<!-- <uni-file-picker v-model="zczm" @select="imgSelect3" @delete="imgDelete3"></uni-file-picker> -->
						<myfile :zczmList="zczmList" @recordsChange="zcChange"></myfile>
					</uni-forms-item>

					<view v-if="show">
						<uni-forms-item label="直接上传">
							<uni-data-checkbox v-model="radio" :localdata="radioData"></uni-data-checkbox>
						</uni-forms-item>
						<text>注意：人证比对不成功可以直接注册人工审核！</text>
					</view>


					<view class="miaoshu" v-if="isCheck">
						该人员存在未审核信息，请先审核！
					</view>

					<view>

						<view v-if="isCheck">
							<button cursor-spacing="22px" :disabled="isCheck" class="buttonClass"
								@click="preSave()">认证</button>
						</view>
						<view v-else>
							<button v-if="faceBase64 && ((show && radio == '1') || (!show && radio == '0'))"
								cursor-spacing="22px" class="buttonClass" @click="save()">保存</button>
							<button v-else cursor-spacing="22px" class="buttonClass" @click="preSave()">认证</button>
						</view>

					</view>
				</uni-forms>
			</uni-section>




		</uni-card>


		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<picker-view :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in jiedaoData" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in shequData" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import myfile from '@/components/my-file/my-file.vue';
	let jl = require('../../static/json/bufen.json')
	import {
		decryptRowData_ECB,
		decryptData_ECB
	} from '@/common/sm4.js'
	import {
		GetChildListByCode
	} from '@/api/dict.js'
	import {
		showConfirm,
		getDictInfo,
		toast,
		toBase64
	} from '@/common/common.js'
	import {
		UploadOne,
		UploadSome
	} from '@/api/upload.js'
	import {
		Register
	} from '@/api/login.js'
	import {
		getUser
	} from '@/common/auth.js'
	import CryptoJS from 'crypto-js';
	import config from '@/config.js';
	import idCardNoUtil from '@/common/idcard.js'
	import {
		translate,
		base64ToUrl,
		blobToDataURI,
		translateAll,
	} from '@/common/image.js'
	import {
		setToken,
		setOpenid,
		getOpenid,
		setUser
	} from '@/common/auth.js'
	import {
		getAccessToken,
		idcard,
		match
	} from '@/common/baiduUtil.js'
	import {
		updateKhjbxx,
		infoKhjbxx,
		GetLrByZjhm,
		SaveKhjbxx
	} from '@/api/kh.js'
	export default {
		components: {
			myfile
		},
		data() {
			return {
				tkzmList: [],
				dbzmList: [],
				zczmList: [],
				isCheck: false,
				indicatorStyle: `height: 50px;`,
				jiedaoData: [],
				shequData: [],
				jiedaoValue: {},
				shequValue: {},
				disabled: true,
				show: false,
				radio: "0",
				radioData: [{
					text: '否',
					value: "0"
				}, {
					text: '是',
					value: "1"
				}],
				// 字典
				dicts: {
					// 民族
					C0009: [],
					// 性别
					C0007: [],
				},
				// 百度云access_token
				token: '',
				// 人像地址
				src: "/static/images/head.png",
				// 身份拍摄地址
				zjSrc: "",
				// 身份证裁剪地址
				zjcaijianSrc: '/static/images/zhengmian.png',
				zjcaijianSrcFan: '/static/images/fanmian.png',
				cardType: 'front',
				frontBase64: '',
				backBase64: '',
				showSrc: "",
				// 人员信息
				userInfo: {},
				// 组
				groupId: '',
				// 身份证号加密
				idcardMD5: '',
				// 人像base64
				faceBase64: '',
				// 身份证base64
				idcardFace: '',
				idcardFaceUrl: '',
				// 对比份数
				score: 0,
				// ocrXm
				ocrXm: '',
				isSearch: false,
				baseFormData: {
					lrXm: '',
					lrZjhm: '',
					lrHjbcxx: '',
					lrCydh: '',
					code: '',
					diqu: '',
					lrHjdz: '',
					istk: "0",
					isdb: "0",
					iszc: "0",
					lzzt: 0,
				},
				rules: {
					jzdz: {
						rules: [{
							required: true,
							errorMessage: '住址不能为空'
						}]
					},
					lrXm: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					diqu: {
						rules: [{
							required: true,
							errorMessage: '请选择地区'
						}]
					},
					photo: {
						rules: [{
							required: true,
							errorMessage: '请上传人像'
						}]
					},
					lrCydh: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							},
							{
								format: 'number',
								errorMessage: '请输入正确的手机号',
							},
							{
								pattern: '^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\\d{8})$',
								errorMessage: '请输入正确的手机号',
							}
						]
					}
				},
			}
		},
		onLoad(o) {
			getAccessToken(this.callbackToken)
			window.addEventListener("message", e => {
				if (e.data.data && e.data.data.arg.base64) {
					this.faceBase64 = ''
					this.cardType = uni.getStorageSync("cardType")

					if (this.cardType == 'front') e.data.data.arg.base64 = jl.front
					if (this.cardType == 'back') e.data.data.arg.base64 = jl.back

					setTimeout(() => {
						uni.showLoading({
							title: '正在识别中...'
						})
					}, 100);
					// 压缩	
					translateAll(base64ToUrl(e.data.data.arg.base64), (base64, blobUrl) => {
						idcard(base64, this.token, this.cardType, this.callbackIdcard)
					})

					uni.removeStorageSync('cardType')
				}

				if (e.data.data && e.data.data.arg.faceBase64) {
					setTimeout(() => {
						uni.showLoading({
							title: '正在识别中...'
						})
					}, 100);
					this.faceBase64 = e.data.data.arg.faceBase64
					// 压缩
					translateAll(base64ToUrl(this.faceBase64), (base64, blobUrl) => {
						this.src = this.faceBase64
						match(this.token, base64.split(",")[1], this.idcardFace, this.callbackFace)
					})
				}
			}, false)


			this.getDictList(Object.keys(this.dicts), this.dicts)
			this.baseFormData.code = getOpenid()

			this.userInfo = getUser()
			this.baseFormData.lrHjdz = this.userInfo.dept.locationCode
			this.groupId = this.userInfo.dept.locationCode.substring(0, 6)
			if (this.userInfo.userType == '07') {
				this.updateFlag = true
				let info = JSON.parse(o.info)
				this.baseFormData.lrHjdz = info.lrHjdz
				this.groupId = info.lrHjdz.substring(0, 6)
				this.baseFormData = info
				this.src = config.baseUrl + info.lrTx
			}
			//  查询街道和社区
			this.getAddressList(this.baseFormData.lrHjdz)


		},
		methods: {
			tkChange(e) {
				this.tkzmList = e
			},
			dbChange(e) {
				this.dbzmList = e
			},
			zcChange(e) {
				this.zczmList = e
			},
			getAddressList(code) {
				GetChildListByCode({
					code: code
				}).then(res => {
					if (res.data) {
						this.jiedaoData = res.data
						this.shequData = res.data[0].children


						this.jiedaoValue = this.jiedaoData[0]
						this.shequValue = this.shequData[0]
						this.baseFormData.diqu = this.jiedaoValue.label + '/' + this.shequValue.label
						this.baseFormData.lrHjdz = this.shequValue.code
					}
				})
			},
			callbackFace(res) {
				uni.hideLoading()
				if (res.data.error_msg == 'SUCCESS') {
					this.score = res.data.result.score;

					this.baseFormData.lrTxdb = JSON.stringify({
						"lrJmzjhm": this.idcardMD5,
						"xsfs": this.score
					})
					if (this.score >= config.score) {
						this.show = false
						this.baseFormData.lzzt = 3
						this.baseFormData.lrSpyj = '同意'
					} else {
						// 低于80选项是否人工审核，是的话进记录表
						// 身份证头像保存后端
						// 人脸库注册人脸、身份证md5
						// 修改的时候去人脸库搜索，搜索不到不允许修改
						// 修改成功替换原始人脸库照片
						// 首次修改搜索身份证
						// 后端没入库，人脸库相应删除
						// ocr失败身份证原版入库，ocr成功人脸入库
						// showConfirm('人像与身份证不符，请重新上传')
						this.baseFormData.lzzt = 1
						this.baseFormData.lrSpyj = ''
						this.show = true
					}
					this.baseFormData.prelrZjz = this.zjcaijianSrc

				} else {
					showConfirm(res.data.error_msg)
					this.faceBase64 = ''
				}
			},
			callbackToken(e) {
				this.token = e
			},
			callbackIdcard(words) {
				uni.hideLoading()
				if (!this.cardType) {
					this.cardType = uni.getStorageSync("cardType")
				}
				if (this.cardType == 'front') {
					if (!words) {
						showConfirm('请上传正确的身份证人像面')
						return
					}
					if (words.image_status == "other_type_card") {
						showConfirm('请上传正确的身份证人像面')
						return
					}

					let id = words.words_result['公民身份号码'].words
					let csrq = words.words_result['出生'].words
					let sex = words.words_result['性别'].words
					let zz = words.words_result['住址'].words
					let info = idCardNoUtil.getIdCardInfo(id)
					if (!idCardNoUtil.checkIdCardNo(id)) {
						showConfirm('身份证号识别有误，请重新上传')
						return
					}
					if (info.birthday != csrq) {
						showConfirm('身份证出生日期识别有误，请重新上传')
						return
					}
					if (info.gender != sex) {
						showConfirm('身份证性别识别有误，请重新上传')
						return
					}
					if (words.image_status == "reversed_side") {
						showConfirm('请上传身份证人像面')
						return
					}
					if (words.risk_type != "normal") {
						// normal-正常身份证；copy-复印件；temporary-临时身份证；screen-翻拍；unknown-其他未知情况
						showConfirm('请上传正确的身份证人像面')
						return
					}
					// todo 根据身份证号查询此人信息是否可修改。this.isCheck = true



					this.frontBase64 = words.card_image
					this.zjcaijianSrc = 'data:image/jpeg;base64,' + words.card_image
					this.disabled = false

					this.baseFormData.lrXb = getDictInfo(this.dicts.C0007, words.words_result['性别'].words)[0].value
					this.baseFormData.lrMz = getDictInfo(this.dicts.C0009, words.words_result['民族'].words)[0].value

					this.idcardFace = words.photo
					this.idcardFaceUrl = base64ToUrl(words.photo);
					this.baseFormData.lrZjhm = id
					this.baseFormData.lrCsrq = csrq
					this.idcardMD5 = CryptoJS.MD5(this.baseFormData.lrZjhm).toString()
					this.baseFormData.lrXm = words.words_result['姓名'].words
					this.baseFormData.lrHjbcxx = words.words_result['姓名'].words
					this.ocrXm = words.words_result['姓名'].words



					if (this.userInfo.userType != '07') {
						GetLrByZjhm({
							lrJmzjhm: this.idcardMD5
						}).then(res => {
							if (res.data) this.baseFormData = decryptData_ECB(res.data, ["lrZjhm", "lrXm",
								"lrHjbcxx",
								"lrXjdzBcxx",
								"lrCydh", "lrPoxm", "lrPoZjmh", "jhrXm", "jhrSjhm", "zlrXm", "zlrDh",
								"cjzh",
								"yhzh", "khmc"
							], [2, 1, 4, 4, 3, 1, 2, 1, 2, 1, 3, 5, 5, 5]);


							if (this.baseFormData.lrTx) this.src = config.baseUrl + this.baseFormData.lrTx
							if (this.baseFormData.lrHjdz) {
								this.jiedaoData.forEach(e => {
									if (e.children.length > 0) {
										e.children.forEach(ee => {
											if (ee) {
												if (ee.code == this.baseFormData.lrHjdz) {
													this.shequValue = ee
													this.jiedaoValue = e
													this.baseFormData.diqu = this.jiedaoValue
														.label +
														'/' + this.shequValue.label
												}
											} else {
												if (e.code == this.baseFormData.lrHjdz) {
													this.jiedaoValue = e
													this.baseFormData.diqu = this.jiedaoValue.label
												}
											}

										})
									}
								})
							} else {
								// 地区回显
								this.getAddressList()
							}
							if (res.data && res.data.sfzzpb) this.zjcaijianSrcFan = res.data.sfzzpb
							if (res.data && res.data.tkzm) this.tkzmList = [res.data.tkzm]
							if (res.data && res.data.dbzm) this.dbzmList = [res.data.dbzm]
							if (res.data && res.data.zczm) this.zczmList = [res.data.zczm]
							if (res.data) this.updateFlag = true

						})
					}

					// if (id) {
					// 	GetLrByZjhm({
					// 		lrJmzjhm: this.idcardMD5
					// 	}).then(res => {
					// 		console.log(res);
					// 		if (res.data) {
					// 			showConfirm('该信息已存在，请登录').then(res => {
					// 				if (res.confirm == true) {
					// 					uni.reLaunch({
					// 						url: '/pages/login/index'
					// 					})
					// 				}
					// 			})
					// 		} else {
					// 			this.disabled = false
					// 		}
					// 	})
					// }
				} else if (this.cardType == 'back') {
					if (!words) {
						showConfirm('请上传正确的身份证国徽面')
						return
					}
					if (words.image_status == "other_type_card") {
						showConfirm('请上传正确的身份证国徽面')
						return
					}
					if (words.risk_type != "normal") {
						// normal-正常身份证；copy-复印件；temporary-临时身份证；screen-翻拍；unknown-其他未知情况
						showConfirm('请上传正确的身份证国徽面')
						return
					}
					// words.words_result['失效日期'].words
					// words.words_result['签发日期'].words
					// words.words_result['签发机关'].words
					if (words && words.words_result) {
						this.baseFormData.sfzqfjg = words.words_result['签发机关'].words
						this.baseFormData.sfzyxqxs = words.words_result['签发日期'].words
						this.baseFormData.sfzyxqxz = words.words_result['失效日期'].words
						this.backBase64 = words.card_image
						this.zjcaijianSrcFan = 'data:image/jpeg;base64,' + words.card_image
					}

				}
			},
			toggle(type) {
				uni.hideKeyboard()
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			bindChange(e) {
				if (e.detail.value.length == 1) {
					this.jiedaoValue = this.jiedaoData[e.detail.value[0]]
					this.shequData = this.jiedaoData[e.detail.value[0]].children
					if (this.shequData.length > 0 && this.shequData[0] != null) {
						this.shequValue = this.shequData[0]
						this.baseFormData.diqu = this.jiedaoValue.label + '/' + this.shequValue.label
						this.baseFormData.lrHjdz = this.shequValue.code
					} else {
						this.shequData = []
						this.shequValue = ''
						this.baseFormData.diqu = this.jiedaoValue.label
						this.baseFormData.lrHjdz = this.jiedaoValue.code
					}

				} else {
					this.jiedaoValue = this.jiedaoData[e.detail.value[0] ?? 0]
					this.shequValue = this.shequData[e.detail.value[1]]
					this.baseFormData.diqu = this.jiedaoValue.label + '/' + this.shequValue.label
					this.baseFormData.lrHjdz = this.shequValue.code
				}

			},
			buildDataByLevel(data, pid) {
				let result = [];
				data.filter(e => {
					return e.parent_id === pid
				}).forEach(e => {
					result.push({
						value: e.code,
						text: e.name,
						id: e.id,
						children: this.buildDataByLevel(data, e.id)
					})
				})
				return result.length > 0 ? result : []
			},
			paizhao(type) {
				this.type = type
				if (this.type == 'back' && !this.ocrXm) {
					showConfirm('请先拍摄身份证人像面')
					return
				}
				uni.setStorageSync("cardType", type)
				uni.navigateTo({
					url: '/pages/info/card'
				})
			},
			onchange(e) {
				console.log("onchange", e);
			},
			onnodeclick(node) {
				this.groupId = node.code.substring(0, 6)
				this.baseFormData.lrHjdz = this.groupId + '000000'
			},

			preSave() {
				if (this.baseFormData.lzzt != 0 && this.baseFormData.lzzt != 3 && this.baseFormData.lzzt != 6) {
					showConfirm('信息正在审核，请审核后重试')
					return
				}
				if (!this.ocrXm) {
					showConfirm('请先拍摄身份证人像面')
					return
				}
				if (this.zjcaijianSrcFan == '/static/images/fanmian.png') {
					showConfirm('请先拍摄身份证国徽面')
					return
				}
				if (this.baseFormData.istk == 1 && this.tkzmList.length == 0) {
					showConfirm('请先上传特困证明')
					return
				}
				if (this.baseFormData.isdb == 1 && this.dbzmList.length == 0) {
					showConfirm('请先上传低保证明')
					return
				}
				if (this.baseFormData.iszc == 1 && this.zczmList.length == 0) {
					showConfirm('请先上传重残证明')
					return
				}


				this.$refs['baseForm'].validate().then(res => {
					if (this.ocrXm != this.baseFormData.lrXm) {
						showConfirm('姓名与真实姓名不符，请重新上传身份证')
						return
					}
					uni.navigateTo({
						url: '/pages/info/face'
					})
				})
			},
			save() {

				if ((this.score >= config.score) || (this.score < config.score && this.radio == '1')) {
					uni.showLoading({
						title: '正在保存中...'
					})
					let paramFiles = []
					paramFiles.push('data:image/jpeg;base64,' + this.frontBase64)
					if (this.backBase64) paramFiles.push('data:image/jpeg;base64,' + this.backBase64)
					paramFiles.push(this.src)
					if (this.baseFormData.istk == 1 && this.tkzmList.length == 1 && this.tkzmList[0].indexOf(
							'data:image') > -1) {
						paramFiles.push(this.tkzmList[0])
						// 特殊材料待审核
						this.baseFormData.lzzt = 5
						this.baseFormData.lrSpyj = '同意'
					}
					if (this.baseFormData.isdb == 1 && this.dbzmList.length == 1 && this.dbzmList[0].indexOf(
							'data:image') > -1) {
						paramFiles.push(this.dbzmList[0])
						// 特殊材料待审核
						this.baseFormData.lzzt = 5
						this.baseFormData.lrSpyj = '同意'
					}
					if (this.baseFormData.iszc == 1 && this.zczmList.length == 1 && this.zczmList[0].indexOf(
							'data:image') > -1) {
						paramFiles.push(this.zczmList[0])
						// 特殊材料待审核
						this.baseFormData.lzzt = 5
						this.baseFormData.lrSpyj = '同意'
					}

					UploadSome({
						fileStr: paramFiles
					}).then(res => {
						let names = res.data.name.split(",")
						let urls = res.data.url.split(",")
						this.baseFormData.lrZjz = urls[0]
						urls.splice(0, 1)
						if (this.backBase64) {
							this.baseFormData.sfzzpb = urls[0]
							urls.splice(0, 1)
						}
						this.baseFormData.lrTx = urls[0]
						urls.splice(0, 1)
						if (this.baseFormData.istk == 1 && this.tkzmList.length == 1) {
							this.baseFormData.tkzm = urls[0]
							urls.splice(0, 1)
						}
						if (this.baseFormData.isdb == 1 && this.dbzmList.length == 1) {
							this.baseFormData.dbzm = urls[0]
							urls.splice(0, 1)
						}
						if (this.baseFormData.iszc == 1 && this.zczmList.length == 1) {
							this.baseFormData.zczm = urls[0]
							urls.splice(0, 1)
						}

						this.$refs['baseForm'].validate().then(res => {
							if (this.updateFlag) {
								updateKhjbxx(this.baseFormData).then(r => {
									uni.hideLoading()
									if (r.code == 200) {
										toast('保存成功')
										setTimeout(function() {
											uni.switchTab({
												url: '/pages/index/index'
											})
										}, 1000)
									}
								})
							} else {
								SaveKhjbxx(this.baseFormData).then(r => {
									uni.hideLoading()
									if (r.code == 200) {
										toast('保存成功')
										// setOpenid(r.data.openId)
										// setUser(r.data.sysUser)
										// setToken(r.data.token.access_token)
										setTimeout(function() {
											uni.switchTab({
												url: '/pages/index/index'
											})
										}, 1000)
									}
								})
							}

						}).catch(err => {
							uni.hideLoading()
						})
					})





				} else {
					showConfirm('请重新上传人像')
					return
				}


			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 1vh;
	}


	.lzcOCR {
		display: flex;
		justify-content: space-between;
		margin-top: 5vh;

	}

	.imgBox {
		width: 47%;
		text-align: center;

		image {
			width: 100%;
		}

		.text {
			width: 100%;
			/* background-color: red; */
		}
	}

	.miaoshu {
		margin-top: 5vh;
		font-size: 14px;
	}

	.buttonClass {
		margin-top: 4vh;
		margin-left: 4vw;
		width: 68vw;
		/* height: 5vh; */
		border-radius: 16px;
		border: 1px solid rgba(176, 179, 199, 1);
		background: #28d87d;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>