From 376434ec155f3b357508e199347ca43fe68d35ee Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Mon, 22 Dec 2025 23:13:42 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=8F=90=E7=8E=B0?=
 =?UTF-8?q?=E5=92=8C=E5=85=85=E5=80=BC=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=9B=B8=E5=85=B3=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=92=8C=E7=95=8C=E9=9D=A2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/types.ts                              |   4 +
 src/views/wallet/bill.vue                     |   6 +-
 .../{fait-deposit.vue => deposit.vue}         |   0
 src/views/wallet/components/withdraw.vue      | 161 ++++++++++++++++++
 4 files changed, 169 insertions(+), 2 deletions(-)
 rename src/views/wallet/components/{fait-deposit.vue => deposit.vue} (100%)
 create mode 100644 src/views/wallet/components/withdraw.vue

diff --git a/src/api/types.ts b/src/api/types.ts
index aba591d..ddae3b8 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -59,3 +59,7 @@ export type EmailVerifyClient = TreatyBody<typeof authClient.emailOtp.verifyEmai
 export type UserDepositOrderData = Treaty.Data<typeof client.api.deposit.orders.get>["data"][number];
 
 export type UserDepositOrderBody = TreatyQuery<typeof client.api.deposit.orders.get>;
+
+export type UserWithdrawOrderData = Treaty.Data<typeof client.api.withdraw.get>["data"][number];
+
+export type UserWithdrawOrderBody = TreatyQuery<typeof client.api.withdraw.get>;
diff --git a/src/views/wallet/bill.vue b/src/views/wallet/bill.vue
index 240cbf9..24b2a30 100644
--- a/src/views/wallet/bill.vue
+++ b/src/views/wallet/bill.vue
@@ -1,5 +1,6 @@
 <script lang='ts' setup>
-import FaitDeposit from "./components/fait-deposit.vue";
+import Deposit from "./components/deposit.vue";
+import Withdraw from "./components/withdraw.vue";
 
 const activeTab = ref("deposit");
 </script>
@@ -19,7 +20,8 @@ const activeTab = ref("deposit");
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true" class="ion-padding-horizontal">
-      <FaitDeposit v-if="activeTab === 'deposit'" />
+      <Deposit v-if="activeTab === 'deposit'" />
+      <Withdraw v-else />
     </ion-content>
   </ion-page>
 </template>
diff --git a/src/views/wallet/components/fait-deposit.vue b/src/views/wallet/components/deposit.vue
similarity index 100%
rename from src/views/wallet/components/fait-deposit.vue
rename to src/views/wallet/components/deposit.vue
diff --git a/src/views/wallet/components/withdraw.vue b/src/views/wallet/components/withdraw.vue
new file mode 100644
index 0000000..81f4046
--- /dev/null
+++ b/src/views/wallet/components/withdraw.vue
@@ -0,0 +1,161 @@
+<script lang='ts' setup>
+import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
+import type { UserWithdrawOrderBody, UserWithdrawOrderData } from "@/api/types";
+import { alertController } from "@ionic/vue";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+import { client, safeClient } from "@/api";
+
+const [query] = useResetRef<UserWithdrawOrderBody>({
+  limit: 20,
+  offset: 0,
+});
+
+const withdrawData = ref<UserWithdrawOrderData[]>([]);
+const isFinished = ref(false);
+async function fetchRwaData() {
+  const { data } = await safeClient(() => client.api.withdraw.get({
+    query: query.value,
+  }));
+  withdrawData.value.push(...(data.value?.data || []));
+  isFinished.value = (data.value?.data.length || 0) < query.value.limit!;
+}
+function resetRwaData() {
+  query.value.offset = 0;
+  withdrawData.value = [];
+  isFinished.value = false;
+}
+async function handleRefresh(event: RefresherCustomEvent) {
+  resetRwaData();
+  await fetchRwaData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchRwaData();
+  setTimeout(() => {
+    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.withdraw({ orderId: id }).delete());
+          resetRwaData();
+          await fetchRwaData();
+        },
+      },
+    ],
+  });
+
+  await alert.present();
+}
+
+onBeforeMount(() => {
+  fetchRwaData();
+});
+</script>
+
+<template>
+  <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
+    <ion-refresher-content />
+  </ion-refresher>
+
+  <div class="space-y-3 antialiased my-3">
+    <div v-for="item in withdrawData" :key="item.id">
+      <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-2">
+              <CryptocurrencyColorNuls class="text-md" />
+            </div>
+            <div class="text-xs font-semibold">
+              <span class="mr-2">{{ item.assetCode }}</span>
+              <ui-tag type="primary" size="small">
+                {{ $t(`recharge.status.${item.status}`) }}
+              </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-text-500">
+              金额
+            </div>
+            <div class="text-sm font-bold">
+              {{ Number(item.amount).toFixed(2) }}
+            </div>
+          </ion-col>
+          <ion-col size="3" class="flex flex-col">
+            <div class="text-xs text-text-500">
+              实际到账
+            </div>
+            <div class="text-sm font-bold">
+              {{ Number(item.actualAmount).toFixed(2) }}
+            </div>
+          </ion-col>
+          <ion-col size="6" class="flex flex-col">
+            <div class="text-xs text-text-500 text-right">
+              创建时间
+            </div>
+            <div class="text-xs font-bold text-right">
+              {{ useDateFormat(item.createdAt, 'MM/DD HH:mm') }}
+            </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-text-500">
+              手续费
+            </div>
+            <div class="text-sm font-bold">
+              {{ Number(item.fee).toFixed(2) }}
+            </div>
+          </ion-col>
+          <ion-col size="3" class="flex flex-col">
+            <div class="text-xs text-text-500">
+              提现方式
+            </div>
+            <div class="text-xs font-bold">
+              <span>{{ item.withdrawMethod }}</span>
+              <span v-show="item.withdrawMethod === 'crypto'" class="ml-1">/ {{ item.chain }}</span>
+            </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>
+
+  <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+    <ion-infinite-scroll-content
+      loading-spinner="bubbles"
+    />
+  </ion-infinite-scroll>
+</template>
+
+<style lang='css' scoped>
+ion-grid {
+  border-bottom: 1px solid var(--ion-background-color-step-150);
+}
+</style>