feat: 添加账单页面及相关组件，优化充值记录显示和国际化支持

2025-12-22 22:40:18 +07:00
parent 5c4ec4f50d
commit 9ca9b33dfd
13 changed files with 203 additions and 25 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -157,5 +157,5 @@ API 配置集中在 src/api/index.ts
 API 类型来自私有包 @riwa/api-types（需要特定访问权限）
 表单验证使用 vee-validate + yup 组合
 Capacitor 配置本地开发服务器地址为 http://localhost:5173
-国际化支持中文和英文，配置文件在 src/locales/
+国际化支持中文和英文，配置文件在 src/locales/ 目前多语言只需要支持中英文，其他语言先不要更改
 样式使用 TailwindCSS 4.x + Ionic CSS Variables 混合模式
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
    "@elysiajs/eden": "^1.4.5",
    "@ionic/vue": "^8.7.11",
    "@ionic/vue-router": "^8.7.11",
-    "@riwa/api-types": "http://192.168.1.27:9527/api/riwa-api-types-0.0.51.tgz",
+    "@riwa/api-types": "http://192.168.1.27:9527/api/riwa-api-types-0.0.53.tgz",
    "@tailwindcss/vite": "^4.1.18",
    "@vee-validate/yup": "^4.15.1",
    "@vueuse/core": "^14.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,8 +54,8 @@ importers:
        specifier: ^8.7.11
        version: 8.7.11(@stencil/core@4.39.0)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
      '@riwa/api-types':
-        specifier: http://192.168.1.27:9527/api/riwa-api-types-0.0.51.tgz
-        version: http://192.168.1.27:9527/api/riwa-api-types-0.0.51.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))
+        specifier: http://192.168.1.27:9527/api/riwa-api-types-0.0.53.tgz
+        version: http://192.168.1.27:9527/api/riwa-api-types-0.0.53.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))
      '@tailwindcss/vite':
        specifier: ^4.1.18
        version: 4.1.18(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
@@ -1354,9 +1354,9 @@ packages:
    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}

-  '@riwa/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.51.tgz':
-    resolution: {tarball: http://192.168.1.27:9527/api/riwa-api-types-0.0.51.tgz}
-    version: 0.0.51
+  '@riwa/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.53.tgz':
+    resolution: {tarball: http://192.168.1.27:9527/api/riwa-api-types-0.0.53.tgz}
+    version: 0.0.53
    peerDependencies:
      '@elysiajs/eden': ^1.4.5

@@ -6453,7 +6453,7 @@ snapshots:

  '@pkgr/core@0.2.9': {}

-  '@riwa/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.51.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@riwa/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.53.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
    dependencies:
      '@elysiajs/eden': 1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))

--- a/src/api/enum.ts
+++ b/src/api/enum.ts
@@ -3,6 +3,11 @@ export enum PaymentChannelEnum {
  CRYPTO = "crypto",
 }

+export enum DepositTypeEnum {
+  FIAT = "fiat",
+  CRYPTO = "crypto",
+}
+
 export enum AssetCodeEnum {
  USDT = "USDT",
  OPTS = "OPTS",
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -3,11 +3,6 @@ import type { client } from ".";
 import type { AssetCodeEnum, PaymentChannelEnum, WithdrawMethodEnum } from "./enum";
 import type { authClient } from "@/auth";

-export type DepositFiatBody = Parameters<typeof client.api.deposit.fiat.post>[0] & {
-  paymentChannel: PaymentChannelEnum;
-  assetCode: AssetCodeEnum;
-};
-
 export type TreatyQuery<T> = T extends (...args: any[]) => any
  ? NonNullable<NonNullable<Parameters<T>[0]>["query"]>
  : never;
@@ -25,6 +20,8 @@ export type WithdrawBody = Omit<Parameters<typeof client.api.withdraw.post>[0],
  withdrawMethod: WithdrawMethodEnum;
 };

+export type DepositFiatBody = TreatyBody<typeof client.api.deposit.fiat.post>;
+
 export type UserProfileData = Treaty.Data<typeof client.api.user.profile.get>;

 export type UpdateUserProfileBody = TreatyBody<typeof client.api.user.profile.put>;
