partnerApp/pages/wallet/bankCard.vue

<template>
	<view class="">
		<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>
					<image class="tool" src="/static/image/bindBank/tool.png" mode="" @click="del(item.id)">
					</image>
				</view>
				<view class="bank dis j-s a-c">
					<view>****</view>
					<view>****</view>
					<view>****</view>
					<text>{{item.bankNumber.slice(-4)}}</text>
				</view>
			</view>
			<view v-if="current==1" 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>
					<image class="tool" src="/static/image/bindBank/tool.png" mode="" @click="del(item.id)">
					</image>
				</view>
				<view class="bank dis j-s a-c">
					<view>****</view>
					<view>****</view>
					<view>****</view>
					<text>{{item.bankNumber.slice(-4)}}</text>
				</view>
			</view>
			<view v-if="current==2" class="bankClass dis a-start f-c j-s" v-for="(item,index) in cardPackList3"
				: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>
					<image class="tool" src="/static/image/bindBank/tool.png" mode="" @click="del(item.id)">
					</image>
				</view>
				<view class="bank dis j-s a-c">
					<view>****</view>
					<view>****</view>
					<view>****</view>
					<text>{{item.bankNumber.slice(-4)}}</text>
				</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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				deleteshow: false,
				list: [{
					name: '未审核'
				}, {
					name: '已审核'
				}, {
					name: '驳回',
				}],
				current: 1,
				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%)"
					},
				],
			}
		},
		onShow() {
			this.getcardPack(); //获取卡包
		},
		onLoad() {},
		methods: {
			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)
						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%)',
							}
						}
						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.delete('/userBank/' + this.id);
				if (res.code == '200') {
					this.getcardPack();
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "success"
					});
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	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;
				margin-top: 6px;
			}
		}

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

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

		.tool {
			width: 28px;
			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>