wangluohuoyun-app/pages/mine/manageVehicles/editVehicle.vue

<!-- 管理车辆 -->
<template>
	<view class="content">
		<view class="flex s-row container">
			<view class="flex row">
				<view class="left left-text">车牌号</view>
				<view class="right flex">
					<input class="car-uumber" v-model='dataDetails.carNumber' @click.stop="handleShowKeyboard(index)"
						:disabled="true" placeholder="输入车牌号" name="input" @focus='focus()' @blur='blur()'></input>

				</view>
			</view>
			<view class="flex row">
				<view class="left-text">车牌颜色</view>
				<view class="color" @click="selectNoColor">{{dataDetails.carNumberColour}}</view>
				<view>></view>
				<u-picker :show="carColor" :columns="colorColumns" :closeOnClickOverlay='true' @close='colorClose'
					@cancel='colorClose' @confirm='confirmColor'></u-picker>
			</view>
			<view class="flex row">
				<view class="left-text">车型</view>
				<view class="color" @click="selectCarModel">{{dataDetails.carType}}</view>
				<view>></view>
				<u-picker :show="carModel" :columns="carModelColumns" :closeOnClickOverlay='true' @close='carModelClose'
					@cancel='carModelClose' @change="changeCarModel" @confirm='confirmCarModel($event)'></u-picker>
			</view>
			<view class="flex row">
				<view class="left-text">车辆所属车主</view>
				<u--input placeholder="输入车主姓名" inputAlign='left' border="none" v-model="dataDetails.owner">
				</u--input>
			</view>
			<view class="flex row">
				<view class="left-text">总质量（千克）</view>
				<u--input placeholder="输入总质量" inputAlign='left' border="none" v-model="dataDetails.carTotalWeight">
				</u--input>
			</view>
			<view class="flex row">
				<view class="left-text">核定载质量（千克）</view>
				<u--input placeholder="输入核定载质量" inputAlign='left' border="none" v-model="dataDetails.carApprovedWeight">
				</u--input>
			</view>
			<view class="flex row noborder">
				<view class="left-text">外廓尺寸</view>
			</view>
			<view class="flex row noborder input-ckg">
				<view class="input-positon">
					<u--input class="input" placeholder="长" inputAlign='left' border="none"
						v-model="dataDetails.carLong">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
				<view class="star">*</view>
				<view class="input-positon">
					<u--input placeholder="宽" inputAlign='left' border="none" v-model="dataDetails.carWidth">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
				<view class="star">*</view>
				<view class="input-positon">
					<u--input placeholder="高" inputAlign='left' border="none" v-model="dataDetails.carHeight">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
			</view>
			<view class="flex row noborder s-row">
				<view class="left-text" style="width: 100%;">人车合影（车头车牌号可见）</view>
				<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event)"
					@delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
				<!-- 			<image class="preview" :src="item.addressUrl" mode="aspectFit"
					style="width:710rpx:height:710rpx;margin: 20rpx;"> -->
				<!-- 		<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress"></upload> -->
			</view>
			<view class="level1-title">证件信息</view>
			<view class="title">道路运输证</view>
			<view @click="uploadImg(8)" class="picture picture8" v-if="!dataDetails.operationCertificate">
				<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
				<view class="text">上传道路运输证</view>
			</view>
			<view v-if="dataDetails.operationCertificate" @click.stop="uploadImg(1)" class="preview-card-img picture">
				<view @click.stop="delCard(1)">
					<image class='del-card' src="@/static/images/common/quxiao@2x.png">
					</image>
				</view>
				<image class="" :src="dataDetails.operationCertificate" mode="aspectFit"></image>
			</view>
			<view class="flex row">
				<view class="left-text">道路运输证号</view>
				<u--input placeholder="输入道路运输证号" inputAlign='right' border="none"
					v-model="dataDetails.operationCertificateNumber">
				</u--input>
			</view>
			<view class="flex row flex-space-between">
				<view class="left-text">道路运输证有效期</view>
				<view class="" @click="selectValidityPeriod(4)">
					{{dataDetails.operationCertificateValidityDate?dataDetails.operationCertificateValidityDate:'选择有效期>'}}
				</view>
			</view>
			<view v-if="sign == '挂车'">
				<view class="title">挂车道路运输证</view>
				<view @click="uploadImg(9)" class="picture picture9" v-if="!dataDetails.trailerOperationCertificate">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传挂车道路运输证</view>
				</view>
				<view v-if="dataDetails.trailerOperationCertificate" @click.stop="uploadImg(1)"
					class="preview-card-img picture">
					<view @click.stop="delCard(1)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>
					<image class="" :src="dataDetails.trailerOperationCertificate" mode="aspectFit"></image>
				</view>
			</view>
			<view class="flex row" v-if="sign == '挂车'">
				<view class="left-text">挂车道路运输证号</view>
				<u--input placeholder="输入挂车道路运输证号" inputAlign='right' border="none"
					v-model="dataDetails.trailerOperationCertificateNumber">
				</u--input>
			</view>
			
			<view class="flex row flex-space-between" v-if="sign == '挂车'">
				<view class="left-text">挂车道路运输证有效期</view>
				<view class="" @click="selectValidityPeriod(5)">
					{{dataDetails.trailerOperationCertificateValidityDate?dataDetails.trailerOperationCertificateValidityDate:'选择有效期>'}}
				</view>
			</view>
			<view class="title">上传行驶证主页</view>
			<view @click="uploadImg(3)" class="picture picture3" v-if="!dataDetails.drivingLicenseHomePage">
				<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
				<view class="text">上传行驶证主页</view>
			</view>
			<view v-if="dataDetails.drivingLicenseHomePage" @click.stop="uploadImg(1)" class="preview-card-img picture">
				<view @click.stop="delCard(1)">
					<image class='del-card' src="@/static/images/common/quxiao@2x.png">
					</image>
				</view>
				<image class="" :src="dataDetails.drivingLicenseHomePage" mode="aspectFit"></image>
			</view>
			<view class="title">上传行驶证副页</view>
			<view @click="uploadImg(4)" class="picture picture4" v-if="!dataDetails.drivingLicenseBackPage">
				<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
				<view class="text">上传行驶证副页</view>
			</view>
			<view v-if="dataDetails.drivingLicenseBackPage" @click.stop="uploadImg(1)" class="preview-card-img picture">
				<view @click.stop="delCard(1)">
					<image class='del-card' src="@/static/images/common/quxiao@2x.png">
					</image>
				</view>
				<image class="" :src="dataDetails.drivingLicenseBackPage" mode="aspectFit"></image>
			</view>
			<view class="flex row flex-space-between">
				<view class="left-text">行驶证档案编号</view>
				<u--input placeholder="输入行驶证档案编号" inputAlign='right' border="none"
					v-model="dataDetails.drivingLicenseNumber">
				</u--input>
			</view>
			
			<view class="flex row flex-space-between">
				<view class="left-text">行驶证有效期</view>
				<view class="" @click="selectValidityPeriod(1)">
					{{dataDetails.drivingLicenseValidityDate?dataDetails.drivingLicenseValidityDate:'选择有效截止日期>'}}
				</view>
			</view>
			
			
			<view class="" v-if="sign == '挂车'">
				<view class="title">挂车行驶证主页</view>
				<view @click="uploadImg(5)" class="picture picture5" v-if="!dataDetails.trailerLicenseHomePage">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传挂车行驶证主页</view>
				</view>
				<view v-if="dataDetails.trailerLicenseHomePage" @click.stop="uploadImg(1)"
					class="preview-card-img picture">
					<view @click.stop="delCard(1)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>
					<image class="" :src="dataDetails.trailerLicenseHomePage" mode="aspectFit"></image>
				</view>
			</view>
			<view v-if="sign == '挂车'">
				<view class="title">挂车行驶证副页</view>
				<view @click="uploadImg(6)" class="picture picture6" v-if="!dataDetails.trailerLicenseBackPage">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传挂车行驶证副页</view>
				</view>
				<view v-if="dataDetails.trailerLicenseBackPage" @click.stop="uploadImg(1)"
					class="preview-card-img picture">
					<view @click.stop="delCard(1)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>
					<image class="" :src="dataDetails.trailerLicenseBackPage" mode="aspectFit"></image>
				</view>
			</view>
			<view class="flex row">
				<view class="left-text">挂车行驶证档案编号</view>
				<u--input placeholder="输入挂车行驶证档案编号" inputAlign='right' border="none"
					v-model="dataDetails.trailerLicenseNumber">
				</u--input>
			</view>
			
			<view class="flex row flex-space-between" v-if="sign == '挂车'">
				<view class="left-text">挂车行驶证有效期</view>
				<view class="" @click="selectValidityPeriod(2)">
					{{dataDetails.trailerLicenseValidityDate?dataDetails.trailerLicenseValidityDate:'选择有效截止日期>'}}
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="submit">提交</view>
		<master-keyboard ref="keyboard" keyboardtype="car" :show="keyShow" :randomNumber="true" :newCar="false"
			:defaultValue="carNumber" @keyboardClick="handleClick"></master-keyboard>
		<u-toast ref="uToast"></u-toast>
		<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
			@select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true" @close="isShowimgType=false">
		</u-action-sheet>
		<u-picker :show="isShowValidity" ref="uPicker" :columns="validityPeriod" @confirm="confirmValidityPeriod"
			:closeOnClickOverlay='true' @close='isShowValidity=false' @cancel='isShowValidity=false'>
		</u-picker>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	var _this;
	export default {
		data() {
			return {
				index:'',
				keyShow: false,
				carNumber: '',
				dataDetails: {},
				carModelColumns: [
					['挂车', '非挂车'],
					['高栏', '集装箱', '自卸车']
				],
				carModelColumnData: [
					['高栏', '集装箱', '自卸车'],
					['重型仓栏']
				],
				colorColumns: [
					['黄色', '蓝色']
				],
				carColor: false,
				carModel: false,
				fileList1:[],
				sign: "挂车",
				ValidityPeriodType: "",
				validityPeriod: [],
				isShowValidity: false,
				uploadType: '',
				isShowimgType: false,
			};
		},
		onLoad(options) {
			_this = this;
			console.log(options)
			this.dataDetails = options
			if(this.dataDetails.carType.indexOf("挂车") != -1){
				this.sign = "挂车"
			}else{
				this.sign = "非挂车"
				}
			this.fileList1 = [{
				url:options.addressUrl
			}]
				this.validityPeriod = this.$helper.makeValidityPeriod()
		},
		methods: {
			delCard(type) {
			switch (type) {
				case 1:
					_this.dataDetails.driverLicenseHomePage = ""
					break;
				case 2:
					_this.dataDetails.driverLicenseBackPage = ""
					break;
				case 3:
					_this.dataDetails.drivingLicenseHomePage = ""
					break;
				case 4:
					_this.dataDetails.drivingLicenseBackPage = ""
					break;
				case 5:
					_this.dataDetails.trailerLicenseHomePage = ""
					break;
				case 6:
					_this.dataDetails.trailerLicenseBackPage = ""
					break;
				case 7:
					_this.dataDetails.qualificationCertificate = ""
					break;
				case 8:
					_this.dataDetails.operationCertificate = ""
					break;
				case 9:
					_this.dataDetails.trailerOperationCertificate = ""
					break;
			}
			},
			uploadImg(type) {
				this.uploadType = type
				this.isShowimgType = true
			},
			selectValidityPeriod(type) {
				this.ValidityPeriodType = type
				this.isShowValidity = true
			},
			// 上传图片
			imgTypeSelect(val) {
				console.log(val)
				console.log(this.uploadType)
				if (val.name == '相册') {
					uni.chooseImage({
						count: 1,
						sourceType: this.$helper.chooseImage.sourceType,
						success: function(res) {
							console.log(JSON.stringify(res.tempFilePaths));
							uploadImage("images", res.tempFilePaths[0], 'appData/',
								result => {
									// 上传成功回调函数
									console.log('图片地址-----', result)
									switch (_this.uploadType) {
										case 1:
											_this.dataDetails.driverLicenseHomePage = result
											break;
										case 2:
											_this.dataDetails.driverLicenseBackPage = result
											break;
										case 3:
											_this.dataDetails.drivingLicenseHomePage = result
											break;
										case 4:
											_this.dataDetails.drivingLicenseBackPage = result
											break;
										case 5:
											_this.dataDetails.trailerLicenseHomePage = result
											break;
										case 6:
											_this.dataDetails.trailerLicenseBackPage = result
											break;
										case 7:
											_this.dataDetails.qualificationCertificate = result
											break;
										case 8:
											_this.dataDetails.operationCertificate = result
											break;
										case 9:
											_this.dataDetails.trailerOperationCertificate = result
											break;
									}
									_this.$forceUpdate()
								}
							)
						}
					});
			
				} else {
			
				}
			},
			confirmValidityPeriod(e) {
				console.log('confirm', e)
				switch (this.ValidityPeriodType) {
					case 0:
						this.dataDetails.driverLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
						break
					case 1:
						this.dataDetails.drivingLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
						break
					case 2:
						this.dataDetails.trailerLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
						break
					case 3:
						this.dataDetails.qualificationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e
							.value[2]
						break
					case 4:
						this.dataDetails.operationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[
							2]
						break
					case 5:
						this.dataDetails.trailerOperationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e
							.value[2]
						break
				}
				this.isShowValidity = false
			},
			focus(e){
				console.log('11111')
				console.log(e)
			},
			blur(e){
				console.log(e)
			},
			// 车型切换
			changeCarModel(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.carTypePicker
				} = e
				if (columnIndex === 0) {
					// 模拟网络请求
					picker.setColumnValues(1, this.carModelColumnData[index])
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				uploadImage(url, 'appData/',
					result => {
						// 上传成功回调函数
						console.log('图片地址', result)
						this.dataDetails.addressUrl += result
			
					}
				)
			},
			//车牌号弹出键盘
			handleShowKeyboard(index) {
				if (this.dataDetails.carNumber == '') {
					this.carNumber = ''
				} else {
					this.carNumber = this.dataDetails.carNumber
				}
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(false) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(false)
				}
				this.index = index
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(true) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(true)
				}
			},
			//车牌号弹出键盘
			handleClick(e) {
				this.carNumber = e.value
				this.dataDetails.carNumber = e.value //键盘输入值
			},
			confirmColor(val) {
				this.dataDetails.carNumberColour = val.value[0]
				this.carColor = false
			},
			colorClose() {
				this.carColor = false
			},
			selectNoColor() {
				this.carColor = true
			},
		confirmCarModel(val) {
			this.dataDetails.carType = val.value[0] + ' ' + val.value[1]
			this.carModel = false
		},
			carModelClose() {
				this.carModel = false
			},
			selectCarModel() {
				this.carModel = true
			},
			selectNoColor() {
				this.carColor = true
			},
			unloadGroupPhoto() {
				uni.chooseImage({
					count: 1,
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uploadImage(res.tempFilePaths[0], 'appData/',
							result => {
								// 上传成功
								console.log('图片地址', result)
							}
						)
					}
				});
			},
			submit() {
				this.$request.baseRequest('post', '/driverCarInfo/api/editInfo', this.dataDetails).then(res => {
						if (res.code == '200') {
							this.$refs.uToast.show({
								type: 'success',
								message: "提交成功！",
								complete() {
									// uni.navigateBack({
									// 	delta: 1
									// });
									uni.$u.route('/pages/mine/manageVehicles/index');
								}
							})
							// this.$refs.uToast.show({
							// 	...params
							// })
							// uni.$u.route('/pages/mine/manageVehicles/index');
							
						}else{
							uni.$u.toast(res.message);
						}
				
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 20rpx;
		background: white;
		padding: 0 20rpx;
		border-radius: 20rpx;
		padding-bottom: 200rpx;

		.left-text {
			// background: red;
			width: 290rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}

		.row {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 28rpx;
			margin-top: 26rpx;
		
			.ch-style {}
		}
		
		.row-ch {
			padding-right: 250rpx;
			box-sizing: border-box;
		}
		
		.row {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 28rpx;
			margin-top: 26rpx;
		
		}
		
		.left-text {
			// background: red;
			width: 320rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}
		
		.picture {
			position: relative;
			width: 100%;
			height: 440rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		
			.text {
				margin-top: 20rpx;
			}
		}
		
		.picture1 {
			background: url(../../../static/images/mine/jzz.png);
			background-size: 100% 100%;
		}
		
		.picture2 {
			background: url(../../../static/images/mine/jzf.png);
			background-size: 100% 100%;
		}
		
		.picture3 {
			background: url(../../../static/images/mine/xsz.png);
			background-size: 100% 100%;
		}
		
		.picture4 {
			background: url(../../../static/images/mine/xsf.png);
			background-size: 100% 100%;
		}
		
		.picture5 {
			background: url(../../../static/images/mine/gcxsz.png);
			background-size: 100% 100%;
		}
		
		.picture6 {
			background: url(../../../static/images/mine/gcxsf.png);
			background-size: 100% 100%;
		}
		
		.picture7 {
			background: url(../../../static/images/mine/cy.png);
			background-size: 100% 100%;
		}
		
		.picture8 {
			background: url(../../../static/images/mine/cy.png);
			background-size: 100% 100%;
		}
		
		.picture9 {
			background: url(../../../static/images/mine/cy.png);
			background-size: 100% 100%;
		}
		
		.xj-image {
			width: 100rpx;
			height: 100rpx;
		}
		
		.title {
			color: #999999;
			margin: 20rpx 0;
		}
	}

	.input-ckg {
		height: 86rpx;
		margin-top: 0 !important;
		padding-bottom: 0 !important;

		.u-input {
			height: 100%;
			background: #F7F8FA;
			padding-left: 10rpx !important;
			padding-right: 85rpx !important;
		}

		.star {
			display: flex;
			align-items: center;
			margin: 0 10rpx;
		}

		.input-positon {
			position: relative;
		}

		.position-right {
			position: absolute;
			right: 20rpx;
			top: 0;
			width: 60rpx;
			height: 50rpx;
			bottom: 0;
			margin: auto;

		}

	}

	.picture {
		margin-top: 20rpx;
		background: #F5F6FA;
		width: 212rpx;
		height: 212rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6A7282;
	}

	.submit-btn {
		position: fixed;
		bottom: 40rpx;
		width: 90%;
		background: #2772FB;
		color: white;
		text-align: center;
		margin-left: 5%;
		padding: 30rpx 0;
		border-radius: 50rpx;
	}
	.del-card {
		position: absolute;
		top: -10rpx;
		right: -6rpx;
		width: 80rpx;
		height: 80rpx;
		z-index: 9;
	}
</style>