PropertyApp/pages/car/add.vue

<template>
	<view>
		
		<view class="form">
			<view class="flex">
				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/tag1.png" mode=""></image>
				<text class="text-lg text-bold">请填写业主信息</text>
			</view>
			<view class="card">
				<u-form :model="model"  ref="uForm" >
					<u-form-item :required="true"  :label-width="labelWidth"   label="所属社区" >
						<u-input  type="select" :select-open="agencyShow" @click="agencyShow=true"  v-model="agencyName"   placeholder="请选择所属社区" ></u-input>
					</u-form-item>
					<u-form-item :required="true"  :label-width="labelWidth"   label="所属小区" >
						<u-input  type="select" :select-open="carTypeShow" @click="showResidential" v-model="residentialName"  placeholder="请选择所属小区" ></u-input>
					</u-form-item>
					<u-form-item :required="true"  :label-width="labelWidth"   label="车主姓名" >
						<u-input  type="text"  v-model="model.personName" placeholder="请填写车主姓名"></u-input>
					</u-form-item>
					<u-form-item :required="true"  :label-width="labelWidth"   label="手机号" >
						<u-input  type="number"   v-model="model.personPhone" placeholder="请填写手机号" ></u-input>
					</u-form-item>
				</u-form>
			</view>
		</view>
		
		<view class="form">
			<view class="flex">
				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/tag1.png" mode=""></image>
				<text class="text-lg text-bold">请选择基本信息</text>
			</view>
			<view class="card">
				<u-form :model="model"  ref="uForm" >
					<u-form-item :required="true"  :label-width="labelWidth"   label="车牌号码" >
						<u-input  type="text"  v-model="model.number" disabled @click="openKeyBoard"  placeholder="请填写车牌号码" ></u-input>
					</u-form-item>
					<u-form-item :required="true"  :label-width="labelWidth"   label="车辆类型" >
						<u-input  type="select" :select-open="carTypeShow" v-model="carTypeLabel"  placeholder="请选择车辆类型" @click="carTypeShow=true"></u-input>
					</u-form-item>
					<u-form-item :required="true"  :label-width="labelWidth"   label="车辆性质" >
						<u-input  type="select" :select-open="carPropertiesShow" v-model="carPropertiesLabel" placeholder="请选择车辆性质" @click="carPropertiesShow=true"></u-input>
					</u-form-item>
					<u-form-item :required="true"  :label-width="labelWidth"   label="燃油类别" >
						<u-input  type="select" :select-open="fuelCategoryShow" v-model="fuelCategoryLabel" placeholder="请选择燃油类别" @click="fuelCategoryShow=true"></u-input>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="form">
			<view class="flex">
				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/tag1.png" mode=""></image>
				<text class="text-lg text-bold">请上传车辆照片</text>
			</view>
			<view class="card">
				<view style="padding: 20rpx 0;" @click="chooseImage(1)"  class="flex justify-center ">
					<view class=" ">
						<upload-img
						   :width="width"
						   :height="height"
						  :currentImage="model.carImg"
						  bgsrc="http://139.9.103.171:1888/miniofile/xlyq/upload.png"
						  >
						</upload-img>
						<view class="text-center  padding-top-20 base-color" >
						 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
						 <text v-if="$isEmpty(model.carImg)">点击上传车辆照片</text>
						 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="flex">
				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/tag1.png" mode=""></image>
				<text class="text-lg text-bold">请上传行驶证正面</text>
			</view>
			<view class="card">
				<view style="padding: 20rpx 0;" @click="chooseImage(2)"  class="flex justify-center ">
					<view class=" ">
						<upload-img
						   :width="width"
						   :height="height"
						  :currentImage="model.vehicleDrivingLicense1"
						  bgsrc="http://139.9.103.171:1888/miniofile/xlyq/zm.png"
						  >
						</upload-img>
						<view class="text-center  padding-top-20 base-color" >
						 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
						 <text v-if="$isEmpty(model.carImg)">点击上传行驶证正面</text>
						 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="flex">
				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/tag1.png" mode=""></image>
				<text class="text-lg text-bold">请上传行驶证反面</text>
			</view>
			<view class="card">
				<view style="padding: 20rpx 0;" @click="chooseImage(3)"  class="flex justify-center ">
					<view class=" ">
						<upload-img
						   :width="width"
						   :height="height"
						  :currentImage="model.vehicleDrivingLicense2"
						  bgsrc="http://139.9.103.171:1888/miniofile/xlyq/fm.png"
						  >
						</upload-img>
						<view class="text-center  padding-top-20 base-color" >
						 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
						 <text v-if="$isEmpty(model.carImg)">点击上传行驶证反面</text>
						 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view >
			<view class="bg-white" style="height: 80rpx;"></view>
			<view class="" @click="submit" style="width: 90%;margin: 0 auto ;margin-bottom: 10%;">
				<view  class="cu-btn round" style="padding: 40rpx;width: 100%;background-color: #5064eb;color: #FFFFFF;" >
					<text class="cuIcon-add"></text>
					<text v-text="model.id?'重新审核':'确认添加'"></text>
				</view>
			</view>
		</view>
		
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="agencyShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="agencyKeyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(agencyList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="agencyConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in agencyList" :key="index">
					<text>{{item.agencyName}}</text>
				</view>
				<u-divider v-if="agencyList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="residentialShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="residentialKeyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(residentialList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="residentialConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in residentialList" :key="index">
					<text>{{item.name}}</text>
				</view>
				<u-divider v-if="residentialList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		
		
		<u-select @confirm="carTypeConfirm" v-model="carTypeShow" :list="carTypeList"></u-select>
		<u-select @confirm="carPropertiesConfirm" v-model="carPropertiesShow" :list="carPropertiesList"></u-select>
		<u-select @confirm="fuelCategoryConfirm" v-model="fuelCategoryShow" :list="fuelCategoryList"></u-select>
		<keyboard-package z-index="999" ref="plateNumber" type="plateNumber"  @onInput="onInput" @onDelete="onDelete" @onConfirm="onConfirm"/>
	</view>
</template>

<script>
	import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue"
	import uploadImg from '@/components/uploadimg/uploadImg.vue'
	var that;
	export default {
		components:{
			uploadImg,keyboardPackage
		},
		data() {
			return {
				labelWidth:'200',
				width:480,
				height:320,
				
				
				//社区
				agencyName:'',
				agencyShow:false,
				agencyKeyword:'',
				agencyList:[],
				//小区
				residentialShow:false,
				residentialName:'',
				residentialKeyword:'',
				residentialList:[],
				
				//车牌号
				carNoInputList:[],
				
				//车辆类型
				carTypeList:[],
				carTypeShow:false,
				carTypeLabel:'',
				
				//车辆性质
				carPropertiesList:[],
				carPropertiesShow:false,
				carPropertiesLabel:'',
				
				//燃油类别
				fuelCategoryList:[],
				fuelCategoryShow:false,
				fuelCategoryLabel:'',
				
				model:{
					type:'',//车辆类型的key
					number:'',//车牌号
					properties:'',//车辆性质的key,
					fuelCategory:'',//燃油类别的key
					carImg:'',//车辆照片
					vehicleDrivingLicense1:'',//行驶证正面
					vehicleDrivingLicense2:'',//行驶证反面
					
					//车主信息
					agencyId:'',//社区id
					residentialId:'',//小区id
					personName:'',//车主姓名
					personPhone:''//车主手机号
					
				},
			}
		},
		onLoad(options ) {
			that=this
			//获取字典
			this.getDict()
			//获取社区列表
			this.fetchAgencyList()
			
		},
		computed:{
			plateNumberStr(){
				let str='';
				this.carNoInputList.forEach(item=>{
					str+=item.toString();
				})
				this.model.number=str
				return str;
			}
		},
		watch:{
			agencyKeyword(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.agencyList=[]
					this.fetchAgencyList()
				}, 500)
			},
			residentialKeyword(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.residentialList=[]
					this.fetchResidentialList()()
				}, 500)
			}
		},
		methods: {
			//社区
			fetchAgencyList(){
				this.$api.agency.page({name:this.agencyKeyword}).then(res=>{
					this.agencyList=res.data.records
				})
			},
			agencyConfirm(e){
				this.model.agencyId=e.id
				this.agencyName=e.agencyName
				this.agencyShow=false
				this.fetchResidentialList()
			},
			//小区
			showResidential(){
				if (this.$isEmpty(this.model.agencyId)) {
					this.$u.toast('请选择社区')
					return
				}
				this.residentialShow=true
			},
			fetchResidentialList(){
				let params={
					name:this.residentialKeyword,
					agencyId:this.model.agencyId
				}
				this.$api.residential.pageBycondition(params).then(res=>{
					this.residentialList=res.data.records
				})
			},
			residentialConfirm(e){
				this.residentialName=e.name
				this.model.residentialId=e.id
				this.residentialShow=false
			},
			submit(){
				if (this.$isEmpty(this.model.agencyId)) {
					this.$u.toast('请选择社区')
					return
				}
				if (this.$isEmpty(this.model.residentialId)) {
					this.$u.toast('请选择小区')
					return
				}
				if (this.$isEmpty(this.model.number)) {
					this.$u.toast('请填写车牌号')
					return
				}
				if (this.$isEmpty(this.model.type)) {
					this.$u.toast('请选择车辆类型')
					return
				}
				if (this.$isEmpty(this.model.properties)) {
					this.$u.toast('请选择车辆性质')
					return
				}
				if (this.$isEmpty(this.model.fuelCategory)) {
					this.$u.toast('请选择燃油类型')
					return
				}
				if (this.$isEmpty(this.model.carImg)) {
					this.$u.toast('请上传车辆照片')
					return
				}
				if (this.$isEmpty(this.model.vehicleDrivingLicense1)) {
					this.$u.toast('请上传行驶证正面')
					return
				}
				if (this.$isEmpty(this.model.vehicleDrivingLicense2)) {
					this.$u.toast('请上传行驶证反面')
					return
				}
				this.$api.car.carAdd(this.model).then(res=>{
					if (res.success==true) {
						this.$dialog.showModal('操作成功！',false).then(res=>{
							this.$util.isReloadAndBack()
						})
					}else{
						this.$dialog.showModal(res.msg,false)
					}
				})
			},
			getDict(){
				let dict=this.$cache.get('dict')
				if (dict) {
					//缓存中有字典值
					this.carTypeList=dict.carTypeList
					this.carPropertiesList=dict.carPropertiesList
					this.fuelCategoryList=dict.fuelCategoryList
					return
				}
				//车辆类型
				this.$api.dict({code:'car_type'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						this.carTypeList.push(tmp)
					})
				})
				//车辆性质
				this.$api.dict({code:'car_properties'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						this.carPropertiesList.push(tmp)
					})
				})
				//燃油类别
				this.$api.dict({code:'fuel_category'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						this.fuelCategoryList.push(tmp)
					})
				})
			},
			carTypeConfirm(e){
				this.model.type=e[0].value
				this.carTypeLabel=e[0].label
			},
			carPropertiesConfirm(e){
				this.model.properties=e[0].value
				this.carPropertiesLabel=e[0].label
			},
			fuelCategoryConfirm(e){
				this.model.fuelCategory=e[0].value
				this.fuelCategoryLabel=e[0].label
			},
			//上传图片
			chooseImage(type) {
			  this.$mpi.chooseImage().then(res=>{
				  this.$api.uploadFile.submit(res[0]).then(res=>{
				  	if (type==1) {
				  		//车辆照片
				  		that.model.carImg=res.data
				  	}else if (type==2) {
				  		that.model.vehicleDrivingLicense1=res.data//行驶证正面
				  	}else if (type==3) {
				  		that.model.vehicleDrivingLicense2=res.data//行驶证反面
				  	}
				  })
			  })
			},
			//车牌号键盘
			onInput(val){
				console.log(val);
				this.carNoInputList.push(val)
			},
			onDelete(){
				this.carNoInputList.pop();
			},
			onConfirm(){
				this.model.number=this.plateNumberStr
				console.log(this.model.number);
			},
			openKeyBoard() {
				this.$refs.plateNumber.open();
			},
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.form{
		padding: 40rpx 30rpx;
		.card{
			margin-top: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			box-shadow: 0 -10rpx rgba(248, 248, 248,.9) ,0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
			.item{
				padding:30rpx 0;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>