feat: 更新银行卡管理功能，添加银行卡和删除银行卡的逻辑，优化API请求方式
This commit is contained in:
287
src/views/trade-settings/bank-management/index.vue
Normal file
287
src/views/trade-settings/bank-management/index.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<script lang='ts' setup>
|
||||
import { actionSheetController, alertController, toastController } from "@ionic/vue";
|
||||
import {
|
||||
addOutline,
|
||||
cardOutline,
|
||||
checkmarkCircle,
|
||||
ellipsisHorizontal,
|
||||
star,
|
||||
} from "ionicons/icons";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const { data, refresh } = await safeClient(() => client.api.bank_account.get());
|
||||
const bankCards = computed(() => data.value?.data || []);
|
||||
|
||||
function handleAddCard() {
|
||||
router.push("/trade-settings/bank-management/add");
|
||||
}
|
||||
|
||||
async function handleCardOptions(card: any) {
|
||||
const actionSheet = await actionSheetController.create({
|
||||
header: card.bankName,
|
||||
buttons: [
|
||||
{
|
||||
text: card.isDefault ? "默认银行卡" : "设为默认",
|
||||
handler: () => {
|
||||
if (!card.isDefault) {
|
||||
handleSetDefault(card);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "编辑",
|
||||
handler: () => {
|
||||
router.push(`/trade-settings/bank-management/edit/${card.id}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "删除",
|
||||
role: "destructive",
|
||||
handler: () => {
|
||||
handleDeleteCard(card);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "取消",
|
||||
role: "cancel",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await actionSheet.present();
|
||||
}
|
||||
|
||||
// 设置默认银行卡
|
||||
async function handleSetDefault(card: any) {
|
||||
await safeClient(() => client.api.bank_account({ id: card.id }).set_default.post());
|
||||
const toast = await toastController.create({
|
||||
message: "已设置为默认银行卡",
|
||||
duration: 2000,
|
||||
position: "bottom",
|
||||
color: "success",
|
||||
});
|
||||
|
||||
await toast.present();
|
||||
refresh();
|
||||
}
|
||||
|
||||
// 删除银行卡
|
||||
async function handleDeleteCard(card: any) {
|
||||
const alert = await alertController.create({
|
||||
header: "删除银行卡",
|
||||
message: `确定要删除 ${card.bankName} (${card.accountName}) 吗？此操作无法撤销。`,
|
||||
buttons: [
|
||||
{
|
||||
text: "取消",
|
||||
role: "cancel",
|
||||
},
|
||||
{
|
||||
text: "删除",
|
||||
role: "destructive",
|
||||
handler: async () => {
|
||||
await safeClient(() => client.api.bank_account({ id: card.id }).delete());
|
||||
const toast = await toastController.create({
|
||||
message: "银行卡删除成功",
|
||||
duration: 2000,
|
||||
position: "bottom",
|
||||
color: "success",
|
||||
});
|
||||
await toast.present();
|
||||
refresh();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
// 获取银行图标颜色
|
||||
function getBankIcon(bankCode: string) {
|
||||
const bankColors: Record<string, string> = {
|
||||
BOC: "#E31E24", // 中国银行 - 红色
|
||||
CMB: "#E31E24", // 招商银行 - 红色
|
||||
ICBC: "#E31E24", // 工商银行 - 红色
|
||||
CCB: "#0F5AA6", // 建设银行 - 蓝色
|
||||
ABC: "#00A651", // 农业银行 - 绿色
|
||||
BOCOM: "#1890FF", // 交通银行 - 蓝色
|
||||
PSBC: "#00A651", // 邮储银行 - 绿色
|
||||
};
|
||||
return bankColors[bankCode] || "#666";
|
||||
}
|
||||
|
||||
// 获取银行缩写
|
||||
function getBankAbbr(bankName: string) {
|
||||
const abbr: Record<string, string> = {
|
||||
中国银行: "中行",
|
||||
招商银行: "招行",
|
||||
工商银行: "工行",
|
||||
建设银行: "建行",
|
||||
农业银行: "农行",
|
||||
交通银行: "交行",
|
||||
邮储银行: "邮储",
|
||||
};
|
||||
return abbr[bankName] || bankName?.charAt(0);
|
||||
}
|
||||
|
||||
onUpdated(() => {
|
||||
refresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonPage>
|
||||
<ion-header>
|
||||
<ion-toolbar class="ui-toolbar">
|
||||
<ion-back-button slot="start" />
|
||||
<ion-title>银行卡管理</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<IonContent :fullscreen="true">
|
||||
<div class="min-h-full">
|
||||
<div v-if="bankCards?.length === 0" class="flex flex-col items-center justify-center min-h-[60vh] p-8 text-center">
|
||||
<div class="w-20 h-20 rounded-full bg-linear-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-6 shadow-lg shadow-indigo-500/30">
|
||||
<ion-icon :icon="cardOutline" class="text-4xl text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-#151515 dark:text-white mb-2">
|
||||
暂无银行卡
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-8">
|
||||
添加银行卡以便快速充值和提现
|
||||
</p>
|
||||
<ion-button
|
||||
expand="block"
|
||||
class="h-12 font-semibold"
|
||||
@click="handleAddCard"
|
||||
>
|
||||
<ion-icon slot="start" :icon="addOutline" />
|
||||
添加银行卡
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="p-4">
|
||||
<div class="mb-6">
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 flex items-center cursor-pointer transition-all duration-300 border-2 border-dashed border-gray-200 dark:border-gray-600"
|
||||
@click="handleAddCard"
|
||||
>
|
||||
<div class="w-10 h-10 rounded-full bg-linear-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-3">
|
||||
<ion-icon :icon="addOutline" class="text-white text-xl" />
|
||||
</div>
|
||||
<span class="font-semibold text-#151515 dark:text-white">添加银行卡</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 银行卡列表 -->
|
||||
<div class="mb-8">
|
||||
<div class="mb-4">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 font-medium">已绑定银行卡 ({{ bankCards?.length }})</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="card in bankCards"
|
||||
:key="card.id"
|
||||
class="bg-gray-50 dark:bg-gray-900 rounded-2xl mb-4 overflow-hidden shadow-sm transition-all duration-300 relative"
|
||||
>
|
||||
<div class="p-5 flex items-center justify-between">
|
||||
<div class="flex items-center flex-1">
|
||||
<div
|
||||
class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 text-white font-bold text-sm shadow-sm"
|
||||
:style="{ backgroundColor: getBankIcon(card.bankCode || card.bankName) }"
|
||||
>
|
||||
<span class="text-white">{{ getBankAbbr(card.bankName) }}</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h4 class="text-lg font-semibold text-#151515 dark:text-white m-0">
|
||||
{{ card.bankName }}
|
||||
</h4>
|
||||
<span
|
||||
v-if="card.isDefault"
|
||||
class="bg-linear-to-r from-indigo-500 to-purple-600 text-white text-xs px-2 py-0.5 rounded-lg font-medium"
|
||||
>
|
||||
默认
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-base m-0 mb-2 tracking-wider">
|
||||
{{ card.maskAccountNumber }}
|
||||
</p>
|
||||
<div class="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-md text-xs">
|
||||
储蓄卡
|
||||
</span>
|
||||
<span>{{ card.accountName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-4">
|
||||
<ion-button
|
||||
fill="clear"
|
||||
class="[--color:var(--color-gray-600)] [--background:transparent] w-10 h-10 hover:[--background:var(--color-gray-100)]"
|
||||
@click="handleCardOptions(card)"
|
||||
>
|
||||
<ion-icon slot="icon-only" :icon="ellipsisHorizontal" />
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 默认标识条 -->
|
||||
<div v-if="card.isDefault" class="bg-linear-to-r from-indigo-500 to-purple-600 text-white px-5 py-2 flex items-center gap-2 text-sm font-medium">
|
||||
<ion-icon :icon="star" class="text-base" />
|
||||
<span>默认银行卡</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<div class="rounded-xl p-4 mt-4 b-2px bg-gray-50 dark:bg-gray-900">
|
||||
<div class="flex items-center gap-3 mb-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<ion-icon :icon="checkmarkCircle" class="text-base text-green-500" />
|
||||
<span>银行卡信息经过加密保护</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<ion-icon :icon="checkmarkCircle" class="text-base text-green-500" />
|
||||
<span>支持主流银行快速充值提现</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@media (max-width: 768px) {
|
||||
.p-4 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 4.25rem;
|
||||
height: 4.25rem;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user