feat: 添加收益模块,包含总收益概览、收益趋势和收益来源,更新相关组件和路由
This commit is contained in:
41
src/views/income/total/components/overview.vue
Normal file
41
src/views/income/total/components/overview.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<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(190421321) }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs mt-1">
|
||||
<div>昨日收益</div>
|
||||
<div>+{{ formatAmountWithSplit(864314) }}</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) }}
|
||||
</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(12345) }}
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
待确认收益
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped></style>
|
||||
59
src/views/income/total/components/trend.vue
Normal file
59
src/views/income/total/components/trend.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<script lang='ts' setup>
|
||||
const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
|
||||
|
||||
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,
|
||||
},
|
||||
],
|
||||
weightChartOptions: {
|
||||
height: 150,
|
||||
rightPriceScale: {
|
||||
visible: false,
|
||||
},
|
||||
leftPriceScale: {
|
||||
visible: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h4>收益趋势</h4>
|
||||
<div ref="tradingViewInst" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped></style>
|
||||
53
src/views/income/total/index.vue
Normal file
53
src/views/income/total/index.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<script lang='ts' setup>
|
||||
import type { RefresherCustomEvent } from "@ionic/vue";
|
||||
import { mockClient } from "@/api";
|
||||
import Overview from "./components/overview.vue";
|
||||
import Trend from "./components/trend.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const { vibrate } = useHaptics();
|
||||
|
||||
// 收益数据
|
||||
const loading = ref(true);
|
||||
const { data } = await mockClient("income/total");
|
||||
|
||||
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">
|
||||
<ion-back-button slot="start" />
|
||||
<ion-title>{{ t("income.title") }}</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>
|
||||
<Overview />
|
||||
<Trend />
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
Reference in New Issue
Block a user