web-app-v1/pages/zbs/form.vue

<template>
	<view class="shop_auth">
		<view class="content">
			<!-- <view class="hint">上传并提交您的证件照片</view>
			<view class="flexB">
				<image :src="authCon.front" class="card" @click="getPhoto(0)"></image>
				<image :src="authCon.otherSide" class="card" @click="getPhoto(1)"></image>
			</view>
			<view class="hint">拍照要求</view>
			<view class="rule">
				<image src="/static/zbs/card_rule.png"></image>
			</view> -->
			<view style="padding-bottom: 10rpx;" class="hint">填写相关信息</view>
			<view class="auth_inp">
				<view class="inp_box">
					<view class="label">
						<text>开户姓名</text>
					</view>
					<input type="text" placeholder="请输入银行卡开户姓名" v-model="params.CardName" placeholder-class="place" />
				</view>
				<view class="inp_box">
					<view class="label">
						<text>身份证号</text>
					</view>
					<input type="text" placeholder="请输入身份证号" v-model="params.CertID" maxlength="18"
						placeholder-class="place" />
				</view>
				<view>
					<view class="label">
						<text>身份证有效期</text>
					</view>
					<view class="date_picker flexV">
						<picker mode="date" :value="params.startDate" @change="bindDateChange1">
							<view>
								<text :style="{ color: params.startDate ? '#333' : '#a7a7a7' }">
									{{ params.startDate ? params.startDate : '年-月-日' }}
								</text>
							</view>
						</picker>
						<text style="margin: 0 20rpx;">~</text>
						<picker mode="date" :value="params.endDate" @change="bindDateChange2">
							<view>
								<text :style="{ color: params.endDate ? '#333' : '#a7a7a7' }">
									{{ params.endDate ? params.endDate : '年-月-日' }}
								</text>
							</view>
						</picker>
					</view>
				</view>
				<view>
					<view class="label">
						<text>是否长期有效</text>
					</view>
					<picker @change="bindPickerChange" :value="params.type" :range="array" range-key="name">
						<view class="flexB picker">
							<view>{{ array[params.type].name }}</view>
							<text class="iconfont iconzhcc_xiangxiajiantou"></text>
						</view>
					</picker>
				</view>
				<view>
					<view>
						<view class="label">
							<text>卡号</text>
						</view>
						<input type="number" placeholder="请输入银行卡号" v-model="params.CardID" class="bank_box"
							placeholder-style="color:#999" />
					</view>
					<!-- <view class="label">
						<text>开户行</text>
					</view>
					<view @click="(showBank = true), getBankList()" class="flexB picker">
						<text :style="{ color: params.account_bank ? '#333' : '#999' }"
							style="font-size:32rpx;">{{ params.account_bank ? params.account_bank : '请选择开户银行' }}</text>
						<text class="iconfont iconzhcc_xiangxiajiantou"></text>
					</view>
					<u-popup v-model="showBank" mode="bottom" height="700rpx;">
						<view class="pop_box">
							<view class="box_inp flexC"><input type="text" placeholder="输入关键字查询开户银行" @input="bankInp"
									v-model="searchBank" class="search_inp" /></view>
							<view class="scroll">
								<scroll-view>
									<view class="scroll_con">
										<view v-for="(item, idx) in bankList" :key="idx" @click="checkBank(item)">
											{{ item.name }}
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</u-popup> -->
				</view>
				<view>
					<view class="label">
						<text>银行卡绑定手机号</text>
					</view>
					<input type="number" placeholder="请输入银行卡绑定手机号" v-model="params.mobile" class="bank_box"
						placeholder-style="color:#999" />
				</view>
				<view>
					<view class="label">
						<text>短信验证码</text>
					</view>
					<view class="inp flexB">
						<input type="text" placeholder="请输入验证码" maxlength="6" placeholder-style="font-size:28rpx;color:#999"
							v-model="params.sms_code" />
						<view v-throttle="2000" class="inp_code" @click="getNew">{{ newDown ? `重新获取(${newDown}s)` : '获取验证码' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flexC">
			<view v-throttle="2000" class="bottom_btn" @click="submitAuth">提交</view>
		</view>
	</view>
</template>

<script>
	import { _API_QuickBankApply, _API_QuickBankConfirm } from '../../apis/zbs.js';
	import WPicker from '@/components/w-picker/w-picker.vue';
	import cityPicker from '@/components/citypicker/city-picker.vue';
	export default {
		data() {
			return {
				array: [
					{
						name: '非长期有效',
						id: 0
					},
					{
						name: '长期有效',
						id: 1
					}
					
				],
				newDown: 0, //手机验证码倒计时，
				params: {
					CardName: '', //开户人姓名
					mobile: '', //开户人手机号
					CertID: '', //证件号码
					CardID: '', //银行卡号
					startDate: '', //证件开始时间
					endDate: '', //证件到期时间
					type: 0, // 证件是否长期,
					order_id: '', // 申请接口返回
					trans_id: '', // 申请接口返回
					sms_code: '', // 手机验证码
				},
				authCon: {
					front: '/static/zbs/card_front.png', //身份证正面照
					otherSide: '/static/zbs/card_reverse.png', //身份证反面照
				}
			};
		},
		onShow() {
			
		},
		methods: {
			// 身份证是否长期，选择框
			bindPickerChange(e) {
				this.params.type = e.detail.value
			},
			/*更换身份证到期时间*/
			bindDateChange1: function(e) {
				this.params.startDate = e.target.value;
			},
			bindDateChange2: function(e) {
				this.params.endDate = e.target.value;
			},
			//获取手机号验证码
			getNew() {
				let that = this;
				if (that.newDown) {
					uni.showModal({
						content: '验证码已发送，请稍后重试',
						showCancel: false
					});
					return false;
				}
				const { CardName, mobile, CertID, startDate, endDate, CardID, type } = this.params
				if (!CardName || !mobile || !CertID || !startDate || !CardID || (!type && !endDate)) {
					uni.showModal({
						content: '请补全信息',
						showCancel: false
					})
					return false
				}
				if (!mobile.match(/^[1][3-9]\d{9}$/)) {
					uni.showModal({
						content: '手机号格式不正确',
						showCancel: false
					})
					return
				}
				_API_QuickBankApply({
						CardName, mobile, CertID, startDate, endDate, CardID, type
					})
					.then(res => {
						if (res.code == 200) {
							uni.showModal({
								content: '验证码发送成功',
								showCancel: false
							});
							this.params.order_id = res.data.order_id
							this.params.trans_id = res.data.trans_id
							this.newDown = 180;
							this.timer = setInterval(() => {
								this.newDown--;
								if (!this.newDown) {
									this.newDown = 0;
									clearInterval(this.timer);
								}
							}, 1000);
						} else {
							uni.showModal({
								content: res.message || '获取验证码失败',
								showCancel: false
							});
							return false;
						}
					})
			},
			
			/*截取身份证到期时间信息*/
			getCaption(obj, type) {
				if (type === 0) {
					obj = obj.split('-')[0]
				} else {
					obj = obj.split('-')[1]
				}
				if (obj != '长期') {
					obj = obj.replace(/\./g, '-');
				}
				return obj;
			},
			
			/*提交*/
			submitAuth() {
				const { CardName, mobile, CertID, CardID, order_id, trans_id, sms_code } = this.params
				if (!CardName) {
					uni.showModal({
						content: '姓名格式不正确！',
						showCancel: false
					});
					return false;
				}
				if (!mobile.match(/^[1][3-9]\d{9}$/)) {
					uni.showModal({
						content: '手机号格式不正确',
						showCancel: false
					})
					return
				}
				if (!CertID) {
					uni.showModal({
						content: '请输入身份证号！',
						showCancel: false
					});
					return false;
				}
				if (!CardID) {
					uni.showModal({
						content: '请输入银行卡号！',
						showCancel: false
					});
					return false;
				}
				if (!sms_code) {
					uni.showModal({
						content: '请输入验证码！',
						showCancel: false
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				})
				_API_QuickBankConfirm({
						CardName, mobile, CertID, CardID, order_id, trans_id, sms_code
					})
					.then(res => {
						if (res.code == 200) {
							uni.showModal({
								title: '提示',
								content: '绑定成功',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.redirectTo({
											url: './detail'
										})
									}
								},
							})
						} else {
							uni.showModal({
								content: res.message || '银行卡绑定失败',
								showCancel: false
							});
							return false;
						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bottom {
		width: 100%;
		height: 102rpx;
		background: #FFFFFF;
		box-shadow: 0px -4rpx 24rpx 2rpx rgba(0,0,0,0.1);
		margin-top: 40rpx;
		&_btn {
			width: 702rpx;
			margin: 0 auto;
			height: 88rpx;
			background: $base-line-bg;
			opacity: 1;
			border-radius: 44rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
		}
	}
	.how_query {
		margin-top: 36rpx;

		text {
			color: $base-color;
			font-size: 32rpx;
		}

		.query_icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.pop {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999999;

		.hint_icon {
			width: 183rpx;
			height: 135rpx;
			position: relative;
			margin-top: -85rpx;
		}

		.pop_con {
			width: 648rpx;
			height: 482rpx;
			background: #fff;
			border-radius: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 38rpx;
				font-weight: bold;
				margin-top: 24rpx;
			}

			.con {
				min-height: 150rpx;
				margin: 24rpx 0 40rpx;
				font-size: 34rpx;
				line-height: 1.5;
			}

			.btn_box {
				width: 100%;

				view {
					width: 270rpx;
					height: 88rpx;
					background: #F5F5F5;
					border-radius: 44rpx;
					color: #333;
					font-size: 32rpx;
					font-weight: bold;
				}

				view:last-child {
					background: $base-line-bg;
					color: #fff;
				}

			}

		}

		.iconfont {
			color: #fff;
			font-size: 60rpx;
			margin-top: 30rpx;
		}
	}



	.shop_auth {
		width: 100%;
		min-height: 100%;
		background: #fff;

		.step {
			margin-top: 30rpx;
		}

		.content {
			width: 690rpx;
			margin: 0 auto;

			input {
				font-size: 30rpx;
			}

			.label {
				font-size: 32rpx;
				padding: 15rpx 0;
				font-weight: bold;

				// .star {
				// 	color: #f00;
				// 	margin-left: 4rpx;
				// 	font-size: 45rpx;
				// }
			}
			.inp {
				height: 88rpx;
				background: #f8f8f8;
				padding-right: 30rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				box-sizing: border-box;
				&_code {
					width: 188rpx;
					height: 64rpx;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					opacity: 1;
					border: 2rpx solid #FF0000;
					text-align: center;
					line-height: 64rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FF0000;
				}
			}
			.auth_inp {

				input,
				.date_picker {
					min-height: 96rpx;
					background: #f8f8f8;
					border-radius: 8rpx;
					font-size: 32rpx;
					padding: 0 30rpx;
				}

				.iconfont {
					color: #a7a7a7;
					font-size: 35rpx;
				}

				.place {
					font-size: 32rpx;
					color: #a7a7a7;
				}

				.picker {
					min-height: 96rpx;
					background: #f8f8f8;
					padding: 0 30rpx;

					input {
						padding-left: 0;
						width: 92%;
						min-height: 96rpx;
					}

					text:first-child {
						font-size: 32rpx;
					}
				}
			}

			.main_btn {
				width: 300rpx;
				margin: 0 auto;
				height: 88rpx;
				background: $base-line-bg;
				border-radius: 44rpx;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
			}

			.second_btn {
				width: 300rpx;
				margin: 0 auto;
				height: 88rpx;
				border: 2rpx solid $base-color;
				background: #fff4f3;
				border-radius: 44rpx;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: $base-color;
			}

			.next {
				margin: 50rpx auto 30rpx;
			}

			.sub {
				margin: 30rpx auto 20rpx;
			}

			.hint {
				font-size: 36rpx;
				font-weight: bold;
				padding: 24rpx 0;
			}

			.card {
				width: 340rpx;
				height: 220rpx;
				margin-bottom: 30rpx;
				border-radius: 24rpx;
			}

			.rule {
				image {
					width: 100%;
					height: 140rpx;
				}

				view {
					font-size: 24rpx;
					color: #999;
					text-align: center;
					margin: 30rpx 0 60rpx;
				}
			}

			.notice {
				font-size: 28rpx;
				color: #999;
				text-align: center;
				margin: 15rpx 0 50rpx;
			}
		}
	}

	.pop_box {
		.box_inp {
			width: 100%;
			padding: 20rpx 0;
			box-sizing: border-box;
			background: #fff;
			top: 0;
			left: 0;
			z-index: 99;
			text-align: center;

			input {
				height: 90rpx;
				width: 90%;
				border: 2rpx solid #cccccc;
				background: #fff !important;
				padding-left: 20rpx;
				border-radius: 44rpx;
			}
		}

		.scroll {
			height: 600rpx;

			.scroll_con {
				padding-bottom: 50rpx;

				view {
					font-size: 36rpx;
					padding: 15rpx;
					text-align: center;
				}
			}

			.no_branch {
				width: 100%;
				text-align: center;
				margin-top: 30rpx;
				color: #999;
				font-size: 30rpx;
			}
		}
	}
</style>