feat: 更新 API 地址，修改首页和支付页面的逻辑，优化收款方式管理功能

src/views/payment/index.vue

@@ -1,37 +1,13 @@
 <script lang='ts' setup>
+import type { Treaty } from "@elysiajs/eden";
 import { alertController, toastController } from "@ionic/vue";
-import { addOutline, cardOutline, checkmarkCircleOutline, createOutline, logoAlipay, trashOutline } from "ionicons/icons";
+import { addOutline, cardOutline, createOutline, logoAlipay, trashOutline } from "ionicons/icons";
+import { client, safeClient } from "@/api";
 
 const router = useRouter();
+type Receipt = Treaty.Data<typeof client.api.receipt_method.get>["data"][number];
 
-interface PaymentMethod {
-  id: number;
-  type: "bank" | "alipay";
-  name: string;
-  account: string;
-  bankName?: string;
-  bankBranch?: string;
-  isDefault: boolean;
-}
-
-const paymentMethods = ref<PaymentMethod[]>([
-  {
-    id: 1,
-    type: "bank",
-    name: "张三",
-    account: "6222 **** **** 1234",
-    bankName: "中国工商银行",
-    bankBranch: "北京朝阳支行",
-    isDefault: true,
-  },
-  {
-    id: 2,
-    type: "alipay",
-    name: "李四",
-    account: "138****8000",
-    isDefault: false,
-  },
-]);
+const { data } = await safeClient(client.api.receipt_method.get({ query: { offset: 0, limit: 20 } }));
 
 async function showToast(message: string, color: "success" | "danger" | "warning" = "success") {
   const toast = await toastController.create({
@@ -47,26 +23,11 @@ function handleAdd() {
   router.push("/payment/add");
 }
 
-function handleEdit(payment: PaymentMethod) {
+function handleEdit(payment: Receipt) {
   router.push(`/payment/add?id=${payment.id}`);
 }
 
-async function handleSetDefault(payment: PaymentMethod) {
-  if (payment.isDefault) {
-    return;
-  }
-
-  paymentMethods.value.forEach((item) => {
-    item.isDefault = false;
-  });
-
-  payment.isDefault = true;
-
-  // TODO: 调用 API 更新默认收款方式
-  await showToast("已设为默认收款方式");
-}
-
-async function handleDelete(payment: PaymentMethod) {
+async function handleDelete(payment: Receipt) {
   const alert = await alertController.create({
     header: "确认删除",
     message: `确定要删除这个收款方式吗？`,
@@ -79,19 +40,11 @@ async function handleDelete(payment: PaymentMethod) {
         text: "删除",
         role: "destructive",
         handler: async () => {
-          if (payment.isDefault && paymentMethods.value.length > 1) {
-            const otherPayment = paymentMethods.value.find(item => item.id !== payment.id);
-            if (otherPayment) {
-              otherPayment.isDefault = true;
-            }
+          const index = data.value?.data.findIndex(item => item.id === payment.id);
+          if (index && index > -1) {
+            data.value?.data.splice(index, 1);
           }
-
-          const index = paymentMethods.value.findIndex(item => item.id === payment.id);
-          if (index > -1) {
-            paymentMethods.value.splice(index, 1);
-          }
-
-          // TODO: 调用 API 删除收款方式
+          await safeClient(client.api.receipt_method({ id: payment.id }).delete());
           await showToast("删除成功");
         },
       },
@@ -101,24 +54,12 @@ async function handleDelete(payment: PaymentMethod) {
   await alert.present();
 }
 
-function getPaymentIcon(type: string) {
-  return type === "bank" ? cardOutline : logoAlipay;
+function getPaymentIcon(type: Receipt["type"]) {
+  return type === "bank_card" ? cardOutline : logoAlipay;
 }
 
-function getPaymentTypeName(type: string) {
-  return type === "bank" ? "银行卡" : "支付宝";
-}
-
-function maskAccount(account: string) {
-  // 如果已经是脱敏格式，直接返回
-  if (account.includes("*")) {
-    return account;
-  }
-  // 否则进行脱敏处理
-  if (account.length > 8) {
-    return `${account.slice(0, 4)} **** **** ${account.slice(-4)}`;
-  }
-  return account;
+function getPaymentTypeName(type: Receipt["type"]) {
+  return type === "bank_card" ? "银行卡" : "支付宝";
 }
 </script>
 
@@ -139,10 +80,25 @@ function maskAccount(account: string) {
     </ion-header>
 
     <ion-content>
-      <div v-if="paymentMethods.length > 0" class="ion-padding">
+      <!-- 空状态 -->
+      <div v-if="data?.data?.length === 0" class="empty-state">
+        <empty title="暂无收款方式">
+          <template #icon>
+            <ion-icon :icon="cardOutline" class="empty-icon" />
+          </template>
+          <template #extra>
+            <ion-button class="add-button" @click="handleAdd">
+              <ion-icon slot="start" :icon="addOutline" />
+              添加收款方式
+            </ion-button>
+          </template>
+        </empty>
+      </div>
+
+      <div v-else class="ion-padding">
         <div class="space-y-3">
           <div
-            v-for="payment in paymentMethods"
+            v-for="payment in data?.data"
             :key="payment.id"
             class="payment-card"
           >
@@ -157,42 +113,30 @@ function maskAccount(account: string) {
                   />
                   <span class="payment-type">{{ getPaymentTypeName(payment.type) }}</span>
                 </div>
-                <ion-badge v-if="payment.isDefault" color="danger" class="default-badge">
-                  默认
-                </ion-badge>
               </div>
 
               <div class="payment-details">
                 <div class="detail-row">
                   <span class="label">姓名</span>
-                  <span class="value">{{ payment.name }}</span>
+                  <span class="value">{{ payment.fullName }}</span>
                 </div>
                 <div class="detail-row">
                   <span class="label">账号</span>
-                  <span class="value">{{ maskAccount(payment.account) }}</span>
+                  <span class="value">{{ payment.bankCardNumber || payment.alipayAccount }}</span>
                 </div>
-                <div v-if="payment.type === 'bank' && payment.bankName" class="detail-row">
+                <div v-if="payment.type === 'bank_card' && payment.bankName" class="detail-row">
                   <span class="label">银行</span>
                   <span class="value">{{ payment.bankName }}</span>
                 </div>
-                <div v-if="payment.type === 'bank' && payment.bankBranch" class="detail-row">
+                <div v-if="payment.type === 'bank_card' && payment.bankBranchName" class="detail-row">
                   <span class="label">开户行</span>
-                  <span class="value">{{ payment.bankBranch }}</span>
+                  <span class="value">{{ payment.bankBranchName }}</span>
                 </div>
               </div>
             </div>
 
             <!-- 操作按钮 -->
             <div class="payment-actions">
-              <ion-button
-                fill="clear"
-                size="small"
-                @click="handleSetDefault(payment)"
-              >
-                <ion-icon slot="start" :icon="checkmarkCircleOutline" />
-                {{ payment.isDefault ? '默认方式' : '设为默认' }}
-              </ion-button>
-
               <div class="flex gap-2">
                 <ion-button
                   fill="clear"
@@ -219,23 +163,8 @@ function maskAccount(account: string) {
         </div>
       </div>
 
-      <!-- 空状态 -->
-      <div v-else class="empty-state">
-        <empty title="暂无收款方式">
-          <template #icon>
-            <ion-icon :icon="cardOutline" class="empty-icon" />
-          </template>
-          <template #extra>
-            <ion-button class="add-button" @click="handleAdd">
-              <ion-icon slot="start" :icon="addOutline" />
-              添加收款方式
-            </ion-button>
-          </template>
-        </empty>
-      </div>
-
       <!-- 底部添加按钮 -->
-      <div v-if="paymentMethods.length > 0" class="fixed-bottom">
+      <div v-if="data?.data && data.data.length > 0" class="fixed-bottom">
         <ion-button expand="block" class="add-button" @click="handleAdd">
           <ion-icon slot="start" :icon="addOutline" />
           添加新收款方式