feat: 添加取消充值功能，优化充值记录展示

src/views/wallet/components/deposit.vue

@@ -1,6 +1,7 @@
 <script lang='ts' setup>
 import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
 import type { UserDepositOrderBody, UserDepositOrderData } from "@/api/types";
+import { alertController } from "@ionic/vue";
 import CryptocurrencyColorAppc from "~icons/cryptocurrency-color/appc";
 import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 import { client, safeClient } from "@/api";
@@ -46,6 +47,28 @@ async function handleInfinite(event: InfiniteScrollCustomEvent) {
     event.target.complete();
   }, 500);
 }
+async function handleCancel(id: string) {
+  const alert = await alertController.create({
+    header: "确认取消充值？",
+    buttons: [
+      {
+        text: "取消",
+        role: "cancel",
+      },
+      {
+        text: "确认取消",
+        role: "destructive",
+        handler: async () => {
+          await safeClient(client.api.deposit.orders({ orderId: id }).cancel.post());
+          resetRwaData();
+          await fetchRwaData();
+        },
+      },
+    ],
+  });
+
+  await alert.present();
+}
 
 onBeforeMount(() => {
   fetchRwaData();
@@ -59,9 +82,9 @@ onBeforeMount(() => {
 
   <div class="space-y-3 antialiased my-3">
     <div v-for="item in billData" :key="item.id">
-      <ion-grid>
-        <ion-row class="ion-align-items-center py-3">
-          <ion-col size="12" class="flex items-center mb-4">
+      <ion-grid class="py-3 space-y-2">
+        <ion-row class="ion-align-items-center">
+          <ion-col size="12" class="flex items-center">
             <div class="mr-3">
               <CryptocurrencyColorNuls class="text-md" />
             </div>
@@ -72,8 +95,11 @@ onBeforeMount(() => {
               </ui-tag>
             </div>
           </ion-col>
+        </ion-row>
+
+        <ion-row class="ion-align-items-center">
           <ion-col size="3" class="flex flex-col">
-            <div class="text-xs text-primary">
+            <div class="text-xs text-text-500">
               金额
             </div>
             <div class="text-sm font-bold">
@@ -81,7 +107,7 @@ onBeforeMount(() => {
             </div>
           </ion-col>
           <ion-col size="3" class="flex flex-col">
-            <div class="text-xs text-primary">
+            <div class="text-xs text-text-500">
               充值方式
             </div>
             <div class="text-xs font-bold">
@@ -89,7 +115,7 @@ onBeforeMount(() => {
             </div>
           </ion-col>
           <ion-col size="6" class="flex flex-col">
-            <div class="text-xs text-primary text-right">
+            <div class="text-xs text-text-500 text-right">
               创建时间
             </div>
             <div class="text-xs font-bold text-right">
@@ -97,6 +123,22 @@ onBeforeMount(() => {
             </div>
           </ion-col>
         </ion-row>
+
+        <ion-row class="ion-align-items-center">
+          <ion-col size="6" class="flex flex-col">
+            <div class="text-xs text-text-500">
+              订单号
+            </div>
+            <div class="text-xs font-bold">
+              {{ item.orderNo }}
+            </div>
+          </ion-col>
+          <ion-col size="6" class="text-right">
+            <ion-button v-if="item.status === 'pending'" size="small" fill="outline" color="success" @click.stop="handleCancel(item.id)">
+              取消充值
+            </ion-button>
+          </ion-col>
+        </ion-row>
       </ion-grid>
     </div>
   </div>
@@ -109,7 +151,7 @@ onBeforeMount(() => {
 </template>
 
 <style lang='css' scoped>
-ion-row {
+ion-grid {
   border-bottom: 1px solid var(--ion-background-color-step-150);
 }
 </style>