property/user_ui/mine/pages/house/addhouse.vue

<template>
	<view class="check">
		<view class="cbox">
			<view class="chtop flexc">
				<view class="line"></view>
				<view>房屋信息</view>
			</view>
			<view class="chmain">
				<uni-forms ref="form" :model="datainfo" :rules="rules">
				<view class="upbox" @click="getaddImage">
					<image :src="baseUrl+datainfo.front" class="img" v-if="datainfo.front"></image>
					<image :src="cmico" class="addimg"></image>
					<view>扫描房产证自动填写</view>
				</view>
				<uni-forms-item label="房产证" required name="location" v-if="datainfo.houseImage">
					<view class="flexc">
						<view class="flex1"></view>
						<image :src="baseUrl+datainfo.houseImage" class="fczimg" v-if="datainfo.houseImage" @click="getPreview(datainfo.houseImage)"></image>
						<view class="rimg"></view>
					</view>
				</uni-forms-item>
				  <uni-forms-item label="房屋坐落" required name="location">
					  <view class="flexc">
					  	<uni-easyinput :disabled="isdisabled" v-model="datainfo.location" :inputBorder='false' placeholder="自动识别" />
					  	<view class="rimg"></view>
					  </view>
				  </uni-forms-item>
				  <uni-forms-item label="房屋类型" required name="houseType">
				  	<picker range-key='dictLabel' :disabled="isdisabled" :value="fwlxidx" :range="fwlxList"   @change='bindDateChangee'>
				  	<view class="flexc mh35">
				  		<view class="flex1 txr f13 co27" v-if="datainfo.houseType&&!fwlx">{{statusFormats(datainfo.houseType,fwlxList,'fwlx')}}</view>
				  		<view class="flex1 txr f13" v-else :class="fwlx?'co27':'coa'">{{fwlx||"请选择房屋类型"}}</view>
				  		<view class="rimg"><image :src="rimg"></image></view>
				  	</view>
				  	</picker>
				  </uni-forms-item>
					<uni-forms-item label="权利人姓名" name="ownerName">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.ownerName" :inputBorder='false' placeholder="自动识别" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="权利类型" name="rightType">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="qllxidx" :range="qllxList"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.rightType&&!qllx">{{statusFormats(datainfo.rightType,qllxList,'qllx')}}</view>
								<view class="flex1 txr f13" v-else :class="qllx?'co27':'coa'">{{qllx||"请选择权利类型"}}</view>
								<view class="flex0" @click.stop="">
									<uni-icons v-if="datainfo.rightType" class="content-clear-icon" type="clear" size="24" color="#c0c4cc" @click="onClear('qllx')"></uni-icons>
								</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="建筑面积" required name="area">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.area" :inputBorder='false' placeholder="自动识别" />
							<view class="tips">m²</view>
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="不动产单元号" name="propertyUnitNumber">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.propertyUnitNumber" :inputBorder='false' placeholder="请输入不动产单元号" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="相关的字第号" name="documentNumber">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.documentNumber" :inputBorder='false' placeholder="请输入相关的字第号" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="小区名称" name="communityName">
						<view class="flexc">
							<uni-easyinput disabled v-model="datainfo.communityName" :inputBorder='false' placeholder="请输入小区名称" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<!-- <uni-forms-item label="楼栋" required name="loudong">
						<view class="flexcc">
							<view class="flexc ml10">
								<uni-easyinput :disabled="isdisabled" v-model="datainfo.loudong" :inputBorder='false' placeholder="请输入" />
								<view class="tips">栋</view>
							</view>
							<view class="flexc ml10">
								<uni-easyinput :disabled="isdisabled" v-model="datainfo.danyuan" :inputBorder='false' placeholder="请输入" />
								<view class="tips">单元</view>
							</view>
							<view class="rimg"></view>
						</view>
					</uni-forms-item> -->
					<!-- <uni-forms-item label="门牌号" required name="xxaddress">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.xxaddress" :inputBorder='false' placeholder="请输入门牌号" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item> -->
					<uni-forms-item label="门牌号" required name="detailedAddress">
						<view class="flexc">
							<uni-easyinput disabled v-model="datainfo.detailedAddress" :inputBorder='false' placeholder="请输入门牌号" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="使用期限" name="usagePeriod">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.usagePeriod" :inputBorder='false' placeholder="请输入使用期限" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="登记日期" name="registrationDate">
						<!-- <picker mode="timed" :disabled="isdisabled"  @change='bindDateChangea'>
							<view class="flexc">
								<view class="flex1 txr f13"  :class="datainfo.registrationDate?'co27':'coa'">{{datainfo.registrationDate||"请选择登记日期"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker> -->
						<!-- :hide-second='true' -->
						<view class="flexc">
							<uni-datetime-picker  :disabled="isdisabled" :class="datainfo.registrationDate?'co27':'coa'" type="datetime" placeholder="请选择登记日期" :border="false"  v-model="datainfo.registrationDate" @change="changeLog" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					
					<uni-forms-item label="共有姓名" name="coOwner">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.coOwner" :inputBorder='false' placeholder="请输入共有姓名" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="共有情况" name="coOwnership">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.coOwnership" :inputBorder='false' placeholder="请输入共有情况" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="房屋状态" name="houseStatus">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="fwztidx" :range="fwztList"   @change='bindDateChangeb'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.houseStatus&&!fwzt">{{statusFormats(datainfo.houseStatus,fwztList,'fwzt')}}</view>
								<view class="flex1 txr f13" v-else :class="fwzt?'co27':'coa'">{{fwzt||"请选择房屋状态"}}</view>
								<view class="flex0" @click.stop="">
									<uni-icons v-if="datainfo.houseStatus" class="content-clear-icon" type="clear" size="24" color="#c0c4cc" @click="onClear('fwzt')"></uni-icons>
								</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="房屋用途" name="usageType">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="fwytidx" :range="fwytList"   @change='bindDateChangec'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.usageType&&!fwyt">{{statusFormats(datainfo.usageType,fwytList,'fwyt')}}</view>
								<view class="flex1 txr f13" v-else :class="fwyt?'co27':'coa'">{{fwyt||"请选择房屋用途"}}</view>
								<view class="flex0" @click.stop="">
									<uni-icons v-if="datainfo.usageType" class="content-clear-icon" type="clear" size="24" color="#c0c4cc" @click="onClear('fwyt')"></uni-icons>
								</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="有无车位" name="hasParkingSpace">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="ywcwidx" :range="ywcwList"   @change='bindDateChanged'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.hasParkingSpace&&!ywcw">{{statusFormats(datainfo.hasParkingSpace,ywcwList,'ywcw')}}</view>
								<view class="flex1 txr f13" v-else :class="ywcw?'co27':'coa'">{{ywcw||"请选择有/无"}}</view>
								<view class="flex0" @click.stop="">
									<uni-icons v-if="datainfo.hasParkingSpace" class="content-clear-icon" type="clear" size="24" color="#c0c4cc" @click="onClear('ywcw')"></uni-icons>
								</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="车位号" name="parkingNumber">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.parkingNumber" :inputBorder='false' placeholder="请输入车位号" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					
				</uni-forms>
				<view class="rhbtn mt30" @click="getEditFn" v-if="isdisabled">修改</view>
				<view class="rhbtn mt30" @click="getSubmit" v-else>确定{{ptype=='add'?'添加':'修改'}}</view>
			</view>
		</view>
		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {uploadIdentify,selectValueKey,geocodeAddress,selectDictLabelkey} from '@/utils/common.js'
	import {getDictionaryFn} from "@/api/system/user.js"
	import {houseInfoAdd,houseInfoPut,houseInfoDet} from "@/api/work/work.js"
	export default{
		components:{},
		data(){
			return{
				rimg: require('@/mine/static/house/rimg.png'),
				cmico:require('@/mine/static/house/cmico.png'),
				baseUrl:config.baseUrl,
				datainfo:{
					 // "houseId":"",//房屋信息主键
					 "ownerName":"",//权利人姓名
					 "location":"",//房屋坐落位置
					 "rightType":"",//权利类型，如所有权、使用权等
					 "area":"",//房屋面积，单位为平方米
					 "houseType":null,//房屋类型 1:普通住宅,2:洋房
					 "documentNumber":"",//房屋相关的字第号
					 "propertyUnitNumber":"",//不动产单元号
					 "coOwnership":"",//房屋的共有情况，如共有比例等
					 "usageType":"",//房屋用途，如住宅、商业等
					 "usagePeriod":"",//房屋使用期限
					 "registrationDate":"",//房屋登记日期
					 "coOwner":"",//共有人姓名，多个共有人可以用逗号分隔
					 "detailedAddress":"",//房屋的门牌号
					 "hasParkingSpace":"",//是否有车位，Y表示有，N表示无
					 "communityName":"",//房屋所在小区名称
					 "houseStatus":"",//房屋状态：1-自住，2-出租，3-空闲，4-待售
					 "parkingNumber":'',//车位号
					 'houseImage':'',//房本照片
				},
				rules: {
				  location: {rules: [{required: true,errorMessage: '请输入房屋坐落位置' }]},
				  // houseType: {rules: [{required: true,errorMessage: '请选择房屋类型' }]},
				  // detailedAddress: {rules: [{required: true,errorMessage: '请输入门牌号' }]},
				  area: {rules: [{required: true,errorMessage: '请输入面积' }]},
				},
				id:'',
				ptype:'add',
				fwzt:'',
				qllx:'',
				fwyt:'',
				ywcw:'',
				fwlx:'',
				fwztidx:'',
				qllxidx:'',
				fwytidx:'',
				ywcwidx:'',
				fwlxidx:'',
				fwztList:[],
				qllxList:[],
				fwytList:[],
				fwlxList:[],
				ywcwList:[{dictLabel:'有',dictValue:'Y'},{dictLabel:'无',dictValue:'N'},],
				isdisabled:false,
				latitude:'',
				longitude:"",
				starttime:'',
			}
		},
		onLoad: function(e) {
			if(e.id){
				this.id=e.id;
				this.ptype="edit";
				// this.isdisabled=true;
				this.getDetail()
			}
			this.time()
			this.init()
		},
		methods:{
			checkPermi, checkRole,
			getEditFn(){
				this.isdisabled=false;
			},
			onClear(type){
				 if(type=='qllx'){
					this.datainfo.rightType='';
					this.qllx='';
				}else if(type=='fwzt'){
					this.datainfo.houseStatus='';
					this.fwzt='';
				}else if(type=='fwyt'){
					this.datainfo.usageType='';
					this.fwyt='';
				}else if(type=='ywcw'){
					this.datainfo.hasParkingSpace='';
					this.ywcw='';
				}
			},
			time() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var h = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
				// var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
				// 	'0' + s) : s);
				// var kaTime = yearStr + ' ' + timeStr;
				this.starttime=yearStr
				// return kaTime
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				if(type=='qllx'){
					this.qllxidx=aite.key;
				}else if(type=='fwzt'){
					this.fwztidx=aite.key;
				}else if(type=='fwyt'){
					this.fwytidx=aite.key;
				}else if(type=='ywcw'){
					this.ywcwidx=aite.key;
				}else if(type=='fwlx'){
					this.fwlxidx=aite.key;
				}
				return aite.actions;
			},
			statuslabFormats(data, list,type) {
				var aite=selectDictLabelkey(list, data);
				if(type=='qllx'){
					this.qllxidx=aite.key;
				}else if(type=='fwzt'){
					this.fwztidx=aite.key;
				}else if(type=='fwyt'){
					this.fwytidx=aite.key;
				}else if(type=='ywcw'){
					this.ywcwidx=aite.key;
				}else if(type=='fwlx'){
					this.fwlxidx=aite.key;
				}
				return aite.actions;
			},
			init(){
				// 房屋状态
				getDictionaryFn('house_status').then(res=>{
					if(res.code==200){
						this.fwztList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				// 房屋类型
				getDictionaryFn('house_type').then(res=>{
					if(res.code==200){
						this.fwlxList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				//权利类型
				getDictionaryFn('types_rights').then(res=>{
					if(res.code==200){
						this.qllxList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				//房屋用途
				getDictionaryFn('use_remises').then(res=>{
					if(res.code==200){
						this.fwytList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
			},
			bindDateChange(e){
				var val=e.detail.value;
				this.datainfo.rightType=this.qllxList[val].dictValue;
				this.qllx=this.qllxList[val].dictLabel;
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.datainfo.registrationDate=val;
			},
			bindDateChangeb(e){
				var val=e.detail.value;
				this.datainfo.houseStatus=this.fwztList[val].dictValue;
				this.fwzt=this.fwztList[val].dictLabel;
			},
			bindDateChangec(e){
				var val=e.detail.value;
				this.datainfo.usageType=this.fwytList[val].dictValue;
				this.fwyt=this.fwytList[val].dictLabel;
			},
			bindDateChanged(e){
				var val=e.detail.value;
				this.datainfo.hasParkingSpace=this.ywcwList[val].dictValue;
				this.ywcw=this.ywcwList[val].dictLabel;
			},
			bindDateChangee(e){
				var val=e.detail.value;
				this.datainfo.houseType=this.fwlxList[val].dictValue;
				this.fwlx=this.fwlxList[val].dictLabel;
			},
			getDetail(){
				houseInfoDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						// if(res.data&&res.data.detailedAddress){
						// 	this.datainfo.xxaddress=res.data.detailedAddress
						// 	var address=res.data.detailedAddress;
						// 	var indxa=address.indexOf('栋')
						// 	var indxb=address.indexOf('单元')
						// 	var a = address.split(/[栋单元]/).filter(Boolean);
						// 	this.datainfo.loudong=a[0];
						// 	this.datainfo.danyuan=a[1];
						// 	this.datainfo.xxaddress=a[2];
						// }
					}
				})
			},
			getSubmit(){
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					// if(!params.loudong||!params.danyuan){
					// 	this.$toast("请输入楼栋")
					// 	return
					// }
					// if(!params.xxaddress){
					// 	this.$toast("请输入门牌号")
					// 	return
					// }
					// params.detailedAddress=`${params.loudong?params.loudong+'栋':''}` + `${params.danyuan?params.danyuan+'单元':''}` + params.xxaddress;
					if(this.ptype=='add'){
						houseInfoAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("refHouseList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						houseInfoPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("refHouseList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}
				})
			},
			getPreview(img) {
				var newArr=[];
				var url=this.baseUrl+img
				newArr.push(url)
				uni.previewImage({
					urls: newArr,
					current:0,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			getaddImage(e){
				let that = this;
				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];
								that.datainfo.houseImage=resurl.fileName
								if(rs&&rs.length>0){
									var obj={
										type:e,
										url:resurl.urlOnline
									}
									that.getOcrIdCard(obj)
								}
							})	
						}
					}
				});
			},
			getOcrIdCard(obj){
				var params={
					image:obj.url
				}
				getrealEstateCertificatee(params).then(res=>{
					if(res.code==200){
						var datainfo=res.data;
						this.datainfo.ownerName=datainfo.ownerName;
						this.datainfo.location=datainfo.location;
						if(datainfo.rightType){
							this.datainfo.rightType=this.statuslabFormats(datainfo.rightType,this.qllxList,'qllx');
							this.qllx=datainfo.rightType
						}
						this.datainfo.area=datainfo.area;
						this.datainfo.documentNumber=datainfo.documentNumber;
						this.datainfo.propertyUnitNumber=datainfo.propertyUnitNumber;
						this.datainfo.coOwnership=datainfo.coOwnership;
						if(datainfo.usageType){
							this.datainfo.usageType=this.statuslabFormats(datainfo.usageType,this.fwytList,'fcz');
							this.fwyt=datainfo.usageType;
						}
						this.datainfo.usagePeriod=datainfo.usagePeriod;
						this.datainfo.registrationDate=datainfo.registrationDate;
						this.datainfo.coOwner=datainfo.coOwner;
					}
				})
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.coa /deep/ .uni-date__x-input{text-align: right;color: #AAAAAA;}
.check /deep/ .uni-date-editor--x__disabled{opacity: 1;}
.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 /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/ .uni-forms-item__label text{width: 110rpx;text-align-last: justify;}
.check /deep/ .uni-forms-item__label .is-required{width: auto;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check{min-height: 100vh;padding: 20rpx 18rpx 22rpx;box-sizing: border-box;display: flex;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;padding-bottom: 28rpx;
	.chtop{padding-top: 32rpx;margin-bottom: 22rpx;
		.line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
		view{font-weight: bold;font-size: 32rpx;color: #272727;}
	}
	.chmain{
		padding: 0 32rpx;
		.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: 90rpx;height: 90rpx;margin-bottom: 8rpx;}
			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%;}
	}
}
.tips{font-weight: bold;color: #272727;font-size: 26rpx;margin-left: 8rpx;}
.fczimg{width: 100rpx;height: 100rpx;}
</style>