rongzidanbao-ui/work/pages/prove/index.vue

<template>
	<view class="rzbox">
		<view class="f15 co23 fw5 mb24">请使用注册人身份证</view>
		<view class="flexcj mb20">
			<view class="carbox" @click="getaddImage('front')">
				<image :src="baseUrl+user.front" class="img" v-if="user.front"></image>
				<image :src="cardz" class="img" v-else></image>
				<view class="tit">拍摄人像面</view>
				<!-- <view class="tit">身份证正面</view> -->
			</view>
			<view class="carbox" @click="getaddImage('back')">
				<image :src="baseUrl+user.back" class="img" v-if="user.back"></image>
				<image :src="cardf" class="img" v-else></image>
				<view class="tit">拍摄国徽面</view>
				<!-- <view class="tit">身份证反面</view> -->
			</view>
		</view>
		<view class="mb28">
			<view class="cardtip">身份信息会根据上传的证件照片自动识别，支持手动输入。</view>
			<view class="cardtip">如果识别错误，可尝试再次拍照。</view>
		</view>
				
		<!-- 身份信息 -->
		<uni-forms ref="form" :model="user">
		  <uni-forms-item label="真实姓名" name="realName">
			  <uni-easyinput v-model="user.realName" disabled :inputBorder='false' placeholder="自动识别" />
		  </uni-forms-item>
		  <uni-forms-item label="身份证号" name="idCard">
		    <uni-easyinput v-model="user.idCard" disabled :inputBorder='false' placeholder="自动识别" />
		  </uni-forms-item>
		  <uni-forms-item label="证件有效期" name="expirationDate">
		    <uni-easyinput v-model="user.expirationDate" disabled :inputBorder='false' placeholder="自动识别" />
		  </uni-forms-item>
		  <uni-forms-item label="居住地址" name="address">
			<uni-easyinput type="textarea" :autoHeight="true" disabled v-model="user.address" :inputBorder='false' placeholder="自动识别" />
		  </uni-forms-item>
			<uni-forms-item label="手机号码" name="phonenumber">
			  <uni-easyinput v-model="user.phonenumber" :inputBorder='false' placeholder="请输入手机号码，以便接收短信" />
			</uni-forms-item>
		</uni-forms>
		<view class="formtip">* 请确保填写的信息准确无误</view>
		<view class="rzbtn mt38" @click="getNext">下一步</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {uploadIdentify} from '@/utils/common.js'
	import {getOcrIdCard,getOcrFn,getChangeFace,getIdCardAdd} from "@/api/mine/card.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	// #ifdef APP-PLUS
	const aliyunVerify = uni.requireNativePlugin('AP-FaceDetectModule');
	// #endif
	
	export default{
		components:{},
		data(){
			return{
				cardz:require('@/work/static/images/prove/cardz.png'),
				cardf:require('@/work/static/images/prove/cardf.png'),
				faceimg:require('@/work/static/images/prove/faceimg.png'),
				ftipa:require('@/work/static/images/prove/ftipa.png'),
				ftipb:require('@/work/static/images/prove/ftipb.png'),
				ftipc:require('@/work/static/images/prove/ftipc.png'),
				frontimg:'',
				backimg:'',
				count:1,
				file:[],
				baseUrl:config.baseUrl,
				user:{
					realName:'',
					idCard:'',
					address:'',
					expirationDate:'',
					phonenumber:this.$store.state.user.phonenumber,
					front:'',
					back:'',
				},
				metaInfo:{},
				userId:this.$store.state.user.userId,
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			var metaInfo = aliyunVerify.getMetaInfo();
			this.metaInfo=JSON.parse(JSON.stringify(metaInfo))
			// let p = uni.getSystemInfoSync().platform;
			// if (p === "ios") {
			// 	t = JSON.stringify(t);
			// }
			// #endif
		},
		methods:{
			checkPermi, checkRole,
			getNext(){
				// 判断信息是否完善
				if(!this.user.front){
					this.$toast("请上传身份证人像面")
					return
				}
				if(!this.user.back){
					this.$toast("请上传身份证国徽面")
					return
				}
				// #ifdef APP-PLUS
				this.getFace()
				// #endif
				// #ifndef APP-PLUS
				// this.$toast("请在app端进行认证")
				// 跳h5页面进行人脸认证
				var user=JSON.parse(JSON.stringify(this.user));
				user.userId=this.userId;
				user.returnUrl='https://rzdbh.qs163.cn/pages/success';
				// var data={
				// 	idCard:user.idCard,
				// 	realName:user.realName,
				// 	returnUrl:'http://192.168.101.147:9092/pages/success'
				// }
				this.$tab.navigateTo('/pages/common/webview/faceauth?data='+encodeURIComponent(JSON.stringify(user)))
				// #endif
			},
			getFace(){
				var that=this;
				// initFace Y不需要,N需要人脸认证
				var user=this.user;
				var params={
					idCard:user.idCard,
					realName:user.realName,
					metaInfo:this.metaInfo,
				}
				// #ifndef APP-PLUS
				params.returnUrl='https://rzdb.qs163.cn';
				// #endif
				getOcrFn(params).then(res=>{
					if(res.code==200){
						// #ifdef APP-PLUS
						var id=res.data.certifyId;
						aliyunVerify.verify({
						    "certifyId":id,		// 填写从服务端获取的certifyId
						  }, 
						  function(response){
							  var face='Y'
							  if(response.code==1000){
								  var reparams=that.user;
								  reparams.userId=that.userId;
								  getIdCardAdd(reparams).then(resa=>{
								  		if(resa.code==200){
											that.$store.dispatch('checkInitFace', face).then(() => {
												that.$tab.redirectTo('/work/pages/prove/addqy?from=rz')
											})
										}							  
								  })
							  }
						  }
						);
						// #endif
						// #ifndef APP-PLUS
						this.$toast("请在app端进行认证")
						// 跳h5页面进行人脸认证
						// console.log(MetaInfo)
						// var user=this.user;
						// var data={
						// 	url:res.data.certifyUrl,
						// 	realName:user.realName,
						// }
						// this.$tab.navigateTo('/pages/common/webview/faceauth?data='+encodeURIComponent(JSON.stringify(data)))
						// #endif
						
					}
				}) 
			},
			getaddImage(e){
				let that = this;
				// var rs=['D:\\idcard.png']
				// if(rs&&rs.length>0){
				// 	var obj={
				// 		type:e,
				// 		// url:baseUrl+rs.join(',')
				// 		url:rs.join(',')
				// 	}
				// 	that.getOcrIdCard(obj)
				// }
				// return
				let file =[],count=9
				uni.chooseImage({
					count: 1,
					success:function(res){
						let img= res.tempFilePaths;
						if(img.length + file.length > count){
							uni.showToast({
								title: '最多上传'+count+'张图片',
								icon: 'none',
								duration: 2000
							})
						}else{
							let imglen = res.tempFilePaths.length;
							var fuwufile = [];
							uploadIdentify('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								var resurl=rs[0];
								if(e=='front'){
									that.user.front=resurl.fileName;
								}else{
									that.user.back=resurl.fileName;
								}
								if(rs&&rs.length>0){
									var obj={
										type:e,
										url:resurl.urlOnline
									}
									that.getOcrIdCard(obj)
								}
							})	
						}
					}
				});
			},
			getOcrIdCard(obj){
				var params={
					image:obj.url,
					idCardSide:obj.type
				}
				getOcrIdCard(params).then(res=>{
					if(res.code==200){
						var user=res.data;
						if(obj.type=='front'){
							this.user.realName=user.realName;
							this.user.idCard=user.idCard;
							this.user.address=user.address;
						}else{
							this.user.expirationDate=user.expirationDate
						}
					}
				})
			}
		}
	}
