feat: 添加收益模块，包含总收益概览、收益趋势和收益来源，更新相关组件和路由

2025-12-27 19:55:45 +07:00
parent 0ffd8566c8
commit 4a3de581d8
23 changed files with 458 additions and 72 deletions
--- a/src/views/income/total/components/overview.vue
+++ b/src/views/income/total/components/overview.vue
@@ -0,0 +1,41 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div class="bg-text-900 rounded-xl p-7">
+    <div>
+      <div class="text-sm mb-2">
+        累计总收益
+      </div>
+      <div class="text-4xl font-bold">
+        {{ formatAmountWithSplit(190421321) }}
+      </div>
+      <div class="flex items-center gap-2 text-xs mt-1">
+        <div>昨日收益</div>
+        <div>+{{ formatAmountWithSplit(864314) }}</div>
+      </div>
+    </div>
+    <div class="h-px bg-text-800 my-5" />
+    <div class="flex justify-around">
+      <div class="flex-col-center">
+        <div class="text-base font-bold">
+          {{ formatAmountWithSplit(42523) }}
+        </div>
+        <div class="text-xs">
+          本月收益
+        </div>
+      </div>
+      <div class="h-auto w-px bg-text-800" />
+      <div class="flex-col-center">
+        <div class="text-base font-bold">
+          {{ formatAmountWithSplit(12345) }}
+        </div>
+        <div class="text-xs">
+          待确认收益
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/income/total/components/trend.vue
+++ b/src/views/income/total/components/trend.vue
@@ -0,0 +1,59 @@
+<script lang='ts' setup>
+const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
+
+useTradingView(tradingViewInst, {
+  type: "Area",
+  data: [
+    {
+      time: "2023-01-01",
+      value: 1000,
+    },
+    {
+      time: "2023-02-01",
+      value: 1200,
+    },
+    {
+      time: "2023-03-01",
+      value: 900,
+    },
+    {
+      time: "2023-04-01",
+      value: 1400,
+    },
+    {
+      time: "2023-05-01",
+      value: 1300,
+    },
+    {
+      time: "2023-06-01",
+      value: 1500,
+    },
+    {
+      time: "2023-07-01",
+      value: 1700,
+    },
+    {
+      time: "2023-08-01",
+      value: 1600,
+    },
+  ],
+  weightChartOptions: {
+    height: 150,
+    rightPriceScale: {
+      visible: false,
+    },
+    leftPriceScale: {
+      visible: false,
+    },
+  },
+});
+</script>
+
+<template>
+  <div>
+    <h4>收益趋势</h4>
+    <div ref="tradingViewInst" />
+  </div>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/income/total/index.vue
+++ b/src/views/income/total/index.vue
@@ -0,0 +1,53 @@
+<script lang='ts' setup>
+import type { RefresherCustomEvent } from "@ionic/vue";
+import { mockClient } from "@/api";
+import Overview from "./components/overview.vue";
+import Trend from "./components/trend.vue";
+
+const { t } = useI18n();
+const { vibrate } = useHaptics();
+
+// 收益数据
+const loading = ref(true);
+const { data } = await mockClient("income/total");
+
+async function loadIncomeData() {
+  loading.value = true;
+  useTimeoutFn(() => {
+    loading.value = false;
+  }, 800);
+}
+
+async function handleRefresh(event: RefresherCustomEvent) {
+  vibrate();
+  useTimeoutFn(() => {
+    event.target.complete();
+  }, 800);
+}
+
+onMounted(() => {
+  loadIncomeData();
+});
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" />
+        <ion-title>{{ t("income.title") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
+        <ion-refresher-content />
+      </ion-refresher>
+
+      <div>
+        <Overview />
+        <Trend />
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
--- a/src/views/trade-rwa/components/base.vue
+++ b/src/views/trade-rwa/components/base.vue
@@ -33,7 +33,7 @@ const { t } = useI18n();
          <div class="label">
            {{ t('market.tradeRwa.fields.valuation') }}
          </div>
-          <div>${{ formatAmount(data?.product.estimatedValue) }}</div>
+          <div>${{ formatAmountWithUnit(data?.product.estimatedValue) }}</div>
        </ion-col>
      </ion-row>
      <ion-row>
@@ -41,7 +41,7 @@ const { t } = useI18n();
          <div class="label">
            {{ t('market.tradeRwa.fields.unitPrice') }}
          </div>
-          <div>${{ formatAmount(data?.unitPrice) }}</div>
+          <div>${{ formatAmountWithUnit(data?.unitPrice) }}</div>
        </ion-col>
        <ion-col>
          <div class="label">
--- a/src/views/trade-settings/bank-management/index.vue
+++ b/src/views/trade-settings/bank-management/index.vue
@@ -126,7 +126,7 @@ onUpdated(() => {
          </p>
          <ion-button
            expand="block"
-            color="success"
+            fill="outline"
            @click="handleAddCard"
          >
            <ion-icon slot="start" :icon="addOutline" />
--- a/src/views/trade-settings/my-issues/components/base.vue
+++ b/src/views/trade-settings/my-issues/components/base.vue
@@ -33,7 +33,7 @@ const { t } = useI18n();
          <div class="label">
            {{ t('market.tradeRwa.fields.valuation') }}
          </div>
-          <div>${{ formatAmount(data?.estimatedValue) }}</div>
+          <div>${{ formatAmountWithUnit(data?.estimatedValue) }}</div>
        </ion-col>
      </ion-row>
    </ion-grid>
--- a/src/views/trade-settings/my-subscribe/detail.vue
+++ b/src/views/trade-settings/my-subscribe/detail.vue
@@ -28,16 +28,13 @@ async function handleSubscribe(val: number) {
  await toast.present();
  model.value?.$el.dismiss();
 }
-function gotoEdit() {
-  router.push({ name: "trade-rwa-edit" });
-}
 </script>

 <template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" text="" />
+        <ion-back-button slot="start" />
        <ion-title>
          {{ data?.edition.product.code }}
        </ion-title>
@@ -53,7 +50,7 @@ function gotoEdit() {
              {{ data?.edition.product.name }}
            </div>
            <div class="text-xs text-gray-500 font-semibold">
-              {{ data?.edition.product.categoryId }}
+              {{ data?.edition.product.code }}
            </div>
          </div>
        </div>
--- a/src/views/trade-settings/my-subscribe/outlet.vue
+++ b/src/views/trade-settings/my-subscribe/outlet.vue
@@ -3,13 +3,7 @@

 <template>
  <ion-page>
-    <ion-header>
-      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
-        <ion-title>我的申购</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <router-view />
+    <ion-router-outlet />
  </ion-page>
 </template>

--- a/src/views/user/components/my-revenue.vue
+++ b/src/views/user/components/my-revenue.vue
@@ -2,6 +2,13 @@
 import { calendarOutline, listOutline, timeOutline, walletOutline } from "ionicons/icons";

 const { t } = useI18n();
+const router = useRouter();
+const { vibrate } = useHaptics();
+
+function navigateToTotal() {
+  vibrate();
+  router.push("/income/total");
+}
 </script>

 <template>
@@ -10,26 +17,29 @@ const { t } = useI18n();
      {{ t("asset.revenue.myRevenue") }}
    </ion-label>
    <div class="grid grid-cols-4 mt-5">
-      <div class="col-span-1 flex-col-center gap-2">
-        <ion-icon :icon="walletOutline" />
+      <div
+        class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
+        @click="navigateToTotal"
+      >
+        <ion-icon :icon="walletOutline" class="text-2xl text-primary" />
        <div class="text-xs">
          {{ t("asset.revenue.totalRevenue") }}
        </div>
      </div>
-      <div class="col-span-1 flex-col-center gap-2">
-        <ion-icon :icon="calendarOutline" />
+      <div class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70">
+        <ion-icon :icon="calendarOutline" class="text-2xl text-primary" />
        <div class="text-xs">
          {{ t("asset.revenue.monthlyRevenue") }}
        </div>
      </div>
-      <div class="col-span-1 flex-col-center gap-2">
-        <ion-icon :icon="timeOutline" />
+      <div class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70">
+        <ion-icon :icon="timeOutline" class="text-2xl text-primary" />
        <div class="text-xs">
          {{ t("asset.revenue.pendingRevenue") }}
        </div>
      </div>
-      <div class="col-span-1 flex-col-center gap-2">
-        <ion-icon :icon="listOutline" />
+      <div class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70">
+        <ion-icon :icon="listOutline" class="text-2xl text-primary" />
        <div class="text-xs">
          {{ t("asset.revenue.revenueDetails") }}
        </div>
@@ -37,10 +47,3 @@ const { t } = useI18n();
    </div>
  </div>
 </template>
-
-<style lang='css' scoped>
-ion-icon {
-  font-size: 1.5rem;
-  color: var(--ion-color-primary);
-}
-</style>
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -39,7 +39,7 @@ async function handleScan() {
 </script>

 <template>
-  <IonPage>
+  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ui-toolbar">
        <div slot="end">
@@ -55,7 +55,7 @@ async function handleScan() {
        </div>
      </ion-toolbar>
    </ion-header>
-    <IonContent :fullscreen="true" class="ion-padding">
+    <ion-content :fullscreen="true" class="ion-padding">
      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
        <ion-refresher-content />
      </ion-refresher>
@@ -68,8 +68,8 @@ async function handleScan() {
        <MyRevenue />
        <TradeSettings />
      </div>
-    </IonContent>
-  </IonPage>
+    </ion-content>
+  </ion-page>
 </template>

 <style scoped></style>