property/property_ui/people/pages/people/comeadd.vue

<template>
	<view class="check">
		<uni-forms ref="form" :model="datainfo" :rules="rules">
			<view class="cbox">
				<view class="chtop flexc">
					<image :src="line"></image>
					<view>访客信息</view>
				</view>
				<view class="chmain">
					<!-- 选择房屋 -->
					<uni-forms-item label="访客姓名" name="name">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.name"  :inputBorder='false' placeholder="请输入访客姓名" />
							<!-- <uni-data-checkbox selectedColor="#0156FE" selectedTextColor="#272727" v-model="datainfo.sex" :localdata="sexs" /> -->
						</view>
					</uni-forms-item>
					<uni-forms-item label="来访人数" name="num">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.num" type="Number" :inputBorder='false' placeholder="请输入来访人数" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="来访时间" name="visitorTime" v-if="tabval==1">
						<view class="flexc">
							<uni-datetime-picker :start="starttime"  :disabled="isdisabled" :class="datainfo.visitorTime?'co27':'coa'" type="date" placeholder="请选择来访时间" :border="false" :hide-second='true' v-model="datainfo.visitorTime" @change="changeLog" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
						<!-- <picker range-key='dictLabel' :value="vxlbidx" :range="vxlbList"   @change='bindDateChangea'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.maintenanceCategory&&!vxlb">{{statusFormats(datainfo.maintenanceCategory,vxlbList,'vxlb')}}</view>
								<view class="flex1 txr f13" v-else :class="vxlb?'co27':'coa'">{{vxlb||"请选择来访时间"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker> -->
					</uni-forms-item>
					<uni-forms-item label="来访事由" name="reason">
						<view class="flexc">
							<uni-easyinput  :disabled="isdisabled" v-model="datainfo.reason" :inputBorder='false' placeholder="请输入来访事由" />
							<view class="rimg"><image :src="rimg"></image></view>
							<!-- <picker range-key='dictLabel' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
								<view class="rimg"><image :src="rimg"></image></view>
							</picker> -->
						</view>
					</uni-forms-item>
					<uni-forms-item label="来访门户" name="portalId">
						<!-- <view class="flexc">
							<uni-easyinput v-model="datainfo.houseAddress" :inputBorder='false' placeholder="请输入门户号" />
							<view class="rimg"></view>
						</view> -->
						<w-select
						      style="margin-left: 20rpx;" 
						     v-model="chooseValue"
						      :list='fwlist'
						      valueName='label' 
						      keyName="value"
							  :chosevalue="datainfo.houseAddress"
							  :filterable='filterable'
						      @change='getchange'
						    >
						    </w-select>
					</uni-forms-item>
				</view>
			</view>
			<view class="cbox">
				<view class="chtop flexc">
					<image :src="line"></image>
					<view>驾车信息</view>
				</view>
				<view class="chmain">
					<!-- <view class="upbox" @click="getaddImage">
					<image :src="baseUrl+datainfo.front" class="img" v-if="datainfo.front"></image>
					<image :src="car" class="addimg"></image>
					<view>拍摄车辆照片自动识别</view>
				</view> -->
					<uni-forms-item label="是否驾车" name="isCar">
						<view class="flexc" @click="getChangeFn">
							<view class="flex1"></view>
							<image :src="check" v-if="datainfo.isCar=='Y'" class="checkimg"></image>
							<image :src="ncheck" v-else class="checkimg"></image>
						</view>
					</uni-forms-item>
					<uni-forms-item label="车牌号码" name="plateNumber">
						<view class="flexc">
							<!-- disabled -->
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.plateNumber" :inputBorder='false' placeholder="拍照自动识别" />
							<view class="aphoto" @click="getaddImagea">
								<image :src="aphoto"></image>
							</view>
							
						</view>
					</uni-forms-item>
					<uni-forms-item label="手机号码" name="mobileNumber">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.mobileNumber" :inputBorder='false' placeholder="请输入手机号码" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<view class="tips" v-if="tabval==1">
						如驾车，填写车牌后，访客到访时，车闸机自动打开
					</view>
				</view>
			</view>
		</uni-forms>
		<view class="pdlr12 mt63">
			<view class="rhbtn" @click="getEditFn" v-if="isdisabled">修改</view>
			<view class="rhbtn" @click="getSubmit" v-else>确定</view>
		</view>

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

<script>
	import config from '@/config'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {uploadIdentify,uploadmore} from '@/utils/common.js'
	import {visitorAdd,reservAdd,visitorDet,reservDet,visitorPut,reservPut} from "@/api/work/people.js"
	import {houseInfolistNoPage} from "@/api/work/work.js"
	import {getlicensePlate} from "@/api/system/card.js"
	import wSelect from "@/people/components/w-select/w-select.vue"
	export default {
		components: {wSelect},
		data() {
			return {
				line: require('@/car/static/car/line.png'),
				car: require('@/car/static/car/carico.png'),
				rimg: require('@/people/static/people/rimg.png'),
				aphoto: require('@/people/static/people/aphoto.png'),
				check: require('@/people/static/people/check.png'),
				ncheck: require('@/people/static/people/ncheck.png'),
				baseUrl: config.baseUrl,
				checkflag:true,
				datainfo: {
					// "visitorManageId":"",//来访主键
					 "portalId":"",//门户id
					 "houseAddress":"",//详细门牌号
					 "name":"",//访客姓名
					 "num":"",//来访人数
					 "reason":"",//来访事由
					 "mobileNumber":"",//手机号码
					 "isCar":"N",//是否驾车 N:否 Y:是
					 "plateNumber":"",//车牌号码
					 // "reserveTime":"",//预约时间
					 "visitorTime":"",//来访时间
					 // "status":"",//状态 1：预约成功 2：已来访 3：已过期
					 // "photo":""//人脸信息
				},
				syqxidx:'',
				rules:{name: {rules: [{required: true,errorMessage: '请输入访客姓名' }]},
				  portalId: {rules: [{required: true,errorMessage: '请选择来访门户' }]},
				  mobileNumber: {rules: [{required: true,errorMessage: '请输入手机号'}, {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,errorMessage:'请输入正确的手机号码'}]},},
				phofile:[],
				filterable:true,
				chooseValue:'',
				fwlist:[],
				tabval:'',//1预约，2 临时
				id:'',
				isdisabled:false,
				ptype:'add',
				starttime:''
			}
		},
		onLoad: function(e) {
			this.tabval=e.type;
			if(e.id){
				this.id=e.id;
				this.ptype="edit";
				// this.isdisabled=true;
				this.getDetail()
			}
			this.init()
			this.time()
		},
		methods: {
			checkPermi,
			checkRole,
			getEditFn(){
				this.isdisabled=false;
			},
			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
			},
			init(){
				houseInfolistNoPage().then(res=>{
					if(res.code==200){
						this.fwlist= res.rows.map(v => {
							return {
								label: v.detailedAddress,
								value: v.houseId,
								location: v.location
							}
						})
					}
				})
			},
			bindDateChange(e){
				var val=e.detail.value;
				// this.datainfo.applicationBank=this.sdyhlist[val].value;
				// this.applicationBank=this.sdyhlist[val].label;
			},
			getChangeFn(){
				if(this.isdisabled){
					return
				}
				if(this.datainfo.isCar=='Y'){
					this.datainfo.isCar='N'
				}else{
					this.datainfo.isCar='Y'
				}
			},
			getDetail(){
				if(this.tabval==1){
					reservDet(this.id).then(res=>{
						if(res.code==200){
							this.datainfo=res.data;
							this.chooseValue=res.data.portalId
						}
					})
				}else{
					visitorDet(this.id).then(res=>{
						if(res.code==200){
							this.datainfo=res.data;
							this.chooseValue=res.data.portalId
						}
					})
				}
			},
			getSubmit(){
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					// // 手机号验证
					// let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					// if (params.mobileNumber && !regphone.test(params.mobileNumber)) {
					// 	this.$toast("请输入正确的手机号")
					// 	return
					// }
					if(!params.portalId){
						this.$toast("请选择来访门户")
						return
					}
					if(params.isCar=='Y'&&!params.plateNumber){
						this.$toast("请输入车牌号")
						return
					}
					if(this.tabval==1){
						if(!params.visitorTime){
							this.$toast("请选择来访时间")
							return
						}
						var lng = '117.211954';
						var lat = '31.839676';
						params.lgt=lng;
						params.lat=lat;
						if(this.ptype=='add'){
							reservAdd(params).then(res=>{
								if(res.code==200){
									this.$toast("新增成功")
									setTimeout(function(){
										uni.$emit("refComelist")
										uni.navigateBack({
											delta:1
										})
									},1500)
								}
							})
						}else{
							reservPut(params).then(res=>{
								if(res.code==200){
									this.$toast("修改成功")
									setTimeout(function(){
										uni.$emit("refComelist")
										uni.navigateBack({
											delta:1
										})
									},1500)
								}
							})
						}
						
					}else{
						if(this.ptype=='add'){
							visitorAdd(params).then(res=>{
								if(res.code==200){
									this.$toast("新增成功")
									setTimeout(function(){
										uni.$emit("refComelist")
										uni.navigateBack({
											delta:1
										})
									},1500)
								}
							})
						}else{
							visitorPut(params).then(res=>{
								if(res.code==200){
									this.$toast("修改成功")
									setTimeout(function(){
										uni.$emit("refComelist")
										uni.navigateBack({
											delta:1
										})
									},1500)
								}
							})
						}
						
					}
				})
			},
			getchange(e){
				this.datainfo.portalId=e.value;
				this.datainfo.houseAddress=e.label;
				if(this.tabval=='1'){
					this.datainfo.detailAddress=e.location;
				}
			},
			// getaddImage(e) {
			// 	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){
				if(this.isdisabled){
					return
				}
				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];
								if(rs&&rs.length>0){
									var obj={
										url:resurl.urlOnline
									}
									that.getOcrIdCard(obj)
								}
							})	
						}
					}
				});
			},
			getOcrIdCard(obj){
				var params={
					image:obj.url,
				}
				getlicensePlate(params).then(res=>{
					if(res.code==200){
						var code=res.msg;
						if(code){
							this.datainfo.plateNumber=code;
						}
					}
				})
			}
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.coa /deep/ .uni-date__x-input{text-align: right;color: #AAAAAA;}
.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-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{min-height: 100vh;padding: 20rpx 18rpx 24rpx;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;
	.chtop{padding-top: 32rpx;margin-bottom: 8rpx;
		image{width: 14rpx;height: 48rpx;margin-right: 20rpx;}
		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: 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;}
		}
	}
	
}
.tips{font-weight: 500;font-size: 22rpx;color: #0256FD;padding: 20rpx 0;}
</style>