GuangYuYuan-app/src/pages/my/add_blank.vue

<template>
	<view class="success" v-if="isSuccess">
		<view class="success_img">
			<image src="/static/other/select_round.png" mode=""></image>
		</view>
		<text>添加成功</text><br />
		<text class="success_blank">中国工商银行（ 0882）</text>
		<view class="achieve">
			完成
		</view>
	</view>
	<view class="add_blank" v-else>
		<view class="title">
			添加银行卡<br />
			<text>请填写本人的银行卡信息</text>
		</view>
		<view class="from">
			<view class="item">
				<view class="head">
					银行名称
				</view>
				<view class="inp" @click="show = true">
					{{blankName}}
					<image src="/static/identify/down.png" mode=""></image>
				</view>
			</view>
			<view class="item">
				<view class="head">
					开户行
				</view>
				<view class="inp">
					<u-input v-model="openingBank" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="head">
					银行卡号
				</view>
				<view class="inp">
					<u-input v-model="cardNum" placeholder="请输入银行卡号" @input="formatInput" />
				</view>
			</view>
			<view class="item">
				<view class="head">
					姓名
				</view>
				<view class="inp">
					<u-input v-model="name" placeholder="请输入您的姓名" />
				</view>
			</view>
		</view>
		<view class="sub" @click="submit">
			添加银行卡
		</view>

		<u-picker :show="show" :columns="[banklist]" keyName="bankName" 
			@cancel="show = false" @confirm="onSelect"
		></u-picker>
	</view>
</template>

<script>
	import {
		addBnak,
		bankList,
	} from '../../api/index.js'
	export default {
		data() {
			return {
				blankName: '请选择',
				blank: '',
				openingBank:'',
				cardNum: '',
				name: '',
				isSuccess: false,
				show: false,
				banklist: [],
				bankId:''
			}
		},
		methods: {
			formatInput(event) {
				let inputValue = event;

				// 去除所有空格并按每四个字符添加空格
				// inputValue = inputValue.replace(/\s+/g, '').replace(/(.{4})(?=.)/g, '\$1 ');

				// 更新值
				this.cardNum = inputValue;
			},
			getBank() {
				bankList().then(res => {
					this.banklist = res.data.data
				})
			},
			onSelect(e) {
				this.bankId = e.value[0].id
				this.blankName = e.value[0].bankName
				this.show = false
			},
			submit() {
				let bankCardRegex = /^[1-9]\d{15,18}$/;
				if(!bankCardRegex.test(this.cardNum)){
					uni.showToast({
						icon:'none',
						title:'请输入正确的银行卡号'
					})
				}else if(this.bankId ==''){
					uni.showToast({
						icon:'none',
						title:'请选择银行'
					})
				}else if(this.openingBank ==''){
					uni.showToast({
						icon:'none',
						title:'请输入开户行'
					})
				}else{
					let data = {
						bankCardNum:this.cardNum,
						bankId:this.bankId,
						openId:uni.getStorageSync('wx_copenid'),
						openingBank:this.openingBank
					}
					addBnak(data).then(res => {
						console.log(res)
						if(res.data.code == 200){
							uni.showToast({
								icon:'none',
								title:'添加成功'
							})
							uni.navigateBack()
						}
					})
				}
				
			}
		},
		mounted() {
			this.getBank()
		}
	}
</script>

<style lang="scss" scoped>
	.add_blank {
		width: 100%;
		height: 100%;
		background: #F0FEFF;
		padding: 40rpx;
		box-sizing: border-box;

		.title {
			width: 100%;
			text-align: center;
			font-weight: 700;
			font-size: 36rpx;
			color: #000000;

			text {
				font-size: 32rpx;
				color: #000000;
				font-weight: 400;
				line-height: 36rpx;
				margin-top: 16rpx;
			}
		}

		.from {
			margin-top: 40rpx;
			height: 576rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 12rpx 0px rgba(209, 168, 88, 0.1);
			border-radius: 24rpx;
			padding: 24rpx 32rpx;

			.item {
				margin-bottom: 32rpx;

				.head {
					font-size: 26rpx;
				}

				.inp {
					width: 100%;
					height: 64rpx;
					border-radius: 8rpx;
					border: 2rpx solid #EEEEEE;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0px 24rpx;
					margin-top: 20rpx;
					box-sizing: border-box;
					color: #333333;
					font-size: 26rpx;

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}

		.sub {
			width: 100%;
			height: 76rpx;
			background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
			border-radius: 106rpx;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 76rpx;
			margin-top: 60rpx;
		}
	}

	.success {
		width: 100%;
		height: 100%;
		background: #F0FEFF;
		padding: 40rpx;
		box-sizing: border-box;
		text-align: center;

		.success_img {
			width: 100%;
			height: 120rpx;
			margin-top: 120rpx;
			margin-bottom: 80rpx;

			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		text {
			margin-top: 80rpx;
			font-size: 44rpx;
			color: #000000;
			font-weight: 700;
		}

		.success_blank {
			font-size: 32rpx;
			color: #000000;
			margin-top: 22rpx;
			font-weight: normal;
		}

		.achieve {
			width: 100%;
			height: 76rpx;
			background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
			border-radius: 106rpx;
			margin: 390rpx auto 0rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 76rpx;
		}
	}
</style>