feat: 更新收益相关组件,优化数据获取逻辑,修复数据展示问题
This commit is contained in:
@@ -34,7 +34,7 @@
|
|||||||
"@elysiajs/eden": "^1.4.5",
|
"@elysiajs/eden": "^1.4.5",
|
||||||
"@ionic/vue": "^8.7.11",
|
"@ionic/vue": "^8.7.11",
|
||||||
"@ionic/vue-router": "^8.7.11",
|
"@ionic/vue-router": "^8.7.11",
|
||||||
"@riwa/api-types": "http://192.168.1.7:9527/api/riwa-eden-0.0.116.tgz",
|
"@riwa/api-types": "http://192.168.1.7:9527/api/riwa-eden-0.0.118.tgz",
|
||||||
"@tailwindcss/vite": "^4.1.18",
|
"@tailwindcss/vite": "^4.1.18",
|
||||||
"@vee-validate/yup": "^4.15.1",
|
"@vee-validate/yup": "^4.15.1",
|
||||||
"@vueuse/core": "^14.1.0",
|
"@vueuse/core": "^14.1.0",
|
||||||
|
|||||||
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
@@ -57,8 +57,8 @@ importers:
|
|||||||
specifier: ^8.7.11
|
specifier: ^8.7.11
|
||||||
version: 8.7.11(@stencil/core@4.39.0)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
|
version: 8.7.11(@stencil/core@4.39.0)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
|
||||||
'@riwa/api-types':
|
'@riwa/api-types':
|
||||||
specifier: http://192.168.1.7:9527/api/riwa-eden-0.0.116.tgz
|
specifier: http://192.168.1.7:9527/api/riwa-eden-0.0.118.tgz
|
||||||
version: '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.116.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
|
version: '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.118.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
|
||||||
'@tailwindcss/vite':
|
'@tailwindcss/vite':
|
||||||
specifier: ^4.1.18
|
specifier: ^4.1.18
|
||||||
version: 4.1.18(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
|
version: 4.1.18(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
|
||||||
@@ -2778,9 +2778,9 @@ packages:
|
|||||||
'@remirror/core-constants@3.0.0':
|
'@remirror/core-constants@3.0.0':
|
||||||
resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
|
resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
|
||||||
|
|
||||||
'@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.116.tgz':
|
'@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.118.tgz':
|
||||||
resolution: {tarball: http://192.168.1.7:9527/api/riwa-eden-0.0.116.tgz}
|
resolution: {tarball: http://192.168.1.7:9527/api/riwa-eden-0.0.118.tgz}
|
||||||
version: 0.0.116
|
version: 0.0.118
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@elysiajs/eden': ^1.4.5
|
'@elysiajs/eden': ^1.4.5
|
||||||
|
|
||||||
@@ -12105,7 +12105,7 @@ snapshots:
|
|||||||
|
|
||||||
'@remirror/core-constants@3.0.0': {}
|
'@remirror/core-constants@3.0.0': {}
|
||||||
|
|
||||||
'@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.116.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
|
'@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.118.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@elysiajs/eden': 1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))
|
'@elysiajs/eden': 1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,9 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
|
import type { EaringsSummaryData } from "@/api/types";
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
data: EaringsSummaryData | null;
|
||||||
|
}>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -8,27 +13,27 @@
|
|||||||
本月总收益
|
本月总收益
|
||||||
</div>
|
</div>
|
||||||
<div class="text-4xl font-bold">
|
<div class="text-4xl font-bold">
|
||||||
{{ formatAmountWithSplit(38450.20) }}
|
{{ formatAmountWithSplit(data?.realized.thisMonth) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-2 text-xs mt-1">
|
<div class="flex items-center gap-2 text-xs mt-1">
|
||||||
<div>本月日均</div>
|
<div>昨日收益</div>
|
||||||
<div>{{ formatAmountWithSplit(1423.34) }}</div>
|
<div>+{{ formatAmountWithSplit(data?.realized.yesterday) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-px bg-text-800 my-5" />
|
<div class="h-px bg-text-800 my-5" />
|
||||||
<div class="flex justify-around">
|
<div class="flex justify-around">
|
||||||
<div class="flex-col-center">
|
<div class="flex-col-center">
|
||||||
<div class="text-base font-bold">
|
<div class="text-base font-bold">
|
||||||
{{ formatAmountWithSplit(1256.80) }}
|
{{ formatAmountWithSplit(data?.realized.lastMonth) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-xs">
|
<div class="text-xs">
|
||||||
昨日收益
|
上月收益
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-auto w-px bg-text-800" />
|
<div class="h-auto w-px bg-text-800" />
|
||||||
<div class="flex-col-center">
|
<div class="flex-col-center">
|
||||||
<div class="text-base font-bold">
|
<div class="text-base font-bold">
|
||||||
{{ formatAmountWithSplit(125680.50) }}
|
{{ formatAmountWithSplit(data?.unrealized.total) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-xs">
|
<div class="text-xs">
|
||||||
累计总收益
|
累计总收益
|
||||||
|
|||||||
@@ -1,161 +1,58 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
|
import { client, safeClient } from "@/api";
|
||||||
|
|
||||||
|
const { data } = await safeClient(client.api.earnings.details.post({
|
||||||
|
limit: 6,
|
||||||
|
offset: 0,
|
||||||
|
}));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-list-header>
|
<ion-list-header>
|
||||||
<ion-label>
|
<h4>本月记录</h4>
|
||||||
<h4>本月记录</h4>
|
<ion-button v-show="data?.data.length" class="text-sm">
|
||||||
</ion-label>
|
|
||||||
<ion-button class="text-sm">
|
|
||||||
查看全部
|
查看全部
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</ion-list-header>
|
</ion-list-header>
|
||||||
<ion-item>
|
<ui-empty v-if="!data || data.data.length === 0" class="mt-5" />
|
||||||
<div class="flex justify-between w-full items-center py-4">
|
|
||||||
<div class="flex flex-col gap-1">
|
<template v-else>
|
||||||
<div class="flex items-center gap-2">
|
<ion-item v-for="item in data?.data" :key="item.id">
|
||||||
<div class="text-sm font-medium">
|
<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>
|
</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 class="text-sm font-medium">
|
||||||
资产增值
|
{{ item.relatedAssetName }}
|
||||||
</div>
|
</div>
|
||||||
<ion-badge class="text-xs p-1" color="success">
|
<div class="text-xs text-text-400">
|
||||||
已完成
|
{{ item.relatedAssetCode }}
|
||||||
</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>
|
</div>
|
||||||
<ion-badge class="text-xs p-1" color="success">
|
|
||||||
已完成
|
|
||||||
</ion-badge>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm font-medium">
|
<div class="text-right">
|
||||||
洛杉矶住宅楼
|
<div class="text-base font-semibold">
|
||||||
</div>
|
{{ formatAmountWithSplit(item.amount) }}
|
||||||
<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>
|
</div>
|
||||||
<ion-badge class="text-xs p-1" color="warning">
|
<div class="text-xs text-text-400">
|
||||||
待确认
|
{{ useDateFormat(item.createdAt) }}
|
||||||
</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>
|
</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>
|
</div>
|
||||||
<div class="text-right">
|
</ion-item>
|
||||||
<div class="text-base font-semibold">
|
</template>
|
||||||
{{ formatAmountWithSplit(450.6) }}
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-text-400">
|
|
||||||
12/25
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ion-item>
|
|
||||||
</ion-list>
|
</ion-list>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='css' scoped>
|
<style lang='css' scoped>
|
||||||
|
@reference "tailwindcss";
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: var(--title-font-size);
|
font-size: var(--title-font-size);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,84 +1,45 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { client, safeClient } from "@/api";
|
||||||
|
|
||||||
|
const now = dayjs();
|
||||||
|
|
||||||
|
const { data } = safeClient(client.api.earnings.type_summary.post({
|
||||||
|
startDate: now.startOf("month").toDate(),
|
||||||
|
endDate: now.endOf("month").toDate(),
|
||||||
|
}));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h4>本月收益来源</h4>
|
<h4>本月收益来源</h4>
|
||||||
<div class="card">
|
<ui-empty v-if="data?.data.length === 0" />
|
||||||
<div class="flex justify-between items-center mb-2">
|
<template v-else>
|
||||||
<div class="flex items-center gap-2">
|
<div v-for="item in data?.data" :key="item.type" class="card">
|
||||||
<div class="w-2 h-2 bg-green-700 rounded-full" />
|
<div class="flex justify-between items-center mb-2">
|
||||||
<div class="text-sm font-semibold">
|
<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>
|
</div>
|
||||||
<div class="text-base font-semibold">
|
<div class="flex justify-between items-center mb-2">
|
||||||
{{ formatAmountWithSplit(26145.60) }}
|
<div class="flex items-center gap-2">
|
||||||
</div>
|
<div class="w-2 h-2 " />
|
||||||
</div>
|
<div class="text-xs">
|
||||||
<div class="flex justify-between items-center mb-2">
|
{{ item.count }}项
|
||||||
<div class="flex items-center gap-2">
|
</div>
|
||||||
<div class="w-2 h-2 " />
|
</div>
|
||||||
<div class="text-xs">
|
<div class="text-xs text-text-200">
|
||||||
38项
|
{{ item.percentage }}%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-xs text-text-200">
|
|
||||||
68.02%
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,38 +1,22 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { client, safeClient } from "@/api";
|
||||||
|
|
||||||
const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
|
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, {
|
useTradingView(tradingViewInst, {
|
||||||
type: "Area",
|
type: "Area",
|
||||||
data: [
|
data: computed(() => data.value?.data.map(item => ({
|
||||||
{
|
time: dayjs(item.date).format("YYYY-MM-DD"),
|
||||||
time: "2025-12-01",
|
value: item.amount,
|
||||||
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: {
|
weightChartOptions: {
|
||||||
height: 150,
|
height: 150,
|
||||||
rightPriceScale: {
|
rightPriceScale: {
|
||||||
@@ -48,7 +32,8 @@ useTradingView(tradingViewInst, {
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h4>本月收益趋势</h4>
|
<h4>本月收益趋势</h4>
|
||||||
<div ref="tradingViewInst" />
|
<ui-empty v-if="!data || data.data.length === 0" class="mt-5" />
|
||||||
|
<div v-else ref="tradingViewInst" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import type { RefresherCustomEvent } from "@ionic/vue";
|
import type { RefresherCustomEvent } from "@ionic/vue";
|
||||||
|
import type { EaringsSummaryData } from "@/api/types";
|
||||||
|
import { client, safeClient } from "@/api";
|
||||||
import Overview from "./components/overview.vue";
|
import Overview from "./components/overview.vue";
|
||||||
import Recent from "./components/recent.vue";
|
import Recent from "./components/recent.vue";
|
||||||
import RevenueSource from "./components/revenue-source.vue";
|
import RevenueSource from "./components/revenue-source.vue";
|
||||||
@@ -8,24 +10,24 @@ import Trend from "./components/trend.vue";
|
|||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { vibrate } = useHaptics();
|
const { vibrate } = useHaptics();
|
||||||
|
|
||||||
const loading = ref(true);
|
const data = ref<EaringsSummaryData | null>(null);
|
||||||
|
|
||||||
async function loadIncomeData() {
|
async function fetchData() {
|
||||||
loading.value = true;
|
const { data: fetchData } = await safeClient(client.api.earnings.summary.post({
|
||||||
useTimeoutFn(() => {
|
now: new Date(),
|
||||||
loading.value = false;
|
}));
|
||||||
}, 800);
|
data.value = fetchData.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleRefresh(event: RefresherCustomEvent) {
|
function handleRefresh(event: RefresherCustomEvent) {
|
||||||
vibrate();
|
vibrate();
|
||||||
useTimeoutFn(() => {
|
fetchData().finally(() => {
|
||||||
event.target.complete();
|
event.target.complete();
|
||||||
}, 800);
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadIncomeData();
|
fetchData();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -44,10 +46,10 @@ onMounted(() => {
|
|||||||
</ion-refresher>
|
</ion-refresher>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<Overview />
|
<Overview :data="data" />
|
||||||
<Trend />
|
<Trend />
|
||||||
<RevenueSource />
|
<RevenueSource :data="data" />
|
||||||
<Recent />
|
<Recent :data="data" />
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-page>
|
</ion-page>
|
||||||
|
|||||||
@@ -1,75 +1,13 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import type { RefresherCustomEvent } from "@ionic/vue";
|
import type { RefresherCustomEvent } from "@ionic/vue";
|
||||||
|
import { client, safeClient } from "@/api";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { vibrate } = useHaptics();
|
const { vibrate } = useHaptics();
|
||||||
|
|
||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
|
|
||||||
// 待确认收益数据
|
const { data } = safeClient(client.api.earnings.pending.get());
|
||||||
const pendingItems = ref([
|
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
type: "dividend",
|
|
||||||
typeName: "分红收益",
|
|
||||||
assetName: "迈阿密海景别墅",
|
|
||||||
assetCode: "MIA-004",
|
|
||||||
amount: 680.20,
|
|
||||||
expectedDate: "2025-12-28",
|
|
||||||
status: "pending",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
type: "appreciation",
|
|
||||||
typeName: "资产增值",
|
|
||||||
assetName: "波士顿商业中心",
|
|
||||||
assetCode: "BOS-006",
|
|
||||||
amount: 1250.50,
|
|
||||||
expectedDate: "2025-12-29",
|
|
||||||
status: "pending",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
type: "trade",
|
|
||||||
typeName: "交易收益",
|
|
||||||
assetName: "西雅图科技园区",
|
|
||||||
assetCode: "SEA-007",
|
|
||||||
amount: 890.30,
|
|
||||||
expectedDate: "2025-12-30",
|
|
||||||
status: "processing",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
type: "dividend",
|
|
||||||
typeName: "分红收益",
|
|
||||||
assetName: "达拉斯住宅区",
|
|
||||||
assetCode: "DAL-008",
|
|
||||||
amount: 520.80,
|
|
||||||
expectedDate: "2025-12-30",
|
|
||||||
status: "pending",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
type: "appreciation",
|
|
||||||
typeName: "资产增值",
|
|
||||||
assetName: "奥斯汀高端公寓",
|
|
||||||
assetCode: "AUS-009",
|
|
||||||
amount: 1580.20,
|
|
||||||
expectedDate: "2026-01-02",
|
|
||||||
status: "processing",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const totalPending = computed(() =>
|
|
||||||
pendingItems.value.reduce((sum, item) => sum + item.amount, 0),
|
|
||||||
);
|
|
||||||
|
|
||||||
async function loadData() {
|
|
||||||
loading.value = true;
|
|
||||||
useTimeoutFn(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 800);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleRefresh(event: RefresherCustomEvent) {
|
async function handleRefresh(event: RefresherCustomEvent) {
|
||||||
vibrate();
|
vibrate();
|
||||||
@@ -78,17 +16,13 @@ async function handleRefresh(event: RefresherCustomEvent) {
|
|||||||
}, 800);
|
}, 800);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getStatusColor(status: string) {
|
function getStatusColor(status?: string) {
|
||||||
return status === "pending" ? "warning" : "medium";
|
return status === "pending" ? "warning" : "medium";
|
||||||
}
|
}
|
||||||
|
|
||||||
function getStatusText(status: string) {
|
function getStatusText(status?: string) {
|
||||||
return status === "pending" ? "待确认" : "处理中";
|
return status === "pending" ? "待确认" : "处理中";
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
loadData();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -113,7 +47,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex items-end gap-2">
|
<div class="flex items-end gap-2">
|
||||||
<div class="text-3xl font-bold">
|
<div class="text-3xl font-bold">
|
||||||
{{ formatAmountWithSplit(totalPending) }}
|
{{ formatAmountWithSplit(data?.total) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-text-400 mb-1">
|
<div class="text-sm text-text-400 mb-1">
|
||||||
USDT
|
USDT
|
||||||
@@ -132,42 +66,45 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ion-list class="rounded-xl overflow-hidden">
|
<ui-empty v-if="data?.data.length === 0" />
|
||||||
<ion-item v-for="item in pendingItems" :key="item.id" lines="full">
|
<template v-else>
|
||||||
<div class="w-full py-4">
|
<ion-list>
|
||||||
<div class="flex justify-between items-start mb-3">
|
<ion-item v-for="item, index in data?.data" :key="index" lines="full">
|
||||||
<div class="flex flex-col gap-1.5">
|
<div class="w-full py-4">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex justify-between items-start mb-3">
|
||||||
<div class="text-sm font-medium">
|
<div class="flex flex-col gap-1.5">
|
||||||
{{ item.typeName }}
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="text-sm font-medium">
|
||||||
|
{{ item.type }}
|
||||||
|
</div>
|
||||||
|
<ion-badge
|
||||||
|
:color="getStatusColor(item.status)"
|
||||||
|
class="text-xs px-2 py-0.5"
|
||||||
|
>
|
||||||
|
{{ getStatusText(item.status) }}
|
||||||
|
</ion-badge>
|
||||||
|
</div>
|
||||||
|
<div class="text-base font-semibold">
|
||||||
|
{{ item.assetName }}
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-400">
|
||||||
|
{{ item.assetCode }}
|
||||||
</div>
|
</div>
|
||||||
<ion-badge
|
|
||||||
:color="getStatusColor(item.status)"
|
|
||||||
class="text-xs px-2 py-0.5"
|
|
||||||
>
|
|
||||||
{{ getStatusText(item.status) }}
|
|
||||||
</ion-badge>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-base font-semibold">
|
<div class="text-right">
|
||||||
{{ item.assetName }}
|
<div class="text-lg font-bold">
|
||||||
</div>
|
+{{ formatAmountWithSplit(item.amount) }}
|
||||||
<div class="text-xs text-text-400">
|
</div>
|
||||||
{{ item.assetCode }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-right">
|
<div class="flex items-center gap-1.5 text-xs text-text-400">
|
||||||
<div class="text-lg font-bold">
|
<i-ic-outline-access-time class="text-sm" />
|
||||||
+{{ formatAmountWithSplit(item.amount) }}
|
<span>预计到账:{{ useDateFormat(item.expectedAt, 'YY/MM/DD') }}</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-1.5 text-xs text-text-400">
|
</ion-item>
|
||||||
<i-ic-outline-access-time class="text-sm" />
|
</ion-list>
|
||||||
<span>预计到账:{{ item.expectedDate }}</span>
|
</template>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ion-item>
|
|
||||||
</ion-list>
|
|
||||||
|
|
||||||
<!-- 说明信息 -->
|
<!-- 说明信息 -->
|
||||||
<div class="mt-6 p-4 bg-text-950 rounded-xl">
|
<div class="mt-6 p-4 bg-text-950 rounded-xl">
|
||||||
|
|||||||
@@ -10,9 +10,7 @@ const { data } = await safeClient(client.api.earnings.details.post({
|
|||||||
<template>
|
<template>
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-list-header>
|
<ion-list-header>
|
||||||
<ion-label>
|
<h4>最近记录</h4>
|
||||||
<h4>最近记录</h4>
|
|
||||||
</ion-label>
|
|
||||||
<ion-button v-show="data?.data.length" class="text-sm">
|
<ion-button v-show="data?.data.length" class="text-sm">
|
||||||
查看全部
|
查看全部
|
||||||
</ion-button>
|
</ion-button>
|
||||||
@@ -53,9 +51,10 @@ const { data } = await safeClient(client.api.earnings.details.post({
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='css' scoped>
|
<style lang='css' scoped>
|
||||||
|
@reference "tailwindcss";
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: var(--title-font-size);
|
font-size: var(--title-font-size);
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
ion-badge {
|
ion-badge {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
|
|||||||
@@ -1,21 +1,15 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import type { EaringsSummaryData } from "@/api/types";
|
import { client, safeClient } from "@/api";
|
||||||
|
|
||||||
const props = defineProps<{
|
const { data } = safeClient(client.api.earnings.type_summary.post());
|
||||||
data: EaringsSummaryData | null;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const byType = computed(() => {
|
|
||||||
return props.data?.byType || [];
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h4>收益来源</h4>
|
<h4>收益来源</h4>
|
||||||
<ui-empty v-if="byType.length === 0" />
|
<ui-empty v-if="data?.data.length === 0" />
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div v-for="item in byType" :key="item.type" class="card">
|
<div v-for="item in data?.data" :key="item.type" class="card">
|
||||||
<div class="flex justify-between items-center mb-2">
|
<div class="flex justify-between items-center mb-2">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<div class="w-2 h-2 bg-green-700 rounded-full" />
|
<div class="w-2 h-2 bg-green-700 rounded-full" />
|
||||||
|
|||||||
@@ -13,7 +13,9 @@ const { vibrate } = useHaptics();
|
|||||||
const data = ref<EaringsSummaryData | null>(null);
|
const data = ref<EaringsSummaryData | null>(null);
|
||||||
|
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
const { data: fetchData } = await safeClient(client.api.earnings.summary.post());
|
const { data: fetchData } = await safeClient(client.api.earnings.summary.post({
|
||||||
|
now: new Date(),
|
||||||
|
}));
|
||||||
data.value = fetchData.value;
|
data.value = fetchData.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user