feat: 添加待确认收益和收益记录页面,更新路由和导航功能
This commit is contained in:
201
src/views/revenue/pending/index.vue
Normal file
201
src/views/revenue/pending/index.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<script lang='ts' setup>
|
||||
import type { RefresherCustomEvent } from "@ionic/vue";
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
async function handleRefresh(event: RefresherCustomEvent) {
|
||||
vibrate();
|
||||
useTimeoutFn(() => {
|
||||
event.target.complete();
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function getStatusColor(status: string) {
|
||||
return status === "pending" ? "warning" : "medium";
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
return status === "pending" ? "待确认" : "处理中";
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ui-toolbar">
|
||||
<ui-back-button slot="start" />
|
||||
<ion-title>{{ t("asset.revenue.pendingRevenue") }}</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 class="container">
|
||||
<!-- 待确认总金额卡片 -->
|
||||
<div class="bg-text-900 rounded-xl p-6 mb-4">
|
||||
<div class="text-sm text-text-400 mb-2">
|
||||
待确认总金额
|
||||
</div>
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="text-3xl font-bold">
|
||||
{{ formatAmountWithSplit(totalPending) }}
|
||||
</div>
|
||||
<div class="text-sm text-text-400 mb-1">
|
||||
USDT
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-3 text-xs text-text-400">
|
||||
<i-ic-baseline-info class="text-base" />
|
||||
<span>收益将在预计日期后1-3个工作日内到账</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待确认收益列表 -->
|
||||
<div class="mb-3">
|
||||
<div class="text-base font-medium mb-3">
|
||||
待确认明细
|
||||
</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 }}
|
||||
</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>
|
||||
<div class="text-right">
|
||||
<div class="text-lg font-bold">
|
||||
+{{ formatAmountWithSplit(item.amount) }}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- 说明信息 -->
|
||||
<div class="mt-6 p-4 bg-text-950 rounded-xl">
|
||||
<div class="flex items-start gap-2">
|
||||
<!-- <i-ic-baseline-lightbulb-outline class="text-yellow-500 text-lg mt-0.5 flex-shrink-0" /> -->
|
||||
<div class="text-xs text-text-400 leading-relaxed">
|
||||
<div class="font-medium mb-2">
|
||||
待确认收益说明:
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div>• 分红收益:预计在分红日后2-3个工作日到账</div>
|
||||
<div>• 资产增值:预计在结算日后1-2个工作日到账</div>
|
||||
<div>• 交易收益:预计在交易完成后1个工作日到账</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped>
|
||||
.container {
|
||||
--title-font-size: 16px;
|
||||
}
|
||||
|
||||
ion-list {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user