<template>
|
<div class="dashboard-view">
|
<Chunk title="核心数据">
|
<DashboardLargeCell class="dashboard-large-cell1">
|
<DashboardItem
|
title="累计收款"
|
:icon="IconDashboard1"
|
:value="toThousand(topStatistics?.accumulatedReceipts ?? 0)"
|
need-symbol
|
/>
|
<DashboardItem
|
title="昨日收款"
|
:icon="IconDashboard2"
|
:value="toThousand(topStatistics?.receiptsYesterday ?? 0)"
|
need-symbol
|
/>
|
</DashboardLargeCell>
|
<div class="dashboard-item-grad">
|
<DashboardItem
|
title="累计下单"
|
:icon="IconDashboard3"
|
:value="toThousand(topStatistics?.accumulatedOrders ?? 0)"
|
/>
|
<DashboardItem
|
title="昨日下单"
|
:icon="IconDashboard4"
|
:value="toThousand(topStatistics?.ordersNumYesterday ?? 0)"
|
/>
|
<DashboardItem
|
title="累计收益"
|
:icon="IconDashboard5"
|
:value="toThousand(topStatistics?.accumulatedIncome ?? 0)"
|
need-symbol
|
/>
|
<DashboardItem
|
title="昨日成功"
|
:icon="IconDashboard6"
|
:value="toThousand(topStatistics?.yesterdaySuccess ?? 0)"
|
/>
|
</div>
|
</Chunk>
|
<Chunk title="用户统计">
|
<DashboardLargeCell>
|
<DashboardItem
|
title="累计用户"
|
:icon="IconDashboard7"
|
:value="toThousand(topStatistics?.accumulatedUsers ?? 0)"
|
/>
|
<DashboardItem
|
title="昨日活跃"
|
:icon="IconDashboard8"
|
:value="toThousand(topStatistics?.yesterdayActiveUsers ?? 0)"
|
/>
|
</DashboardLargeCell>
|
</Chunk>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { toThousand } from '../../utils';
|
import { useQuery } from '@tanstack/vue-query';
|
import { useLifeRechargeContext, TopStatisticsOutput } from '@life-payment/core-vue';
|
import { computed } from 'vue';
|
import Chunk from '../../components/Layout/Chunk.vue';
|
import DashboardLargeCell from './components/DashboardLargeCell.vue';
|
import DashboardItem from './components/DashboardItem.vue';
|
import IconDashboard1 from '../../assets/dashboard/icon-dashboard1.png';
|
import IconDashboard2 from '../../assets/dashboard/icon-dashboard2.png';
|
import IconDashboard3 from '../../assets/dashboard/icon-dashboard3.png';
|
import IconDashboard4 from '../../assets/dashboard/icon-dashboard4.png';
|
import IconDashboard5 from '../../assets/dashboard/icon-dashboard5.png';
|
import IconDashboard6 from '../../assets/dashboard/icon-dashboard6.png';
|
import IconDashboard7 from '../../assets/dashboard/icon-dashboard7.png';
|
import IconDashboard8 from '../../assets/dashboard/icon-dashboard8.png';
|
|
defineOptions({
|
name: 'Dashboard',
|
});
|
|
const { blLifeRecharge } = useLifeRechargeContext();
|
|
const { data: topStatistics } = useQuery({
|
queryKey: ['lifePayServices/getTopStatistics', blLifeRecharge.accountModel.userChannles],
|
queryFn: async () => {
|
return await blLifeRecharge.services.getTopStatistics(
|
{
|
channleList: blLifeRecharge.accountModel.userChannles.map((x) => x.channlesNum),
|
},
|
{
|
showLoading: false,
|
}
|
);
|
},
|
placeholderData: () => ({} as TopStatisticsOutput),
|
enabled: computed(() => blLifeRecharge.accountModel.isBackClientUser),
|
});
|
</script>
|
