wangluohuoyun-app/pages/mine/fleet/carCaptainAuthentication.vue

<template>
	<view class="content">
		<view class="top-head"></view>
		<view class="container">
			<view class="content2 content-other">
				<view class="title">上传身份证人像面</view>
				<view @click.stop="uploadImg(1,1)" 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,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.cardAddressUrl" mode="aspectFit" style=""></image>
				</view>

				<view class="title">上传身份证国徽面</view>
				<view @click="uploadImg(2,2)" 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,2)"
					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.cardBackAddressUrl" mode="aspectFit" style=""></image>
				</view>
				<view class="flex row">
					<view class="left-text">姓名</view>
					<u--input placeholder="输入姓名" inputAlign='right' border="none" v-model="dataDetails.name">
					</u--input>
				</view>
				<view class="flex row">
					<view class="left-text">身份证号</view>
					<u--input disabled placeholder="请输入身份证号" inputAlign='right' border="none"
						v-model="dataDetails.idCard" maxlength="18">
					</u--input>
				</view>

				<view class="flex row flex-space-between">
					<view class="left-text">身份证有效期</view>
					<!-- <view class="" @click="selectValidityPeriod(1)">
						{{dataDetails.cardValidityStartDate?dataDetails.cardValidityStartDate:"选择身份证起始日期>"}}
						{{dataDetails.cardValidityEndDate?dataDetails.cardValidityEndDate:'选择身份证截止日期>'}}
					</view> -->
					<view style='font-size:14px;' class="" @click="selectValidityPeriod(3)">
						{{dataDetails.cardValidityStartDate?dataDetails.cardValidityStartDate:'起始时间'}}
					</view>
					<view>~</view>
					<view style='font-size:14px;' class="" @click="selectValidityPeriod(1)">
						{{dataDetails.cardValidityEndDate?dataDetails.cardValidityEndDate:'结束时间'}}
					</view>
				</view>
			</view>
			<!-- v-for="(item,index) in dataDetails.hyDriverPayeeInfoList" :key='index' -->
			<view class="content3 flex s-row">
				<!-- 	<view class="flex">
					银行卡-{{index+1}}
				</view> -->
				<!-- <view class="">
					<image class='del-bank' src="@/static/images/common/quxiao@2x.png">
					</image>
				</view> -->
				<view class="title">上传银行卡卡号页</view>
				<view @click="uploadImg(3)" class="picture picture3" v-if="!dataDetails.payeeAddressUrl">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传银行卡卡号页</view>
				</view>

				<view v-if="dataDetails.payeeAddressUrl" @click.stop="uploadImg(3)" 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="dataDetails.payeeAddressUrl" mode="aspectFit"></image>
				</view>
				<view class="flex row flex-space-between">
					<view class="left-text">银行卡卡号</view>
					<view class="flex">
						<u--input placeholder="输入银行卡号码" inputAlign='right' border="none" v-model="dataDetails.bankCard"
							maxlength="19">
						</u--input>
					</view>
				</view>
				<view class="flex row">
					<view class="left-text">开户行</view>
					<u--input placeholder="输入开户行" inputAlign='right' border="none" v-model="dataDetails.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='right' border="none"
							v-model="dataDetails.bankDepositBranch">
						</u--input>
						<view @click="manualInput" class="type">选择支行</view>
					</view>
					<view class="flex align-center" v-if="!isShowManualInput">
						<view :style="{'color':dataDetails.bankDepositBranch?'#000':'#C6CBD5'}"
							style='font-size:15px;text-align:right;' class="select-bankzh point" @click="selectZhbank">
							{{dataDetails.bankDepositBranch?dataDetails.bankDepositBranch:'选择开户支行'}}
						</view>
						<view @click="manualInput" class="type">手动输入</view>
					</view>
				</view>
				<view class="flex row flex-space-between">
					<view class="left-text">收款人</view>
					<view class="flex">
						<u--input placeholder="自动获取,不可编辑" inputAlign='right' border="none"
							v-model="dataDetails.payeeName" readonly>
						</u--input>
					</view>
				</view>
				<u-picker :show="isShowBank" :columns="bankType[0]" :closeOnClickOverlay='true' @close='zhBankClose'
					@cancel='zhBankClose' @confirm='confirmBank'></u-picker>
				</u-picker>
			</view>
			<view class="content3 flex s-row">
				<view class="title">道路运输许可证</view>
				<view @click="uploadImg(4)" class="picture picture8" v-if="!dataDetails.roadTransportOperationLicense">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传道路运输许可证</view>
				</view>
				<view v-if="dataDetails.roadTransportOperationLicense" @click.stop="uploadImg(4)"
					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.roadTransportOperationLicense" mode="aspectFit"></image>
				</view>
				<view class="flex row">
					<view class="left-text">许可证编号</view>
					<u--input maxlength='20' placeholder="输入许可证编号" inputAlign='right' border="none"
						v-model="dataDetails.roadTransportOperationLicenseNo">
					</u--input>
				</view>
				<view class="flex row flex-space-between">
					<view class="left-text">许可证有效期</view>
					<view class="" @click="selectValidityPeriod(2)">
						<view
							:style="{'color':dataDetails.roadTransportOperationLicenseValidityDate?'#000':'rgb(192, 196, 204)'}">
							{{dataDetails.roadTransportOperationLicenseValidityDate?dataDetails.roadTransportOperationLicenseValidityDate:'选择有效期'}}
							<image v-if='!dataDetails.roadTransportOperationLicenseValidityDate'
								style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
				@confirm="confirmValidityPeriod" @change="changeHandler" @cancel='isShowcardValidity= false'>
			</u-picker>
			<itmister-date-picker :overdueContent="'身份证已过期'" :dateStatus="status" :periodOfValidity="true"
				:checkYear="year" :checkMonth="month" :checkDay="day" ref="dateEl" :startYear="1999" :futureYear="30"
				@dateConfirm="confirmValidityPeriod"></itmister-date-picker>
			<itmister-date-picker :overdueContent="'许可证已过期'" :dateStatus="status" :periodOfValidity="true"
				:checkYear="year" :checkMonth="month" :checkDay="day" ref="dateEl1" :startYear="1999" :futureYear="30"
				@dateConfirm="confirmValidityPeriod1"></itmister-date-picker>
			<itmister-date-picker :dateStatus="0" :checkYear="year" :checkMonth="month" :checkDay="day" ref="dateEl2"
				:startYear="1980" :futureYear="30" @dateConfirm="confirmValidityPeriod2">
			</itmister-date-picker>
			<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>
		<u-modal :show="auditShow" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
		<u-toast ref="uToast"></u-toast>
		<view class="content4">
			<view class="next-btn" @click="next()">提交</view>
		</view>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import permision from "@/js_sdk/wa-permission/permission.js"
	import uploadImage from '@/components/ossutil/uploadFile.js';
	var _this
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		data() {
			return {
				status: 1,
				seconds: 30,
				year: '',
				month: '',
				day: '',
				validityPeriod: [],
				isShowcardValidity: false,
				uploadType: '',
				isShowimgType: false,
				dataDetails: {
					commonId: '',
					name: '',
					idCard: '',
					cardAddressUrl: '',
					cardBackAddressUrl: '',
					cardValidityEndDate: '',
					roadTransportOperationLicense: '',
					roadTransportOperationLicenseValidityDate: "",
				},
				action: this.$helper.ossUploadUrl,
				// maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				// isAdd: true,
				imagesrc: null,
				isShowBank: false,
				isShowManualInput: false,
				bankType: [],
				auditShow: false,
				alertTitle: "",
				checkType:"",
			};
		},
		onLoad(options) {
			_this = this;
			this.get_camera_permission()
			if (options.data) { //编辑
				this.dataDetails = JSON.parse(options.data)
				this.checkType = "2" //编辑
			} else {
				//获取认证状态
				this.getAuthenticationStatus()
				this.dataDetails.commonId = this.userInfo.id
				this.checkType = "1" //新增
			}

		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			cancelClick() {
				this.auditShow = false
			},
			next() {
				if (this.validate()) return
				this.alertTitle = "确定提交认证信息？"
				this.auditShow = true
			},
			confirmBank(e) {
				this.dataDetails.hyDriverPayeeInfoList[this.index].bankDepositBranch = e.value[0]
				this.isShowBank = false
			},
			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
			},
			manualInput(val) {
				this.index = val
				if (this.isShowManualInput) {
					if (!this.dataDetails.payeeAddressUrl) {
						this.$refs.uToast.show({
							type: 'error',
							message: "请先上传银行卡！",
						})
						return true
					} else if (this.dataDetails.payeeAddressUrl && uni.$u.test.isEmpty(
							this.bankType[0])) {
						this.$refs.uToast.show({
							type: 'error',
							message: "请选择手动输入开户支行！",
						})
						return true
					}
					this.isShowBank = true
				} else {
					this.isShowBank = false
				}
				this.isShowManualInput = !this.isShowManualInput
			},
			async get_camera_permission() {
				var photol = await permision.requestAndroidPermission("android.permission.CAMERA")
				if (photol == false) {
					uni.showModal({
						title: '提示',
						content: '您已经关闭相册权限,去设置',
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting()
								// plus.runtime.openURL("app-settings:");
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e

				// if (columnIndex === 0) {
				// 	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())
				// 	}
				// }
			},
			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('倒计时开始');
			},
			//判断是否是初次认证
			getAuthenticationStatus() {
				this.$request.baseRequest('', '/driverInfo/firstAuthentication', {
						driverPhone: this.userInfo.phone,
					}).then(res => {
						if (res.code == 200) {
							// this.dataDetails = res.data
							this.dataDetails.accountNumber = res.data.accountNumber
							this.dataDetails.cardAddressUrl = res.data.cardAddressUrl
							this.dataDetails.cardBackAddressUrl = res.data.cardBackAddressUrl
							this.dataDetails.name = res.data.driverName
							this.dataDetails.idCard = res.data.numberCard
							this.dataDetails.cardValidityStartDate = res.data.cardValidityStartDate
							this.dataDetails.cardValidityEndDate = res.data.cardValidityDate
							this.dataDetails.payeeAddressUrl = res.data.hyDriverPayeeInfoList[0].payeeAddressUrl
							this.dataDetails.bankCard = res.data.hyDriverPayeeInfoList[0].bankCard
							this.dataDetails.bankDeposit = res.data.hyDriverPayeeInfoList[0].bankDeposit
							this.dataDetails.bankDepositBranch = res.data.hyDriverPayeeInfoList[0].bankDepositBranch
							this.dataDetails.payeeName = res.data.hyDriverPayeeInfoList[0].payeeName
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			confirmValidityPeriod(date) {
				this.dataDetails.cardValidityEndDate = date.date
			},
			confirmValidityPeriod1(date) {
				this.dataDetails.roadTransportOperationLicenseValidityDate = date.date
				this.$forceUpdate()
			},
			confirmValidityPeriod2(date) {
				this.dataDetails.cardValidityStartDate = date.date
				this.$forceUpdate()
			},

			selectValidityPeriod(num) {
				if (num == 1) {
					if (this.dataDetails.cardValidityEndDate && this.dataDetails.cardValidityEndDate != '长期') {
						var arr = this.dataDetails.cardValidityEndDate.split('-')
						this.year = arr[0]
						this.month = arr[1]
						this.day = arr[2]
					}
					if (this.dataDetails.cardValidityEndDate == '长期') {
						this.year = '长期'
						this.month = ''
						this.day = ''
					}
					this.$refs.dateEl.show()
				} else if (num == 2) {
					this.$refs.dateEl1.show()
				} else if (num == 3) {
					this.$refs.dateEl2.show()
				}
			},
			//设置图片
			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
				this.imgTypeSelect()

			},
			delCard(type) {
				var _this = this
				switch (type) {
					case 1:
						_this.dataDetails.cardAddressUrl = ""
						break;

					case 2:
						_this.dataDetails.cardBackAddressUrl = ""
						break;
					case 3:
						_this.dataDetails.payeeAddressUrl = ""
						_this.dataDetails.bankCard = ""
						_this.dataDetails.bankDeposit = ""
						_this.dataDetails.bankDepositBranch = ""
						_this.$forceUpdate()
						break;
					case 4:
						_this.dataDetails.roadTransportOperationLicense = ""
						break;
				}
			},
			// 上传图片
			imgTypeSelect() {
				// 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('image', 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,
													flag: 1
												}).then(res => {
												if (res.data) {
													_this.dataDetails.cardAddress = res.data
														.recPersonAddr
													_this.dataDetails.idCard = res.data.recPersonNo
													if (res.data.recPerson) {
														_this.dataDetails.name = res.data
															.recPerson
														// _this.dataDetails.driverCall = res.data
														// 	.recPerson.substring(0, 1)
													}
													_this.dataDetails.driverBirthday = res.data
														.recPersonBrithday
												}
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
										break
										// 身份反面
									case 2:
										_this.dataDetails.cardBackAddressUrl = result
										// 识别
										_this.$request.baseRequest('get',
												'/driverInfo/personShibie', {
													personImg: result,
													flag: 2
												}).then(res => {
												if (res.data.idCardValidity) {
													let date = res.data.idCardValidity.split("-")[1]
													_this.dataDetails.cardValidityEndDate = date
														.replace(
															'.', '-').replace('.', '-')
												}
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
										break
									case 3:
										_this.bankType[_this.index] = []
										_this.$request.baseRequest('get',
												'/driverInfo/bankShibie', {
													bankImg: result,
												}).then(res => {
												_this.dataDetails.hyDriverPayeeInfoList[_this.index]
													.payeeAddressUrl = result
												if (res.data) {
													if (res.data.bankNo) {
														_this.dataDetails.hyDriverPayeeInfoList[_this
																.index].bankCard = res.data.bankNo
															.replace(/\s*/g, "")
													}
													if (res.data.bankName) {
														_this.dataDetails.hyDriverPayeeInfoList[_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;
									case 4:
										_this.dataDetails.roadTransportOperationLicense = result
										_this.$forceUpdate()
										break;
								}
							}
						)
					}
				});
			},
			confirmClick(val) {
				this.auditShow = false
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				if (this.checkType == 1) {
					this.$request.baseRequest('post', '/hyCarCaptainInfo/api/addCarCaptain', this.dataDetails).then(
						res => {
							if (res.code == 200) {
								uni.hideLoading()
								this.$refs.uToast.show({
									type: 'success',
									message: "提交成功,待平台审核！",
									complete() {
										uni.navigateBack({
											delta: 1
										});
									}
								})
								// uni.$u.route('/pages/mine/index');
							} else {
								uni.hideLoading()
								uni.$u.toast(res.message);
							}
						}).catch(res => {
						uni.$u.toast(res.message);
					});
				} else if (this.checkType == 2) {
					this.$request.baseRequest('post', '/hyCarCaptainInfo/api/editCarCaptain', this.dataDetails).then(
						res => {
							if (res.code == 200) {
								uni.hideLoading()
								this.$refs.uToast.show({
									type: 'success',
									message: "修改成功,待平台审核！",
									complete() {
										uni.navigateBack({
											delta: 1
										});
									}
								})
							} else {
								uni.hideLoading()
								uni.$u.toast(res.message);
							}
						}).catch(res => {
						uni.$u.toast(res.message);
					});
				}
			},
			validate() {
				// true 为校验不通过
				if (uni.$u.test.isEmpty(this.dataDetails.cardAddressUrl)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证人像页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.cardBackAddressUrl)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证国徽页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.name)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "姓名不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.idCard)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.cardValidityStartDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证起始日期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.cardValidityEndDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证截止日期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.payeeAddressUrl)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请上传银行卡卡号页！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.bankCard)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "银行卡卡号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.bankDeposit)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "开户行不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.bankDepositBranch)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "开户支行不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.payeeName)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "收款人不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.roadTransportOperationLicense)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "道路运输许可证不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.roadTransportOperationLicenseNo)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "许可证编号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.roadTransportOperationLicenseValidityDate)) {
					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 {
			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;
		}
	}

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

		.left-text {
			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;
			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: rgb(39, 114, 251);
			width: 90%;
			padding: 20rpx 20rpx;
			text-align: center;
			color: #fff;
			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;
	}

	/deep/.u-radio {
		margin-left: 10px;
	}

	/deep/.uni-input-input:disabled {
		background: #fff;
	}

	/deep/.u-radio-group--row {
		justify-content: flex-end;
	}

	/deep/.u-textarea {
		padding: 9px 0;
	}

	/deep/.u-textarea__field {
		color: #000;
		text-align: right;
	}
</style>