feat：【mall 商城】商城首页的迁移【antd】40%：member-funnel-card.vue、member-terminal-card.vue

apps/web-antd/src/api/mall/statistics/member.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';
 
@@ -82,7 +82,10 @@ export function getMemberAnalyse(params: MallMemberStatisticsApi.AnalyseReq) {
     '/statistics/member/analyse',
     {
       params: {
-        times: [formatDate(params.times[0]), formatDate(params.times[1])],
+        times: [
+          formatDateTime(params.times[0]),
+          formatDateTime(params.times[1]),
+        ],
       },
     },
   );

apps/web-antd/src/api/system/user/index.ts

@@ -23,6 +23,7 @@ export namespace SystemUserApi {
 
 /** 查询用户管理列表 */
 export function getUserPage(params: PageParam) {
+  debugger
   return requestClient.get<PageResult<SystemUserApi.User>>(
     '/system/user/page',
     { params },

apps/web-antd/src/components/shortcut-date-range-picker/index.ts

@@ -0,0 +1 @@
+export { default as ShortcutDateRangePicker } from './shortcut-date-range-picker.vue';

apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import { onMounted, ref } from 'vue';
+
+import { DatePicker, Radio, RadioGroup } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { getRangePickerDefaultProps } from '#/utils/rangePickerProps';
+
+/** 快捷日期范围选择组件 */
+defineOptions({ name: 'ShortcutDateRangePicker' });
+
+/** 触发事件：时间范围选中 */
+const emits = defineEmits<{
+  change: [times: [Dayjs, Dayjs]];
+}>();
+
+/** 时间范围类型枚举 */
+enum TimeRangeType {
+  LAST_7_DAYS = 7,
+  LAST_30_DAYS = 30,
+  YESTERDAY = 1,
+}
+
+const timeRangeType = ref<TimeRangeType>(TimeRangeType.LAST_7_DAYS); // 默认选中最近7天
+const times = ref<[Dayjs, Dayjs]>(); // 日期范围
+
+/** 获取 RangePicker 的默认配置 */
+const rangePickerProps = getRangePickerDefaultProps();
+
+/** 时间范围配置 */
+const timeRangeOptions = [
+  { label: '昨天', value: TimeRangeType.YESTERDAY },
+  { label: '最近 7 天', value: TimeRangeType.LAST_7_DAYS },
+  { label: '最近 30 天', value: TimeRangeType.LAST_30_DAYS },
+];
+
+/** 设置时间范围 */
+function setTimes() {
+  let beginTime: Dayjs;
+  let endTime: Dayjs;
+
+  switch (timeRangeType.value) {
+    case TimeRangeType.LAST_7_DAYS: {
+      beginTime = dayjs().subtract(7, 'day').startOf('day');
+      endTime = dayjs().subtract(1, 'day').endOf('day');
+      break;
+    }
+    case TimeRangeType.LAST_30_DAYS: {
+      beginTime = dayjs().subtract(30, 'day').startOf('day');
+      endTime = dayjs().subtract(1, 'day').endOf('day');
+      break;
+    }
+    case TimeRangeType.YESTERDAY: {
+      beginTime = dayjs().subtract(1, 'day').startOf('day');
+      endTime = dayjs().subtract(1, 'day').endOf('day');
+      break;
+    }
+    default: {
+      beginTime = dayjs().subtract(7, 'day').startOf('day');
+      endTime = dayjs().subtract(1, 'day').endOf('day');
+    }
+  }
+
+  times.value = [beginTime, endTime];
+}
+
+/** 快捷日期单选按钮选中 */
+async function handleShortcutDaysChange() {
+  // 设置时间范围
+  setTimes();
+  // 触发时间范围选中事件
+  emitDateRangePicker();
+}
+
+/** 日期范围改变 */
+function handleDateRangeChange() {
+  emitDateRangePicker();
+}
+
+/** 触发时间范围选中事件 */
+function emitDateRangePicker() {
+  if (times.value && times.value.length === 2) {
+    emits('change', times.value);
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  handleShortcutDaysChange();
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <RadioGroup
+      v-model:value="timeRangeType"
+      @change="handleShortcutDaysChange"
+    >
+      <Radio
+        v-for="option in timeRangeOptions"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </Radio>
+    </RadioGroup>
+    <DatePicker.RangePicker
+      v-model:value="times"
+      :show-time="rangePickerProps.showTime"
+      :format="rangePickerProps.format"
+      :value-format="rangePickerProps.valueFormat"
+      class="!w-[240px]"
+      @change="handleDateRangeChange"
+    />
+    <slot></slot>
+  </div>
+</template>

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

@@ -3,11 +3,12 @@ import type { Dayjs } from 'dayjs';
 
 import { ref } from 'vue';
 
-import { Card, DatePicker } from 'ant-design-vue';
+import { fenToYuan } from '@vben/utils';
 
-import { erpCalculatePercentage, fenToYuan } from '@vben/utils';
+import { Card } from 'ant-design-vue';
 
 import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { ShortcutDateRangePicker } from '#/components/shortcut-date-range-picker';
 
 /** 会员概览卡片 */
 defineOptions({ name: 'MemberFunnelCard' });
@@ -16,15 +17,25 @@ const loading = ref(false);
 const analyseData = ref<any>();
 
 /** 查询会员概览数据列表 */
-const handleTimeRangeChange = async (times: [Dayjs, Dayjs]) => {
+async function loadData(times: [Dayjs, Dayjs]) {
-  if (!times || times.length !== 2) return;
+  if (!times || times.length !== 2) {
+    return;
+  }
+
   loading.value = true;
   try {
     // 查询数据
-    analyseData.value = await MemberStatisticsApi.getMemberAnalyse({ times });
+    analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+      times: [times[0].toDate(), times[1].toDate()],
+    });
   } finally {
     loading.value = false;
   }
+}
+
+/** 时间范围改变 */
+const handleTimeRangeChange = (times: [Dayjs, Dayjs]) => {
+  loadData(times);
 };
 
 /** 计算环比增长率 */
@@ -39,7 +50,7 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
     <template #title>
       <div class="flex items-center justify-between">
         <span>会员概览</span>
-        <DatePicker.RangePicker @change="handleTimeRangeChange" />
+        <ShortcutDateRangePicker @change="handleTimeRangeChange" />
       </div>
     </template>
     <div class="min-w-[900px] py-7">
@@ -148,4 +159,3 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
   transform: perspective(3em) rotateX(-13deg);
 }
 </style>
-

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

@@ -3,10 +3,10 @@ import type { EchartsUIType } from '@vben/plugins/echarts';
 
 import { onMounted, ref } from 'vue';
 
-import { Card, Spin } from 'ant-design-vue';
-
-import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { getDictOptions } from '@vben/hooks';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Card, Spin } from 'ant-design-vue';
 
 import * as MemberStatisticsApi from '#/api/mall/statistics/member';
 
@@ -47,10 +47,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card :bordered="false" title="会员终端">
+  <Card :bordered="false" title="会员终端" class="h-full">
     <Spin :spinning="loading">
-      <EchartsUI ref="chartRef" class="h-[300px] w-full" />
+      <EchartsUI ref="chartRef" class="h-[380px] w-full" />
     </Spin>
   </Card>
 </template>
-