property/user_ui/mine/pages/car/addcar.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>
					<view class="carcode">
						<view class="tit mb16 lh18"><text class="cof4">*</text>车牌号码</view>
						<view>需车牌插件</view>
					</view>
					<uni-forms-item label="车牌号" name="plateNumber">
						<view class="flexc" @click.stop="">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.plateNumber" :inputBorder='false' placeholder="请输入车牌号" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<block v-if="zhanfalg">
						<uni-forms-item label="居住门户" name="houseId">
							<w-select
							      style="margin-left: 20rpx;" 
							     v-model="chooseValue"
							      :list='fwlist'
							      valueName='label' 
							      keyName="value"
								  :chosevalue="datainfo.detailedAddress"
								  :filterable='filterable'
							      @change='getchange'
							    >
							    </w-select>
						</uni-forms-item>
					<uni-forms-item label="品牌车型" name="vehicleBrand">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="cllxidx" :range="cllxList"   @change='bindDateChange'>
							<view class="flexc mh35">
								<view class="flex1 txr f13 co27" v-if="datainfo.vehicleBrand&&!cllx">{{statusFormats(datainfo.vehicleBrand,cllxList,'cllx')}}</view>
								<view class="flex1 txr f13" v-else :class="cllx?'co27':'coa'">{{cllx||"请选择品牌车型"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<!-- <uni-forms-item label="车辆类型" name="vehicleType">
						<view class="flexc" @click.stop="">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.vehicleType" :inputBorder='false' placeholder="请输入车辆类型" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item> -->
					<uni-forms-item label="车辆颜色" name="vehicleColour">
						<view class="flexc" @click.stop="">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.vehicleColour" :inputBorder='false' placeholder="请输入车辆颜色" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="发动机编号" name="engineNumber">
						<view class="flexc" @click.stop="">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.engineNumber" :inputBorder='false' placeholder="请输入发动机编号" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="车辆识别代号" name="identificationNumber">
						<view class="flexc" @click.stop="">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.identificationNumber" :inputBorder='false' placeholder="请输入车辆识别代号" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="注册日期" name="registrationDate">
						<view class="flexc">
							<uni-datetime-picker  :disabled="isdisabled" :class="datainfo.registrationDate?'co27':'coa'" type="date" placeholder="请选择注册日期" :border="false" :hide-second='true' v-model="datainfo.registrationDate"  />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="发证日期" name="issueDate">
						<view class="flexc">
							<uni-datetime-picker  :disabled="isdisabled" :class="datainfo.issueDate?'co27':'coa'" type="date" placeholder="请选择发证日期" :border="false" :hide-second='true' v-model="datainfo.issueDate"  />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					</block>
					<view class="zhanbox flexcc" @click="zhanfalg=!zhanfalg">
						{{zhanfalg?"折叠信息":'展开信息'}}<image :class="!zhanfalg?'act':''" :src="upimg"></image>
					</view>
				</uni-forms>
				<view class="rhbtn mt30" @click="getEditFn" v-if="isdisabled">修改</view>
				<view class="rhbtn mt30" @click="getSubmit" v-else>确定</view>
				<!-- <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,selectValueKey} from '@/utils/common.js'
	import wSelect from "@/work/components/w-select/w-select.vue"
	import {houseInfolistNoPage} from "@/api/work/work.js"
	import {carPut,carAdd,carDet} from "@/api/work/car.js"
	import {getDictionaryFn} from "@/api/system/user.js"
	export default{
		components:{wSelect},
		data(){
			return{
				rimg: require('@/mine/static/house/rimg.png'),
				cmico:require('@/mine/static/house/cmico.png'),
				upimg:require('@/mine/static/house/up.png'),
				baseUrl:config.baseUrl,
				datainfo:{
					// "carId":"",//业主车辆主键
					"houseId":"",//房屋信息id
					"detailedAddress":"",//房屋的详细门牌号
					"userId":"",//用户id
					"residentId":"",//居住人员表id
					"userName":"",//业主姓名
					"residentPhone":"",//业主手机号
					"plateNumber":"",//车牌号码
					"vehicleBrand":"",//车辆车型
					// "vehicleType":"",//车辆类型
				},
				zhanfalg:true,
				syqxidx:'',
				filterable:true,
				chooseValue:'',
				fwlist:[],
				isdisabled:false,
				rules:{
					houseId: {rules: [{required: true,errorMessage: '请选择居住门户' }]},
					detailedAddress: {rules: [{required: true,errorMessage: '请输入居住地址' }]},
					// 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:'请输入正确的手机号码'}]},
				  },
				cllx:"",
				cllxidx:0,
				cllxList:[],
				id:'',
				isdisabled:false,
				ptype:'add',
			}
		},
		onLoad: function(e) {
			if(e.id){
				this.id=e.id;
				this.ptype="edit";
				this.isdisabled=true;
				this.getDetail()
			}
			this.init()
		},
		methods:{
			checkPermi, checkRole,
			getEditFn(){
				this.isdisabled=false;
			},
			getchange(e){
				this.datainfo.houseId=e.value;
				this.datainfo.detailedAddress=e.label;
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				if(type=='cllx'){
					this.cllxidx=aite.key;
				}
				return aite.actions;
			},
			init(){
				// 自己的房屋
				houseInfolistNoPage().then(res=>{
					if(res.code==200){
						this.fwlist= res.rows.map(v => {
							return {
								label: v.detailedAddress,
								value: v.houseId,
								location: v.location
							}
						})
					}
				})
				// 车辆类型
				getDictionaryFn('cartype').then(res=>{
					if(res.code==200){
						this.cllxList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
			},
			bindDateChange(e){
				var val=e.detail.value;
				this.datainfo.vehicleBrand=this.cllxList[val].dictValue;
				this.cllx=this.cllxList[val].dictLabel;
			},
			getDetail(){
				carDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data
					}
				})
			},
			getSubmit(){
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					// if(!params.portalId){
					// 	this.$toast("请选择来访门户")
					// 	return
					// }
					// if(params.isCar=='Y'&&!params.plateNumber){
					// 	this.$toast("请输入车牌号")
					// 	return
					// }
					// if(!params.visitorTime){
					// 	this.$toast("请选择来访时间")
					// 	return
					// }
					if(this.ptype=='add'){
						carAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("carlist")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						carPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("carlist")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}
				})
			},
			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>
.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 /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 24rpx 28rpx;box-sizing: border-box;display: flex;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;padding-bottom: 76rpx;
	.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 24rpx;
		.upbox{height: 224rpx;background: #EFF4FF;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 44rpx;overflow: auto;
			.img{width: 100%;height: 100%;}
			.addimg{width: 90rpx;height: 90rpx;margin-bottom: 8rpx;}
			view{font-weight: bold;font-size: 26rpx;color: #4C6686;}
		}
		.carcode{
			.tit{font-weight: bold;font-size: 26rpx;color: #272727;}
		}
	}
	.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
		image{width: 100%;height: 100%;}
	}
	.zhanbox{font-weight: 500;font-size: 24rpx;color: #AAAAAA;padding: 16rpx 0;margin-top: 20rpx;
		image{width: 20rpx;height: 12rpx;margin-left: 18rpx;transition: all 0.3s;
			&.act{transform: rotate(-180deg);}
		}
	}
}
.tips{font-weight: bold;color: #272727;font-size: 26rpx;margin-left: 8rpx;}
</style>