cbz-sj/pages/mine/wallet/add.vue

<template>
	<view class="content">
		<view class="box">
			<view class="title">请绑定本人银行卡</view>
			<view class="input_group">
				
				<view class="hflex acenter input_item">
					<view class="label">真实姓名</view>
					<u-input border="none" v-model="card_name" shape="circle" placeholder="请输入持卡人真实姓名" @change="change"></u-input>
				</view>
				<view class="hflex acenter input_item">
					<view class="label">银行卡号</view>
					<u-input border="none" v-model="card_no" shape="circle" placeholder="请输入持卡人本人银行卡号" @change="change" maxlength="30"></u-input>
				</view>
				<view class="hflex acenter input_item">
					<view class="label">银行名称</view>
					<u-input border="none" v-model="bank_name" shape="circle" placeholder="请填写银行名称" @change="change" maxlength="30"></u-input>
				</view>
				<view class="hflex acenter input_item">
					<view class="label">开户行</view>
					<u-input border="none" v-model="bank_addr" shape="circle" placeholder="请输入开户行具体到支行" @change="change" maxlength="30"></u-input>
				</view>
			</view>
			<view class="read">请仔细阅读并充分理解<span class="text_blue">用户服务协议</span></view>
			<view class="btn hflex acenter jcenter" :class="!allow?'btn2':''" @click="bind">同意协议并绑定</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				card_no: '',
				card_name: '',
				allow: false,
				bank_name: '',
				bank_addr: ''
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			inputCard(e) {
				// var l = e.replace(/\s*/g, '')
				// if (l.length % 4 == 0) {
				// 	e = e + ' '
				// }
				that.card_no = e
				// that.card_no = e.replace(/\s/g, ' ').replace(/[^\d]/g, ' ').replace(/(\d{4})(?=\d)/g, '$1')
			},
			change(e) {
				if(that.card_no != '' && that.card_name != '') {
					that.allow = true
				} else {
					that.allow = false
				}
			},
			bind() {
				$api.req({
					url: '/data/api.business.User/bank_add',
					method: 'POST',
					data: {
						bank: that.bank_name,
						number: that.card_no,
						address: that.bank_addr,
						real_name: that.card_name
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						$api.jump(-1)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		.box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 50rpx;
			.title {
				font-size: 38rpx;
				font-weight: 500;
				color: #000000;
				line-height: 52rpx;
				padding: 42rpx 0 52rpx;
			}
			.card_input {
				.u-input {
					background-color: #F4F4F4;
					padding: 0 40rpx !important;
					height: 88rpx;
				}
			}
			.input_group {
				width: 100%;
				// height: 440rpx;
				background: #F6F6F6;
				border-radius: 24rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				.input_item {
					width: 100%;
					padding: 32rpx 0;
					border-bottom: 1rpx solid #EDEDED;
					
					.label {
						width: 150rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
						line-height: 42rpx;
						padding-right: 20rpx;
					}
					.right {
						font-size: 30rpx;
						font-weight: 500;
						color: #222222;
						line-height: 42rpx;
					}
					.code {
						font-size: 30rpx;
						font-weight: 500;
						color: #506DFF;
						line-height: 42rpx;
					}
				}
				.input_item:nth-last-child(1) {
					border: none;
				}
			}
			.read {
				padding-top: 28rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #222222;
				line-height: 32rpx;
			}
			.text_blue {
				color: #506DFF;
			}
			.btn {
				margin-top: 76rpx;
				width: 100%;
				height: 84rpx;
				background: #506DFF;
				border-radius: 52rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.btn2 {
				background: #CFCFCF;
			}
		}
		
	}
</style>