partnerApp/pages/wallet/bankCard.vue

<template>
	<view class="page" v-if="cardPackList.length">
		<view class="bankClass dis a-start f-c j-s" v-for="(item,index) in cardPackList" :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="delbankCard(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 class="fixed">
			<u-button type="primary" style="background-color:#0052FF ;font-weight: bold;" @tap="getbankCard">+
				添加银行卡</u-button>
		</view>
	</view>
	<u-empty text="暂无数据" mode="order" class="flexd" v-else></u-empty>
</template>

<script>
	export default {
		data() {
			return {
				bankNumber: "",
				cardPackList: [],
				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: {
			async getcardPack() {
				let res = await this.$http.get('/userBank/getUserBankList');
				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%)',
							}
						}
					})
					this.cardPackList = res.data;
				}
			},
			getbankCard() {
				this.navigate({
					url: '/pages/wallet/bindBank',
				}, "navigateTo", true)
			},
			async delbankCard(id) {
				let res = await this.$http.delete('/userBank/' + id);
				if (res.code == '200') {
					this.getcardPack();
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "success"
					});
				}

			},
			//银行style数据匹配
			// bankMatching(Name) {
			// 	let obj = this.bankList.find(item => item.bankName === Name);
			// 	return obj;
			// }


		},
	}
</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>