CommunityApp/pages/myCar/add.vue

<template>
	<view>
		<view v-if="step==2" class="" @click="step--"
			style="position: absolute;right: 20rpx;top: 10rpx;font-size: 28rpx;color: #5064eb;">
			<text>上一步</text>
		</view>
		<view v-show="step==1" style="margin-top: 20rpx;">
			<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" 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>
				</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="parkingLotShow" v-model="parkingLotLabel"
								placeholder="请选择车场区域" @click="parkingLotShow=true"></u-input>
						</u-form-item>
						<u-form-item :required="true" :label-width="labelWidth" label="车场区域">
							<u-input type="select" :select-open="parkingAreaShow" v-model="parkingAreaLabel"
								placeholder="请选择车场区域" @click="parkingAreaShow=true"></u-input>
						</u-form-item>
						<u-form-item :required="true" :label-width="labelWidth" label="所属车位">
							<u-input type="select" :select-open="parkingSpaceShow" v-model="parkingSpaceLabel"
								placeholder="请选择所属车位" @click="parkingSpaceShow=true"></u-input>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</view>

		<view v-show="step==2" style="margin-top: 20rpx;">
			<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>
			<view class="bg-white" style="height: 80rpx;"></view>
			<view v-if="step==1" class="" @click="next" style="width: 90%;margin: 0 auto ;position: absolute;bottom: 50rpx;left: 0;right: 0;">
				<view class="cu-btn round base-bg-color" style="padding: 40rpx;width: 100%;">
					<text>下一步</text>
				</view>
			</view>

			<view v-if="step==2" 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="isAdd?'cuIcon-add':'cuIcon-edit'" class="margin-right-10"></text>
					<text v-text="isAdd?'确认添加':'确定修改'"></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>

		<u-select @confirm="parkingLotConfirm" v-model="parkingLotShow" :list="parkingLotList" label-name="parkName"
			value-name="id"></u-select>
		<u-select @confirm="parkingAreaConfirm" v-model="parkingAreaShow" :list="parkingAreaList" label-name="name"
			value-name="id"></u-select>
		<u-select @confirm="parkingSpaceConfirm" v-model="parkingSpaceShow" :list="parkingSpaceList" label-name="number"
			value-name="id"></u-select>
	</view>
</template>

<script>
	import uploadImg from '@/comps/uploadimg/uploadImg.vue'
	var that;
	var app = getApp();
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				isAdd: true,
				step: 1,

				labelWidth: '200',
				width: 480,
				height: 320,
				//车场
				parkingLotLabel: '',
				parkingLotValue: "",
				parkingLotList: [],
				parkingLotShow: false,
				//车场区域
				parkingAreaLabel: '',
				parkingAreaValue: "",
				parkingAreaList: [],
				parkingAreaShow: false,
				//车位
				parkingSpaceLabel: '',
				parkingSpaceValue: "",
				parkingSpaceList: [],
				parkingSpaceShow: false,

				//车牌号
				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.getParkingSpaceCount()

			//获取字典
			this.getDict()
			//获取车场
			this.initParkingLot()

			this.parseParams(options)
		},
		methods: {
			next() {
				if (this.$isEmpty(this.model.number)) {
					this.$u.toast('请填写车牌号')
					return
				}
				if (this.$isEmpty(this.parkingLotValue)) {
					this.$u.toast('请选择车场')
					return
				}
				if (this.$isEmpty(this.parkingAreaValue)) {
					this.$u.toast('请选择车场区域')
					return
				}
				if (this.$isEmpty(this.parkingSpaceValue)) {
					this.$u.toast('请选择车场')
					return
				}
				let data = this.parkingSpaceList.find(item => item.id == this.parkingSpaceValue)
				if (data.isUsed) {
					this.$dialog.showModal('该车位已被占用，请联系物业负责人', false)
					return
				}
				this.model.parkingSpaceId = this.parkingSpaceValue
				this.step++
			},
			//车位 begin
			initParkingLot() {
				let params = {
					residentialId: this.model.residentialId
				}
				this.$http.parking.parkingLotList(params).then(res => {
					this.parkingLotList = res.data.data
				})
			},
			initParkingArea() {
				let params = {
					parkingLotId: this.parkingLotValue
				}
				this.$http.parking.parkingAreaList(params).then(res => {
					this.parkingAreaList = res.data.data
				})
			},
			initParkingSpace() {
				let params = {
					parkingAreaId: this.parkingAreaValue
				}
				this.$http.parking.parkingSpaceList(params).then(res => {
					this.parkingSpaceList = res.data.data
				})
			},
			getParkingSpaceCount() {
				let params = {
					residentialId: this.model.residentialId
				}
				this.$http.parking.parkingSpaceCount(params).then(res => {
					if (this.$isEmpty(res.data.data)) {
						this.$dialog.showModalAndBack('该小区暂未创建车位，请联系小区负责人创建！', false)
					}
				})
			},
			parkingLotConfirm(e) {
				this.parkingLotLabel = e[0].label
				this.parkingLotValue = e[0].value
				this.initParkingArea()
			},
			parkingAreaConfirm(e) {
				this.parkingAreaLabel = e[0].label
				this.parkingAreaValue = e[0].value
				this.initParkingSpace()
			},
			parkingSpaceConfirm(e) {
				let id= e[0].value
				let flag= this.parkingSpaceList.some(item=>item.id==id && item.isUsed==1)
				if (flag) {
					this.$dialog.showModal('该车位已被占用，请联系社区负责人',false)
					return
				}
				this.parkingSpaceLabel = e[0].label
				this.parkingSpaceValue = id
			},
			//车位 end
			parseParams(options) {
				if (this.$isEmpty(options)) {
					return
				}
				this.isAdd = false
				//获取车位
				this.fetchParkingSpace(options.id)
				this.model = options
				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
					}
				})
			},
			fetchParkingSpace(carId) {
				let params = {
					carId
				}
				this.$http.parking.parkingSpaceList(params).then(res => {
					let records = res.data.data
					let data = records[0]
					if (this.$isNotEmpty(data)) {
						this.parkingLotLabel = data.parkingLotName
						this.parkingLotValue = data.parkingLotId
						this.parkingAreaLabel = data.parkingAreaName
						this.parkingAreaValue = data.parkingAreaId
						this.parkingSpaceLabel = data.number
						this.parkingSpaceValue = data.id
						data.isUsed = 0
						this.parkingSpaceList = records
					}
				})
			},
			submit() {
				if (this.$isEmpty(this.model.carImg)) {
					this.$u.toast('请上传车辆照片')
					return
				}
				let that = this;
				this.model.parkingLotId=this.parkingLotValue
				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
				this.model.userIdCard = this.vuex_member.idcard

				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;
					}
				})

			},
		}
	}
</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>