feat: 添加每月收益页面及相关组件，更新路由以支持新功能
This commit is contained in:
45
src/views/revenue/monthly/components/overview.vue
Normal file
45
src/views/revenue/monthly/components/overview.vue
Normal 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
162
src/views/revenue/monthly/components/recent.vue
Normal 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
95
src/views/revenue/monthly/components/revenue-source.vue
Normal 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
59
src/views/revenue/monthly/components/trend.vue
Normal 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
60
src/views/revenue/monthly/index.vue
Normal 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>
|
||||
@@ -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") }}
|
||||
|
||||
Reference in New Issue
Block a user