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

<template>
	<view class="">
		<service-widget @btnClick="btn_click"></service-widget>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="page" v-if="cardPackList1.length>0 || cardPackList2.length>0 || cardPackList3.length>0">
			<view v-if="current==0" class="bankClass dis a-start f-c j-s" v-for="(item,index) in cardPackList1"
				:key="index" :style="{background:item.stylelist.background}">
				<image class="Backgroundimage" src="/static/image/bindBank/img1.png" mode="" style=""></image>
				<view class="dis j-s">
					<view class="dis">
						<view class="logo">
							<image :src="item.stylelist.logo" mode=""></image>
						</view>
						<view class="banktitle dis f-c j-s">
							<text>{{item.bankAccount}}</text>
							<text>储蓄卡</text>
						</view>
					</view>
				</view>
				<view class="bank dis j-s a-c">
					<view v-for="(item,index) in item.bankArray" :key="index">{{item}}</view>
				</view>
			</view>
			<view v-if="current==1 && item.delFlag==0" class="bankClass dis a-start f-c j-s"
				v-for="(item,index) in cardPackList2" :key="index" :style="{background:item.stylelist.background}">
				<image class="Backgroundimage" src="/static/image/bindBank/img1.png" mode="" style=""></image>
				<view class="dis j-s">
					<view class="dis">
						<view class="logo">
							<image :src="item.stylelist.logo" mode=""></image>
						</view>
						<view class="banktitle dis f-c j-s">
							<text>{{item.bankAccount}}</text>
							<text>储蓄卡</text>
						</view>
					</view>
					<view class="dis ">

						<image class="tool" src="/static/image/bindBank/del.png" mode="" @click="del(item.id)">
						</image>
					</view>
				</view>
				<view class="bank dis j-s a-c">
					<view v-for="(item,index) in item.bankArray" :key="index">{{item}}</view>
				</view>
			</view>
			<view class="" v-if="current==2" v-for="(item,index) in cardPackList3" :key="index">
				<view class="rejectionReason dis a-start j-start">
					<view style="width: 5%;margin-top: 2px;">
						<image src="/static/image/bindBank/bohui.png" mode="" style="width: 14px;height: 14px;">
						</image>
					</view>
					<view style="width: 95%;">
						驳回原因：{{item.remark?item.remark:'无'}}</view>
				</view>
				<view class="bankClass dis a-start f-c j-s" :style="{background:item.stylelist.background}">
					<image class="Backgroundimage" src="/static/image/bindBank/img1.png" mode="" style=""></image>
					<view class="dis j-s">
						<view class="dis">
							<view class="logo">
								<image :src="item.stylelist.logo" mode=""></image>
							</view>
							<view class="banktitle dis f-c j-s">
								<text>{{item.bankAccount}}</text>
								<text>储蓄卡</text>
							</view>
						</view>
					</view>
					<view class="bank dis j-s a-c">
						<view v-for="(item,index) in item.bankArray" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty text="暂无数据" mode="order" class="flexd" v-else></u-empty>
		<view class="fixed">
			<u-button type="primary" style="background-color:#0052FF ;font-weight: bold;" @tap="getbankCard">+
				添加银行卡</u-button>
		</view>
		<u-modal v-model="deleteshow" :show-cancel-button='true' @confirm="delbankCard">
			<view class="slot-content dis a-c j-c" style="padding: 10px;">
				<span style="font-weight: bold;">点击确定解绑银行卡</span>
			</view>
		</u-modal>
		<u-popup mode="bottom" v-model="promptShow" width="100%" height="50%" border-radius="14" :closeable="true">
			<view style="padding: 16px;">
				<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 v-model="form.realUserName" :field-style="{textAlign:'right'}" label="本人姓名"
							placeholder="输入真实姓名">
						</u-field>
						<u-field v-model="form.bankNumber" @blur="validateBankCard" :field-style="{textAlign:'right'}"
							label="银行卡号" placeholder="请输入银行卡卡号">
						</u-field>
						<u-field @click="showAction" v-model="form.bankAccount" :field-style="{textAlign:'right'}"
							label="选择银行" placeholder="点击选择银行">
						</u-field>
						<u-field v-model="form.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="updateSubmit">
						点击修改</u-button>
				</view>
			</view>
		</u-popup>
		<u-select v-model="show" :list="bnklist" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				bnklist: [{
						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: '农村商业银行'
					},
				],
				form: {
					bankNumber: "",
					realUserName: "",
					bankAccount: "",
					bankAddress: "",
				},
				promptShow: false,
				id: "",
				deleteshow: false,
				list: [{
					name: '未审核'
				}, {
					name: '已审核'
				}, {
					name: '驳回',
				}],
				current: 1,
				validateBankCardStatus: false, //银行卡验证状态
				bankNumber: "",
				cardPackList1: [],
				cardPackList2: [],
				cardPackList3: [],
				bankList: [{
						bankName: "中国邮政储蓄银行",
						logo: "/static/image/bankLogo/youzheng.png",
						background: "linear-gradient(90deg, rgba(79, 136, 69, 0.7) 0%, #4f8845 100%)"
					},
					{
						bankName: "中国工商银行",
						logo: "/static/image/bankLogo/gongshang.png",
						background: "linear-gradient(90deg, rgba(177, 0, 13, 0.7) 0%, #b1000d 100%)"
					},
					{
						bankName: "中国农业银行",
						logo: "/static/image/bankLogo/nongye.png",
						background: "linear-gradient(90deg, rgba(86,152, 130, 0.7) 0%, #569882 100%)"
					},
					{
						bankName: "中国银行",
						logo: "/static/image/bankLogo/zhongguo.png",
						background: "linear-gradient(90deg, rgba(157, 32, 40, 0.7) 0%, #9d2028 100%)"
					},
					{
						bankName: "中国建设银行",
						logo: "/static/image/bankLogo/jianshe.png",
						background: "linear-gradient(90deg, rgba(6, 89, 159, 0.7) 0%, #06569F 100%)"
					},
					{
						bankName: "招商银行",
						logo: "/static/image/bankLogo/zhaoshang.png",
						background: "linear-gradient(90deg, rgba(197, 0, 25, 0.7) 0%, #c50019 100%)"
					},
					{
						bankName: "中国民生银行",
						logo: "/static/image/bankLogo/minsheng.png",
						background: "linear-gradient(90deg, rgba(84,149, 92, 0.7) 0%, #54955c 100%)"
					},
					{
						bankName: "中国光大银行",
						logo: "/static/image/bankLogo/guangda.png",
						background: "linear-gradient(90deg, rgba(93, 30, 131, 0.7) 0%, #5d1e83 100%)"
					},
					{
						bankName: "中信银行",
						logo: "/static/image/bankLogo/zhongxin.png",
						background: "linear-gradient(90deg, rgba(184, 0,22, 0.7) 0%, #b80016 100%)"
					},
					{
						bankName: "华夏银行",
						logo: "/static/image/bankLogo/huaxia.png",
						background: "linear-gradient(90deg, rgba(216, 12, 24, 0.7) 0%, #d80c18 100%)"
					},
					{
						bankName: "中国交通银行",
						logo: "/static/image/bankLogo/jiaotong.png",
						background: "linear-gradient(90deg, rgba(33, 58, 120, 0.7) 0%, #213a78 100%)"
					},
					{
						bankName: "晋商银行",
						logo: "/static/image/bankLogo/jinshang.png",
						background: "linear-gradient(90deg, rgba(224, 150, 165, 0.7) 0%, #e096a5 100%)"
					},
					{
						bankName: "山西银行",
						logo: "/static/image/bankLogo/shanxi.png",
						background: "linear-gradient(90deg, rgba(192, 19, 73, 0.7) 0%, #c01349 100%)"
					},
					{
						bankName: "农村商业银行",
						logo: "/static/image/bankLogo/nongcun.png",
						background: "linear-gradient(90deg, rgba(0, 155, 77, 0.7) 0%, #009b4d 100%)"
					},
				],
			}
		},
		onShow() {
			this.getcardPack(); //获取卡包
		},
		watch: {
			"form.bankNumber": {
				handler(val) {
					if (val) {
						this.form.bankNumber = val.replace(/\s/g, "");
					}
				},
			},
		},
		onLoad() {
			this.$http.get('/sysMenuRecord/add?type=1&menuType=3')
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			async updateSubmit() {
				if (!this.form.bankNumber || !this.form.realUserName || !this.form.bankAccount || !this.form
					.bankAddress) {
					return uni.showToast({
						title: '信息不完整',
						duration: 2000,
						icon: "none"
					});
				}
				let res = await this.$http.put('/userBank/update', this.form);
				if (res.code == '200') {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					this.promptShow = false;
					this.getcardPack();
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			},
			confirm(e) {
				this.form.bankAccount = e[0].label;
			},
			showAction() {
				this.show = true;
			},
			// 验证银行卡
			async validateBankCard() {
				var that = this;
				that.form.bankAccount = "";
				await bankBin.getBankBin(this.accountno)
					.then((data) => {
						that.form.bankAccount = data.bankName;
						that.validateBankCardStatus = true;
						return true;
					})
					.catch((err) => {
						that.validateBankCardStatus = false;
						return uni.showToast({
							title: err.split(":")[1],
							icon: "none"
						});
					})
			},
			change(index) {
				this.current = index;
			},
			async getcardPack() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: "",
				});
				let list1 = [];
				let list2 = [];
				let list3 = [];
				if (res.code == '200' && res.data) {
					res.data.map(val => {
						let name = this.bankList.find(ele => ele.bankName === val.bankAccount || ele.bankName
							.includes(val.bankAccount))
						if (name) {
							val.stylelist = {
								...name
							};
						} else {
							val.stylelist = {
								logo: "/static/image/bindBank/img1.png",
								background: 'linear-gradient(90deg, rgba(229, 166,0,0.7) 0%, #e5a600 100%)',
							}
						}
						const resultArray = [];
						for (let i = 0; i < val.bankNumber.length; i += 4) {
							resultArray.push(val.bankNumber.substring(i, i + 4));
						}
						val.bankArray = resultArray;
						switch (val.auditStatus) {
							case "0":
								list1.push(val);
								break;
							case "1":
								list2.push(val);
								break;
							case "2":
								list3.push(val);
								break;
						}
					})
					this.cardPackList1 = list1;
					this.cardPackList2 = list2;
					this.cardPackList3 = list3;
				}
			},
			getbankCard() {
				this.navigate({
					url: '/pages/wallet/bindBank',
				}, "navigateTo", true)
			},
			del(id) {
				this.id = id;
				this.deleteshow = true;
			},

			async delbankCard() {
				let res = await this.$http.post('/userBank/unbind', {
					id: this.id,
					delFlag: '1',
				});
				if (res.code == '200') {
					this.getcardPack();
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "success"
					});
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.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;


		}


	}

	.rejectionReason {
		width: 100%;
		height: auto;
		padding: 5px;
		background: rgba(255, 15, 0, 0.1);
		border-radius: 8px 8px 8px 8px;
		margin-bottom: 5px;


		>view {
			color: #DC0D00;
			font-size: 12px;
		}
	}

	page {
		background-color: #fff;
	}

	.page {
		padding: 10px 16px;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 62px;
		background: #FFFFFF;
		box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.1);
		padding: 12px 16px;
	}

	.bankClass {
		width: 100%;
		height: 110px;
		border-radius: 6px;
		padding: 14px;
		position: relative;
		margin-bottom: 15px;

		.Backgroundimage {
			width: 94px;
			height: 86px;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		>view {
			width: 100%;
		}

		.bank {
			font-size: 18px;
			color: #fff;
			line-height: 1;

			view {
				font-size: 18px;
				line-height: 1;
			}
		}

		.logo {
			width: 39px;
			height: 39px;
			background: #FFFFFF;
			border-radius: 6px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tool {
			width: 20px;
			height: 20px;
		}

		.banktitle {
			margin-left: 12px;

			text:first-child {
				color: #fff;
				font-weight: bold;
				font-size: 16px;
				line-height: 1;
			}

			text:last-child {
				color: #fff;
				font-size: 12px;
				line-height: 1;
			}
		}

	}

	.flexd {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}
</style>