partnerApp/pages/wallet/bindBank.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 步骤条Start -->
		<view class="weui-flex bindBank-step d-flex a-center j-center">
			<view class="weui-flex-item">
				<view class="bindBank-step-icon bindBank-step-iconCard"></view>
				<view class="bindBank-step-des">添加银行卡</view>
			</view>
		</view>
		<!-- 步骤条End -->

		<!-- 持卡人信息Start -->
		<view class="bindBankCard">
			<view class="bindBank-infor">
				<view class="header row">请填写本人银行卡信息（储蓄卡）</view>
				<view class="inputData d-flex">
					<view class="d-flex a-center">选择银行</view>
					<view class="d-flex a-center flex-1">
						<input style="font-size: 28upx;" type="text" disabled v-model="bankname" placeholder="系统自动识别" />
					</view>
				</view>
				<view class="inputData d-flex">
					<view class="d-flex a-center">银行卡卡号</view>
					<view class="d-flex a-center flex-1">
						<input type="text" v-model="accountno" @blur="validateBankCard" placeholder="请输入银行卡卡号"
							style="font-size: 28upx;" />
					</view>
				</view>
			</view>
		</view>
		<!-- 持卡人信息End -->

		<button class="user-set-btn d-flex a-center j-center main-bg-color" :class="{'main-bf-hover-color':disabled}"
			type="primary" @tap="submit" :disabled="disabled" style="margin: 40upx  30upx;">绑定银行卡</button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import bankBin from "@/common/bankcardinfo.js"
	export default {
		data() {
			return {
				bankname: "", //银行名称
				accountno: "", //银行卡账号
				disabled: true,
				validateBankCardStatus: false, //银行卡验证状态
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		watch: {
			bankname(val) {
				this.OnBtnChange();
			},
			accountno(val) {
				this.OnBtnChange();
			},
		},
		methods: {
			...mapMutations(['setUserModules']),
			// 改变按钮状态
			OnBtnChange() {
				if (this.accountno && this.bankname) {
					this.disabled = false;
					return;
				}
				this.disabled = true;
			},
			// 验证银行卡
			async validateBankCard() {
				var that = this;
				that.bankname = "";
				await bankBin.getBankBin(this.accountno)
					.then((data) => {
						that.bankname = data.bankName;
						that.validateBankCardStatus = true;
						return true;
					})
					.catch((err) => {
						that.validateBankCardStatus = false;
						return uni.showToast({
							title: err.split(":")[1],
							icon: "none"
						});
					})
			},
			async submit() {
				var params = {
					"bankNumber": this.accountno,
					"bankAccount": this.bankname,
					"isDefault": 0,
				}
				let res = await this.$http.post('/userBank/insertByBankNumber', params);
				if (res.code == '200') {
					uni.showToast({
						title: '添加成功',
						duration: 2000,
						icon: "success"
					});
					setTimeout(() => {
						return uni.navigateBack();
					}, 2000);
				}

			}


		}
	}
</script>


<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		background-color: #F5F5F5;
	}

	.bindBank-step {
		padding: 72upx 0 78upx;
		background: rgba($themeColor, 0.8);
		text-align: center;
	}

	.bindBank-step>view {
		position: relative;
		width: 50%;
	}

	.bindBank-step-icon {
		width: 76upx;
		height: 76upx;
		line-height: 76upx;
		position: relative;
		z-index: 3;
		display: inline-block;
		overflow: hidden;
	}

	.bindBank-step-des {
		font-size: 24upx;
		color: #fff;
	}

	.bindBank-step-iconCard {
		background: url('/static/image/bindBank/icon-card.png') no-repeat 0 0;
		background-size: 100%;
	}

	.bindBank-step-iconEnd {
		background: url('/static/image/bindBank/icon-Password.png') no-repeat 0 0;
		background-size: 100%;
	}

	/* 银行卡信息Start */
	.bindBankCard {
		background-color: #f0eff5;
		margin-top: -40upx;
		border-radius: 40upx 40upx 0upx 0upx;
		overflow: hidden;
		font-size: 28upx;
	}

	.bindBankCard .row {
		padding: 0upx 30upx;
		box-sizing: border-box;
	}

	.bindBankCard .inputData {
		padding: 10upx 15upx;
		color: #333;
		background-color: #fff;
		height: 80upx;
	}

	.bindBank-infor>.header {
		height: 90upx;
		line-height: 90upx;
	}

	.bindBankCard .inputData>view:nth-of-type(1) {
		padding: 20upx 0;
		width: 210upx;
		flex-shrink: 1;
		font-size: 30upx;
	}

	/* 银行卡信息End */
</style>