property/user_wxui/health/pages/health/add - 副本.vue

<template>
	<view class="check" :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar  color="#ffffff" left-icon="left" title="健康档案"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true" @clickLeft="getBackFn">
			</uni-nav-bar>
		</view>
		<uni-forms ref="form" :model="datainfo">
			<view class="cbox">
				<view class="chmain">
					<view class="plr6">
						<view class="rztit">请上传身份证照片</view>
						<view class="flexcj mb10">
							<view class="carbox" @click="getaddImage('front')">
								<image :src="baseUrl+datainfo.front" class="img" v-if="datainfo.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+datainfo.back" class="img" v-if="datainfo.back"></image>
								<image :src="cardf" class="img" v-else></image>
								<view class="tit">拍摄国徽面</view>
								<!-- <view class="tit">身份证反面</view> -->
							</view>
						</view>
						<view class="mb4">
							<view class="cardtip">身份信息会根据上传的证件照片自动识别，支持手动输入。</view>
							<view class="cardtip">如果识别错误，可尝试再次拍照。</view>
						</view>
					</view>
					<uni-forms-item label="身份证号" required name="phonenumber">
						<view class="flexc">
							<uni-easyinput disabled v-model="datainfo.phonenumber"  :inputBorder='false' placeholder="自动识别" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="姓名" required name="phonenumber">
						<view class="flexc">
							<uni-easyinput disabled v-model="datainfo.phonenumber"  :inputBorder='false' placeholder="自动识别" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="性别" required name="phonenumber">
						<view class="flexc">
							<uni-easyinput disabled v-model="datainfo.phonenumber"  :inputBorder='false' placeholder="自动识别" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="家庭地址" required name="phonenumber">
						<view class="flexc">
							<uni-easyinput disabled  v-model="datainfo.phonenumber"  :inputBorder='false' placeholder="自动识别" />
						</view>
					</uni-forms-item>
					<picker range-key='dictLabel' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
						<uni-forms-item label="与户主关系" required name="phonenumber">
							<view class="flexc ml10">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'选择与户主关系'}}</view>
							</view>
						</uni-forms-item>
					</picker>
					<picker range-key='dictLabel' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
						<uni-forms-item label="是否党员" required name="phonenumber">
							<view class="flexc ml10">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择是/否'}}</view>
							</view>
						</uni-forms-item>
					</picker>
					<picker range-key='dictLabel' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
						<uni-forms-item label="特殊类型" name="phonenumber">
							<view class="flexc ml10">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'如有五保户等特殊类型，请选择'}}</view>
							</view>
						</uni-forms-item>
					</picker>
					<uni-forms-item label="兴趣爱好" name="phonenumber">
						<view class="flexc ml10">
							<uni-easyinput type="textarea" autoHeight v-model="text" :inputBorder='false' placeholder="请输入兴趣爱好" />
						</view>
					</uni-forms-item>
					
					<uni-forms-item label="上传头像" name="phonenumber">			
						<view class="flexe mt10">
							<view class="addimgs">
								<view class="assimg">
									<image :src="aphoto" class="img"></image>
									<image :src="rdelimg" class="delimg" @click="getDelFn"></image>
								</view>
							</view>
							<view class="addbox">
								<image :src="aphoto"></image>
								<view>添加头图</view>
							</view>
						</view>	
					</uni-forms-item>
				</view>
				<view class="rhbtn mt30 bga" @click="getNext">提交</view>
			</view>
		</uni-forms>
		

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

<script>
	import config from '@/config'
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数
	import {
		uploadIdentify
	} from '@/utils/common.js'
	export default {
		components: {},
		data() {
			return {
				cardz:require('@/health/static/health/cardz.png'),
				cardf:require('@/health/static/health/cardf.png'),
				aphoto: require('@/work/static/service/photo.png'),
				rdelimg: require('@/work/static/service/rdel.png'),
				baseUrl: config.baseUrl,
				checkflag:true,
				nvaHeight:44,
				backgroundColor: "transparent",
				datainfo: {
					sex:1,
					realName: '',
					idCard: '',
					address: '',
					expirationDate: '',
					phonenumber: '',
					front: '',
					back: '',
				},
				syqxidx:'',
				sexs: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}],
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight)+44;
				}
			})
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#48CC9A'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		methods: {
			checkPermi,
			checkRole,
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			bindDateChange(e){
				var val=e.detail.value;
				// this.datainfo.applicationBank=this.sdyhlist[val].value;
				// this.applicationBank=this.sdyhlist[val].label;
			},
			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.datainfo.front = resurl.fileName;
								} else {
									that.datainfo.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 datainfo = res.data;
						if (obj.type == 'front') {
							this.datainfo.realName = datainfo.realName;
							this.datainfo.idCard = datainfo.idCard;
							this.datainfo.address = datainfo.address;
						} else {
							this.datainfo.expirationDate = datainfo.expirationDate
						}
					}
				})
			}
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
	.bga{background-color: #46CB99;}
.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-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{background: linear-gradient(180deg, #45CB99 0%, rgba(238,227,197,0) 100%) no-repeat;background-size: 100% 782rpx;min-height: 100vh;box-sizing: border-box;padding: 0 18rpx 22rpx;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;padding: 30rpx 24rpx 46rpx;
	.chmain{
		padding: 0 8rpx;
		.upbox{height: 224rpx;background: #EFF4FF;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 8rpx;overflow: auto;
			.img{width: 100%;height: 100%;}
			.addimg{width: 70rpx;height: 70rpx;margin-bottom: 16rpx;}
			view{font-weight: bold;font-size: 26rpx;color: #4C6686;}
		}
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
		.checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
		.aphoto{padding: 0 24rpx;border-left: 2rpx solid #e6e6e6;margin-left: 26rpx;
			image{width: 40rpx;height: 38rpx;}
		}
	}
	
}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.rztit{font-weight: bold;font-size: 30rpx;color: #222327;margin-bottom: 30rpx;}
	.carbox{width: 300rpx;border-radius: 14rpx;overflow: hidden;
		.img{width: 300rpx;height: 208rpx;}
		.tit{width: 100%;height: 56rpx;background: #7CC2A8;text-align: center;font-weight: 500;
font-size: 26rpx;line-height: 56rpx;
color: #FFFFFF;}
	}
	.cardtip{font-weight: 500;font-size: 24rpx;color: #999999;line-height: 40rpx;}
.addimgs{display: flex;align-items: center;flex-wrap: wrap;justify-content: flex-end;
	
	.assimg{width: 128rpx;height: 128rpx;position: relative;overflow: hidden;margin: 0 0 20rpx 24rpx;
		.img{width: 100%;height: 100%;}
		.delimg{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;}
	}
}
.addbox{width: 160rpx;height: 128rpx;background: #F0F0F0;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-left: 24rpx;margin-bottom: 20rpx;flex: 0 0 auto;
		image{width: 48rpx;height: 42rpx;margin-bottom: 12rpx;}
		view{font-weight: 500;font-size: 24rpx;color: #666666;}
	}
.tips{font-weight: bold;color: #272727;font-size: 26rpx;margin-left: 8rpx;}
</style>