root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加每月收益页面及相关组件，更新路由以支持新功能

Browse Source
This commit is contained in:
Seven
2025-12-27 20:51:52 +07:00
parent 7da1d7b1cf
commit 13122c91e1
7 changed files with 434 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/router/index.ts
View File

@@ -64,6 +64,11 @@ const routes: Array<RouteRecordRaw> = [
component: () => import("@/views/revenue/total/index.vue"),
meta: { requiresAuth: true },
},
{
path: "/revenue/monthly",
component: () => import("@/views/revenue/monthly/index.vue"),
meta: { requiresAuth: true },
},
{
path: "/wallet/bill",
component: () => import("@/views/wallet/bill.vue"),

45
src/views/revenue/monthly/components/overview.vue Normal file
View File

@@ -0,0 +1,45 @@
<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(38450.20) }}
</div>
<div class="flex items-center gap-2 text-xs mt-1">
<div>本月日均</div>
<div>{{ formatAmountWithSplit(1423.34) }}</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(1256.80) }}
</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(125680.50) }}
</div>
<div class="text-xs">
累计总收益
</div>
</div>
</div>
</div>
</template>
<style lang='css' scoped>
h4 {
font-size: var(--title-font-size);
}
</style>

162
src/views/revenue/monthly/components/recent.vue Normal file
View File

@@ -0,0 +1,162 @@
<script lang='ts' setup>
</script>
<template>
<ion-list>
<ion-list-header>
<ion-label>
<h4>本月记录</h4>
</ion-label>
<ion-button class="text-sm">
查看全部
</ion-button>
</ion-list-header>
<ion-item>
<div class="flex justify-between w-full items-center py-4">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<div class="text-sm font-medium">
分红收益
</div>
<ion-badge class="text-xs p-1" color="success">
已完成
</ion-badge>
</div>
<div class="text-sm font-medium">
纽约曼哈顿中心公寓
</div>
<div class="text-xs text-text-400">
NYC-001
</div>
</div>
<div class="text-right">
<div class="text-base font-semibold">
{{ formatAmountWithSplit(520.5) }}
</div>
<div class="text-xs text-text-400">
12/27
</div>
</div>
</div>
</ion-item>
<ion-item>
<div class="flex justify-between w-full items-center py-4">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<div class="text-sm font-medium">
资产增值
</div>
<ion-badge class="text-xs p-1" color="success">
已完成
</ion-badge>
</div>
<div class="text-sm font-medium">
旧金山商业地产
</div>
<div class="text-xs text-text-400">
SF-002
</div>
</div>
<div class="text-right">
<div class="text-base font-semibold">
{{ formatAmountWithSplit(320.8) }}
</div>
<div class="text-xs text-text-400">
12/27
</div>
</div>
</div>
</ion-item>
<ion-item>
<div class="flex justify-between w-full items-center py-4">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<div class="text-sm font-medium">
交易收益
</div>
<ion-badge class="text-xs p-1" color="success">
已完成
</ion-badge>
</div>
<div class="text-sm font-medium">
洛杉矶住宅楼
</div>
<div class="text-xs text-text-400">
LA-003
</div>
</div>
<div class="text-right">
<div class="text-base font-semibold">
{{ formatAmountWithSplit(215.5) }}
</div>
<div class="text-xs text-text-400">
12/26
</div>
</div>
</div>
</ion-item>
<ion-item>
<div class="flex justify-between w-full items-center py-4">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<div class="text-sm font-medium">
分红收益
</div>
<ion-badge class="text-xs p-1" color="warning">
待确认
</ion-badge>
</div>
<div class="text-sm font-medium">
迈阿密海景别墅
</div>
<div class="text-xs text-text-400">
MIA-004
</div>
</div>
<div class="text-right">
<div class="text-base font-semibold">
{{ formatAmountWithSplit(680.2) }}
</div>
<div class="text-xs text-text-400">
12/26
</div>
</div>
</div>
</ion-item>
<ion-item>
<div class="flex justify-between w-full items-center py-4">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<div class="text-sm font-medium">
资产增值
</div>
<ion-badge class="text-xs p-1" color="success">
已完成
</ion-badge>
</div>
<div class="text-sm font-medium">
芝加哥写字楼
</div>
<div class="text-xs text-text-400">
CHI-005
</div>
</div>
<div class="text-right">
<div class="text-base font-semibold">
{{ formatAmountWithSplit(450.6) }}
</div>
<div class="text-xs text-text-400">
12/25
</div>
</div>
</div>
</ion-item>
</ion-list>
</template>
<style lang='css' scoped>
h4 {
font-size: var(--title-font-size);
}
</style>

