feat: 更新收益相关组件，优化数据获取逻辑，修复数据展示问题

src/views/revenue/pending/index.vue

@@ -1,75 +1,13 @@
 <script lang='ts' setup>
 import type { RefresherCustomEvent } from "@ionic/vue";
+import { client, safeClient } from "@/api";
 
 const { t } = useI18n();
 const { vibrate } = useHaptics();
 
 const loading = ref(true);
 
-// 待确认收益数据
-const pendingItems = ref([
-  {
-    id: "1",
-    type: "dividend",
-    typeName: "分红收益",
-    assetName: "迈阿密海景别墅",
-    assetCode: "MIA-004",
-    amount: 680.20,
-    expectedDate: "2025-12-28",
-    status: "pending",
-  },
-  {
-    id: "2",
-    type: "appreciation",
-    typeName: "资产增值",
-    assetName: "波士顿商业中心",
-    assetCode: "BOS-006",
-    amount: 1250.50,
-    expectedDate: "2025-12-29",
-    status: "pending",
-  },
-  {
-    id: "3",
-    type: "trade",
-    typeName: "交易收益",
-    assetName: "西雅图科技园区",
-    assetCode: "SEA-007",
-    amount: 890.30,
-    expectedDate: "2025-12-30",
-    status: "processing",
-  },
-  {
-    id: "4",
-    type: "dividend",
-    typeName: "分红收益",
-    assetName: "达拉斯住宅区",
-    assetCode: "DAL-008",
-    amount: 520.80,
-    expectedDate: "2025-12-30",
-    status: "pending",
-  },
-  {
-    id: "5",
-    type: "appreciation",
-    typeName: "资产增值",
-    assetName: "奥斯汀高端公寓",
-    assetCode: "AUS-009",
-    amount: 1580.20,
-    expectedDate: "2026-01-02",
-    status: "processing",
-  },
-]);
-
-const totalPending = computed(() =>
-  pendingItems.value.reduce((sum, item) => sum + item.amount, 0),
-);
-
-async function loadData() {
-  loading.value = true;
-  useTimeoutFn(() => {
-    loading.value = false;
-  }, 800);
-}
+const { data } = safeClient(client.api.earnings.pending.get());
 
 async function handleRefresh(event: RefresherCustomEvent) {
   vibrate();
@@ -78,17 +16,13 @@ async function handleRefresh(event: RefresherCustomEvent) {
   }, 800);
 }
 
-function getStatusColor(status: string) {
+function getStatusColor(status?: string) {
   return status === "pending" ? "warning" : "medium";
 }
 
-function getStatusText(status: string) {
+function getStatusText(status?: string) {
   return status === "pending" ? "待确认" : "处理中";
 }
-
-onMounted(() => {
-  loadData();
-});
 </script>
 
 <template>
@@ -113,7 +47,7 @@ onMounted(() => {
           </div>
           <div class="flex items-end gap-2">
             <div class="text-3xl font-bold">
-              {{ formatAmountWithSplit(totalPending) }}
+              {{ formatAmountWithSplit(data?.total) }}
             </div>
             <div class="text-sm text-text-400 mb-1">
               USDT
@@ -132,42 +66,45 @@ onMounted(() => {
           </div>
         </div>
 
-        <ion-list class="rounded-xl overflow-hidden">
-          <ion-item v-for="item in pendingItems" :key="item.id" lines="full">
-            <div class="w-full py-4">
-              <div class="flex justify-between items-start mb-3">
-                <div class="flex flex-col gap-1.5">
-                  <div class="flex items-center gap-2">
-                    <div class="text-sm font-medium">
-                      {{ item.typeName }}
+        <ui-empty v-if="data?.data.length === 0" />
+        <template v-else>
+          <ion-list>
+            <ion-item v-for="item, index in data?.data" :key="index" lines="full">
+              <div class="w-full py-4">
+                <div class="flex justify-between items-start mb-3">
+                  <div class="flex flex-col gap-1.5">
+                    <div class="flex items-center gap-2">
+                      <div class="text-sm font-medium">
+                        {{ item.type }}
+                      </div>
+                      <ion-badge
+                        :color="getStatusColor(item.status)"
+                        class="text-xs px-2 py-0.5"
+                      >
+                        {{ getStatusText(item.status) }}
+                      </ion-badge>
+                    </div>
+                    <div class="text-base font-semibold">
+                      {{ item.assetName }}
+                    </div>
+                    <div class="text-xs text-text-400">
+                      {{ item.assetCode }}
                     </div>
-                    <ion-badge
-                      :color="getStatusColor(item.status)"
-                      class="text-xs px-2 py-0.5"
-                    >
-                      {{ getStatusText(item.status) }}
-                    </ion-badge>
                   </div>
-                  <div class="text-base font-semibold">
-                    {{ item.assetName }}
-                  </div>
-                  <div class="text-xs text-text-400">
-                    {{ item.assetCode }}
+                  <div class="text-right">
+                    <div class="text-lg font-bold">
+                      +{{ formatAmountWithSplit(item.amount) }}
+                    </div>
                   </div>
                 </div>
-                <div class="text-right">
-                  <div class="text-lg font-bold">
-                    +{{ formatAmountWithSplit(item.amount) }}
-                  </div>
+                <div class="flex items-center gap-1.5 text-xs text-text-400">
+                  <i-ic-outline-access-time class="text-sm" />
+                  <span>预计到账：{{ useDateFormat(item.expectedAt, 'YY/MM/DD') }}</span>
                 </div>
               </div>
-              <div class="flex items-center gap-1.5 text-xs text-text-400">
-                <i-ic-outline-access-time class="text-sm" />
-                <span>预计到账：{{ item.expectedDate }}</span>
-              </div>
-            </div>
-          </ion-item>
-        </ion-list>
+            </ion-item>
+          </ion-list>
+        </template>
 
         <!-- 说明信息 -->
         <div class="mt-6 p-4 bg-text-950 rounded-xl">