feat：【mall 商城】商城首页的迁移【antd】55%：member-stat 修复缺陷

apps/web-antd/src/api/mall/statistics/member.ts

@@ -2,7 +2,7 @@ import type { Dayjs } from 'dayjs';
 
 import type { DataComparisonRespVO } from './common';
 
-import { formatDate, formatDateTime } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';
 
 import { requestClient } from '#/api/request';
 
@@ -79,7 +79,9 @@ export function getMemberSummary() {
 }
 
 /** 查询会员分析数据 */
-export function getMemberAnalyse(params: MallMemberStatisticsApi.MemberAnalyseReqVO) {
+export function getMemberAnalyse(
+  params: MallMemberStatisticsApi.MemberAnalyseReqVO,
+) {
   return requestClient.get<MallMemberStatisticsApi.Analyse>(
     '/statistics/member/analyse',
     {
@@ -127,7 +129,7 @@ export function getMemberRegisterCountList(beginTime: Date, endTime: Date) {
     '/statistics/member/register-count-list',
     {
       params: {
-        times: [formatDate(beginTime), formatDate(endTime)],
+        times: [formatDateTime(beginTime), formatDateTime(endTime)],
       },
     },
   );

apps/web-antd/src/api/mall/statistics/trade.ts

@@ -1,6 +1,6 @@
 import type { DataComparisonRespVO } from './common';
 
-import { formatDate } from '@vben/utils';
+import { formatDate, formatDateTime } from '@vben/utils';
 
 import { requestClient } from '#/api/request';
 
@@ -128,8 +128,8 @@ export function getOrderCountTrendComparison(
   >('/statistics/trade/order-count-trend', {
     params: {
       type,
-      beginTime: formatDate(beginTime),
-      endTime: formatDate(endTime),
+      beginTime: formatDateTime(beginTime),
+      endTime: formatDateTime(endTime),
     },
   });
 }

apps/web-antd/src/views/mall/home/modules/member-statistics-card.vue

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
 import { onMounted, ref } from 'vue';
 
-import dayjs from 'dayjs';
-import { Card, Spin } from 'ant-design-vue';
-
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
+import { Card, Radio, RadioGroup, Spin } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
 import * as MemberStatisticsApi from '#/api/mall/statistics/member';
 
-import { getMemberStatisticsChartOptions } from './member-statistics-chart-options';
+import {
+  getMemberStatisticsChartOptions,
+  TimeRangeTypeEnum,
+} from './member-statistics-chart-options';
 
 /** 会员用户统计卡片 */
 defineOptions({ name: 'MemberStatisticsCard' });
@@ -19,34 +24,97 @@ const loading = ref(false);
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
-const getMemberRegisterCountList = async () => {
+const timeRangeConfig = {
+  [TimeRangeTypeEnum.DAY30]: {
+    name: '30 天',
+  },
+  [TimeRangeTypeEnum.WEEK]: {
+    name: '周',
+  },
+  [TimeRangeTypeEnum.MONTH]: {
+    name: '月',
+  },
+  [TimeRangeTypeEnum.YEAR]: {
+    name: '年',
+  },
+}; // 时间范围 Map
+const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认 30 天
+
+/** 时间范围类型单选按钮选中 */
+const handleTimeRangeTypeChange = async () => {
+  // 设置时间范围
+  let beginTime: Dayjs;
+  let endTime: Dayjs;
+  switch (timeRangeType.value) {
+    case TimeRangeTypeEnum.DAY30: {
+      beginTime = dayjs().subtract(30, 'day').startOf('d');
+      endTime = dayjs().endOf('d');
+      break;
+    }
+    case TimeRangeTypeEnum.MONTH: {
+      beginTime = dayjs().startOf('month');
+      endTime = dayjs().endOf('month');
+      break;
+    }
+    case TimeRangeTypeEnum.WEEK: {
+      beginTime = dayjs().startOf('week');
+      endTime = dayjs().endOf('week');
+      break;
+    }
+    case TimeRangeTypeEnum.YEAR: {
+      beginTime = dayjs().startOf('year');
+      endTime = dayjs().endOf('year');
+      break;
+    }
+    default: {
+      throw new Error(`未知的时间范围类型: ${timeRangeType.value}`);
+    }
+  }
+  // 发送时间范围选中事件
+  await getMemberRegisterCountList(beginTime, endTime);
+};
+
+async function getMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
-    // 查询最近一月数据
-    const beginTime = dayjs().subtract(30, 'd').startOf('d');
-    const endTime = dayjs().endOf('d');
     const list = await MemberStatisticsApi.getMemberRegisterCountList(
-      beginTime,
-      endTime,
+      beginTime.toDate(),
+      endTime.toDate(),
     );
     // 更新 Echarts 数据
     await renderEcharts(getMemberStatisticsChartOptions(list));
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 初始化 */
 onMounted(() => {
-  getMemberRegisterCountList();
+  handleTimeRangeTypeChange();
 });
 </script>
 
 <template>
-  <Card :bordered="false" title="用户统计">
+  <Card :bordered="false">
+    <template #title>
+      <div class="flex items-center justify-between">
+        <span>用户统计</span>
+        <RadioGroup
+          v-model:value="timeRangeType"
+          @change="handleTimeRangeTypeChange"
+        >
+          <Radio
+            v-for="[key, value] in Object.entries(timeRangeConfig)"
+            :key="key"
+            :value="Number(key)"
+          >
+            {{ value.name }}
+          </Radio>
+        </RadioGroup>
+      </div>
+    </template>
     <Spin :spinning="loading">
       <EchartsUI ref="chartRef" class="h-[300px] w-full" />
     </Spin>
   </Card>
 </template>
-

apps/web-antd/src/views/mall/home/modules/member-statistics-chart-options.ts

@@ -1,8 +1,14 @@
 import dayjs from 'dayjs';
 
-/**
- * 会员统计图表配置
- */
+/** 时间范围类型枚举 */
+export enum TimeRangeTypeEnum {
+  DAY30 = 1,
+  MONTH = 30,
+  WEEK = 7,
+  YEAR = 365,
+}
+
+/** 会员统计图表配置 */
 export function getMemberStatisticsChartOptions(list: any[]): any {
   return {
     dataset: {
@@ -56,4 +62,3 @@ export function getMemberStatisticsChartOptions(list: any[]): any {
     },
   };
 }
-