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.driverName">
					</u--input>
				</view>
				<view class="flex row">
					<view class="left-text">身份证号</view>
					<u--input disabled placeholder="请输入身份证号" inputAlign='right' border="none" v-model="dataDetails.numberCard" maxlength="18">
					</u--input>
				</view>

				<view class="flex row flex-space-between">
					<view class="left-text">身份证有效期</view>
					<view class="" @click="selectValidityPeriod">
						{{dataDetails.cardValidityDate?dataDetails.cardValidityDate:'选择身份证截止日期>'}}
					</view>
				</view>
			</view>
			<view class="content3 flex s-row" v-for="(item,index) in dataDetails.hyDriverPayeeInfoList" :key='index'>
				<view class="flex">
					银行卡-{{index+1}}
				</view>
				<view @click="delBankNumber(dataDetails.hyDriverPayeeInfoList,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 flex-space-between">
					<view class="left-text">银行卡卡号</view>
					<view class="flex">
						<u--input placeholder="输入银行卡号码" inputAlign='right' border="none" v-model="item.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="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='right' border="none"
							v-model="item.bankDepositBranch">
						</u--input>
						<view @click="manualInput(index)" class="type">选择支行</view>
					</view>
					<view class="flex align-center" v-if="!isShowManualInput">
						<view 
						 :style="{'color':item.bankDepositBranch?'#000':'#C6CBD5'}" style='font-size:15px;text-align:right;' class="select-bankzh point" @click="selectZhbank">
							{{item.bankDepositBranch?item.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="item.payeeName" readonly>
						</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 class="content3 flex s-row">
				<view class="title">道路运输证</view>
				<view @click="uploadImg(4)" 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(8)" 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.operationCertificate" mode="aspectFit"></image>
				</view>
				<view class="flex row">
					<view class="left-text">道路运输证号</view>
					<u--input maxlength='12' 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)">
						<view :style="{'color':dataDetails.operationCertificateValidityDate?'#000':'rgb(192, 196, 204)'}">
							{{dataDetails.operationCertificateValidityDate?dataDetails.operationCertificateValidityDate:'选择有效期'}}
							<image v-if='!dataDetails.operationCertificateValidityDate' 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>
			<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 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 {
				canvasSiz: {
					width: 188,
					height: 273
				},
				status:1,
				tips: '',
				// refCode: null,
				seconds: 30,
				year:'',
				month:'',
				day:'',
				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},

				],
				validityPeriod: [],
				isShowcardValidity: false,
				uploadType: '',
				isShowimgType: false,
				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: '',
					hyDriverPayeeInfoList: [{
						payeeAddressUrl: '',
						bankCard: '',
						bankDeposit: '',
						bankDepositBranch: '',
						payeeName: '',
					}],

				},
				action: this.$helper.ossUploadUrl,
				// maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				// isAdd: true,
				imagesrc: null,
				isShowBank:false,
				isShowManualInput: false,
				bankType: [],
			};
		},
		onLoad() {
			_this = this;
			console.log(this.userInfo)
			this.get_camera_permission()
			// this.dataDetails.driverPhone = this.userInfo.phone
			this.dataDetails.commonId = this.userInfo.id
			//获取认证状态
			this.getAuthenticationStatus()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			confirmBank(e) {
				console.log(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.hyDriverPayeeInfoList[this.index].payeeAddressUrl) {
						this.$refs.uToast.show({
							type: 'error',
							message: "请先上传银行卡！",
						})
						return true
					} else if (this.dataDetails.hyDriverPayeeInfoList[this.index].payeeAddressUrl && 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
			},
			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())
				// 	}
				// }
			},
			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('倒计时开始');
			},

			// 性别切换
			radioChange(n) {
				console.log('radioChange', n);
				this.dataDetails.driverSex = n
			},
			//判断是否是初次认证
			getAuthenticationStatus() {
				this.$request.baseRequest('', '/driverInfo/firstAuthentication', {
						driverPhone: this.userInfo.phone,
					}).then(res => {
						if (res.code == 200) {
							this.dataDetails = res.data
							this.dataDetails.hyDriverPayeeInfoList = [{
								payeeAddressUrl: '',
								bankCard: '',
								bankDeposit: '',
								bankDepositBranch: '',
								payeeName: '',
							}]
							// this.dataDetails.driverName = res.data.driverName
							// this.dataDetails.driverSex = res.data.driverSex
							// this.dataDetails.driverCall = res.data.driverCall
							// this.dataDetails.driverPhone = res.data.driverPhone
							// this.dataDetails.cardAddressUrl = res.data.cardAddressUrl
							// this.dataDetails.cardBackAddressUrl = res.data.cardBackAddressUrl
							// this.dataDetails.numberCard = res.data.numberCard
							// this.dataDetails.cardValidityDate = res.data.cardValidityDate
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			confirmValidityPeriod(date) {
				console.log('confirm', date)
				this.dataDetails.cardValidityDate = date.date
			},
			selectValidityPeriod() {
				if(this.dataDetails.cardValidityDate!='长期'){
					var arr=this.dataDetails.cardValidityDate.split('-')
					this.year=arr[0]
					this.month=arr[1]
					this.day=arr[2]
				}
				if(this.dataDetails.cardValidityDate=='长期'){
					this.year='长期'
					this.month=''
					this.day=''
				}
				this.$refs.dateEl.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;
				}
			},
			// 上传图片
			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.numberCard = res.data.recPersonNo
														if (res.data.recPerson) {
															_this.dataDetails.driverName = 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.cardValidityDate = 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;
									}
								}
							)
						}
					});

				// } else {
				// 	switch (this.uploadType) {
				// 		case 0:
				// 			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:
				// 			break
				// 		case 4:
				// 	}
				// }

			},
			next(val) {
				if (this.validate()) return
				uni.$u.route('/pages/mine/editDriverCertificationNext', {
					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.driverCall)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "司机称呼不能为空！",
					})
					return true
				}
				if (!uni.$u.test.chinese(this.dataDetails.driverCall)) {
					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.hyDriverCarInfoList.length; i++) {
				// 	let _item = this.dataDetails.hyDriverCarInfoList[i]
				// 	if (uni.$u.test.isEmpty(_item.carNumber)) {
				// 		this.$refs.uToast.show({
				// 			type: 'error',
				// 			message: "车牌号不能为空！",
				// 		})
				// 		return true
				// 	}
				// 	if (uni.$u.test.isEmpty(_item.fileList1)) {
				// 		this.$refs.uToast.show({
				// 			type: 'error',
				// 			message: "人车合影不能为空！",
				// 		})
				// 		return 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.cardValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证人有效截止日期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.cardAddress)) {
					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>