137 lines
4.6 KiB
Vue
137 lines
4.6 KiB
Vue
<script lang='ts' setup>
|
|
import type { RefresherCustomEvent } from "@ionic/vue";
|
|
import { client, safeClient } from "@/api";
|
|
|
|
const { t } = useI18n();
|
|
const { vibrate } = useHaptics();
|
|
|
|
const { data, execute } = safeClient(client.api.earnings.pending.get());
|
|
|
|
async function handleRefresh(event: RefresherCustomEvent) {
|
|
vibrate();
|
|
await execute().finally(() => {
|
|
event.target.complete();
|
|
});
|
|
}
|
|
|
|
function getStatusColor(status?: string) {
|
|
return status === "pending" ? "warning" : "medium";
|
|
}
|
|
|
|
function getStatusText(status?: string) {
|
|
return status === "pending" ? t("revenue.pending.statusPending") : t("revenue.pending.statusProcessing");
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header class="ion-no-border">
|
|
<ion-toolbar class="ion-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">
|
|
{{ t("revenue.pending.totalPending") }}
|
|
</div>
|
|
<div class="flex items-end gap-2">
|
|
<div class="text-3xl font-bold">
|
|
{{ formatAmountWithSplit(data?.total) }}
|
|
</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>{{ t("revenue.pending.accountTip") }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 待确认收益列表 -->
|
|
<div class="mb-3">
|
|
<div class="text-base font-medium mb-3">
|
|
{{ t("revenue.pending.detailTitle") }}
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</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>{{ t("revenue.pending.expectedDate") }}{{ useDateFormat(item.expectedAt, 'YY/MM/DD') }}</span>
|
|
</div>
|
|
</div>
|
|
</ion-item>
|
|
</ion-list>
|
|
</template>
|
|
|
|
<!-- 说明信息 -->
|
|
<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">
|
|
{{ t("revenue.pending.noteTitle") }}
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div>{{ t("revenue.pending.dividendNote") }}</div>
|
|
<div>{{ t("revenue.pending.appreciationNote") }}</div>
|
|
<div>{{ t("revenue.pending.tradeNote") }}</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>
|