常用银行卡

api/api.js

@@ -412,6 +412,10 @@ const api = {
 	bankCardList(data){
 		return request('/expertPay/bankCardList', data, 'post', false);
 	},
+
+	deleteBankCard(data){
+		return request('/expertPay/deleteBankCard', data, 'post', false);
+	},
 	getIncomeTax(data){
 		return request('/expertPay/getIncomeTax', data, 'post', false);
 	},

components/empty/empty.vue

@@ -1,20 +1,68 @@
 <template>
 	<view class="emptybox">
-		<up-image  :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
+		<view class="empty-image-wrap" :style="imageWrapStyle">
+			<up-image
+				:src="props.emptyImg || emptyImg"
+				:width="renderWidth"
+				:height="renderHeight"
+				:mode="imgMode"
+			></up-image>
+		</view>
 		<text class="empty-text">{{ emptyDesc }}</text>
 	</view>
 </template>
 
 <script setup>
-	import { ref } from 'vue';
+	import { computed } from 'vue';
-	import { onShow } from "@dcloudio/uni-app";
 	import emptyImg from "@/static/icon_empty.png"
 	const props = defineProps({
+		emptyImg: {
+			type: String,
+			default: ''
+		},
+		imgWidth: {
+			type: [String, Number],
+			default: ''
+		},
+		imgHeight: {
+			type: [String, Number],
+			default: ''
+		},
 		emptyDesc: {
 			type: String,
 			default: '暂无数据'
 		}
 	})
+
+	const normalizeSize = (size) => {
+		if (size === '' || size === null || size === undefined) return '';
+		// 直传字符串（如 50%、206rpx、120px），数字交给 up-image 按组件规则处理
+		return typeof size === 'string' ? size.trim() : size;
+	};
+	const isPercentSize = (size) => typeof size === 'string' && size.endsWith('%');
+
+	const imgWidth = computed(() => {
+		const width = normalizeSize(props.imgWidth);
+		const height = normalizeSize(props.imgHeight);
+		if (width !== '') return width;
+		if (height === '') return '206rpx';
+		return '';
+	});
+	const imgHeight = computed(() => normalizeSize(props.imgHeight));
+	const renderWidth = computed(() => (isPercentSize(imgWidth.value) ? '100%' : imgWidth.value));
+	const renderHeight = computed(() => (isPercentSize(imgHeight.value) ? '100%' : imgHeight.value));
+	const imageWrapStyle = computed(() => {
+		const style = {};
+		if (isPercentSize(imgWidth.value)) style.width = imgWidth.value;
+		if (isPercentSize(imgHeight.value)) style.height = imgHeight.value;
+		return style;
+	});
+	const imgMode = computed(() => {
+		// 只传宽/高时按比例缩放，避免图片被拉伸
+		if (imgWidth.value && !imgHeight.value) return 'widthFix';
+		if (!imgWidth.value && imgHeight.value) return 'heightFix';
+		return 'aspectFit';
+	});
 </script>
 
 <style scoped lang="scss">
@@ -27,6 +75,11 @@
 	 align-items: center;
 	 justify-content: center;
 	 flex-direction: column;
+	 .empty-image-wrap{
+		 width: 100%;
+		 display: flex;
+		 justify-content: center;
+	 }
 	 .empty-text{
 		 font-size: 30rpx;
 		 color:#999;

pages.json

@@ -1686,7 +1686,7 @@
 		"list": [
 			{
 				"name": "",
-				"path": "pages_chat/groupMessage/groupMessage",
+				"path": "/pages_app/idcardAuth/bankCardList",
 				"query": ""
 			}
 		]

pages_app/idcardAuth/bankCardList.vue

@@ -21,7 +21,13 @@
 		<view class="card-list">
 			<view class="card-item" v-for="(card, index) in bankCards" :key="card.uuid">
 				<view class="card-logo">
-					<view class="logo-bg">
+					<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>
@@ -29,9 +35,12 @@
 					<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"></empty>
+		<empty v-if="bankCards.length === 0" imgWidth="50%" empty-img="/static/empty_bank.png" empty-desc="使用常用卡，支付更快捷"></empty>
 
 		<!-- 底部导航指示器 -->
 		<view class="bottom-indicator"></view>
@@ -81,6 +90,62 @@ const addBankCard = () => {
 	});
 };
 
+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 = {
@@ -113,6 +178,11 @@ onMounted(() => {
 	min-height: 100vh;
 	background: #F5F5F5;
 	position: relative;
+
+	:deep(.uni-nav-bar-right-text) {
+		font-size: 32rpx;
+		font-weight: 600;
+	}
 }
 
 /* 银行卡列表样式 */
@@ -131,6 +201,12 @@ onMounted(() => {
 		
 		.card-logo {
 			margin-right: 30rpx;
+
+			.bank-logo-img {
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 50%;
+			}
 			
 			.logo-bg {
 				width: 80rpx;
@@ -165,6 +241,13 @@ onMounted(() => {
 				color: #666666;
 			}
 		}
+
+		.card-delete {
+			font-size: 30rpx;
+			font-weight: 600;
+			color: #E60012;
+			padding: 8rpx 0 8rpx 20rpx;
+		}
 	}
 }
 

pages_app/idcardAuth/idcardAuth.vue

@@ -173,7 +173,7 @@ import api from '@/api/api';
 import unidialog from '@/components/dialog/dialog.vue';
 const cardContent = ref('暂支持以下银行：农业银行、建设银行、光大银行、平安银行、兴业银行、中信银行、邮政储蓄银行、民生银行、中国银行、工商银行、交通银行、浦发银行、广发银行、华夏银行、招商银行、北京银行、上海银行。');
 const cardTitle = ref('银行卡说明');
-const cardVisible = ref(true);
+const cardVisible = ref(false);
 const formData = ref({
 	name: '',
 	idNumber: '',