wangluohuoyun-app/pages/mine/driverCertification.vue

<template>
	<view class="content">
		<view class="top-head"></view>
		<view class="container">
			<view class="content1 content-other">
				<view class="flex row">
					<view class="left-text">姓名</view>
					<u--input placeholder="输入姓名" inputAlign='left' border="none" v-model="dataDetails.driverName">
					</u--input>
				</view>
				<view class="flex row">
					<view class="left-text">性别</view>
					<u-radio-group v-model="dataDetails.driverSex" placement="row">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>

				<view class="flex row row-ch">
					<view class="left-text">称呼</view>
					<u--input placeholder="输入姓氏" class="ch-style" inputAlign='center' border="none"
						v-model="dataDetails.driverCall">
					</u--input>
					<view class="flex align-center" v-if="dataDetails.driverSex=='男'">先生</view>
					<view class="flex align-center" v-else>女士</view>
				</view>
				<view class="flex row noborder">
					<view class="left-text">联系电话</view>
					<u--input placeholder="请输入联系电话" inputAlign='left' border="none" v-model="dataDetails.driverPhone">
					</u--input>
				</view>
				<view class="flex row noborder" v-if="dataDetails.driverPhone!=userInfo.phone">
					<view class="left-text">验证码</view>
					<u--input v-model="dataDetails.verifyCode" border="none" placeholder="请填写验证码"></u--input>
					<view class="yzm">
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<u-button class="yzm-btn" @tap="getCode">{{tips}}</u-button>
					</view>
				</view>

			</view>
			<view v-if="isFirstAuthentication" class="content1-car">
				<view class="flex s-row carlist-item" v-for="(item,index) in dataDetails.driverCarInfoList"
					:key='index'>
					<view class="flex row">
						<view class="left left-text">
							车牌号-{{index+1}}
						</view>
						<view class="right flex">
							<input class="car-uumber" v-model='item.carNumber' @click.stop="handleShowKeyboard(index)"
								:disabled="true" placeholder="输入车牌号" name="input"></input>
							<view @click="delCarNumber(dataDetails.driverCarInfoList,index)" class="" v-if="index!=0">
								<image class='del-car' src="@/static/images/common/quxiao@2x.png">
								</image>
							</view>
						</view>
					</view>
					<view class="flex row">
						<view class="left-text">车牌颜色</view>
						<view class="color" @click="selectNoColor">{{item.carNumberColour}}
						</view>
						<view>></view>
						<u-picker :show="carColor" :columns="colorColumns" :closeOnClickOverlay='true'
							@close='colorClose' @cancel='colorClose' @confirm='confirmColor($event,item)'></u-picker>
					</view>
					<view class="flex row">
						<view class="left-text">车型</view>
						<view class="color" @click="selectCarModel">{{item.carType}}</view>
						<view>></view>
						<u-picker ref="carTypePicker" :show="carModel" :columns="carModelColumns"
							:closeOnClickOverlay='true' @close='carModelClose' @cancel='carModelClose'
							@confirm='confirmCarModel($event,item)' @change="changeCarModel"></u-picker>
					</view>
					<view class="flex row">
						<view class="left-text">总质量（千克）</view>
						<u--input placeholder="输入总质量" inputAlign='left' border="none" v-model="item.carTotalWeight">
						</u--input>
					</view>
					<view class="flex row">
						<view class="left-text">核定载质量（千克）</view>
						<u--input placeholder="输入核定载质量" inputAlign='left' border="none"
							v-model="item.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="item.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="item.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="item.carHeight">
							</u--input>
							<view class="position-right">
								mm
							</view>
						</view>
					</view>
					<view class="flex row noborder s-row">
						<view class="left-text">人车合影-{{index+1}}</view>
						<u-upload class="uview-upload" :fileList="item.fileList1" @afterRead="afterRead($event,item)"
							@delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
						<!-- <view @click="uploadImg(0,index)" class="picture" v-if='!item.addressUrl'>
							<image class="xj-image" src="@/static/images/common/tianjiazhaopian@2x.png"
								></image>
						</view> -->

						<!-- <image class="preview-img" :src="item.addressUrl" v-if='item.addressUrl'></image> -->
					</view>
				</view>
			</view>
			<view  v-if="isFirstAuthentication" @click="addCarNumber(dataDetails.driverCarInfoList)" class="add-car">
				<u-icon class="icon" name="plus-circle-fill" color="#2979ff" size="28"></u-icon>
				<view class="car-text">
					添加车辆
				</view>
			</view>

			<view class="content2 content-other">
				<view class="title">上传身份证人像面</view>
				<view @click.stop="uploadImg(1,index)" class="picture picture1" v-if="!dataDetails.cardAddressUrl">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传身份证人像面</view>
				</view>
				<view v-if="dataDetails.cardAddressUrl" @click.stop="uploadImg(1,index)"
					class="preview-card-img picture">
					<!-- <image class="card-img" :src="dataDetails.cardAddressUrl"></image> -->
					<view @click.stop="delCard(1)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>

					<image class="" :src="dataDetails.cardAddressUrl" mode="aspectFit" style=""></image>
				</view>

				<view class="title">上传身份证国徽面</view>
				<view @click="uploadImg(2,index)" class="picture picture2" v-if="!dataDetails.cardBackAddressUrl">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传身份证国徽面</view>
				</view>

				<view v-if="dataDetails.cardBackAddressUrl" @click.stop="uploadImg(2,index)"
					class="preview-card-img picture">
					<!-- <image class="card-img" :src="dataDetails.cardAddressUrl"></image> -->
					<view @click.stop="delCard(2)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>

					<image class="" :src="dataDetails.cardBackAddressUrl" mode="aspectFit"></image>
				</view>

				<view class="flex row">
					<view class="left-text">身份证号</view>
					<u--input placeholder="请输入身份证号" inputAlign='left' border="none" v-model="dataDetails.numberCard">
					</u--input>
				</view>

				<view class="flex row noborder">
					<view class="left-text">身份证截止日期</view>
					<view class="" @click="selectValidityPeriod">
						{{dataDetails.cardValidityDate?dataDetails.cardValidityDate:'选择身份证截止日期>'}}
					</view>
				</view>
				<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
					@confirm="confirmValidityPeriod" @change="changeHandler">
				</u-picker>
			</view>
			<view class="content3 flex s-row" v-for="(item,index) in dataDetails.driverPayeeInfoList" :key='index'>
				<view class="flex">
					银行卡-{{index+1}}
				</view>
				<view @click="delBankNumber(dataDetails.driverPayeeInfoList,index)" class="" v-if="index!=0">
					<image class='del-bank' src="@/static/images/common/quxiao@2x.png">
					</image>
				</view>
				<view class="title">上传银行卡卡号页</view>
				<view @click="uploadImg(3,index)" class="picture picture3" v-if="!item.payeeAddressUrl">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传银行卡卡号页</view>
				</view>

				<view v-if="item.payeeAddressUrl" @click.stop="uploadImg(3,index)" class="preview-card-img picture">
					<!-- <image class="card-img" :src="dataDetails.cardAddressUrl"></image> -->
					<view @click.stop="delCard(3)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>
					<image class="" :src="item.payeeAddressUrl" mode="aspectFit"></image>
				</view>
				<view class="flex row">
					<view class="left-text">银行卡卡号</view>
					<view class="flex">
						<u--input placeholder="输入银行卡号码" inputAlign='left' border="none" v-model="item.bankCard">
						</u--input>
					</view>
				</view>
				<view class="flex row">
					<view class="left-text">开户行</view>
					<u--input placeholder="输入开户行" inputAlign='left' border="none" v-model="item.bankDeposit">
					</u--input>
				</view>
				<view class="flex row">
					<view class="left-text khzh-styel">开户支行</view>
					<view class="flex" v-if="isShowManualInput">
						<u--input class="select-bankzh" placeholder="输入开户支行" inputAlign='left' border="none"
							v-model="item.bankDepositBranch">
						</u--input>
						<view @click="manualInput" class="type">选择支行</view>
					</view>
					<view class="flex" v-if="!isShowManualInput">

						<view class="select-bankzh point" @click="selectZhbank">
							{{item.bankDepositBranch?item.bankDepositBranch:'选择开户支行'}}
						</view>
						<view @click="manualInput" class="type">手动输入</view>
					</view>

				</view>
				<view class="flex row noborder">
					<view class="left-text">收款人</view>
					<view class="flex">
						<u--input placeholder="输入收款人姓名" inputAlign='left' border="none" v-model="item.payeeName">
						</u--input>
					</view>
				</view>
				<u-picker :show="isShowBank" :columns="bankType[index]" :closeOnClickOverlay='true' @close='zhBankClose'
					@cancel='zhBankClose' @confirm='confirmBank'></u-picker>

				</u-picker>
			</view>

			<view @click="addBankNumber(dataDetails.driverPayeeInfoList)" class="add-car">
				<u-icon class="icon" name="plus-circle-fill" color="#2979ff" size="28"></u-icon>
				<view class="car-text">
					添加银行卡
				</view>
			</view>

			<master-keyboard ref="keyboard" keyboardtype="car" :show="keyShow" :randomNumber="true" :newCar="false"
				:defaultValue="carNumber" @keyboardClick="handleClick"></master-keyboard>
			<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
				@select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true"
				@close="isShowimgType=false">
			</u-action-sheet>
			<u-toast ref="uToast"></u-toast>
		</view>
		<view class="content4">
			<view class="next-btn" @click="next()">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	import upload from '@/components/upload.vue';
	import uploadImage from '@/components/ossutil/uploadFile.js';
	var _this
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			keyboard,
			upload
		},
		data() {
			return {
				canvasSiz: {
					width: 188,
					height: 273
				},
				tips: '',
				// refCode: null,
				seconds: 30,
				carModelColumns: [
					['挂车', '非挂车'],
					['高栏', '集装箱', '自卸车']
				],
				carModelColumnData: [
					['高栏', '集装箱', '自卸车'],
					['重型仓栏']
				],
				colorColumns: [
					['黄色', '蓝色']
				],
				carColor: false,
				carModel: false,
				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
				],
				isFirstAuthentication: true,
				bankType: [],
				isShowBank: false,
				isShowManualInput: false,
				index: '',
				validityPeriod: [],
				isShowcardValidity: false,
				uploadType: '',
				isShowimgType: false,
				// uploadOptions1: {
				// 	"text": "上传身份证头像页",
				// 	"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identityup%282%29.png"
				// },
				// uploadOptions2: {
				// 	"text": "上传身份证国徽页",
				// 	"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identitylow%282%29.png"
				// },
				// uploadOptions3: {
				// 	"text": "上传银行卡正面",
				// 	"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/bankup%282%29.png"
				// },
				dataDetails: {
					commonId: '',
					driverName: '',
					driverSex: '男',
					driverCall: '',
					driverPhone: '',
					numberCard: '',
					cardAddressUrl: '',
					cardBackAddressUrl: '',
					cardValidityDate: '',
					driverType: '',
					driverLicenseHomePage: '',
					driverLicenseBackPage: '',
					driverLicenseValidityDate: '',
					drivingLicenseHomePage: '',
					drivingLicenseBackPage: '',
					drivingLicenseValidityDate: '',
					trailerLicenseHomePage: '',
					trailerLicenseBackPage: '',
					trailerLicenseValidityDate: '',
					qualificationCertificate: '',
					qualificationCertificateValidityDate: '',
					operationCertificate: '',
					operationCertificateValidityDate: '',
					trailerOperationCertificate: '',
					trailerOperationCertificateValidityDate: '',
					driverCarInfoList: [{
						carNumber: '',
						addressUrl: '',
						carNumberColour: '黄色',
						carType: '',
						carTotalWeight: '',
						carApprovedWeight: '',
						carLong: '',
						carWidth: '',
						carHeight: '',
						fileList1: []
					}],
					driverPayeeInfoList: [{
						payeeAddressUrl: '',
						bankCard: '',
						bankDeposit: '',
						bankDepositBranch: '',
						payeeName: ''
					}],
				},
				keyShow: false,
				carNumber: '',
				action: this.$helper.ossUploadUrl,
				// maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				// isAdd: true,
				imagesrc: null
			};
		},
		onLoad() {
			_this = this;
			console.log(this.userInfo)
			//获取截止日期List数据
			this.validityPeriod = this.$helper.makeValidityPeriod(0)
			this.dataDetails.driverPhone = this.userInfo.phone
			this.dataDetails.commonId = this.userInfo.id
			//获取认证状态
			this.getAuthenticationStatus()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			delCard(type) {
				switch (type) {
					// 人车合影
					// case 0:
					// 	//赋值上传图片图片路径
					// 	_this.dataDetails.driverCarInfoList[_this.index].addressUrl =
					// 		result
					// 	break
					// 身份正面
					case 1:
						_this.dataDetails.cardAddressUrl = ''

						break
						// 身份反面
					case 2:
						_this.dataDetails.cardBackAddressUrl = ''
						break
						// 银行卡
					case 3:
						_this.dataDetails.driverPayeeInfoList[_this.index].payeeAddressUrl = ''
						break;
				}
			},
			// 删除图片
			deletePic(event, val) {
				val[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event, val) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = val[`fileList${event.name}`].length
				lists.map((item) => {
					val[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, val)
					let item = val[`fileList${event.name}`][fileListLen]
					val[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url, val) {
				uploadImage(url, 'appData/',
					result => {
						// 上传成功回调函数
						console.log('图片地址', result)
						val.addressUrl += result

					}
				)
				// return new Promise((resolve, reject) => {
				// 	let a = uploadImage()
				// 	let a = uni.uploadFile({
				// 		url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
				// 		filePath: url,
				// 		name: 'file',
				// 		formData: {
				// 			user: 'test'
				// 		},
				// 		success: (res) => {
				// 			setTimeout(() => {
				// 				resolve(res.data.data)
				// 			}, 1000)
				// 		}
				// 	});
				// })
			},


			// 车型切换
			changeCarModel(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.carTypePicker
				} = e
				if (columnIndex === 0) {
					// 模拟网络请求
					picker.setColumnValues(1, this.carModelColumnData[index])
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.dataDetails.driverPhone)) {
					if (this.$refs.uCode.canGetCode) {

						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						_this.$request.baseRequest('get', '/commonUser/sendVerifyCode', {
								phone: this.dataDetails.driverPhone
							}).then(res => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();

							})
							.catch(res => {
								uni.$u.toast(res.message);
							});

						// setTimeout(() => {

						// }, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast('请输入正确手机号');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			// 确认颜色
			confirmColor(val, val1) {
				console.log(val)
				val1.carNumberColour = val.value[0]


				this.carColor = false
			},
			colorClose() {
				this.carColor = false
			},
			//选择车牌号颜色
			selectNoColor() {
				this.carColor = true
			},
			confirmCarModel(val, val1) {
				val1.carType = val.value[0] + ' ' + val.value[1]
				this.carModel = false
			},
			carModelClose() {
				this.carModel = false
			},
			selectCarModel() {
				this.carModel = true
			},
			// 性别切换
			radioChange(n) {
				console.log('radioChange', n);
				this.dataDetails.driverSex = n
			},
			//判断是否是初次认证
			getAuthenticationStatus() {
				this.$request.baseRequest('', '/driverInfo/firstAuthentication', {
						driverPhone: this.userInfo.phone,
					}).then(res => {
						if (res.data) {
							this.isFirstAuthentication = false
						} else {
							this.isFirstAuthentication = true
						}
						// 
						// 
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			zhBankClose() {
				this.isShowBank = false
			},
			// 选择支行
			selectZhbank() {
				if (uni.$u.test.isEmpty(this.bankType[this.index])) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请先上传银行卡！",
					})
					return true
				}

				this.isShowBank = true
			},
			confirmBank(e) {
				console.log(e)
				this.dataDetails.driverPayeeInfoList[this.index].bankDepositBranch = e.value[0]
				this.isShowBank = false
			},
			manualInput() {

				if (this.isShowManualInput) {
					if (uni.$u.test.isEmpty(this.bankType[this.index])) {
						this.$refs.uToast.show({
							type: 'error',
							message: "请先上传银行卡！",
						})
						return true
					}
					this.isShowBank = true

				} else {
					this.isShowBank = false
				}
				this.isShowManualInput = !this.isShowManualInput
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e

				// if (columnIndex === 0) {
				// 	debugger
				// 	if (e.index != 0) {
				// 		picker.setColumnValues(1, this.validityPeriod[1].shift())
				// 	}

				// } else if (columnIndex === 1) {
				// 	if (e.index != 0) {
				// 		picker.setColumnValues(2, this.validityPeriod[2].shift())
				// 	}
				// }
			},
			// 回调参数为包含columnIndex、value、values
			confirmValidityPeriod(e) {
				console.log('confirm', e)
				if (e.value[0] == '长期') {
					this.dataDetails.cardValidityDate = e.value[0]
				} else {
					this.dataDetails.cardValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
				}

				this.isShowcardValidity = false
			},
			selectValidityPeriod() {
				this.isShowcardValidity = true
			},
			//设置图片
			setImage(e) {
				console.log(e);
				//显示在页面
				//this.imagesrc = e.path;
				if (e.dotype == 'idphoto') {
					_this.zjzClipper(e.path);
				} else if (e.dotype == 'watermark') {
					_this.watermark(e.path);
				} else {
					_this.savePhoto(e.path);
				}
			},
			//保存图片到相册，方便核查
			savePhoto(path) {
				this.imagesrc = path;
				// this.dataDetails.cardAddressUrl = path
				uploadImage(path, 'appData/',
					result => {
						// 上传成功
						console.log('图片地址', result)
						this.dataDetails.cardAddressUrl = result
					}
				)
			},
			uploadImg(type, index) {
				this.uploadType = type
				this.isShowimgType = true
				this.index = index

			},
			// 上传图片
			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(res.tempFilePaths[0], 'appData/',
								result => {
									// 上传成功回调函数
									console.log('图片地址', result)
									switch (_this.uploadType) {
										// 身份正面
										case 1:
											_this.dataDetails.cardAddressUrl = result
											// 识别
											_this.$request.baseRequest('get',
													'/driverInfo/personShibie', {
														personImg: result,
													}).then(res => {
													_this.dataDetails.numberCard = res.data.recPersonNo
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break
											// 身份反面
										case 2:
											_this.dataDetails.cardBackAddressUrl = result
											break
											// 银行卡
										case 3:
											_this.bankType[_this.index] = []
											_this.$request.baseRequest('get',
													'/driverInfo/bankShibie', {
														bankImg: result,
													}).then(res => {
													console.log(res)
													_this.dataDetails.driverPayeeInfoList[_this.index]
														.payeeAddressUrl = result
													if (res.data.bankNo) {
														_this.dataDetails.driverPayeeInfoList[_this
															.index].bankCard = res.data.bankNo
													}
													if (res.data.bankName) {
														_this.dataDetails.driverPayeeInfoList[_this
															.index].bankDeposit = res.data.bankName
													}

													// 开户支行LIst
													if (res.data.bankNameZhihang) {
														_this.bankType[_this.index].push(res.data
															.bankNameZhihang)

													}
													_this.$forceUpdate()
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});

											break;
									}
								}
							)
						}
					});

				} else {
					switch (this.uploadType) {
						// case 0:
						// 	console.log('人车合影')
						// 	break
						case 1:
							uni.$u.route('/pages/mine/camera/idcard/idcard?dotype=idcardface');
							console.log('身份正面')
							break
						case 2:
							uni.$u.route('/pages/mine/camera/idcard/idcard?dotype=badge');
							console.log('身份反面')
							break
						case 3:
							uni.$u.route('/pages/mine/camera/idcard/idcard?dotype=bank');
							console.log('银行卡')

							break
						case 4:
					}
				}

			},
			//车牌号弹出键盘
			handleClick(e) {
				this.carNumber = e.value
				this.dataDetails.driverCarInfoList[this.index].carNumber = e.value //键盘输入值
			},
			//车牌号弹出键盘
			handleShowKeyboard(index) {
				if (this.dataDetails.driverCarInfoList[index].carNumber == '') {
					this.carNumber = ''
				} else {
					this.carNumber = this.dataDetails.driverCarInfoList[index].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)
				}
			},
			addCarNumber(val) {
				val.push({
					carNumber: '',
					addressUrl: '',
					carNumberColour: '',
					carType: '',
					carTotalWeight: '',
					carApprovedWeight: '',
					carLong: '',
					carWidth: '',
					carHeight: '',
					fileList1: []
				})
			},
			delCarNumber(val, index) {
				if (val.length > 1) {
					val.splice(index, 1)
					this.$forceUpdate()
				} else {
					let params = {
						type: 'error',
						message: "至少保留一个车牌号！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					}
					this.$refs.uToast.show({
						...params
					})
				}
			},
			addBankNumber(val) {
				val.push({
					payeeAddressUrl: '',
					bankCard: '',
					bankDeposit: '',
					bankDepositBranch: '',
					payeeName: ''
				})
			},
			delBankNumber(val, index) {
				if (val.length > 1) {
					val.splice(index, 1)
					this.$forceUpdate()
				} else {
					let params = {
						type: 'error',
						message: "至少保留一张银行卡！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					}
					this.$refs.uToast.show({
						...params
					})
				}
			},
			next(val) {
				console.log(111111111111)
				// if (this.validate()) return
				uni.$u.route('/pages/mine/driverCertificationNext', {
					data: JSON.stringify(this.dataDetails),
				});
			},
			validate() {
				// true 为校验不通过
				if (uni.$u.test.isEmpty(this.dataDetails.driverName)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "司机姓名不能为空！",
					})
					return true
				}
				if (!uni.$u.test.chinese(this.dataDetails.driverName)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "姓名为汉字！",
					})
					return true
				}

				if (uni.$u.test.isEmpty(this.dataDetails.driverPhone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "联系电话不能为空！",
					})
					return true
				}
				if (!uni.$u.test.mobile(this.dataDetails.driverPhone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "电话号码格式错误！",
					})
					return true
				}
				for (let i = 0; i < this.dataDetails.driverCarInfoList.length; i++) {
					let _item = this.dataDetails.driverCarInfoList[i]
					if (uni.$u.test.isEmpty(_item.carNumber)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "车牌号不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(_item.addressUrl)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "人车合影不能为空！",
						})
						return true
					}
				}

				if (uni.$u.test.isEmpty(this.dataDetails.driverPhone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证人像页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.driverPhone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证国徽页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.cardValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证人有效截止日期不能为空！",
					})
					return true
				}

				for (let i = 0; i < this.dataDetails.driverPayeeInfoList.length; i++) {
					let _item = this.dataDetails.driverPayeeInfoList[i]
					if (uni.$u.test.isEmpty(_item.payeeAddressUrl)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "银行卡不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(_item.bankCard)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "银行卡号码不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(_item.bankDeposit)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "开户行不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(_item.bankDepositBranch)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "开户支行不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(_item.payeeName)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "收款人姓名不能为空！",
						})
						return true
					}
				}
				return false
			}
		},
	};
