feat: 更新收益相关组件，优化数据获取和展示逻辑，添加收益摘要类型
This commit is contained in:
@@ -88,6 +88,8 @@ export type NewBody = TreatyQuery<typeof client.api.news.get>;
|
||||
|
||||
export type NewData = Treaty.Data<typeof client.api.news.get>["data"][number];
|
||||
|
||||
export type EaringsSummaryData = Treaty.Data<typeof client.api.earnings.summary.post>;
|
||||
|
||||
/**
|
||||
* 应用版本信息
|
||||
*/
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
<script lang='ts' setup>
|
||||
import type { EaringsSummaryData } from "@/api/types";
|
||||
|
||||
defineProps<{
|
||||
data: EaringsSummaryData | null;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -8,18 +13,18 @@
|
||||
累计总收益
|
||||
</div>
|
||||
<div class="text-4xl font-bold">
|
||||
{{ formatAmountWithSplit(190421321) }}
|
||||
{{ formatAmountWithSplit(data?.realized.total) }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs mt-1">
|
||||
<div>昨日收益</div>
|
||||
<div>+{{ formatAmountWithSplit(864314) }}</div>
|
||||
<div>+{{ formatAmountWithSplit(data?.realized.yesterday) }}</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) }}
|
||||
{{ formatAmountWithSplit(data?.realized.thisMonth) }}
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
本月收益
|
||||
@@ -28,7 +33,7 @@
|
||||
<div class="h-auto w-px bg-text-800" />
|
||||
<div class="flex-col-center">
|
||||
<div class="text-base font-bold">
|
||||
{{ formatAmountWithSplit(12345) }}
|
||||
{{ formatAmountWithSplit(data?.unrealized.total) }}
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
待确认收益
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
<script lang='ts' setup>
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const { data } = await safeClient(client.api.earnings.details.post({
|
||||
limit: 6,
|
||||
offset: 0,
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -8,94 +13,42 @@
|
||||
<ion-label>
|
||||
<h4>最近记录</h4>
|
||||
</ion-label>
|
||||
<ion-button class="text-sm">
|
||||
<ion-button v-show="data?.data.length" 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">
|
||||
分红收益
|
||||
<ui-empty v-if="!data || data.data.length === 0" class="mt-5" />
|
||||
|
||||
<template v-else>
|
||||
<ion-item v-for="item in data?.data" :key="item.id">
|
||||
<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">
|
||||
{{ item.type }}
|
||||
</div>
|
||||
<ion-badge class="text-xs p-1" color="success">
|
||||
{{ item.ledgerEntryId }}
|
||||
</ion-badge>
|
||||
</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">
|
||||
分红收益
|
||||
{{ item.relatedAssetName }}
|
||||
</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 class="text-xs text-text-400">
|
||||
{{ item.relatedAssetCode }}
|
||||
</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 class="text-right">
|
||||
<div class="text-base font-semibold">
|
||||
{{ formatAmountWithSplit(item.amount) }}
|
||||
</div>
|
||||
<div class="text-xs text-text-400">
|
||||
{{ useDateFormat(item.createdAt) }}
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
</ion-list>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,84 +1,45 @@
|
||||
<script lang='ts' setup>
|
||||
import type { EaringsSummaryData } from "@/api/types";
|
||||
|
||||
const props = defineProps<{
|
||||
data: EaringsSummaryData | null;
|
||||
}>();
|
||||
|
||||
const byType = computed(() => {
|
||||
return props.data?.byType || [];
|
||||
});
|
||||
</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">
|
||||
分红收益
|
||||
<ui-empty v-if="byType.length === 0" />
|
||||
<template v-else>
|
||||
<div v-for="item in byType" :key="item.type" 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">
|
||||
{{ item.type }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-semibold">
|
||||
{{ formatAmountWithSplit(item.amount) }}
|
||||
</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 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">
|
||||
{{ item.count }}项
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-text-200">
|
||||
{{ item.percentage }}%
|
||||
</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>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,42 +1,22 @@
|
||||
<script lang='ts' setup>
|
||||
import dayjs from "dayjs";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
|
||||
const now = dayjs();
|
||||
|
||||
const { data } = await safeClient(client.api.earnings.trend.post({
|
||||
granularity: "month",
|
||||
startDate: now.subtract(7, "month").toDate(),
|
||||
endDate: now.toDate(),
|
||||
}));
|
||||
|
||||
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,
|
||||
},
|
||||
],
|
||||
data: computed(() => data.value?.data.map(item => ({
|
||||
time: dayjs(item.date).format("YYYY-MM-DD"),
|
||||
value: item.amount,
|
||||
})) || []),
|
||||
weightChartOptions: {
|
||||
height: 150,
|
||||
rightPriceScale: {
|
||||
@@ -52,7 +32,8 @@ useTradingView(tradingViewInst, {
|
||||
<template>
|
||||
<div>
|
||||
<h4>收益趋势</h4>
|
||||
<div ref="tradingViewInst" />
|
||||
<ui-empty v-if="!data || data.data.length === 0" class="mt-5" />
|
||||
<div v-else ref="tradingViewInst" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang='ts' setup>
|
||||
import type { RefresherCustomEvent } from "@ionic/vue";
|
||||
import { mockClient } from "@/api";
|
||||
import type { EaringsSummaryData } from "@/api/types";
|
||||
import { client, safeClient } from "@/api";
|
||||
import Overview from "./components/overview.vue";
|
||||
import Recent from "./components/recent.vue";
|
||||
import RevenueSource from "./components/revenue-source.vue";
|
||||
@@ -9,26 +10,22 @@ import Trend from "./components/trend.vue";
|
||||
const { t } = useI18n();
|
||||
const { vibrate } = useHaptics();
|
||||
|
||||
// 收益数据
|
||||
const loading = ref(true);
|
||||
const { data } = await mockClient("income/total");
|
||||
const data = ref<EaringsSummaryData | null>(null);
|
||||
|
||||
async function loadIncomeData() {
|
||||
loading.value = true;
|
||||
useTimeoutFn(() => {
|
||||
loading.value = false;
|
||||
}, 800);
|
||||
async function fetchData() {
|
||||
const { data: fetchData } = await safeClient(client.api.earnings.summary.post());
|
||||
data.value = fetchData.value;
|
||||
}
|
||||
|
||||
async function handleRefresh(event: RefresherCustomEvent) {
|
||||
function handleRefresh(event: RefresherCustomEvent) {
|
||||
vibrate();
|
||||
useTimeoutFn(() => {
|
||||
fetchData().finally(() => {
|
||||
event.target.complete();
|
||||
}, 800);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadIncomeData();
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -47,10 +44,10 @@ onMounted(() => {
|
||||
</ion-refresher>
|
||||
|
||||
<div class="container">
|
||||
<Overview />
|
||||
<Overview :data="data" />
|
||||
<Trend />
|
||||
<RevenueSource />
|
||||
<Recent />
|
||||
<RevenueSource :data="data" />
|
||||
<Recent :data="data" />
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
|
||||
Reference in New Issue
Block a user