property/user_ui/health/pages/health/add.vue

<template>
	<!-- :style="'padding-top:'+nvaHeight+'px;'" -->
	<view class="check">
		<!-- <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" :rules="rules">
			<view class="cbox">
				<view class="chmain">
					<view class="plr6">
						<view class="rztit">请上传身份证照片</view>
						<view class="flexcj mb10">
							<view class="carbox" @click="getaddImagea('front')">
								<image :src="baseUrl+datainfo.idCardBack" class="img" v-if="datainfo.idCardBack"></image>
								<image :src="cardz" class="img" v-else></image>
								<view class="tit">拍摄人像面</view>
							</view>
							<view class="carbox" @click="getaddImagea('back')">
								<image :src="baseUrl+datainfo.idCardFront" class="img" v-if="datainfo.idCardFront"></image>
								<image :src="cardf" class="img" v-else></image>
								<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="residentIdCard">
						<view class="flexc">
							<uni-easyinput  disabled v-model="datainfo.residentIdCard"  :inputBorder='false' placeholder="自动识别" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="姓名" required name="residentName">
						<view class="flexc">
							<uni-easyinput  disabled v-model="datainfo.residentName"  :inputBorder='false' placeholder="自动识别" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="性别" required name="residentGender">
						<view class="flexc">
							<view class="flex1"></view>
							<uni-data-checkbox  :map="map" :disabled="isdisabled" selectedColor="#0156FE" selectedTextColor="#272727" v-model="datainfo.residentGender" :localdata="xbList" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="家庭地址" required name="idCardAddress">
						<view class="flexc">
							<uni-easyinput  disabled  v-model="datainfo.idCardAddress"  :inputBorder='false' placeholder="自动识别" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="手机号码" required name="residentPhone">
						<view class="flexc">
							<uni-easyinput  :disabled="isdisabled"  v-model="datainfo.residentPhone"  :inputBorder='false' placeholder="请输入手机号码" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="居住门户" required 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>
					
					<picker range-key='dictLabel' :disabled="isdisabled" :value="sfhzidx" :range="sfList"   @change='bindDateChange'>
						<uni-forms-item label="是否户主" required name="isHouseholder">
							<view class="flexc mh35">
								<view class="flex1 txr f13 co27" v-if="datainfo.isHouseholder&&!sfhz">{{statusFormats(datainfo.isHouseholder,sfList,'sfhz')}}</view>
								<view class="flex1 txr f13" v-else :class="sfhz?'co27':'coa'">{{sfhz||"请选择是/否"}}</view>
								
							</view>
						</uni-forms-item>
					</picker>
					<picker range-key='dictLabel' :disabled="isdisabled" :value="hzgxidx" :range="hzgxList"   @change='bindDateChangea'>
						<uni-forms-item label="与户主关系" required name="residentRelationship">
							<view class="flexc mh35">
								<view class="flex1 txr f13 co27" v-if="datainfo.residentRelationship&&!hzgx">{{statusFormats(datainfo.residentRelationship,hzgxList,'hzgx')}}</view>
								<view class="flex1 txr f13" v-else :class="hzgx?'co27':'coa'">{{hzgx||"请选择与户主关系"}}</view>
								
							</view>
						</uni-forms-item>
					</picker>
					<picker range-key='dictLabel' :disabled="isdisabled" :value="sfzhidx" :range="sfList"   @change='bindDateChangeb'>
						<uni-forms-item label="是否租户" required name="isTenant">
							<view class="flexc mh35">
								<view class="flex1 txr f13 co27" v-if="datainfo.isTenant&&!sfzh">{{statusFormats(datainfo.isTenant,sfList,'sfzh')}}</view>
								<view class="flex1 txr f13" v-else :class="sfzh?'co27':'coa'">{{sfzh||"请选择是/否"}}</view>
								
							</view>
						</uni-forms-item>
					</picker>
					<picker range-key='dictLabel' :disabled="isdisabled" :value="rymmidx" :range="rymmList"   @change='bindDateChangec'>
						<uni-forms-item label="人员面貌" required name="residentAppearance">
							<view class="flexc mh35">
								<view class="flex1 txr f13 co27" v-if="datainfo.residentAppearance&&!rymm">{{statusFormats(datainfo.residentAppearance,rymmList,'rymm')}}</view>
								<view class="flex1 txr f13" v-else :class="rymm?'co27':'coa'">{{rymm||"请选择人员面貌"}}</view>
								
							</view>
						</uni-forms-item>
					</picker>
					<picker range-key='dictLabel' :disabled="isdisabled" :value="dslxidx" :range="dslxList"   @change='bindDateChanged'>
						<uni-forms-item label="特殊类型" name="specialType">
							<view class="flexc mh35">
								<view class="flex1 txr f13 co27" v-if="datainfo.specialType&&!dslx">{{statusFormats(datainfo.residentAppearance,dslxList,'dslx')}}</view>
								<view class="flex1 txr f13" v-else :class="dslx?'co27':'coa'">{{dslx||"如有五保户等特殊类型，请选择"}}</view>
								
							</view>
						</uni-forms-item>
					</picker>
					<uni-forms-item label="工作单位"  name="residentEmployer">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled"  v-model="datainfo.residentEmployer"  :inputBorder='false' placeholder="请输入工作单位" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="兴趣爱好" name="residentHobby">
						<view class="flexc ml10">
							<uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.residentHobby" :inputBorder='false' placeholder="请输入兴趣爱好" />
						</view>
					</uni-forms-item>
					
					<uni-forms-item label="上传头像" name="facePhoto">			
						<view class="addimgs">
							<block v-if="phofile&&phofile.length">
								<view class="assimg" v-for="(ite,idx) in phofile" :key="idx" @click="getPreview(idx,phofile)">
									<image :src="baseUrl+ite" class="img"></image>
									<image :src="rdelimg" class="delimg" @click.stop="getDelFn(idx,'fm')"></image>
								</view>
							</block>
							<view class="addbox" @click="getaddImage">
								<image :src="aphoto"></image>
								<view>添加图片</view>
							</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="rhbtn mt30 bga" @click="getEditFn" v-if="isdisabled">修改</view>
				<view class="rhbtn mt30 bga" @click="getSubmit" v-else>提交</view>
			</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 {houseInfolistNoPage} from "@/api/work/work.js"
	import {residentInfoAdd,residentInfoPut,residentInfoDet} from "@/api/work/people.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 {
				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: {
					// "residentId":"",//居住人员主键
					"houseId":"",//关联房屋信息表的house_id
					// "userId":"",//关联sys_user表中user_id
					"detailedAddress":"",//居住人员的详细门牌号
					"residentName":"",//居住人员姓名
					"residentIdCard":"",//居住人员身份证号码，18位
					"residentBirthday":"",//居住人员出生日期
					// "yearsOld":"",//年龄
					"residentPhone":"",//居住人员手机号
					"residentGender":'',//居住人员性别：1-男，2-女
					"residentRelationship":"",//居住人员与户主的关系，如父子、夫妻等
					"isHouseholder":"",//是否是户主 N不是 Y是
					"isTenant":"",//是否是租户：Y-是，N-否
					"residentEmployer":"",//居住人员工作单位
					"residentAppearance":"",//居住人员面貌，如党员、群众等
					"residentHobby":"",//爱好
					"facePhoto":"",//人脸地址
					"idCardAddress":"",//身份证住址
					"specialType":"",//特殊类型
					"idCardFront":"",//身份证正面
					"idCardBack":"",//身份证反面
				},
				rules:{
					residentIdCard: {rules: [{required: true,errorMessage: '请输入身份证号码' }]},
					residentName: {rules: [{required: true,errorMessage: '请输入姓名' }]},
					residentGender: {rules: [{required: true,errorMessage: '请选择性别' }]},
					houseId: {rules: [{required: true,errorMessage: '请选择居住门户' }]},
					detailedAddress: {rules: [{required: true,errorMessage: '请输入居住地址' }]},
					isHouseholder: {rules: [{required: true,errorMessage: '请选择是否户主' }]},
					// residentRelationship: {rules: [{required: true,errorMessage: '请选择与户主关系' }]},
					// isTenant: {rules: [{required: true,errorMessage: '请选择是否租户' }]},
					// residentAppearance: {rules: [{required: true,errorMessage: '请选择人员面貌' }]},
					residentPhone: {rules: [{required: true,errorMessage: '请输入手机号'}, {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,errorMessage:'请输入正确的手机号码'}]},
				  },
				sfhz:"",
				hzgx:"",
				sfzh:"",
				rymm:"",
				dslx:"",
				sfhzidx:0,
				hzgxidx:0,
				sfzhidx:0,
				rymmidx:0,
				sfhzidx:0,
				dslxidx:0,
				list:[],
				sfList:[],
				hzgxList:[],
				rymmList:[],
				dslxList:[],
				xbList:[],
				phofile:[],
				fwlist:[],
				isdisabled:false,
				ptype:'add',
				filterable:true,
				chooseValue:'',
				map:{text:'dictLabel',value:'dictValue'},
				userId:this.$store.state.user.userId,
			}
		},
		onLoad: function(e) {
			if(e.id){
				this.id=e.id;
				this.ptype="edit";
				this.isdisabled=true;
				this.getDetail()
			}
			this.init()
			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,
			getEditFn(){
				this.isdisabled=false;
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				if(type=='sfhz'){
					this.sfhzidx=aite.key
				}else if(type=='hzgx'){
					this.hzgxidx=aite.key;
				}else if(type=='sfzh'){
					this.sfzhidx=aite.key;
				}else if(type=='rymm'){
					this.rymmidx=aite.key;
				}
				return aite.actions;
			},
			getchange(e){
				this.datainfo.houseId=e.dictValue;
				this.datainfo.detailedAddress=e.dictLabel;
			},
			init(){
				var params={
					userId:this.userId,
					pageSize: 100,
					pageNum: 1,
				}
				houseInfolistNoPage(params).then(res=>{
					if(res.code==200){
						this.fwlist= res.rows.map(v => {
							return {
								dictLabel: v.detailedAddress,
								dictValue: v.houseId,
								location: v.location
							}
						})
						if(res.rows&&res.rows.length<2){
							var newObj=res.rows[0];
							this.datainfo.houseId=newObj.houseId;
							this.datainfo.detailedAddress=newObj.detailedAddress
						}
					}
				})
				// 是否
				getDictionaryFn('sys_yes_no').then(res=>{
					if(res.code==200){
						this.sfList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				//户主关系
				getDictionaryFn('relationship_householder').then(res=>{
					if(res.code==200){
						this.hzgxList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				//人员面貌
				getDictionaryFn('affiliation_personnel').then(res=>{
					if(res.code==200){
						this.rymmList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				// 特殊类型
				
				getDictionaryFn('special_type').then(res=>{
					if(res.code==200){
						this.dslxList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				//性别
				getDictionaryFn('gender').then(res=>{
					if(res.code==200){
						this.xbList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: Number(v.dictValue)
							}
						})
					}
				})
				
			},
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			bindDateChange(e){
				var val=e.detail.value;
				this.datainfo.isHouseholder=this.sfList[val].dictValue;
				this.sfhz=this.sfList[val].dictLabel;
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.datainfo.residentRelationship=this.hzgxList[val].dictValue;
				this.hzgx=this.hzgxList[val].dictLabel;
			},
			bindDateChangeb(e){
				var val=e.detail.value;
				this.datainfo.isTenant=this.sfList[val].dictValue;
				this.sfzh=this.sfList[val].dictLabel;
			},
			bindDateChangec(e){
				var val=e.detail.value;
				this.datainfo.residentAppearance=this.rymmList[val].dictValue;
				this.rymm=this.rymmList[val].dictLabel;
			},
			bindDateChanged(e){
				var val=e.detail.value;
				this.datainfo.specialType=this.dslxList[val].dictValue;
				this.dslx=this.dslxList[val].dictLabel;
			},
			getDetail(){
				residentInfoDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data
					}
				})
			},
			getSubmit(){
				var that=this;
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					// var phofile=JSON.parse(JSON.stringify(this.phofile))
					// if(phofile&&phofile.length){
					// 	params.equipmentPhotos=this.phofile.join(',');
					// }
					// if(!params.assetId){
					// 	this.$toast('请选择资产类型')
					// 	return
					// }
					// if(!params.equipmentName){
					// 	this.$toast('请输入资产名称')
					// 	return
					// }
					if(!params.detailedAddress){
						this.$toast('请选择居住门户')
						return
					}
					let _IDRe18 =
						/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
					let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
					// 校验身份证：
					if (params.residentIdCard&&!_IDRe18.test(params.residentIdCard) && !_IDre15.test(params.residentIdCard)) {
						this.$toast("请输入正确身份证号")
						return
					}
					if(this.ptype=='add'){
						residentInfoAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("residentInfoList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						residentInfoPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("residentInfoList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}	
				})
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			getDelFn(idx,type){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.phofile.splice(idx,1)	
						} else if (res.cancel) {
						}
					}
				});
			},
			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>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
	.bga{background-color: #46CB99;}
.check /deep/ .select-wrap{border: none;width: 100%;}
.mh35{min-height: 70rpx;display: flex;align-items: center;}
.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>