feat: 更新银行卡管理功能，添加银行卡和删除银行卡的逻辑，优化API请求方式

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

@@ -0,0 +1,192 @@
+<script lang='ts' setup>
+import type { GenericObject } from "vee-validate";
+import { toastController } from "@ionic/vue";
+import { toTypedSchema } from "@vee-validate/yup";
+import { informationCircle, shieldCheckmark } from "ionicons/icons";
+import { ErrorMessage, Field, Form } from "vee-validate";
+import * as yup from "yup";
+import { client, safeClient } from "@/api";
+
+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: "民生银行" },
+];
+
+// 表单验证 Schema
+const schema = toTypedSchema(
+  yup.object({
+    bankName: yup.string().required("请选择银行"),
+    accountNumber: yup
+      .string()
+      .required("请输入银行卡号"),
+    accountName: yup.string().required("请输入持卡人姓名"),
+  }),
+);
+
+async function handleSubmit(values: GenericObject) {
+  try {
+    await safeClient(() => client.api.bank_account.post({
+      bankName: values.bankName,
+      accountNumber: values.accountNumber,
+      accountName: values.accountName,
+    }));
+    const toast = await toastController.create({
+      message: "银行卡添加成功",
+      duration: 2000,
+      position: "bottom",
+      color: "success",
+    });
+
+    await toast.present();
+    router.back();
+  }
+  catch (error) {
+    console.error("添加银行卡失败:", error);
+  }
+}
+
+// 格式化银行卡号显示
+function formatCardNumber(value: string) {
+  if (!value)
+    return value;
+  const numbers = value.replace(/\D/g, "");
+  return numbers.replace(/(\d{4})(?=\d)/g, "$1 ");
+}
+</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 class="p-4">
+          <!-- 表单说明 -->
+          <div class="border border-blue-200 dark:border-blue-900 rounded-xl p-4 mb-6">
+            <div class="flex items-start gap-3">
+              <ion-icon
+                :icon="informationCircle"
+                class="text-blue-500 text-xl mt-0.5 shrink-0"
+              />
+              <div class="text-sm text-blue-700 dark:text-blue-300">
+                <p class="font-medium mb-1">
+                  温馨提示
+                </p>
+                <p class="leading-relaxed">
+                  为了保障您的资金安全，请确保银行卡信息真实有效。添加的银行卡将用于充值和提现操作。
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <Form :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="银行卡" placeholder="请选择您的银行">
+                  <ion-select-option v-for="item in bankList" :key="item.code" :value="item.code">
+                    {{ item.name }}
+                  </ion-select-option>
+                </ion-select>
+              </Field>
+
+              <div>
+                <Field name="accountNumber">
+                  <template #default="{ field }">
+                    <ui-input-label
+                      v-bind="field"
+                      label="银行卡号"
+                      placeholder="请输入银行卡号"
+                      type="text"
+                      inputmode="numeric"
+                      :maxlength="23"
+                      helper-text="支持16-19位银行卡号"
+                      required
+                      @input="(e:any) => field.value = formatCardNumber(e.target.value)"
+                    />
+                  </template>
+                </Field>
+                <ErrorMessage name="accountNumber" class="text-red-500 text-sm mt-1" />
+              </div>
+
+              <div>
+                <Field name="accountName">
+                  <template #default="{ field }">
+                    <ui-input-label
+                      v-bind="field"
+                      label="持卡人姓名"
+                      placeholder="请输入持卡人姓名"
+                      type="text"
+                      helper-text="请输入银行卡开户时的真实姓名"
+                      required
+                    />
+                  </template>
+                </Field>
+                <ErrorMessage name="accountName" class="text-red-500 text-sm mt-1" />
+              </div>
+
+              <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-4">
+                <div class="flex gap-3">
+                  <ion-icon
+                    :icon="shieldCheckmark"
+                    class="text-amber-500 text-xl mt-0.5 shrink-0"
+                  />
+                  <div class="text-sm text-amber-700 dark:text-amber-300">
+                    <p class="font-medium mb-1">
+                      安全保障
+                    </p>
+                    <ul class="space-y-1 text-xs leading-relaxed">
+                      <li>• 所有银行卡信息均经过SSL加密传输</li>
+                      <li>• 我们严格遵循银行级安全标准</li>
+                      <li>• 您的个人信息将被妥善保护</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <ion-button type="submit" expand="block">
+                确认添加银行卡
+              </ion-button>
+            </div>
+          </Form>
+        </div>
+      </div>
+    </IonContent>
+  </IonPage>
+</template>
+
+<style scoped>
+/* Tailwind CSS 处理所有样式 */
+.ui-select {
+  --padding-start: 16px;
+  --padding-end: 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+}
+
+.ui-select.ion-invalid {
+  border-color: #ef4444;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ui-select {
+    border-color: #4b5563;
+  }
+}
+</style>

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

@@ -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>