prevent_drowning_app/work/pages/rz/add.vue

<template>
	<view class="check">
		<uni-forms ref="form" :model="datainfo" :rules="rules">
			<view class="chmain">
				<view class="plr6">
					<view class="rztit">请拍摄/上传孩子身份证照片</view>
					<view class="rzhbox">
						<view class="rzhboxa flexc">
							<view class="flex1">
								<view class="tit">身份证正面</view>
								<view class="txt">※ 身份证信息仅用于实名验证</view>
								<view class="txt">※ 我们会保护您的个人信息</view>
							</view>
							<view class="carbox"  @click="getaddImagea('front')">
								<image :src="cara"></image>
								<!-- <image :src="baseUrl+datainfo.idCardBack" class="img" v-if="datainfo.idCardBack"></image>
								<image src="@/work/images/rz/cara.png" class="img" v-else></image> -->
							</view>
						</view>
						<view class="rzhboxa flexc">
							<view class="flex1">
								<view class="tit">学生照片</view>
								<view class="txt">※ 请上传近一年内的照片</view>
								<view class="txt">※ 上传的照片面部无遮挡</view>
							</view>
							<view class="carbox"  @click="getaddImagea('front')">
								<image :src="carb"></image>
							</view>
						</view>
					</view>
				</view>
				<uni-forms-item label="孩子姓名"  name="residentIdCard">
					<view class="flexc">
						<uni-easyinput  disabled v-model="datainfo.residentIdCard"  :inputBorder='false' placeholder="自动识别" />
						<view class="rimg"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="出生年月"  name="residentName">
					<view class="flexc">
						<uni-easyinput  :disabled="isdisabled" v-model="datainfo.residentName"  :inputBorder='false' placeholder="自动识别" />
						<view class="rimg"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="性别"  name="idCardAddress">
					<view class="flexc">
						<uni-easyinput  disabled  v-model="datainfo.idCardAddress"  :inputBorder='false' placeholder="自动识别" />
						<view class="rimg"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="居住地址"  name="idCardAddress">
					<view class="flexc">
						<uni-easyinput  disabled  v-model="datainfo.idCardAddress"  :inputBorder='false' placeholder="自动识别" />
						<view class="rimg"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="学校名称"  name="residentPhone">
					<view class="flexc">
						<uni-easyinput  :disabled="isdisabled"  v-model="datainfo.residentPhone"  :inputBorder='false' placeholder="请选择或输入学校" />
						<view class="rimg">
							<image :src="more"></image>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="班级名称"  name="residentPhone">
					<view class="flexc">
						<uni-easyinput  :disabled="isdisabled"  v-model="datainfo.residentPhone"  :inputBorder='false' placeholder="请选择或输入班级" />
						<view class="rimg">
							<image :src="more"></image>
						</view>
					</view>
				</uni-forms-item>
				<!-- <uni-forms-item label="居住门户"  name="houseId">
					<w-select
					      style="margin-left: 20rpx;" 
					     v-model="datainfo.houseId"
					      :list='fwlist'
					      valueName='dictLabel' 
					      keyName="dictValue"
						  :chosevalue="datainfo.detailedAddress"
						  :filterable='filterable'
					      @change='getchange'
					    >
					    </w-select>
				</uni-forms-item> -->
				
				<uni-forms-item label="防溺水通知"  name="residentEmployer">
					<view class="flexc">
						<view class="flex1"></view>
						<view @click="noticeFlag=!noticeFlag" class="checkbox">
							<image :src="switcha" v-if="noticeFlag"></image>
							<image :src="switchb" v-else></image>
						</view>
						<view class="rimg"></view>
					</view>
				</uni-forms-item>

			</view>
			<view class="abtns mb14 mt50" @click="getRzFn">下一步，验证身份</view>
			<view class="lread" @click="checkflag=!checkflag">
				<view class="lreadl">
					<image :src="check" v-if="checkflag"></image>
					<image :src="ncheck" v-else></image>
				</view>
				<view class="tit">我已阅读并同意<text @click.stop="handlePrivacy">《用户授权协议》</text>及<text @click.stop="handlePrivacy">《用户隐私协议》</text></view>
			</view>
			<!-- <view class="rhbtn mt30 " @click="getEditFn" v-if="isdisabled">修改</view>
			<view class="rhbtn mt30 " @click="getSubmit" v-else>提交</view> -->
		</uni-forms>
		

		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	// import {uploadIdentify,uploadmore} from '@/utils/common.js'
	// import {getDictionaryFn} from "@/api/system/user.js"
	// import {selectValueKey} from "@/utils/common.js"
	// import {getOcrIdCard} from "@/api/system/card.js"
	import wSelect from "@/work/components/w-select/w-select.vue"
	export default {
		components: {wSelect},
		data() {
			return {
				cara:require('@/work/images/rz/cara.png'),
				carb:require('@/work/images/rz/carb.png'),
				more:require('@/work/images/rz/more.png'),
				switcha:require('@/work/images/rz/switcha.png'),
				switchb:require('@/work/images/rz/switchb.png'),
				check:require('@/static/images/check.png'),
				ncheck:require('@/static/images/ncheck.png'),
				baseUrl: config.baseUrl,
				datainfo: {
					
				},
				rules:{
					// residentName: {rules: [{required: true,errorMessage: '请输入姓名' }]},
				  },
				
				isdisabled:false,
				ptype:'add',
				filterable:true,
				chooseValue:'',
				map:{text:'dictLabel',value:'dictValue'},
				userId:this.$store.state.user.userId,
				noticeFlag:true,
				checkflag:true,
			}
		},
		onLoad: function(e) {
			if(e.id){
				this.id=e.id;
				this.ptype="edit";
				// this.isdisabled=true;
				this.getDetail()
			}
			// this.init()
		},
		methods: {
			checkPermi,
			checkRole,
			getEditFn(){
				this.isdisabled=false;
			},
			handlePrivacy(){
				this.$tab.navigateTo(`/pages/agreement`)  
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				return aite.actions;
			},
			getchange(e){
				this.datainfo.houseId=e.dictValue;
				this.datainfo.detailedAddress=e.dictLabel;
			},
			init(){
				//性别
				getDictionaryFn('gender').then(res=>{
					if(res.code==200){
						this.xbList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: Number(v.dictValue)
							}
						})
					}
				})
				
			},
			getDetail(){
				residentInfoDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						if(res.data.facePhoto){
							this.phofile=res.data.facePhoto.split(',')
						}
					}
				})
			},
			getRzFn(){
				// #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
						
					}
				}) 
			},
			getSubmit(){
				var that=this;
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					if(this.ptype=='add'){
						familyInfoAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("residentInfoList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						params.isFilter=false
						residentInfoPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("residentInfoList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}	
				})
			},
			getaddImage(type){
				if(this.isdisabled){
					return
				}
				let that = this;
				let file =[],count=9
				uni.chooseImage({
					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){
								that.phofile = that.phofile.concat(rs);
							})	
						}
					}
				});
			},
			getaddImagea(e) {
				let that = this;
				let file = []
				uni.chooseImage({
					count: 1,
					success: function(res) {
						let img = res.tempFilePaths;
						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.datainfo.idCardBack = resurl.fileName;
								if (rs && rs.length > 0) {
									var obj = {
										type: e,
										url: resurl.urlOnline
									}
									that.getOcrIdCard(obj)
								}
							} else {
								that.datainfo.idCardFront = resurl.fileName;
							}
						})
					}
				});
			},
			getOcrIdCard(obj) {
				var params = {
					image: obj.url,
					idCardSide: obj.type
				}
				getOcrIdCard(params).then(res => {
					if (res.code == 200) {
						var datainfo = res.data;
						if (obj.type == 'front') {
							this.datainfo.residentName = datainfo.realName;
							this.datainfo.residentIdCard = datainfo.idCard;
							this.datainfo.idCardAddress = datainfo.address;
						// } else {
						// 	this.datainfo.expirationDate = datainfo.expirationDate
						}
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
.check /deep/ .select-wrap{border: none;width: 100%;}
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
// .check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-forms-item__label text{min-width: 106rpx !important;text-align-last: justify;}
.check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
// .check /deep/ .is-required{font-size: 26rpx;color: #F40027;margin-right: 4rpx;}
.check{box-sizing: border-box;padding: 36rpx 24rpx 40rpx;}
.chmain{
	.checkbox{width: 80rpx;height: 40rpx;flex: 0 0 auto;margin-left: 12rpx;
		image{width: 100%;height: 100%;}
	}
	.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
		image{width: 100%;height: 100%;}
	}
}
.rztit{font-weight: bold;font-size: 30rpx;color: #000000;margin-bottom: 20rpx;}
.rzhbox{background: #F4F6F8;border-radius: 20rpx;
	.rzhboxa{padding: 24rpx;
		.tit{font-weight: bold;font-size: 30rpx;line-height: 48rpx;color: #000000;margin-bottom: 16rpx;}
		.txt{font-weight: 500;font-size: 24rpx;color: #999999;margin-bottom: 8rpx;}
		.carbox{width: 290rpx;height: 182rpx;flex: 0 0 auto;margin-left: 4rpx;
			image{width: 100%; height: 100%;}
		}
	}
}
.lread{
	display: flex;align-items: flex-start;justify-content: center;
	.lreadl{padding-top: 4rpx;
		image{width: 26rpx;height: 26rpx;margin-right: 12rpx;}
	}
	.tit{font-size: 24rpx;font-weight: 500;color: #222327;line-height: 32rpx;
	text{color:#0256FD;padding: 0 6rpx;}
}
}
</style>