</script>

<style scoped lang="scss">
	/deep/.u-radio {
		margin-bottom: 0 !important;
	}

	.top-head {
		background: #2772FB;
		height: 80rpx;
		width: 100%;
	}

	.container {
		position: relative;
		top: -60rpx;
		margin: 0 20rpx;
	}

	.row4-img {
		width: 32rpx;
		height: 32rpx;
	}

	.content1,
	.content2,
	.content3 {
		.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: 180rpx;
			box-sizing: border-box;
			// background-color: red;
		}
	}

	.content1-car {
		margin-top: 20rpx;

		.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;

			.color {
				// background: blue;
				width: 340rpx;
			}
		}
	}

	.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: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6A7282;
	}

	.add-car {
		background: #FFFFFF;
		margin: 20rpx 50rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;

		.icon {
			margin-right: 20rpx;
		}

		.car-text {
			font-size: 36rpx;
			font-weight: 700;
			color: #2772FB;
		}
	}

	.carlist-item {
		margin-top: 20rpx;
		padding: 0 20rpx 20rpx 20rpx;
		background: white;
		border-radius: 10rpx;
		position: relative;

		.del-car {
			position: absolute;
			top: 0;
			right: 0;
			width: 80rpx;
			height: 80rpx;
		}
	}

	.content2,
	.content3 {
		.del-bank {
			position: absolute;
			top: 0;
			right: 0;
			width: 80rpx;
			height: 80rpx;
		}

		.picture {
			width: 100%;
			height: 440rpx;
			background: red;
			position: relative;

			.text {
				margin-top: 20rpx;
			}
		}

		.picture1 {
			background: url(../../static/images/mine/zm.png);
			background-size: 100% 100%;
		}

		.picture2 {
			background: url(../../static/images/mine/gh.png);
			background-size: 100% 100%;
		}

		.picture3 {
			background: url(../../static/images/mine/yhkzm.png);
			background-size: 100% 100%;
		}

		.xj-image {
			width: 100rpx;
			height: 100rpx;
		}

		.title {
			color: #999999;
			margin: 20rpx 0;
		}
	}

	.content3 {
		position: relative;
		background: white;
		margin: 20rpx 0 0 0;
		border-radius: 10rpx;
		padding: 20rpx;

		.khzh-styel {
			// width: 350rpx;

		}

		.type {
			background: #2772FB;
			border-radius: 10rpx;
			color: white;
			box-sizing: border-box;
			padding: 4rpx 10rpx;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.select-bankzh {
			width: 230rpx;
			height: 48rpx;
		}
	}

	.content4 {
		display: flex;
		justify-content: center;
		background: white;
		padding: 40rpx 20rpx 50rpx 20rpx;

		.next-btn {
			background: #F1F3F6;
			width: 90%;
			padding: 20rpx 20rpx;
			text-align: center;
			color: #C5CAD4;
			border-radius: 50rpx;
		}
	}

	.yzm {}

	.yzm-btn {
		background: #2772FB;
		color: white;
		height: 60rpx;
	}

	.preview-card-img {
		/deep/uni-image>div, uni-image>img {
		    // transform: scale(1.5) rotate(-90deg);
		}
	}

	.del-card {
		position: absolute;
		top: -10rpx;
		right: -6rpx;
		width: 80rpx;
		height: 80rpx;
		z-index: 9;
	}

</style>