property/property_ui/car/pages/illegalcheck.vue

<template>
	<view class="check">
		<view class="cbox">
			<view class="chtop flexc">
				<image :src="line"></image>
				<view>车辆信息</view>
			</view>
			<view class="chmain">
				<view class="upbox" @click="getaddImagea">
					<image :src="baseUrl+datainfo.front" class="img" v-if="datainfo.front"></image>
					<image :src="car" class="addimg"></image>
					<view>拍摄车辆照片自动识别</view>
				</view>
				<uni-forms ref="form" :model="datainfo">
					<!-- disabled -->
				  <uni-forms-item label="车牌号码" name="plateNumber">
					  <uni-easyinput v-model="datainfo.plateNumber" disabled :inputBorder='false' placeholder="自动识别" />
				  </uni-forms-item>
					<uni-forms-item label="手机号码" name="mobileNumber">
					  <uni-easyinput v-model="datainfo.mobileNumber" disabled  :inputBorder='false' placeholder="自动识别" />
					</uni-forms-item>
					<uni-forms-item label="关联房号" name="visitPortal">
					  <uni-easyinput v-model="datainfo.visitPortal" disabled  :inputBorder='false' placeholder="自动识别" />
					</uni-forms-item>
					<view class="imgs">
						<block v-if="phofile&&phofile.length">
							<view class="img" v-for="(ite,idx) in phofile" :key="idx" @click="getPreview(idx,phofile)">
								<image :src="baseUrl+ite" class="pico"></image>
								<image :src="del" class="del" @click.stop="getDelFn(idx)"></image>
							</view>
						</block>
						<view class="addbox" @click="getaddImage">
							<image :src="photo" class="pico"></image>
							<view>添加图片</view>
						</view>
					</view>
				</uni-forms>
				<view class="rhbtn mt63" @click="getSubmit">确定</view>
			</view>
		</view>
		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config.js'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {uploadIdentify,uploadmore} from '@/utils/common.js'
	import {illegalParkingAdd} from "@/api/work/car.js"
	import {getlicensePlate} from "@/api/system/card.js"
	import {carList} from "@/api/work/car.js"
	export default{
		components:{},
		data(){
			return{
				photo:require("@/service/static/service/photo.png"),
				line:require('@/car/static/car/line.png'),
				car:require('@/car/static/car/carico.png'),
				del:require('@/car/static/car/del.png'),
				baseUrl:config.baseUrl,
				phofile:[],//图片合集
				datainfo:{
					"plateNumber": "",
					"houseId": "",
					"visitPortal": "",
					"mobileNumber": "",
					"carType": "2",
					"illegalPhoto": "",
				},
			}
		},
		onLoad: function() {
		},
		methods:{
			checkPermi, checkRole,
			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){
				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(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 = [];
							uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								that.phofile = that.phofile.concat(rs);
							})	
						}
					}
				});
			},
			getSubmit(){
				var that=this;
				var params=JSON.parse(JSON.stringify(this.datainfo))
				var phofile=JSON.parse(JSON.stringify(this.phofile))
				if(phofile&&phofile.length){
					params.illegalPhoto=this.phofile.join(',');
				}
				// console.log(params)
				// return
				illegalParkingAdd(params).then(res=>{
					if(res.code==200){
						this.$toast("新增成功")
						setTimeout(function(){
							uni.$emit("refCarPark")
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
				
			},
			getcarList(car){
				var params={
					plateNumber:car
				}
				carList(params).then(res=>{
					if(res.code==200){
						if(res.rows&&res.rows.length){
							var data=res.rows[0];
							this.datainfo.carType='1';
							this.datainfo.mobileNumber=data.residentPhone;
							this.datainfo.visitPortal=data.detailedAddress;
							this.datainfo.houseId=data.houseId;
						}
						
					}
				})
			},
			getaddImagea(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];
								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;
							this.getcarList(code)
						}
						// 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/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check{min-height: 100vh;padding: 20rpx 24rpx 24rpx;box-sizing: border-box;display: flex;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;padding-bottom: 32rpx;
	.chtop{padding-top: 32rpx;margin-bottom: 32rpx;
		image{width: 14rpx;height: 48rpx;margin-right: 20rpx;}
		view{font-weight: bold;font-size: 32rpx;color: #272727;}
	}
	.chmain{
		padding: 0 24rpx;
		.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;}
		}
		.imgs{display: flex;align-items: center;flex-wrap: wrap;margin-top: 40rpx;
			.img{width: 142rpx;height:142rpx;border-radius: 20rpx;margin: 0 28rpx 20rpx 0;position: relative;
			&:nth-of-type(4n){margin-right: 0;}
			}
			.pico{width: 100%;height: 100%;border-radius: 20rpx;}
			.del{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;}
			.addbox{background: #F0F0F0;border-radius: 20rpx;display: flex;align-items: center;flex-direction: column;width: 142rpx;height:142rpx;justify-content: center;margin-bottom: 20rpx;
				image{width: 48rpx;height: 42rpx;margin-bottom: 12rpx;}
				view{font-weight: 500;font-size: 24rpx;color: #666666;}
			}
		}
	}
	
}
</style>