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>