95
src/views/revenue/monthly/components/revenue-source.vue Normal file
View File

@@ -0,0 +1,95 @@
<script lang='ts' setup>
</script>
<template>
<div>
<h4>本月收益来源</h4>
<div class="card">
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-green-700 rounded-full" />
<div class="text-sm font-semibold">
分红收益
</div>
</div>
<div class="text-base font-semibold">
{{ formatAmountWithSplit(26145.60) }}
</div>
</div>
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<div class="w-2 h-2 " />
<div class="text-xs">
38项
</div>
</div>
<div class="text-xs text-text-200">
68.02%
</div>
</div>
</div>
<div class="card">
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-gray-700 rounded-full" />
<div class="text-sm font-semibold">
资产增值
</div>
</div>
<div class="text-base font-semibold">
{{ formatAmountWithSplit(9820.40) }}
</div>
</div>
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<div class="w-2 h-2 " />
<div class="text-xs">
15项
</div>
</div>
<div class="text-xs text-text-200">
25.54%
</div>
</div>
</div>
<div class="card">
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-yellow-500 rounded-full" />
<div class="text-sm font-semibold">
交易收益
</div>
</div>
<div class="text-base font-semibold">
{{ formatAmountWithSplit(2484.20) }}
</div>
</div>
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<div class="w-2 h-2 " />
<div class="text-xs">
27项
</div>
</div>
<div class="text-xs text-text-200">
6.44%
</div>
</div>
</div>
</div>
</template>
<style lang='css' scoped>
@reference "tailwindcss";
h4 {
font-size: var(--title-font-size);
}
.card {
@apply bg-(--ion-text-color-step-950) rounded-xl p-3 mt-3;
}
</style>

59
src/views/revenue/monthly/components/trend.vue Normal file
View File

@@ -0,0 +1,59 @@
<script lang='ts' setup>
const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
useTradingView(tradingViewInst, {
type: "Area",
data: [
{
time: "2025-12-01",
value: 1100.50,
},
{
time: "2025-12-05",
value: 1300.80,
},
{
time: "2025-12-10",
value: 1450.20,
},
{
time: "2025-12-15",
value: 1200.60,
},
{
time: "2025-12-20",
value: 1350.90,
},
{
time: "2025-12-25",
value: 1380.40,
},
{
time: "2025-12-27",
value: 1256.80,
},
],
weightChartOptions: {
height: 150,
rightPriceScale: {
visible: false,
},
leftPriceScale: {
visible: false,
},
},
});
</script>
<template>
<div>
<h4>本月收益趋势</h4>
<div ref="tradingViewInst" />
</div>
</template>
<style lang='css' scoped>
h4 {
font-size: var(--title-font-size);
}
</style>

60
src/views/revenue/monthly/index.vue Normal file
View File

@@ -0,0 +1,60 @@
<script lang='ts' setup>
import type { RefresherCustomEvent } from "@ionic/vue";
import Overview from "./components/overview.vue";
import Recent from "./components/recent.vue";
import RevenueSource from "./components/revenue-source.vue";
import Trend from "./components/trend.vue";
const { t } = useI18n();
const { vibrate } = useHaptics();
const loading = ref(true);
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">
<ui-back-button slot="start" />
<ion-title>{{ t("asset.revenue.monthlyRevenue") }}</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 class="container">
<Overview />
<Trend />
<RevenueSource />
<Recent />
</div>
</ion-content>
</ion-page>
</template>
<style lang='css' scoped>
.container {
--title-font-size: 16px;
}
</style>

9
src/views/user/components/my-revenue.vue
View File

@@ -7,6 +7,10 @@ const router = useRouter();
function navigateToTotal() {
router.push("/revenue/total");
}
function navigateToMonthly() {
router.push("/revenue/monthly");
}
</script>
<template>
@@ -24,7 +28,10 @@ function navigateToTotal() {
{{ t("asset.revenue.totalRevenue") }}
</div>
</div>
<div class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70">
<div
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
@click="navigateToMonthly"
>
<ion-icon :icon="calendarOutline" class="text-2xl text-primary" />
<div class="text-xs">
{{ t("asset.revenue.monthlyRevenue") }}