@@ -58,3 +55,7 @@ export type PhoneNumberVerifyClient = TreatyBody<typeof authClient.phoneNumber.v
 export type UsernameClient = TreatyBody<typeof authClient.signIn.username>;

 export type EmailVerifyClient = TreatyBody<typeof authClient.emailOtp.verifyEmail>;
+
+export type UserDepositOrderData = Treaty.Data<typeof client.api.deposit.orders.get>["data"][number];
+
+export type UserDepositOrderBody = TreatyQuery<typeof client.api.deposit.orders.get>;
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -23,6 +23,14 @@
      "note": "Please make sure to enter the correct amount. After submission, the funds will be credited to your account after review in the background.",
      "submit": "Submit",
      "submitSuccess": "Submission successful!"
+    },
+    "status": {
+      "pending": "Pending",
+      "confirming": "Confirming",
+      "approved": "Approved",
+      "completed": "Completed",
+      "rejected": "Rejected",
+      "cancelled": "Cancelled"
    }
  },
  "withdraw": {
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -23,6 +23,14 @@
      "note": "请确保输入正确的金额。提交后，资金将在后台审核后计入您的账户。",
      "submit": "提交",
      "submitSuccess": "提交成功！"
+    },
+    "status": {
+      "pending": "等待确认",
+      "confirming": "链上确认中",
+      "approved": "审核通过",
+      "completed": "已到账",
+      "rejected": "审核拒绝",
+      "cancelled": "已取消"
    }
  },
  "withdraw": {
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -55,6 +55,11 @@ const routes: Array<RouteRecordRaw> = [
    component: () => import("@/views/withdraw/index.vue"),
    meta: { requiresAuth: true },
  },
+  {
+    path: "/wallet/bill",
+    component: () => import("@/views/wallet/bill.vue"),
+    meta: { requiresAuth: true },
+  },
  {
    path: "/user/settings",
    component: () => import("@/views/user-settings/outlet.vue"),
--- a/src/ui/tag/index.vue
+++ b/src/ui/tag/index.vue
@@ -7,7 +7,7 @@ const { type = "primary", size = "medium", round = false } = defineProps<{
 </script>

 <template>
-  <div class="ui-tag rounded-md" :class="[type, size, { 'rounded-full': round }]">
+  <div class="ui-tag rounded-md inline-block" :class="[type, size, { 'rounded-full': round }]">
    <slot />
  </div>
 </template>
@@ -19,13 +19,13 @@ const { type = "primary", size = "medium", round = false } = defineProps<{
  @apply px-3 py-1 text-xs;
 }
 .ui-tag.primary {
-  @apply bg-(--ion-color-primary) text-white;
+  @apply bg-(--ion-color-dark) text-white;
 }
 .ui-tag.secondary {
-  @apply bg-(--ion-color-secondary) text-white;
+  @apply bg-(--ion-color-medium-shade) text-white;
 }
 .ui-tag.tertiary {
-  @apply bg-(--ion-color-tertiary) text-white;
+  @apply bg-(--ion-color-medium-tint) text-white;
 }
 .ui-tag.success {
  @apply bg-(--ion-color-success) text-white;
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -6,16 +6,16 @@ const { t } = useI18n();
 </script>

 <template>
-  <IonPage>
-    <IonHeader class="ion-no-border">
+  <ion-page>
+    <ion-header class="ion-no-border">
      <ion-toolbar class="ui-toolbar">
-        <IonTitle>{{ t('tabs.trade') }}</IonTitle>
+        <ion-title>{{ t('tabs.trade') }}</ion-title>
      </ion-toolbar>
-    </IonHeader>
-    <IonContent :fullscreen="true">
+    </ion-header>
+    <ion-content :fullscreen="true">
      <!-- <OperationWrapper v-model="current" /> -->
-    </IonContent>
-  </IonPage>
+    </ion-content>
+  </ion-page>
 </template>

 <style scoped>
--- a/src/views/user/components/wallet-card.vue
+++ b/src/views/user/components/wallet-card.vue
@@ -1,5 +1,6 @@
 <script lang='ts' setup>
 import { eyeOffOutline, eyeOutline } from "ionicons/icons";
+import IcBaselineBlurCircular from "~icons/ic/baseline-blur-circular";
 import IcRoundArrowCircleDown from "~icons/ic/round-arrow-circle-down";
 import IcRoundArrowCircleUp from "~icons/ic/round-arrow-circle-up";
 import RechargeChannel from "./recharge-channel.vue";
@@ -20,6 +21,9 @@ function onCloseModal() {
 function handleWithdraw() {
  router.push("/withdraw/index");
 }
+function handleBill() {
+  router.push("/wallet/bill");
+}

 onMounted(() => {
  walletStore.updateBalances();
@@ -42,7 +46,7 @@ onMounted(() => {
    </div>
  </div>

-  <div class="flex gap-10 w-full">
+  <div class="flex gap-5 w-full">
    <ion-button id="open-recharge-modal" expand="full" color="success" shape="round" class="w-full min-h-10 h-10">
      <IcRoundArrowCircleDown slot="start" />
      {{ t("wallet.recharge") }}
@@ -52,6 +56,11 @@ onMounted(() => {
      <IcRoundArrowCircleUp slot="start" />
      {{ t("wallet.withdraw") }}
    </ion-button>
+
+    <ion-button expand="full" color="success" shape="round" class="w-full min-h-10 h-10" @click="handleBill">
+      <IcBaselineBlurCircular slot="start" />
+      账单
+    </ion-button>
    <!-- <div id="open-recharge-modal" class="flex-col-center">
      <ion-ripple-effect />
      <ion-button shape="round" color="success" size="large">
--- a/src/views/wallet/bill.vue
+++ b/src/views/wallet/bill.vue
@@ -0,0 +1,27 @@
+<script lang='ts' setup>
+import FaitDeposit from "./components/fait-deposit.vue";
+
+const activeTab = ref("deposit");
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" text="" />
+        <ion-title>账单</ion-title>
+      </ion-toolbar>
+      <ion-toolbar class="ui-toolbar">
+        <ui-tabs v-model="activeTab" size="small" class="px-2">
+          <ui-tab-pane name="deposit" title="充值记录" />
+          <ui-tab-pane name="withdraw" title="提现记录" />
+        </ui-tabs>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true" class="ion-padding-horizontal">
+      <FaitDeposit v-if="activeTab === 'deposit'" />
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/wallet/components/fait-deposit.vue
+++ b/src/views/wallet/components/fait-deposit.vue
@@ -0,0 +1,115 @@
+<script lang='ts' setup>
+import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
+import type { UserDepositOrderBody, UserDepositOrderData } from "@/api/types";
+import CryptocurrencyColorAppc from "~icons/cryptocurrency-color/appc";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+import { client, safeClient } from "@/api";
+import { DepositTypeEnum } from "@/api/enum";
+
+const [query] = useResetRef<UserDepositOrderBody>({
+  limit: 20,
+  offset: 0,
+});
+
+const billData = ref<UserDepositOrderData[]>([]);
+const isFinished = ref(false);
+
+async function fetchRwaData() {
+  const { data } = await safeClient(() => client.api.deposit.orders.get({
+    query: query.value,
+  }));
+  billData.value.push(...(data.value?.data || []));
+  isFinished.value = (data.value?.data.length || 0) < query.value.limit!;
+}
+function resetRwaData() {
+  query.value.offset = 0;
+  billData.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);
+}
+
+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 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">
+            <div class="mr-3">
+              <CryptocurrencyColorNuls class="text-md" />
+            </div>
+            <div class="text-xs font-semibold">
+              {{ item.assetCode }}
+              <ui-tag type="primary" size="small">
+                {{ $t(`recharge.status.${item.status}`) }}
+              </ui-tag>
+            </div>
+          </ion-col>
+          <ion-col size="3" class="flex flex-col">
+            <div class="text-xs text-primary">
+              金额
+            </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-primary">
+              充值方式
+            </div>
+            <div class="text-xs font-bold">
+              {{ item.depositType }}
+            </div>
+          </ion-col>
+          <ion-col size="6" class="flex flex-col">
+            <div class="text-xs text-primary text-right">
+              创建时间
+            </div>
+            <div class="text-xs font-bold text-right">
+              {{ useDateFormat(item.createdAt, 'MM/DD HH:mm') }}
+            </div>
+          </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-row {
+  border-bottom: 1px solid var(--ion-background-color-step-150);
+}
+</style>