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="frontimg" class="img" v-if="frontimg"></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="backimg" class="img" v-if="backimg"></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="phone">
			  <uni-easyinput v-model="user.phone" :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 {uploadmore} from '@/utils/common.js'
	import {getOcrIdCard} from "@/api/mine/card.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	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:[],
				user:{
					
				}
			}
		},
		methods:{
			checkPermi, checkRole,
			getNext(){
				this.$tab.navigateTo("/work/pages/prove/face")
			},
			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
				// if(e=='zj'){
				// 	file = that.zjfile;
				// 	count=9
				// }else{
				// 	file = that.mjfile;
				// 	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 = [];
							uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								console.log(rs)
								// /profile/upload/2024/04/24/a_20240424105401A004.png
								// http://192.168.101.168:8056/profile/upload/2024/04/24/a_20240424105401A004.png
								if(rs&&rs.length>0){
									var obj={
										type:e,
										url:baseUrl+rs.join(',')
									}
									that.getOcrIdCard(obj)
								}
								
								// if(e=='zj'){
								// 	that.zjfile = that.zjfile.concat(rs);
								// 	that.datainfo.identificationPhoto=that.zjfile.join(',')
								// }
							})	
						}
					}
				});
			},
			getOcrIdCard(obj){
				var params={
					image:obj.url,
					idCardSide:obj.type
				}
				getOcrIdCard(params).then(res=>{
					if(res.code==200){
						this.user=res.data
					}
				})
			}
		}
	}
</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>