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

auto-imports.d.ts

@@ -354,7 +354,7 @@ declare global {
   export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
-  export type { PageInstance, InputInstance, ModalInstance } from './src/utils/ionic-helper'
+  export type { PageInstance, InputInstance, ModalInstance, FormInstance } from './src/utils/ionic-helper'
   import('./src/utils/ionic-helper')
 }
 

package.json

@@ -23,7 +23,7 @@
     "@elysiajs/eden": "^1.4.5",
     "@ionic/vue": "^8.7.11",
     "@ionic/vue-router": "^8.7.11",
-    "@riwa/api-types": "http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz",
+    "@riwa/api-types": "http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz",
     "@tailwindcss/vite": "^4.1.18",
     "@vee-validate/yup": "^4.15.1",
     "@vueuse/core": "^14.1.0",

pnpm-lock.yaml

@@ -36,8 +36,8 @@ importers:
         specifier: ^8.7.11
         version: 8.7.11(@stencil/core@4.39.0)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
       '@riwa/api-types':
-        specifier: http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz
+        specifier: http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz
-        version: http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))
+        version: http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
@@ -1263,9 +1263,9 @@ packages:
   '@quansync/fs@1.0.0':
     resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
 
-  '@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz':
+  '@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz':
-    resolution: {tarball: http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz}
+    resolution: {tarball: http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz}
-    version: 0.0.21
+    version: 0.0.22
     peerDependencies:
       '@elysiajs/eden': ^1.4.5
 
@@ -6101,7 +6101,7 @@ snapshots:
     dependencies:
       quansync: 1.0.0
 
-  '@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.21.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.22.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
     dependencies:
       '@elysiajs/eden': 1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))
 

src/api/types.ts

@@ -31,3 +31,5 @@ export type BankAccountsData = Treaty.Data<typeof client.api.bank_account.get>;
 export type BankAccountBody = Parameters<typeof client.api.bank_account.post>[0];
 
 export type BankAccountData = Treaty.Data<typeof client.api.bank_account.post>;
+
+export type SupportBanksData = Treaty.Data<typeof client.api.bank_account.banks.get>;

src/store/wallet.ts

@@ -1,24 +1,24 @@
-import type { BalancesData, BankAccountsData } from "@/api/types";
+import type { BalancesData, BankAccountsData, SupportBanksData } from "@/api/types";
 import { defineStore } from "pinia";
 import { client, safeClient } from "@/api";
 
 interface State {
   balances: BalancesData;
   bankAccounts: BankAccountsData["data"];
+  supportBanks: SupportBanksData["data"];
 }
 
 export const useWalletStore = defineStore("wallet", () => {
   const state = reactive<State>({
     balances: [],
     bankAccounts: [],
+    supportBanks: [],
   });
 
-  const balances = computed(() => state.balances);
-  const bankAccounts = computed(() => state.bankAccounts);
-
   async function initializeWallet() {
     updateBalances();
     updateBankAccounts();
+    updateSupportBanks();
   }
 
   async function updateBalances(data?: BalancesData) {
@@ -39,12 +39,16 @@ export const useWalletStore = defineStore("wallet", () => {
     state.bankAccounts = bankAccounts.value?.data || [];
   }
 
+  async function updateSupportBanks() {
+    const { data: banks } = await safeClient(() => client.api.bank_account.banks.get(), { silent: true });
+    state.supportBanks = banks.value?.data || [];
+  }
+
   return {
-    state,
+    ...toRefs(state),
-    balances,
-    bankAccounts,
     initializeWallet,
     updateBalances,
     updateBankAccounts,
+    updateSupportBanks,
   };
 });

src/theme/variables.css

@@ -116,6 +116,8 @@ http://ionicframework.com/docs/theming/ */
 
   --ui-input-background: #efefef;
   --ui-input-color: #222222;
+
+  --ui-background-primary: linear-gradient(180deg, #615fff 0%, #9810fa 100%);
 }
 
 @media (prefers-color-scheme: dark) {

src/utils/ionic-helper.ts

@@ -1,3 +1,4 @@
 export type PageInstance = InstanceType<typeof import("@ionic/vue").IonPage>;
 export type InputInstance = InstanceType<typeof import("@ionic/vue").IonInput>;
 export type ModalInstance = InstanceType<typeof import("@ionic/vue").IonModal>;
+export type FormInstance = InstanceType<typeof import("vee-validate").Form>;

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 = [
+const walletStore = useWalletStore();
-  { code: "BOC", name: "中国银行" },
+const { supportBanks } = storeToRefs(walletStore);
-  { code: "CMB", name: "招商银行" },
+const formInst = useTemplateRef<FormInstance>("formInst");
-  { code: "ICBC", name: "工商银行" },
-  { code: "CCB", name: "建设银行" },
-  { code: "ABC", name: "农业银行" },
-  { code: "BOCOM", name: "交通银行" },
-  { code: "PSBC", name: "邮储银行" },
-  { code: "CITIC", name: "中信银行" },
-  { code: "CEB", name: "光大银行" },
-  { code: "CMBC", name: "民生银行" },
-];
 
 // 表单验证 Schema
 const schema = toTypedSchema(
@@ -37,11 +28,7 @@ const schema = toTypedSchema(
 
 async function handleSubmit(values: GenericObject) {
   try {
-    await safeClient(() => client.api.bank_account.post({
+    await safeClient(() => client.api.bank_account.post(values as any));
-      bankName: values.bankName,
-      accountNumber: values.accountNumber,
-      accountName: values.accountName,
-    }));
     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">
+              <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-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 bankList" :key="item.code" :value="item.code">
+                  <ion-select-option v-for="item in supportBanks" :key="item.bankCode" :value="item.bankCode">
-                    {{ item.name }}
+                    {{ 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
+                  <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]">
-                    class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 text-white font-bold text-sm shadow-sm"
+                    <span class="text-white">{{ card.bankCode }}</span>
-                    :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">

src/views/user/components/issuing-asset.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-5">
+  <div class="mt-10">
     <ion-label class="text-xs font-medium text-text-300">
       {{ t("asset.issue.issuingAsset") }}
     </ion-label>

src/views/user/components/my-revenue.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-7">
+  <div class="mt-10">
     <ion-label class="text-xs font-medium text-text-300">
       {{ t("asset.revenue.myRevenue") }}
     </ion-label>

src/views/user/components/trade-settings.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-7">
+  <div class="mt-10">
     <ion-label class="text-xs font-medium text-text-300">
       {{ t('trade.title') }}
     </ion-label>

src/views/user/components/wallet-card.vue

@@ -67,4 +67,7 @@ onMounted(() => {
 .withdraw-channel-modal {
   --height: auto;
 }
+ion-button {
+  --background: var(--ui-background-primary);
+}
 </style>