feat: 添加每月收益页面及相关组件，更新路由以支持新功能
This commit is contained in:
@@ -64,6 +64,11 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
component: () => import("@/views/revenue/total/index.vue"),
|
component: () => import("@/views/revenue/total/index.vue"),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/revenue/monthly",
|
||||||
|
component: () => import("@/views/revenue/monthly/index.vue"),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/wallet/bill",
|
path: "/wallet/bill",
|
||||||
component: () => import("@/views/wallet/bill.vue"),
|
component: () => import("@/views/wallet/bill.vue"),
|
||||||
|
|||||||
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() {
|
function navigateToTotal() {
|
||||||
router.push("/revenue/total");
|
router.push("/revenue/total");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function navigateToMonthly() {
|
||||||
|
router.push("/revenue/monthly");
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -24,7 +28,10 @@ function navigateToTotal() {
|
|||||||
{{ t("asset.revenue.totalRevenue") }}
|
{{ t("asset.revenue.totalRevenue") }}
|
||||||
</div>
|
</div>
|
||||||
</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" />
|
<ion-icon :icon="calendarOutline" class="text-2xl text-primary" />
|
||||||
<div class="text-xs">
|
<div class="text-xs">
|
||||||
{{ t("asset.revenue.monthlyRevenue") }}
|
{{ t("asset.revenue.monthlyRevenue") }}
|
||||||
|
|||||||
Reference in New Issue
Block a user