CommunityApp/pages/myCar/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/myCar/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   :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   :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   :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/myCar/tag1.png" mode=""></image>
				<text class="text-lg text-bold">请上传车辆照片</text>
				<text class="text-sm text-gray margin-top-10">(必填)</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="https://szsq.nxzhsq.cn/community/miniofile/app/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/myCar/tag1.png" mode=""></image>
				<text class="text-lg text-bold">请上传行驶证正面</text>
				<text class="text-sm text-gray margin-top-10">(选填)</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="https://szsq.nxzhsq.cn/community/miniofile/app/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/myCar/tag1.png" mode=""></image>
				<text class="text-lg text-bold">请上传行驶证反面</text>
				<text class="text-sm text-gray margin-top-10">(选填)</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="https://szsq.nxzhsq.cn/community/miniofile/app/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 >确认添加</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 "@/comps/keyboard-package/keyboard-package.vue"
	import uploadImg from '@/comps/uploadimg/uploadImg.vue'
	var that;
	var app = getApp();
	export default {
		components: {
			uploadImg, keyboardPackage
		},
		data() {
			return {
				labelWidth:'200',
				width:480,
				height:320,
				
				//车牌号
				carNoInputList:[],
				
				//车辆类型
				carTypeList:[],
				carTypeShow:false,
				carTypeLabel:'',
				
				//车辆性质
				carPropertiesList:[],
				carPropertiesShow:false,
				carPropertiesLabel:'',
				
				//燃油类别
				fuelCategoryList:[],
				fuelCategoryShow:false,
				fuelCategoryLabel:'',
				
				model:{
					type:'',//车辆类型的key
					number:'',//车牌号
					properties:'',//车辆性质的key,
					fuelCategory:'',//燃油类别的key
					carImg:'',//车辆照片
					vehicleDrivingLicense1:'',//行驶证正面
					vehicleDrivingLicense2:'',//行驶证反面
					personId:'',
					residentialId:'',
					tenantType:0
				},
			}
		},
		onLoad(options) {
			that = this;
			this.model.residentialId = uni.getStorageSync('residentialId')
			this.model.personPhone = this.vuex_member.tel;
			this.model.memberId = this.vuex_member.id;
			this.model.idCard = this.vuex_member.idcard;
			this.model.personName = this.vuex_member.name;
			//获取字典
			this.getDict()
			this.parseParams(options)
		},
		computed: {
			plateNumberStr() {
				let str = '';
				this.carNoInputList.forEach(item=>{
					str += item.toString();
				})
				this.model.number=str
				return str;
			}
		},
		methods: {
			parseParams(options){
				if (this.$isEmpty(options)) {
					return
				}
				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.carImg)) {
					this.$u.toast('请上传车辆照片')
					return
				}
				let that = this;
				this.model.residentialId = uni.getStorageSync('residentialId')
				this.model.personId=this.vuex_member.id
				this.model.personName=this.vuex_member.name
				this.model.personPhone=this.vuex_member.phone
				that.$http.saveOrUpdateCar(this.model).then (res=>{
					if (res.data.result) {
						that.$util.showModal('操作成功！',false).then(res=>{
							that.$util.isReloadAndBack()
						})
					} else {
						that.$util.showModal("提交失败",false);
					}
					
				})
			},
			getDict() {
				let carType = uni.getStorageSync("carType");
				let carProperty = uni.getStorageSync("carProperty");
				let fuelCategory = uni.getStorageSync("fuelCategory");
				if (!this.$isEmpty(carType) || !this.$isEmpty(carProperty) || !this.$isEmpty(fuelCategory)) {
					this.carTypeList = carType;
					this.carPropertiesList = carProperty;
					this.fuelCategoryList = fuelCategory;
					return;
				}
				
				// let operation = 'permissions/dict/getByCode?code=car_type';
				let that = this;
				let params = {};
				//车辆类型
				that.$http.getDictByCode("car_type").then (res=>{
					if (res.data.code != 200) {
						app.globalData.oneFailHint(res.data.msg, function () {
					    uni.switchTab({
					    	url:"../index/index"
					    })
					  });
					}
					res.data.data.forEach((item) => {
						let tmp = {
							value: item.dictKey,
							label: item.dictValue
						}
						that.carTypeList.push(tmp)
					})
					
				});
				
				//车辆性质
				// operation = "permissions/dict/getByCode?code=car_properties"
				that.$http.getDictByCode("car_properties").then (res=>{
					if (res.data.code != 200) {
						app.globalData.oneFailHint(res.data.msg, function () {
					    uni.switchTab({
					    	url:"../index/index"
					    })
					  });
					}
					res.data.data.forEach((item) => {
						let tmp = {
							value:item.dictKey,
							label:item.dictValue
						}
						that.carPropertiesList.push(tmp)
					})
					
				});
				
				//燃油类别
				// operation = "permissions/dict/getByCode?code=fuel_category"
				that.$http.getDictByCode("fuel_category").then (res=>{
					if (res.data.code != 200) {
						app.globalData.oneFailHint(res.data.msg, function () {
					    uni.switchTab({
					    	url:"../index/index"
					    })
					  });
					}
					res.data.data.forEach((item)=>{
						let tmp = {
							value:item.dictKey,
							label:item.dictValue
						}
						that.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) {
			  uni.chooseImage({
			    count: 1,
			    //最多可以选择的图片张数，默认9
			    sourceType: ['album'],
			    sizeType: ['compressed'],
			    //可选择原图或压缩后的图片
			    success: res => {
					this.uploadImage(res.tempFilePaths[0], type);
			    }
			  });
			},
			/**上传图片
			 * @param {Object} imgUrl 图片url
			 */
			uploadImage(imgUrl, type) {
				var that = this;
				//是否需要md5加密上传人脸照
				let is_need_md5 = false;
				 this.$http.uploadFile(imgUrl).then(res =>{
					 if (type == 1) {
					 	that.model.carImg = res.data.data.link;
					 } else if (type == 2) {
					 	that.model.vehicleDrivingLicense1 =  res.data.data.link;
					 } else if (type == 3) {
					 	that.model.vehicleDrivingLicense2 =  res.data.data.link;
					 }
				 })
				
			},
			//车牌号键盘
			onInput(val){
				this.carNoInputList.push(val)
			},
			onDelete(){
				this.carNoInputList.pop();
			},
			onConfirm(){
				this.model.number=this.plateNumberStr
			},
			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>