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="userInfo.sysUser.name"  />
					</view>
				</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="userInfo.esmUserInternal.identity"  />
					</view>
				</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)=> {
						console.log(data)
						that.bankname = data.bankName;
						that.validateBankCardStatus = true;
						return true;
					})
					.catch((err)=> {
						console.log(err)
						that.validateBankCardStatus = false;
						return uni.showToast({ title: err.split(":")[1] , icon:"none" });
					})
			},
			async submit(){
				var params = {
					"accountno":this.accountno,
					"bankname":this.bankname,
					"id":this.userInfo.sysUser.id
				}
				let res = await this.$http.post('/esmUserInternal/saveUser',params);
				let info = {
					sysUser:{},
					esmUserInternal:{},
					esmUserAgent:{}
				};
				Object.assign(info.sysUser,this.userInfo.sysUser);
				Object.assign(info.esmUserInternal,this.userInfo.esmUserInternal);
				Object.assign(info.esmUserAgent,this.userInfo.esmUserAgent);
				info.esmUserInternal.accountno = this.accountno;
				info.esmUserInternal.bankname = this.bankname;
				this.setUserModules({title:'userInfo',data:info})
				uni.showToast({ title: '更改银行卡成功',duration:2000,icon:"none"});
				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;
	text-indent: 10upx;
	width:210upx;
	flex-shrink: 1;
	font-size: 30upx;
}
/* 银行卡信息End */

</style>