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">
				<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="房屋坐落" name="realName">
					  <view class="flexc">
					  	<uni-easyinput v-model="datainfo.realName" disabled :inputBorder='false' placeholder="自动识别" />
					  	<view class="rimg"></view>
					  </view>
				  </uni-forms-item>
					<uni-forms-item label="房屋所属" name="phonenumber">
						<view class="flexc">
							<uni-easyinput v-model="datainfo.phonenumber" disabled :inputBorder='false' placeholder="自动识别" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="建筑面积" name="phonenumber">
						<view class="flexc">
							<uni-easyinput v-model="datainfo.phonenumber" disabled :inputBorder='false' placeholder="自动识别" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="房型" name="realName">
						<view class="flexjd">
							<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
								<view class="flexc ml10">
									<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择'}}</view>
									<view class="tips">室</view>
								</view>
							</picker>
							<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
								<view class="flexc ml10">
									<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择'}}</view>
									<view class="tips">厅</view>
								</view>
							</picker>
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="姓名" name="phonenumber">
						<view class="flexc">
							<uni-easyinput v-model="datainfo.phonenumber" :inputBorder='false' placeholder="请输入姓名" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="住户类型" name="realName">
						<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择住户类型'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="是否户主" name="phonenumber">
						<view class="flexc">
							<uni-easyinput v-model="datainfo.phonenumber" disabled :inputBorder='false' placeholder="自动识别" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="与户主关系" name="realName">
						<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择与户主关系'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="居住人口" name="realName">
						<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择居住人口'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="有无车位" name="realName">
						<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择有/无'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
				</uni-forms>
				<view class="rhbtn mt30" @click="getNext">确定添加</view>
			</view>
		</view>
		<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{
				rimg: require('@/mine/static/house/rimg.png'),
				cmico:require('@/mine/static/house/cmico.png'),
				baseUrl:config.baseUrl,
				datainfo:{
					realName:'',
					idCard:'',
					address:'',
					expirationDate:'',
					phonenumber:'',
					front:'',
					back:'',
				},
				syqxidx:'',
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
			}
		},
		onLoad: function() {
		
		},
		methods:{
			checkPermi, checkRole,
			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>
.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/ .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;}
</style>