feat: 更新收益相关组件，优化数据获取逻辑，修复数据展示问题
This commit is contained in:
@@ -1,4 +1,9 @@
|
||||
<script lang='ts' setup>
|
||||
import type { EaringsSummaryData } from "@/api/types";
|
||||
|
||||
defineProps<{
|
||||
data: EaringsSummaryData | null;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -8,27 +13,27 @@
|
||||
本月总收益
|
||||
</div>
|
||||
<div class="text-4xl font-bold">
|
||||
{{ formatAmountWithSplit(38450.20) }}
|
||||
{{ formatAmountWithSplit(data?.realized.thisMonth) }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs mt-1">
|
||||
<div>本月日均</div>
|
||||
<div>{{ formatAmountWithSplit(1423.34) }}</div>
|
||||
<div>昨日收益</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(1256.80) }}
|
||||
{{ formatAmountWithSplit(data?.realized.lastMonth) }}
|
||||
</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) }}
|
||||
{{ formatAmountWithSplit(data?.unrealized.total) }}
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
累计总收益
|
||||
|
||||
@@ -1,161 +1,58 @@
|
||||
<script lang='ts' setup>
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const { data } = await safeClient(client.api.earnings.details.post({
|
||||
limit: 6,
|
||||
offset: 0,
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
<h4>本月记录</h4>
|
||||
</ion-label>
|
||||
<ion-button class="text-sm">
|
||||
<h4>本月记录</h4>
|
||||
<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">
|
||||
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">
|
||||
资产增值
|
||||
{{ 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(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 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">
|
||||
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 class="text-right">
|
||||
<div class="text-base font-semibold">
|
||||
{{ formatAmountWithSplit(item.amount) }}
|
||||
</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 class="text-xs text-text-400">
|
||||
{{ useDateFormat(item.createdAt) }}
|
||||
</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-item>
|
||||
</template>
|
||||
</ion-list>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped>
|
||||
@reference "tailwindcss";
|
||||
|
||||
h4 {
|
||||
font-size: var(--title-font-size);
|
||||
}
|
||||
|
||||
@@ -1,84 +1,45 @@
|
||||
<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>
|
||||
|
||||
<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="data?.data.length === 0" />
|
||||
<template v-else>
|
||||
<div v-for="item in data?.data" :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(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 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">
|
||||
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>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,38 +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: "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,
|
||||
},
|
||||
],
|
||||
data: computed(() => data.value?.data.map(item => ({
|
||||
time: dayjs(item.date).format("YYYY-MM-DD"),
|
||||
value: item.amount,
|
||||
})) || []),
|
||||
weightChartOptions: {
|
||||
height: 150,
|
||||
rightPriceScale: {
|
||||
@@ -48,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,5 +1,7 @@
|
||||
<script lang='ts' setup>
|
||||
import type { RefresherCustomEvent } from "@ionic/vue";
|
||||
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";
|
||||
@@ -8,24 +10,24 @@ import Trend from "./components/trend.vue";
|
||||
const { t } = useI18n();
|
||||
const { vibrate } = useHaptics();
|
||||
|
||||
const loading = ref(true);
|
||||
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({
|
||||
now: new Date(),
|
||||
}));
|
||||
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>
|
||||
|
||||
@@ -44,10 +46,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>
|
||||
|
||||
@@ -1,75 +1,13 @@
|
||||
<script lang='ts' setup>
|
||||
import type { RefresherCustomEvent } from "@ionic/vue";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const { t } = useI18n();
|
||||
const { vibrate } = useHaptics();
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
// 待确认收益数据
|
||||
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);
|
||||
}
|
||||
const { data } = safeClient(client.api.earnings.pending.get());
|
||||
|
||||
async function handleRefresh(event: RefresherCustomEvent) {
|
||||
vibrate();
|
||||
@@ -78,17 +16,13 @@ async function handleRefresh(event: RefresherCustomEvent) {
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function getStatusColor(status: string) {
|
||||
function getStatusColor(status?: string) {
|
||||
return status === "pending" ? "warning" : "medium";
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
function getStatusText(status?: string) {
|
||||
return status === "pending" ? "待确认" : "处理中";
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -113,7 +47,7 @@ onMounted(() => {
|
||||
</div>
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="text-3xl font-bold">
|
||||
{{ formatAmountWithSplit(totalPending) }}
|
||||
{{ formatAmountWithSplit(data?.total) }}
|
||||
</div>
|
||||
<div class="text-sm text-text-400 mb-1">
|
||||
USDT
|
||||
@@ -132,42 +66,45 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-list class="rounded-xl overflow-hidden">
|
||||
<ion-item v-for="item in pendingItems" :key="item.id" lines="full">
|
||||
<div class="w-full py-4">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-sm font-medium">
|
||||
{{ item.typeName }}
|
||||
<ui-empty v-if="data?.data.length === 0" />
|
||||
<template v-else>
|
||||
<ion-list>
|
||||
<ion-item v-for="item, index in data?.data" :key="index" lines="full">
|
||||
<div class="w-full py-4">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<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>
|
||||
<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 class="text-right">
|
||||
<div class="text-lg font-bold">
|
||||
+{{ formatAmountWithSplit(item.amount) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-lg font-bold">
|
||||
+{{ formatAmountWithSplit(item.amount) }}
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-xs text-text-400">
|
||||
<i-ic-outline-access-time class="text-sm" />
|
||||
<span>预计到账：{{ useDateFormat(item.expectedAt, 'YY/MM/DD') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-xs text-text-400">
|
||||
<i-ic-outline-access-time class="text-sm" />
|
||||
<span>预计到账：{{ item.expectedDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</template>
|
||||
|
||||
<!-- 说明信息 -->
|
||||
<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>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
<h4>最近记录</h4>
|
||||
</ion-label>
|
||||
<h4>最近记录</h4>
|
||||
<ion-button v-show="data?.data.length" class="text-sm">
|
||||
查看全部
|
||||
</ion-button>
|
||||
@@ -53,9 +51,10 @@ const { data } = await safeClient(client.api.earnings.details.post({
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped>
|
||||
@reference "tailwindcss";
|
||||
|
||||
h4 {
|
||||
font-size: var(--title-font-size);
|
||||
font-weight: bold;
|
||||
}
|
||||
ion-badge {
|
||||
font-size: 10px;
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
<script lang='ts' setup>
|
||||
import type { EaringsSummaryData } from "@/api/types";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const props = defineProps<{
|
||||
data: EaringsSummaryData | null;
|
||||
}>();
|
||||
|
||||
const byType = computed(() => {
|
||||
return props.data?.byType || [];
|
||||
});
|
||||
const { data } = safeClient(client.api.earnings.type_summary.post());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h4>收益来源</h4>
|
||||
<ui-empty v-if="byType.length === 0" />
|
||||
<ui-empty v-if="data?.data.length === 0" />
|
||||
<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 items-center gap-2">
|
||||
<div class="w-2 h-2 bg-green-700 rounded-full" />
|
||||
|
||||
@@ -13,7 +13,9 @@ const { vibrate } = useHaptics();
|
||||
const data = ref<EaringsSummaryData | null>(null);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user