From 9453bef1fc4a3121b28ffa6617f0fbfc81d9f634 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期一, 19 五月 2025 17:35:11 +0800
Subject: [PATCH] fix: 修改首页ui
---
packages/components/src/views/Mine/Dashboard.vue | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 103 insertions(+), 11 deletions(-)
diff --git a/packages/components/src/views/Mine/Dashboard.vue b/packages/components/src/views/Mine/Dashboard.vue
index 2091d85..2dbf5c5 100644
--- a/packages/components/src/views/Mine/Dashboard.vue
+++ b/packages/components/src/views/Mine/Dashboard.vue
@@ -1,61 +1,153 @@
<template>
- <NutGrid :gutter="10" :column-num="3" square class="dashboard-view">
+ <!-- <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(8888) }}</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(8888) }}</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(8888) }}</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">{{ 8888 }}</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">{{ 8888 }}</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">{{ 8888 }}</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">{{ 8888 }}</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">{{ 8888 }}</div>
+ <div class="pro-statistics-content">{{ topStatistics?.yesterdayActiveUsers ?? 0 }}</div>
</div>
</NutGridItem>
- </NutGrid>
+ </NutGrid> -->
+ <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 { 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';
+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>
--
Gitblit v1.9.1