</script>
<style>
	page{background:#ffffff;}
</style>
<style lang="scss" scoped>
.rzbox /deep/ .uni-forms-item{min-height: 116rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:22rpx 0;}
.rzbox /deep/ .uni-forms-item__label{font-weight: bold;font-size: 30rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.rzbox /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 30rpx;color: #222327;}
.rzbox /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 30rpx;}
.rzbox /deep/ .uni-easyinput__placeholder-class{font-size: 30rpx;color: #AAAAAA;}
.rzbox /deep/ .uni-input-input{font-size: 30rpx;}
.rzbox /deep/ .uni-textarea-textarea{font-size: 30rpx;}
.rzbox /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.rzbox{padding: 44rpx 34rpx 76rpx;
	.carbox{width: 320rpx;border-radius: 14rpx;overflow: hidden;
		.img{width: 320rpx;height: 216rpx;}
		.tit{width: 100%;height: 60rpx;background: #A0C6D5;text-align: center;font-weight: 500;
font-size: 26rpx;line-height: 60rpx;
color: #FFFFFF;}
	}
	.cardtip{font-weight: 500;font-size: 24rpx;color: #999999;line-height: 40rpx;}
	.inttxet{font-weight: 500;font-size: 30rpx;flex: 1;text-align: right;color: #222327;}
	.formtip{font-weight: 500;font-size: 24rpx;color: #FF6969;margin-top: 40rpx;text-align: right;}
	.rzbtn{width: 100%;background: #00A9F0;border-radius:10rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 30rpx;color: #FFFFFF;}
}
</style>