couponCenter_mpapp/src/pages-B/payment/bankCard-list.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { getBankcardList } from '@/api/pay'
import { getImageUrl } from '@/utils/imageUtil'

// 响应式状态
const cardList = ref<any[]>([])
const showActions = ref(false)
const actions = ref([{ name: '解绑' }])
const selectedCard = ref<any>(null)

// 静态资源URL
const staticUrl = import.meta.env.VITE_SERVER_BASEURL

// 计算属性
const btnText = computed(() => {
	return cardList.value.length === 0 ? '添加' : '更换'
})

// 页面加载
onLoad(() => {
	// 可以在这里做一些初始化操作
})

// 页面显示
onShow(() => {
	getData()
})

// 获取数据
function getData() {
	getBankcardList().then((res: any) => {
		if (res.code === 200) {
			cardList.value = res.result
		}
	})
}

// 获取卡片背景样式
function getCardBackground(card: any) {
	const cardColor = card.colorValue || '136, 136, 136'
	return `linear-gradient(90deg, rgba(${cardColor}, 0.4), rgba(${cardColor}, 0.8)), url(${getImageUrl('@local/vehicle/card-mask.png')}) center/cover no-repeat`
}

// 添加/更换银行卡
function addBankCard() {
	if (btnText.value === '更换') {
		const cardId = cardList.value[0]?.id
		if (cardId) {
			uni.navigateTo({
				url: `/pages-B/payment/bankCard-edit?type=update&cardId=${cardId}`
			})
		}
	} else {
		uni.navigateTo({
			url: '/pages-B/payment/bankCard-edit'
		})
	}
}

// 显示操作菜单
function showCardActions(card: any) {
	selectedCard.value = card
	showActions.value = true
}

// 选择操作
function onActionSelect(action: { name: string }) {
	if (action.name === '解绑') {
		uni.showModal({
			title: '确认解绑',
			content: `您确定要解绑尾号为 ${selectedCard.value?.bankCardNumber?.substring(12)} 的银行卡吗？`,
			success: (res) => {
				if (res.confirm && selectedCard.value) {
					// 调用解绑接口（需要添加）
					// netBankcardDel(selectedCard.value.id).then((res) => {
					//   uni.$u.toast(res.message)
					//   if (res.code === 200) {
					//     getData()
					//   }
					// })
					uni.$u.toast('解绑功能开发中')
				}
			}
		})
	}
	showActions.value = false
}
</script>

<template>
	<view class="page-container new-content">
		<u-navbar title="银行卡" :autoBack="true" :placeholder="true" :border-bottom="false"></u-navbar>

		<view class="card-list">
			<view class="card-item" v-for="card in cardList" :key="card.id" :style="{ background: getCardBackground(card) }">
				<view class="card-header">
					<image class="bank-logo" :src="card.bankImage" mode="aspectFit"></image>
					<view class="bank-info">
						<view class="bank-name">{{ card.bankName }}</view>
						<view class="card-type">{{ card.cardType || '储蓄卡' }}</view>
					</view>
                    <!-- <image class="more" :src="getImageUrl('@local/groupMeal/icon_more.png')" @click="showCardActions(card)"></image> -->
				</view>
				<view class="card-number">
					<text>●●●●</text>
					<text>●●●●</text>
					<text>●●●●</text>
					<text class="n">{{ card.bankCardNumber.substring(12) }}</text>
				</view>
			</view>
			<u-empty 
				text="没有可用的银行卡" 
				textColor="#333" 
				v-if="cardList.length === 0"
				:icon="`${staticUrl}/static/common/empty15.png`"
			>
			</u-empty>
		</view>

		<view class="footer-bar">
			<u-button type="primary" @click="addBankCard">{{ btnText }}银行卡</u-button>
		</view>

		<!-- 操作菜单 -->
		<u-action-sheet
			description="解除绑定后从银行卡列表中移除，需要重新添加使用"
			:round="20"
			:actions="actions"
			:show="showActions"
			:safeAreaInsetBottom="true"
			@select="onActionSelect"
			@close="showActions = false"
		></u-action-sheet>
	</view>
</template>

<style lang="scss" scoped>
.page-container {
	background-color: #f8f8fa;
	min-height: 100vh;
}
.card-list {
	padding: 24rpx;
}
.card-item {
	color: #333333;
	padding: 28rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
	.card-header {
		margin-bottom: 40rpx;
		position: relative;
		display: flex;
		align-items: center;
		.bank-logo {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
			background-color: #fff;
		}
		.bank-info {
			flex: 1;
			margin-left: 20rpx;
			.bank-name {
				font-size: 32rpx;
				font-weight: 500;
			}
			.card-type {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}
		.more {
			width: 56rpx;
			height: 40rpx;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	.card-number {
		font-size: 14rpx;
		letter-spacing: 2rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.n {
			font-size: 36rpx;
			font-family: fantasy;
		}
	}
}
.footer-bar {
	::v-deep .u-button {
		width: 100%;
		height: 76rpx;
	}
}
</style>