feat: 更新银行卡管理功能，添加支持银行数据，优化表单交互和样式

src/views/trade-settings/bank-management/add.vue

@@ -1,6 +1,6 @@
 <script lang='ts' setup>
 import type { GenericObject } from "vee-validate";
-import { toastController } from "@ionic/vue";
+import { SelectChangeEventDetail, toastController } from "@ionic/vue";
 import { toTypedSchema } from "@vee-validate/yup";
 import { informationCircle, shieldCheckmark } from "ionicons/icons";
 import { ErrorMessage, Field, Form } from "vee-validate";
@@ -11,18 +11,9 @@ const { t } = useI18n();
 const router = useRouter();
 
 // 银行列表数据
-const bankList = [
-  { code: "BOC", name: "中国银行" },
-  { code: "CMB", name: "招商银行" },
-  { code: "ICBC", name: "工商银行" },
-  { code: "CCB", name: "建设银行" },
-  { code: "ABC", name: "农业银行" },
-  { code: "BOCOM", name: "交通银行" },
-  { code: "PSBC", name: "邮储银行" },
-  { code: "CITIC", name: "中信银行" },
-  { code: "CEB", name: "光大银行" },
-  { code: "CMBC", name: "民生银行" },
-];
+const walletStore = useWalletStore();
+const { supportBanks } = storeToRefs(walletStore);
+const formInst = useTemplateRef<FormInstance>("formInst");
 
 // 表单验证 Schema
 const schema = toTypedSchema(
@@ -37,11 +28,7 @@ const schema = toTypedSchema(
 
 async function handleSubmit(values: GenericObject) {
   try {
-    await safeClient(() => client.api.bank_account.post({
-      bankName: values.bankName,
-      accountNumber: values.accountNumber,
-      accountName: values.accountName,
-    }));
+    await safeClient(() => client.api.bank_account.post(values as any));
     const toast = await toastController.create({
       message: t("bankCard.messages.addSuccess"),
       duration: 2000,
@@ -56,6 +43,13 @@ async function handleSubmit(values: GenericObject) {
     console.error("添加银行卡失败:", error);
   }
 }
+function handleBankChange(event: any) {
+  const item = event.detail.value;
+  const current = supportBanks.value.find(bank => bank.bankCode === item);
+  formInst.value?.setFieldValue("bankName", current?.nameCn);
+  formInst.value?.setFieldValue("swiftCode", current?.swiftCode);
+  formInst.value?.setFieldValue("bankCode", current?.bankCode);
+}
 
 // 格式化银行卡号显示
 function formatCardNumber(value: string) {
@@ -96,12 +90,12 @@ function formatCardNumber(value: string) {
             </div>
           </div>
 
-          <Form :validation-schema="schema" class="space-y-5" @submit="handleSubmit">
+          <Form ref="formInst" :validation-schema="schema" class="space-y-5" @submit="handleSubmit">
             <div class="space-y-4">
-              <Field v-slot="{ field }" name="bankName">
-                <ion-select class="ui-select" interface="action-sheet" toggle-icon="" v-bind="field" :label="t('bankCard.form.bankName')" :placeholder="t('bankCard.form.bankNamePlaceholder')">
-                  <ion-select-option v-for="item in bankList" :key="item.code" :value="item.code">
-                    {{ item.name }}
+              <Field v-slot="{ field }" name="bankCode">
+                <ion-select class="ui-select" interface="action-sheet" toggle-icon="" v-bind="field" :label="t('bankCard.form.bankName')" :placeholder="t('bankCard.form.bankNamePlaceholder')" @ion-change="handleBankChange">
+                  <ion-select-option v-for="item in supportBanks" :key="item.bankCode" :value="item.bankCode">
+                    {{ item.nameCn }}
                   </ion-select-option>
                 </ion-select>
               </Field>

src/views/trade-settings/bank-management/index.vue

@@ -36,12 +36,6 @@ async function handleCardOptions(card: any) {
           }
         },
       },
-      {
-        text: t("bankCard.list.edit"),
-        handler: () => {
-          router.push(`/trade-settings/bank-management/edit/${card.id}`);
-        },
-      },
       {
         text: t("bankCard.list.delete"),
         role: "destructive",
@@ -104,34 +98,6 @@ async function handleDeleteCard(card: any) {
   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();
 });
@@ -194,11 +160,8 @@ onUpdated(() => {
             >
               <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 class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 text-white font-bold text-sm shadow-sm bg-[#0F5AA6]">
+                    <span class="text-white">{{ card.bankCode }}</span>
                   </div>
                   <div class="flex-1">
                     <div class="flex items-center gap-2 mb-1">