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:21:15 +07:00
parent 4a3de581d8
commit b355519671
5 changed files with 226 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/income/total/components/overview.vue
View File

@@ -38,4 +38,8 @@
</div>
</template>
<style lang='css' scoped></style>
<style lang='css' scoped>
h4 {
font-size: var(--title-font-size);
}
</style>

110
src/views/income/total/components/recent.vue Normal file
View File

@@ -0,0 +1,110 @@
<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">
SF-002
</div>
</div>
<div class="text-right">
<div class="text-base font-semibold">
{{ formatAmountWithSplit(520.5) }}
</div>
<div class="text-xs text-text-400">
今天
</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(520.5) }}
</div>
<div class="text-xs text-text-400">
今天
</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(520.5) }}
</div>
<div class="text-xs text-text-400">
今天
</div>
</div>
</div>
</ion-item>
</ion-list>
</template>
<style lang='css' scoped>
h4 {
font-size: var(--title-font-size);
font-weight: bold;
}
ion-badge {
font-size: 10px;
}
</style>

95
src/views/income/total/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(85321.32) }}
</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">
125项
</div>
</div>
<div class="text-xs text-text-200">
69.42%
</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(32642.6) }}
</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">
45项
</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(8110.4) }}
</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">
89项
</div>
</div>
<div class="text-xs text-text-200">
5.04%
</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>

6
src/views/income/total/components/trend.vue
View File

@@ -56,4 +56,8 @@ useTradingView(tradingViewInst, {
</div>
</template>
<style lang='css' scoped></style>
<style lang='css' scoped>
h4 {
font-size: var(--title-font-size);
}
</style>

12
src/views/income/total/index.vue
View File

@@ -2,6 +2,8 @@
import type { RefresherCustomEvent } from "@ionic/vue";
import { mockClient } from "@/api";
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();
@@ -44,10 +46,18 @@ onMounted(() => {
<ion-refresher-content />
</ion-refresher>
<div>
<div class="container">
<Overview />
<Trend />
<RevenueSource />
<Recent />
</div>
</ion-content>
</ion-page>
</template>
<style lang='css' scoped>
.container {
--title-font-size: 16px;
}
</style>