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

<!-- 管理车辆 -->
<template>
	<view class="content">
		<view class="flex s-row container">
			<view class="flex row">
				<view class="left-text">车型</view>
				<view class="color" @click="selectCarModel">{{dataDetails.carCategory}} {{dataDetails.carType}}</view>
				<view>></view>
				<u-picker :show="carModel" :columns="carModelColumns" :closeOnClickOverlay='true' @close='carModelClose'
					@cancel='carModelClose' @confirm='confirmCarModel' @change="changeCarModel"></u-picker>
			</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(2)">
						<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" v-if="sign == '挂车'">牵引车行驶证主页</view>
			<view class="title" v-if="sign == '非挂车'">行驶证主页</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" v-if="sign == '挂车'">上传牵引车行驶证主页</view>
				<view class="text" v-else>上传行驶证主页</view>
			</view>
			<view v-if="dataDetails.drivingLicenseHomePage" @click.stop="uploadImg(1)" class="preview-card-img picture">
				<view @click.stop="delCard(3)">
					<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" v-if="sign == '挂车'">牵引车行驶证副页</view>
			<view class="title" v-if="sign == '非挂车'">行驶证副页</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" v-if="sign == '挂车'">上传牵引车行驶证副页</view>
				<view class="text" v-else>上传行驶证副页</view>
			</view>
			<view v-if="dataDetails.drivingLicenseBackPage" @click.stop="uploadImg(1)" class="preview-card-img picture">
				<view @click.stop="delCard(4)">
					<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(6)">
					{{dataDetails.drivingLicenseRegistrationDate?dataDetails.drivingLicenseRegistrationDate:'选择注册日期>'}}
				</view>
			</view>
			<view class="flex row flex-space-between">
				<view class="left-text">发证日期</view>
				<view class="" @click="selectValidityPeriod(7)">
					{{dataDetails.drivingLicenseIssueDate?dataDetails.drivingLicenseIssueDate:'选择发证日期>'}}
				</view>
			</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="flex row flex-space-between">
				<view class="left-text">使用性质</view>
				<u--input placeholder="输入使用性质" inputAlign='right' border="none" v-model="dataDetails.useNature"
					disabled>
				</u--input>
			</view>
			<view class="flex row flex-space-between">
				<view class="left-text">发证机关</view>
				<u--input placeholder="输入发证机关" inputAlign='right' border="none" maxlength="25" v-model="dataDetails.lssuingAuthority">
				</u--input>
			</view>
			<view class="flex row noborder">
				<view class="left-text">车辆能源类型</view>
				<view class="" @click="driveType">
					{{dataDetails.energyType?dataDetails.energyType:'选择车辆能源类型>'}}
				</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(5)">
						<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(6)">
						<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" v-if="sign == '挂车'">
				<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(8)">
					{{dataDetails.trailerLicenseRegistrationDate?dataDetails.trailerLicenseRegistrationDate:'选择注册日期>'}}
				</view>
			</view> 
			<view class="flex row flex-space-between" v-if="sign == '挂车'">
				<view class="left-text">发证日期</view>
				<view class="" @click="selectValidityPeriod(9)">
					{{dataDetails.trailerLicenseIssueDate?dataDetails.trailerLicenseIssueDate:'选择发证日期>'}}
				</view>
			</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 class="flex row flex-space-between" v-if="sign == '挂车'">
				<view class="left-text">使用性质</view>
				<u--input placeholder="输入使用性质" inputAlign='right' border="none" v-model="dataDetails.guaUseNature"
					disabled>
				</u--input>
			</view>
			<view class="flex row flex-space-between" v-if="sign == '挂车'">
				<view class="left-text">发证机关</view>
				<u--input placeholder="输入发证机关" inputAlign='right' border="none" maxlength="25"
					v-model="dataDetails.guaLssuingAuthority">
				</u--input>
			</view>
			<!-- 牵引车 -->
			<view class="flex row" v-if="sign == '挂车'">
				<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"></input>
				</view>
			</view>
			<view class="flex row" v-if="sign == '非挂车'">
				<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"></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' @change="changeCarModel"></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" v-if="sign == '非挂车'">
				<view class="left-text">总质量（千克）</view>
				<u--input placeholder="输入总质量" inputAlign='left' border="none" v-model="dataDetails.carTotalWeight">
				</u--input>
			</view>
			<view class="flex row" v-if="sign == '挂车'">
				<view class="left-text">整备质量（千克）</view>
				<u--input placeholder="输入整备质量" inputAlign='left' border="none" v-model="dataDetails.servicingWeight">
				</u--input>
			</view>
			<view class="flex row noborder" v-if="sign == '挂车'">
				<view class="left-text">牵引车外廓尺寸（毫米）</view>
			</view>
			<view class="flex row noborder" v-if="sign == '非挂车'">
				<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%;" v-if="sign == '挂车'">上传人和牵引车合影（牵引车牌号可见）</view>
				<view class="left-text" style="width: 100%;" v-if="sign == '非挂车'">上传人车合影（车头车牌号可见）</view>
				<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event,'1')"
					@delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
			</view>

			<!-- 挂车 -->
			<view v-if="sign == '挂车'">
				<view class="flex row">
					<view class="left left-text">挂车车牌号</view>
					<view class="right flex">
						<input class="car-uumber" v-model='dataDetails.guaCarNumber'
							@click.stop="handleShowKeyboard1(index)" :disabled="true" placeholder="输入挂车牌号"
							name="input"></input>
					</view>
				</view>

				<view class="flex row">
					<view class="left-text">车辆所属车主</view>
					<u--input placeholder="输入车主姓名" inputAlign='left' border="none" v-model="dataDetails.guaOwner">
					</u--input>
				</view>
				<view class="flex row">
					<view class="left-text">整备质量（千克）</view>
					<u--input placeholder="输入整备质量" inputAlign='left' border="none"
						v-model="dataDetails.guaServicingWeight">
					</u--input>
				</view>
				<view class="flex row">
					<view class="left-text">核定载质量（千克）</view>
					<u--input placeholder="输入核定载质量" inputAlign='left' border="none"
						v-model="dataDetails.guaCarApprovedWeight">
					</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.guaCarLong">
						</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.guaCarWidth">
						</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.guaCarHeight">
						</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="fileList2" @afterRead="afterRead1($event,'2')"
						@delete="deletePic" name="2" multiple :maxCount="1"></u-upload>
				</view>
			</view>
			<!-- <view class="level1-title">证件信息</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>
		<master-keyboard ref="keyboard1" keyboardtype="car" :show="keyShow1" :randomNumber="true" :newCar="false"
			:defaultValue="carNumber1" @keyboardClick="handleClick1"></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>
		<u-picker :show="isShowCarType" ref="uPicker" :columns="carTypeList" @confirm="confirmCarType"
			:closeOnClickOverlay='true' @close='isShowCarType=false' @cancel='isShowCarType=false'>
		</u-picker>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	var _this;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				index: '',
				keyShow: false,
				keyShow1: false,
				carNumber: '',
				carNumber1: "",
				dataDetails: {
					// driverId: '',
					// carNumber: '',
					carNumberColour: '黄色',
					carCategory: '挂车',
					carType: '高栏',
					useNature: "营业特种车",
					guaUseNature: "营运挂车",
					energyType:"汽油",
					// carTotalWeight: '',
					// carApprovedWeight: '',
					// carLong: '',
					// carWidth: '',
					// carHeight: '',
					// addressUrl: ''

				},
				carTypeList:[["汽油","柴油","油电混合","纯电动","插电式混合动力","增程式"]],
				isShowCarType:false,
				carModelColumns: [
					['挂车', '非挂车'],
					['高栏', '集装箱', '自卸车']
				],
				carModelColumnData: [
					['高栏', '集装箱', '自卸车'],
					['重型仓栏']
				],
				colorColumns: [
					['黄色', '蓝色']
				],
				carColor: false,
				carModel: false,
				fileList1: [],
				fileList2: [],
				ValidityPeriodType: "",
				validityPeriod: [],
				isShowValidity: false,
				uploadType: '',
				isShowimgType: false,
				sign: "挂车"

			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication']),
		},
		onLoad(options) {
			_this = this;
			this.dataDetails.commonId = this.userInfo.id
			this.validityPeriod = this.$helper.makeValidityPeriod()
		},
		methods: {
			driveType(){
				this.isShowCarType = true
			},
			confirmCarType(e){
				this.dataDetails.energyType = e.value[0]
				this.isShowCarType = false
			},
			//挂车牌号弹出键盘
			handleShowKeyboard1(index) {
				if (this.dataDetails.guaCarNumber == '') {
					this.carNumber1 = ''
				} else {
					this.carNumber1 = this.dataDetails.guaCarNumber
				}
				if (this.$refs.keyboard1.open) {
					this.$refs.keyboard1.open(false) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard1[0].open(false)
				}
				this.index = index
				if (this.$refs.keyboard1.open) {
					this.$refs.keyboard1.open(true) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard1[0].open(true)
				}
			},
			handleClick1(e) {
				this.carNumber1 = e.value
				this.dataDetails.guaCarNumber = e.value //键盘输入值
			},
			delCard(type) {
				switch (type) {
					case 1:
						_this.dataDetails.operationCertificate = ""  //道路运输证
						break;
					case 2:
						_this.dataDetails.trailerOperationCertificate = ""  //挂车道路运输证
						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;
				}
				
				_this.$forceUpdate()
			},
			uploadImg(type) {
				this.uploadType = type
				this.imgTypeSelect()
				// this.isShowimgType = true
			},
			selectValidityPeriod(type) {
				this.ValidityPeriodType = type
				this.isShowValidity = true
			},
			// 上传图片
			imgTypeSelect(val) {
				// if (val.name == '相册') {
					uni.chooseImage({
						count: 1,
						success: function(res) {
							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
											_this.$request.baseRequest('get',
													'/driverCarInfo/api/driveringLicenseShibie', {
														image: result,
														flag: 1
													}).then(res => {
													if (res.data) {
														_this.dataDetails.carNumber = res.data
															.carNum //车牌号
														_this.dataDetails.owner = res.data
															.owner //车辆所有人
														_this.$forceUpdate()
													}
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break;
										case 4:
											_this.dataDetails.drivingLicenseBackPage = result

											_this.$request.baseRequest('get',
													'/driverCarInfo/api/driveringLicenseShibie', {
														image: result,
														flag: 2
													}).then(res => {
													if (res.data) {
														if (res.data.issuingAuthority) { //行驶证发证机关
															_this.dataDetails.lssuingAuthority = res
																.data.issuingAuthority
														}
														if (res.data
															.licenseRegistrationDate) { //行驶证注册日期
															_this.dataDetails
																.drivingLicenseRegistrationDate = res
																.data.licenseRegistrationDate
														}
														if (res.data.licenseIssueDate) { //行驶证发证日期
															_this.dataDetails.drivingLicenseIssueDate =
																res.data.licenseIssueDate
														}
														_this.dataDetails.drivingLicenseValidityDate =
															res.data.driveringEndDate //行驶证有效期
														_this.dataDetails.drivingLicenseNumber = res
															.data.driveringNum //行驶证档案编号
														if (_this.sign == "非挂车") {
															if (res.data.servicingMass && res.data
																.servicingMass.indexOf("kg") != -1) {
																res.data.servicingMass = res.data
																	.servicingMass.slice(0, res.data
																		.servicingMass.length - 2)
															}
															_this.dataDetails.carTotalWeight = res.data
																.servicingMass //总质量
														}
														if(res.data.approvedLoadMass.indexOf("kg") != -1){
															res.data.approvedLoadMass = res.data.approvedLoadMass.slice(0, res.data.approvedLoadMass.length - 2)
														}
														_this.dataDetails.carApprovedWeight = res.data
															.approvedLoadMass //核定载质量
														if (res.data.size && res.data.size.indexOf(
																"mm") != -1) {
															res.data.size = res.data.size.slice(0, res
																.data.size.length - 2);
														}

														_this.dataDetails.carLong = res.data.size
															.split("X")[0] //车长
														_this.dataDetails.carWidth = res.data.size
															.split("X")[1] //车宽
														_this.dataDetails.carHeight = res.data.size
															.split("X")[2] //车高
														_this.$forceUpdate()
													}
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break;
										case 5: //挂车行驶证
											_this.dataDetails.trailerLicenseHomePage = result
											_this.$request.baseRequest('get',
													'/driverCarInfo/api/driveringLicenseShibie', {
														image: result,
														flag: 1
													}).then(res => {
													if (res.data.issuingAuthority) { //行驶证发证机关
														_this.dataDetails.guaLssuingAuthority = res
															.data.issuingAuthority
													}
													if (res.data.licenseRegistrationDate) { //行驶证注册日期
														_this.dataDetails
															.trailerLicenseRegistrationDate = res.data
															.licenseRegistrationDate
													}
													if (res.data.licenseIssueDate) { //行驶证发证日期
														_this.dataDetails.trailerLicenseIssueDate = res
															.data.licenseIssueDate
													}
													if (res.data) {
														_this.dataDetails.guaCarNumber = res.data
															.carNum //车牌号
														_this.dataDetails.guaOwner = res.data
															.owner //车辆所有人
														_this.$forceUpdate()
													}
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break;
										case 6:
											_this.dataDetails.trailerLicenseBackPage = result
											_this.$request.baseRequest('get',
													'/driverCarInfo/api/driveringLicenseShibie', {
														image: result,
														flag: 2
													}).then(res => {
													if (res.data) {
														_this.dataDetails.trailerLicenseValidityDate =
															res.data.driveringEndDate //挂车行驶证有效期
														_this.dataDetails.trailerLicenseNumber = res
															.data.driveringNum //挂车行驶证档案编号
														if (res.data.servicingMass && res.data
															.servicingMass.indexOf("kg") != -1) {
															res.data.servicingMass = res.data
																.servicingMass.slice(0, res.data
																	.servicingMass.length - 2)
														}
														if(res.data.approvedLoadMass.indexOf("kg") != -1){
															res.data.approvedLoadMass = res.data.approvedLoadMass.slice(0, res.data.approvedLoadMass.length - 2)
														}
														_this.dataDetails.guaServicingWeight = res.data.servicingMass //总质量
														_this.dataDetails.guaCarApprovedWeight = res.data.approvedLoadMass //核定载质量
														if (res.data.size && res.data.size.indexOf(
																"mm") != -1) {
															res.data.size = res.data.size.slice(0, res
																.data.size.length - 2);
														}
														_this.dataDetails.guaCarLong = res.data.size
															.split("X")[0] //车长
														_this.dataDetails.guaCarWidth = res.data.size
															.split("X")[1] //车宽
														_this.dataDetails.guaCarHeight = res.data.size
															.split("X")[2] //车高
														_this.$forceUpdate()
													}
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break;
										case 7:
											_this.dataDetails.qualificationCertificate = result
											break;
										case 8:
											_this.dataDetails.operationCertificate = result
											_this.$request.baseRequest('get',
													'/driverCarInfo/api/tranLicenseShibie', {
														image: result
													}).then(res => {
													if (res.data) {
														_this.dataDetails.operationCertificateNumber =
															res.data.tranNumber
														_this.dataDetails
															.operationCertificateValidityDate = res
															.data.tranEndDate
														_this.$forceUpdate()
													}

												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break;
										case 9:
											_this.dataDetails.trailerOperationCertificate = result
											_this.$request.baseRequest('get',
													'/driverCarInfo/api/tranLicenseShibie', {
														image: result
													}).then(res => {
													if (res.data) {
														_this.dataDetails
															.trailerOperationCertificateNumber = res
															.data.tranNumber
														_this.dataDetails
															.trailerOperationCertificateValidityDate =
															res.data.tranEndDate
														_this.$forceUpdate()
													}
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break;
									}
									_this.$forceUpdate()
								}
							)
						}
					});

				// }
			},
			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]
					case 6: //行驶证注册日期
						this.dataDetails.drivingLicenseRegistrationDate = e.value[0] + '-' + e.value[1] + '-' + e
							.value[2]
						break
					case 7: //行驶证发证日期
						this.dataDetails.drivingLicenseIssueDate = e.value[0] + '-' + e.value[1] + '-' + e
							.value[2]
						break
					case 8: //挂车行驶证注册日期
						this.dataDetails.trailerLicenseRegistrationDate = e.value[0] + '-' + e.value[1] + '-' + e
							.value[2]
						break
					case 9: //挂车行驶证发证日期
						this.dataDetails.trailerLicenseIssueDate = e.value[0] + '-' + e.value[1] + '-' + e
							.value[2]
						break
				}
				this.isShowValidity = false
			},
			// 车型切换
			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, num) {
				// 当设置 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, num)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 新增图片
			async afterRead1(event, num) {
				console.log(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, num)
					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, num) {
				uploadImage('image', url, 'appData/',
					result => {
						// 上传成功回调函数
						console.log('图片地址', result)

						if (num == 1) {
							if (!this.dataDetails.addressUrl) {
								this.dataDetails.addressUrl = result
							} else {
								this.dataDetails.addressUrl = this.dataDetails.addressUrl + ',' + result
							}
						} else if (num == 2) {
							if (!this.dataDetails.guaAddressUrl) {
								this.dataDetails.guaAddressUrl = result
							} else {
								this.dataDetails.guaAddressUrl = this.dataDetails.guaAddressUrl + ',' + 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) {
				if (val.value[0] == '挂车') {
					this.dataDetails.useNature = "营业特种车"
					this.dataDetails.guaUseNature = "营运挂车"
				} else if (val.value[0] == '非挂车') {
					this.dataDetails.useNature = "营运货车"
				}
				this.sign = val.value[0]
				// this.dataDetails.carType = val.value[0] + ' ' + val.value[1]
				this.dataDetails.carCategory = val.value[0]
				this.dataDetails.carType = 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('image', res.tempFilePaths[0], 'appData/',
							result => {
								// 上传成功
								console.log('图片地址', result)
							}
						)
					}
				});
			},
			validate() {
				// true 为校验不通过
				if (uni.$u.test.isEmpty(this.dataDetails.carNumber)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "车牌号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.carTotalWeight) && this.sign == '非挂车') {
					this.$refs.uToast.show({
						type: 'error',
						message: "总质量不能为空！",
					})
					return true
				}
				
				if (uni.$u.test.isEmpty(this.dataDetails.servicingWeight) && this.sign == '挂车') {
					this.$refs.uToast.show({
						type: 'error',
						message: "整备质量不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.owner)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "车辆所属车主不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.carLong) && uni.$u.test.isEmpty(this.dataDetails.caWidth) && uni
					.$u.test.isEmpty(this.dataDetails.carHeight)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "外廓尺寸不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.operationCertificate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "道路运输证不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.operationCertificateNumber)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "道路运输证号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.operationCertificateValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "道路运输证有效期不能为空！",
					})
					return true
				}
				if (this.sign == '挂车') {
					if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificate)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车道路运输证不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificateNumber)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车道路运输证号不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificateValidityDate)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车道路运输证有效期不能为空！",
						})
						return true
					}
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseHomePage)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证主页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseBackPage)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证副页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseNumber)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证档案编号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseRegistrationDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证注册日期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseIssueDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证发证日期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证有效期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.lssuingAuthority)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证发证机关不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.energyType)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "能源类型不能为空！",
					})
					return true
				}

				if (this.sign == '挂车') {
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseHomePage)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证主页不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseBackPage)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证副页不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseNumber)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证档案编号不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.guaCarNumber)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车车牌号不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.guaOwner)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "车辆所属车主不能为空！",
						})
						return true
					}    
					if (uni.$u.test.isEmpty(this.dataDetails.guaServicingWeight)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车整备质量不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.guaCarApprovedWeight)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车核定载质量不能为空！",
						})
						return true
					} 
					if (uni.$u.test.isEmpty(this.dataDetails.guaCarLong) || uni.$u.test.isEmpty(this.dataDetails.guaCarWidth) || uni.$u.test.isEmpty(this.dataDetails.guaCarHeight)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车外廓尺寸不能为空！",
						})
						return true
					}
					// if (this.dataDetails.fileList2.length == 0) {
					// 	this.$refs.uToast.show({
					// 		type: 'error',
					// 		message: "人和挂车合影不能为空！",
					// 	})
					// 	return true
					// }
					
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseRegistrationDate)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证注册日期不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseIssueDate)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证发证日期不能为空！！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseValidityDate)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证有效期不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.guaLssuingAuthority)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证发证机关不能为空！",
						})
						return true
					}
				}
				return false
			},
			submit() {
				this.dataDetails.driverId = uni.getStorageSync("firstAuthentication").id
				// 校验
				if (this.validate()) return
				if (!this.dataDetails.carApprovedWeight) {
					delete this.dataDetails.carApprovedWeight
				}
				if(this.dataDetails.carCategory == "非挂车"){
					delete this.dataDetails.guaUseNature
				}
				this.$request.baseRequest('post', '/driverCarInfo/api/addInfo', 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;
	}
	/deep/.uni-input-input:disabled{
		background:#fff;
	}
</style>