uniapp-app/pages_app/idcardAuth/bankCardList.vue

<template>
	<view class="bank-card-page">
		<!-- 顶部导航栏 -->
		 <view class="navbox">
			<view class="status_bar"></view>
			<uni-nav-bar
			left-icon="left"
			title="常用银行卡"
			@clickLeft="goBack"
			right-text="添加"
			@clickRight="addBankCard"
			color="#8B2316"
			
			:border="false"
			backgroundColor="#eeeeee"
		>
		</uni-nav-bar>

		 </view>
		<!-- 银行卡列表 -->
		<view class="card-list">
			<view class="card-item" v-for="(card, index) in bankCards" :key="card.uuid">
				<view class="card-logo">
					<image
						v-if="getBankLogoImg(card.open_bank)"
						class="bank-logo-img"
						:src="getBankLogoImg(card.open_bank)"
						mode="aspectFit"
					></image>
					<view v-else class="logo-bg">
						<text class="logo-text">{{ getBankLogo(card.open_bank) }}</text>
					</view>
				</view>
				<view class="card-info">
					<view class="card-number">尾号{{ card.card_number }}储蓄卡</view>
					<view class="bank-name">{{ card.open_bank }}</view>
				</view>
				<view class="card-delete" @click.stop="handleDeleteBankCard(card)">
					删除
				</view>
			</view>
		</view>
		<empty v-if="bankCards.length === 0" imgWidth="50%" empty-img="/static/empty_bank.png" empty-desc="使用常用卡，支付更快捷"></empty>

		<!-- 底部导航指示器 -->
		<view class="bottom-indicator"></view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import navTo from '@/utils/navTo';
import api from '@/api/api';
import empty from "@/components/empty/empty.vue"
const bankCards = ref([]);
import { onLoad,onBackPress } from '@dcloudio/uni-app';
const from = ref('');
onLoad((options) => {
	if(options.from){
		from.value = options.from;
	}
});
onBackPress(() => {
	if(!from.value){
		uni.navigateBack();
		return true;
	}
});
// 银行卡数据
const getBankCardList = () => {
	api.bankCardList({}).then(res => {

		if (res.code === 200 && res.data) {
			bankCards.value = res.data;
		}
	});
};

const goBack = () => {
	if(!from.value){
		plus.runtime.quit();
	}else{
		uni.navigateBack();
	}
};

const addBankCard = () => {
	navTo({
		url: '/pages_app/idcardAuth/idcardAuth'
	});
};

const bankLogoMap = {
	'工商银行': '/static/icon_bankcard_gongshang.png',
	'中国银行': '/static/icon_bankcard_zhongguo.png',
	'建设银行': '/static/icon_bankcard_jianseyinhang.png',
	'农业银行': '/static/icon_bankcard_nongyeyinhang.png',
	'交通银行': '/static/icon_bankcard_jiatong.png',
	'招商银行': '/static/icon_bankcard_zhaoshangyinhang.png',
	'民生银行': '/static/icon_bankcard_minshneg.png',
	'兴业银行': '/static/icon_bankcard_xingye.png',
	'浦发银行': '/static/icon_bankcard_shanghaipudongfazhanyinhang.png',
	'光大银行': '/static/icon_bankcard_guangda.png',
	'华夏银行': '/static/icon_bankcard_huaxiayinhnag.png',
	'中信银行': '/static/icon_bankcard_zhongxinshiye.png',
	'平安银行': '/static/icon_bankcard_pingan.png',
	'广发银行': '/static/icon_bankcard_guangfa.png',
	'邮储银行': '/static/icon_bankcard_youzheng.png',
	'上海银行': '/static/icon_bankcard_shanghai.png',
	'北京银行': '/static/icon_bankcard_beijingyinhang.png'
};

const getBankLogoImg = (bankName) => {
	return bankLogoMap[bankName] || '';
};

const handleDeleteBankCard = (card) => {
	uni.showModal({
		title: '确认删除',
		content: `确定删除尾号${card.card_number}的银行卡吗？`,
		success: async (modalRes) => {
			if (!modalRes.confirm) return;
			try {
				const res = await api.deleteBankCard({
					uuid: card.uuid
				});
				if (res.code === 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					getBankCardList();
					return;
				}
				uni.showToast({
					title: res.msg || '删除失败',
					icon: 'none'
				});
			} catch (error) {
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			}
		}
	});
};

// 获取银行logo文字
const getBankLogo = (bankName) => {
	const bankLogos = {
		'工商银行': '工',
		'中国银行': '中',
		'建设银行': '建',
		'农业银行': '农',
		'交通银行': '交',
		'招商银行': '招',
		'民生银行': '民',
		'兴业银行': '兴',
		'浦发银行': '浦',
		'光大银行': '光',
		'华夏银行': '华',
		'中信银行': '信',
		'平安银行': '平',
		'广发银行': '广',
		'邮储银行': '邮'
	};
	return bankLogos[bankName] || bankName.charAt(0);
};

onMounted(() => {
	getBankCardList();
});
</script>

<style lang="scss" scoped>
.bank-card-page {
	min-height: 100vh;
	background: #F5F5F5;
	position: relative;

	:deep(.uni-nav-bar-right-text) {
		font-size: 32rpx;
		font-weight: 600;
	}
}

/* 银行卡列表样式 */
.card-list {
	margin-top: calc(var(--status-bar-height) + 44px);
	padding: 30rpx;
	
	.card-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		
		.card-logo {
			margin-right: 30rpx;

			.bank-logo-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			
			.logo-bg {
				width: 80rpx;
				height: 80rpx;
				background: #E60012;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid #E60012;
				
				.logo-text {
					color: #ffffff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		
		.card-info {
			flex: 1;
			
			.card-number {
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 8rpx;
				font-weight: 500;
			}
			
			.bank-name {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.card-delete {
			font-size: 30rpx;
			font-weight: 600;
			color: #E60012;
			padding: 8rpx 0 8rpx 20rpx;
		}
	}
}

/* 底部指示器 */
.bottom-indicator {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120rpx;
	height: 6rpx;
	background: #333333;
	border-radius: 3rpx;
}
</style>