ParkApp/pages/index/car/my-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/icon/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/icon/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/icon/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/icon/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 base-bg-color" style="padding: 40rpx;width: 100%;" >
					<text class="cuIcon-add"></text>
					<text v-text="model.id?'重新审核':'确认添加'"></text>
				</view>
			</view>
		</view>
		<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,
				
				//员工id
				userId:'',
				//园区id
				agencyId:'',
				
				//车牌号
				carNoInputList:[],
				
				//车辆类型
				carTypeList:[],
				carTypeShow:false,
				carTypeLabel:'',
				
				//车辆性质
				carPropertiesList:[],
				carPropertiesShow:false,
				carPropertiesLabel:'',
				
				//燃油类别
				fuelCategoryList:[],
				fuelCategoryShow:false,
				fuelCategoryLabel:'',
				
				model:{
					type:'',//车辆类型的key
					number:'',//车牌号
					properties:'',//车辆性质的key,
					fuelCategory:'',//燃油类别的key
					carImg:'',//车辆照片
					vehicleDrivingLicense1:'',//行驶证正面
					vehicleDrivingLicense2:'',//行驶证反面
				},
			}
		},
		onLoad(options) {
			that=this
			let loginType=this.$cache.get('loginType')
			this.userId=this.$cache.get('userId')
			this.agencyId=this.$cache.get('agencyId')
			if (loginType!=this.$loginType.STAFF||
				this.$isEmpty(this.userId)||
				this.$isEmpty(this.agencyId)) {
				this.$dialog.showModal('系统异常',false).then(res=>{
					this.$navigateBack()
				})
			}
			this.parseParams(options)
			
		},
		computed:{
			plateNumberStr(){
				let str='';
				this.carNoInputList.forEach(item=>{
					str+=item.toString();
				})
				this.model.number=str
				return str;
			}
		},
		methods: {
			parseParams(options){
				this.carTypeList=this.vuex_carTypeList
				this.carPropertiesList=this.vuex_carPropertiesList
				this.fuelCategoryList=this.vuex_fuelCategoryList
				if (this.$isEmpty(options)) {
					return
				}
				if (!this.$isEmpty(options.id)) {
					uni.setNavigationBarTitle({
						title:"编辑车辆"
					})
				}
				
				this.model=options
				this.carNoInputList=options.number.split('')
				this.carTypeList.forEach(item=>{
					if (item.value==options.type) {
						this.carTypeLabel=item.label
					}
				})
				this.carPropertiesList.forEach(item=>{
					if (item.value==options.properties) {
						this.carPropertiesLabel=item.label
					}
				})
				this.fuelCategoryList.forEach(item=>{
					if (item.value==options.fuelCategory) {
						this.fuelCategoryLabel=item.label
					}
				})
				
			},
			submit(){
				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.model.personId=this.userId
				this.model.agencyId=this.agencyId
				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)
					}
				})
			},
			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.link
				  	}else if (type==2) {
				  		that.model.vehicleDrivingLicense1=res.data.link//行驶证正面
				  	}else if (type==3) {
				  		that.model.vehicleDrivingLicense2=res.data.link//行驶证反面
				  	}
				  })
			  })
			},
			//车牌号键盘
			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>