<template>
|
<NutGrid :gutter="10" :column-num="3" square class="dashboard-view">
|
<NutGridItem>
|
<div class="pro-statistics-wrapper">
|
<div class="pro-statistics-title">累计收款</div>
|
<div class="pro-statistics-content">
|
{{ toThousand(topStatistics?.accumulatedReceipts ?? 0) }}
|
</div>
|
</div>
|
</NutGridItem>
|
<NutGridItem>
|
<div class="pro-statistics-wrapper">
|
<div class="pro-statistics-title">昨日收款</div>
|
<div class="pro-statistics-content">
|
{{ toThousand(topStatistics?.receiptsYesterday ?? 0) }}
|
</div>
|
</div>
|
</NutGridItem>
|
<NutGridItem>
|
<div class="pro-statistics-wrapper">
|
<div class="pro-statistics-title">累计收益</div>
|
<div class="pro-statistics-content">
|
{{ toThousand(topStatistics?.accumulatedIncome ?? 0) }}
|
</div>
|
</div>
|
</NutGridItem>
|
<NutGridItem>
|
<div class="pro-statistics-wrapper">
|
<div class="pro-statistics-title">累计下单</div>
|
<div class="pro-statistics-content">{{ topStatistics?.accumulatedOrders ?? 0 }}</div>
|
</div>
|
</NutGridItem>
|
<NutGridItem>
|
<div class="pro-statistics-wrapper">
|
<div class="pro-statistics-title">昨日下单</div>
|
<div class="pro-statistics-content">{{ topStatistics?.ordersNumYesterday ?? 0 }}</div>
|
</div>
|
</NutGridItem>
|
<NutGridItem>
|
<div class="pro-statistics-wrapper">
|
<div class="pro-statistics-title">昨日成功</div>
|
<div class="pro-statistics-content">{{ topStatistics?.yesterdaySuccess ?? 0 }}</div>
|
</div>
|
</NutGridItem>
|
<NutGridItem>
|
<div class="pro-statistics-wrapper">
|
<div class="pro-statistics-title">累计用户</div>
|
<div class="pro-statistics-content">{{ topStatistics?.accumulatedUsers ?? 0 }}</div>
|
</div>
|
</NutGridItem>
|
<NutGridItem>
|
<div class="pro-statistics-wrapper">
|
<div class="pro-statistics-title">昨日活跃</div>
|
<div class="pro-statistics-content">{{ topStatistics?.yesterdayActiveUsers ?? 0 }}</div>
|
</div>
|
</NutGridItem>
|
</NutGrid>
|
</template>
|
|
<script setup lang="ts">
|
import { Grid as NutGrid, GridItem as NutGridItem } from '@nutui/nutui-taro';
|
import { toThousand } from '../../utils';
|
import { useQuery } from '@tanstack/vue-query';
|
import { useLifeRechargeContext, TopStatisticsOutput } from '@life-payment/core-vue';
|
import { computed } from 'vue';
|
|
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.userChannles.length > 0),
|
});
|
</script>
|