partnerApp/pages/wallet/bindBank.vue

<template>
	<view>
		<public-module></public-module>
		<view class="binding dis f-c a-c ">
			<view class="title dis f-c a-c ">
				<text>添加银行卡</text>
				<text>请填写本人的银行卡信息</text>
			</view>
			<view class="formInfo">
				<u-field @blur="phoneNoCard" v-model="cardHoldMobile" :field-style="{textAlign:'right'}" label="手机号"
					placeholder="输入手机号">
				</u-field>
				<u-field v-model="cardHolderName" :field-style="{textAlign:'right'}" label="本人姓名" placeholder="输入真实姓名">
				</u-field>

				<u-field v-model="bankCardNumber" @blur="validateBankCard" :field-style="{textAlign:'right'}"
					label="银行卡" placeholder="请输入银行卡卡号">
				</u-field>
				<u-field @click="showAction" v-model="bankName" :field-style="{textAlign:'right'}" label="选择银行"
					placeholder="点击选择银行">
				</u-field>
				<u-field v-model="bankAddress" :field-style="{textAlign:'right'}" label="开户行" placeholder="输入开户行">
				</u-field>
			</view>
			<u-button class="mt-5" type="primary" style="background-color:#0052FF ;font-weight: bold;width: 100%;"
				@tap="submit">
				绑定银行卡</u-button>
		</view>
		<u-popup mode="bottom" v-model="promptShow" width="100%" height="100%" border-radius="14">
			<view style="padding: 16px;">
				<view class="prompt dis a-c j-c f-c">
					<image src="/static/image/bindBank/success.png" mode="" style="width: 50px;height:50px;"></image>
					<text>绑定成功</text>
				</view>
				<view class="dis j-end a-c" style="width: 100%;">
					<text class="back" @click="GoBack">完成</text>
				</view>
			</view>
		</u-popup>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import bankBin from "@/common/bankcardinfo.js"
	import {
		log
	} from "util";
	export default {
		data() {
			return {
				promptShow: false,
				bankName: "", //银行名称
				bankCardNumber: "", //银行卡账号
				bankAddress: "", //开户行
				cardHolderName: "", //真实姓名
				cardHoldMobile: "", //手机号
				disabled: true,
				show: false,
				list: [{
						value: '1',
						label: '中国工商银行'
					},
					{
						value: '2',
						label: '中国农业银行'
					},
					{
						value: '3',
						label: '中国银行'
					},
					{
						value: '4',
						label: '中国建设银行'
					},
					{
						value: '5',
						label: '交通银行'
					},
					{
						value: '6',
						label: '中国邮政储蓄银行'
					},
					{
						value: '7',
						label: '招商银行'
					},
					{
						value: '8',
						label: '中信银行'
					},
					{
						value: '9',
						label: '中国光大银行'
					},
					{
						value: '10',
						label: '华夏银行'
					},
					{
						value: '11',
						label: '中国民生银行'
					},
					{
						value: '12',
						label: '广发银行'
					},
					{
						value: '13',
						label: '平安银行'
					},
					{
						value: '14',
						label: '上海浦东发展银行'
					},
					{
						value: '15',
						label: '兴业银行'
					},
					{
						value: '16',
						label: '浙商银行'
					},
					{
						value: '17',
						label: '渤海银行'
					},
					{
						value: '18',
						label: '恒丰银行'
					},
					{
						value: '19',
						label: '北京银行'
					},
					{
						value: '20',
						label: '上海银行'
					},
					{
						value: '21',
						label: '晋商银行'
					},
					{
						value: '22',
						label: '山西银行'
					},
					{
						value: '23',
						label: '农村商业银行'
					},
				],
				validateBankCardStatus: false, //银行卡验证状态
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		watch: {
			"bankCardNumber": {
				handler(val) {
					if (val) {
						this.bankCardNumber = val.replace(/\s/g, "");
					}
				},
			},
		},

		methods: {
			...mapMutations(['setUserModules']),
			// 改变按钮状态
			confirm(e) {
				this.bankName = e[0].label;
			},
			showAction() {
				this.show = true;
			},
			// 验证银行卡
			async validateBankCard() {
				var that = this;
				that.bankName = "";
				await bankBin.getBankBin(this.bankCardNumber)
					.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 phoneNoCard() {
				if (!this.$base.phoneRegular.test(this.phone)) {
					return uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
				}
			},
			async submit() {
				if (!this.cardHoldMobile && !this.cardHolderName || !this.bankName || !this.bankCardNumber || !this
					.bankAddress) {
					return uni.showToast({
						title: '信息不完整',
						duration: 2000,
						icon: "none"
					});
				}
				var params = {
					"bankCardNumber": this.bankCardNumber,
					"cardHolderName": this.cardHolderName,
					"cardHoldMobile": this.cardHoldMobile,
					"bankName": this.bankName,
					"bankAddress": this.bankAddress,
					"userJzgInfoId": this.userInfo.sysUser.userInfoId,
				}
				let res = await this.$http.post('/userInfo/addBankCard', params);
				if (res.code == '200') {
					this.promptShow = true;
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				}

			},
			GoBack() {
				return uni.navigateBack();
			}


		}
	}
</script>


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

	page {
		background-color: #F8FAFE;
	}

	.prompt {
		padding: 16px;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);

		text {
			font-size: 22px;
			color: #333333;
			font-weight: bold;
			margin-top: 15px;
		}

		.back {
			font-size: 14px;
			color: #333333;
		}
	}

	.binding {
		padding: 16px;

		.title {
			font-size: 14px;
			color: #333333;

			text:first-child {
				font-size: 20px;
				font-weight: bold;
			}
		}

		.formInfo {
			margin-top: 18px;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;


		}


	}
</style>