vue-insagent-app/pages/wallet/bindBank.vue

<template>
	<view>
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<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-form :model="bankform" ref="uForm" label-width="150">
					<u-form-item v-if='userInfo.sysUser.managementSource=="2"' label="手机号">
						<u-input placeholder="输入手机号" v-model="bankform.phoneNo" @blur="phoneNoCard" type="text"
							placeholder-style="color: grey;"></u-input>
					</u-form-item>
					<u-form-item label="本人姓名">
						<u-input placeholder="输入真实姓名" v-model="bankform.realUserName" type="text"
							placeholder-style="color: grey;"></u-input>
					</u-form-item>
					<u-form-item label="银行卡">
						<u-input placeholder="请输入银行卡卡号" @blur="validateBankCard" v-model="bankform.accountno"
							type="text" placeholder-style="color: grey;"></u-input>
					</u-form-item>
					<u-form-item label="选择银行">
						<u-input type="select" :select-open="show" v-model="bankform.bankname" placeholder="点击选择银行"
							@click="show = true" placeholder-style="color: grey;"></u-input>
					</u-form-item>
					<u-form-item label="开户行">
						<u-input placeholder="输入开户行" v-model="bankform.bankAddress" type="text"
							placeholder-style="color: grey;"></u-input>
					</u-form-item>
				</u-form>
			</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 {
				bankform: {
					bankname: "", //银行名称
					accountno: "", //银行卡账号
					bankAddress: "", //开户行
					realUserName: "", //真实姓名
					phoneNo: "", //手机号
				},
				promptShow: false,

				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: {
			"accountno": {
				handler(val) {
					if (val) {
						this.accountno = val.replace(/\s/g, "");
					}
				},
			},
		},

		methods: {
			...mapMutations(['setUserModules']),
			// 改变按钮状态
			confirm(e) {
				this.bankform.bankname = e[0].label;
			},
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			// 验证银行卡
			async validateBankCard() {
				var that = this;
				that.bankform.bankname = "";
				await bankBin.getBankBin(this.bankform.accountno)
					.then((data) => {
						that.bankform.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.bankform.phoneNo)) {
					return uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
				}
			},
			async submit() {
				if ((this.userInfo.sysUser.managementSource == "2" && !this.bankform.phoneNo || !this.bankform
						.bankname || !this
						.bankform.accountno || !this.bankform.bankAddress) ||
					(this.userInfo.sysUser.managementSource !== "2" && !this.bankform.realUserName || !this.bankform
						.bankname || !this
						.bankform.accountno || !this.bankform.bankAddress)
				) {
					return uni.showToast({
						title: '信息不完整',
						duration: 2000,
						icon: "none"
					});
				}
				var params = {
					"bankNumber": this.bankform.accountno,
					"realUserName": this.bankform.realUserName,
					"phoneNo": this.bankform.phoneNo,
					"bankAccount": this.bankform.bankname,
					"bankAddress": this.bankform.bankAddress,
					"isDefault": 0,
					"userId": this.userInfo.sysUser.id,
					"userName": this.userInfo.sysUser.name
				}
				let res = await this.$http.post('/userBank/insertByBankNumber', 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;


		}


	}

	::deep {
		.u-input {
			text-align: right !important;
		}

		.u-form-item {
			padding: 6px 14px !important;
		}

	}
</style>