feat：【mall 商城】商城首页的迁移【ele】100%：评审完成

apps/web-ele/src/api/mall/statistics/common.ts

@@ -1,5 +1,5 @@
 /** 数据对照 Response */
-export interface MallDataComparisonResp<T> {
+export interface DataComparisonRespVO<T> {
   value: T;
   reference: T;
 }

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

@@ -1,73 +1,73 @@
-import type { MallDataComparisonResp } from './common';
+import type { Dayjs } from 'dayjs';
 
-import { formatDate2 } from '@vben/utils';
+import type { DataComparisonRespVO } from './common';
+
+import { formatDateTime } from '@vben/utils';
 
 import { requestClient } from '#/api/request';
 
 export namespace MallMemberStatisticsApi {
   /** 会员分析 Request */
-  export interface AnalyseReq {
-    times: Date[];
+  export interface MemberAnalyseReqVO {
+    times: Date[] | Dayjs[]; // 时间范围
   }
 
   /** 会员分析对照数据 Response */
   export interface AnalyseComparison {
-    registerUserCount: number;
-    visitUserCount: number;
-    rechargeUserCount: number;
+    registerUserCount: number; // 注册用户数
+    visitUserCount: number; // 访问用户数
+    rechargeUserCount: number; // 充值用户数
   }
 
   /** 会员分析 Response */
   export interface Analyse {
-    visitUserCount: number;
-    orderUserCount: number;
-    payUserCount: number;
-    atv: number;
-    comparison: MallDataComparisonResp<AnalyseComparison>;
+    visitUserCount: number; // 访问用户数
+    orderUserCount: number; // 下单用户数
+    payUserCount: number; // 支付用户数
+    atv: number; // 平均客单价
+    comparison: DataComparisonRespVO<AnalyseComparison>; // 对照数据
   }
 
   /** 会员地区统计 Response */
   export interface AreaStatistics {
-    areaId: number;
-    areaName: string;
-    userCount: number;
-    orderCreateUserCount: number;
-    orderPayUserCount: number;
-    orderPayPrice: number;
+    areaId: number; // 地区ID
+    areaName: string; // 地区名称
+    userCount: number; // 用户数
+    orderCreateUserCount: number; // 下单用户数
+    orderPayUserCount: number; // 支付用户数
+    orderPayPrice: number; // 支付金额
   }
 
   /** 会员性别统计 Response */
   export interface SexStatistics {
-    sex: number;
-    userCount: number;
+    sex: number; // 性别
+    userCount: number; // 用户数
   }
 
   /** 会员统计 Response */
   export interface Summary {
-    userCount: number;
-    rechargeUserCount: number;
-    rechargePrice: number;
-    expensePrice: number;
+    userCount: number; // 用户数
+    rechargeUserCount: number; // 充值用户数
+    rechargePrice: number; // 充值金额
+    expensePrice: number; // 消费金额
   }
 
   /** 会员终端统计 Response */
   export interface TerminalStatistics {
-    terminal: number;
-    userCount: number;
+    terminal: number; // 终端
+    userCount: number; // 用户数
   }
 
   /** 会员数量统计 Response */
-  export interface Count {
-    /** 用户访问量 */
-    visitUserCount: string;
-    /** 注册用户数量 */
-    registerUserCount: number;
+  export interface MemberCountRespVO {
+    visitUserCount: string; // 用户访问量
+    registerUserCount: number; // 注册用户数量
   }
 
   /** 会员注册数量 Response */
   export interface RegisterCount {
-    date: string;
-    count: number;
+    date: string; // 日期
+    count: number; // 数量
   }
 }
 
@@ -79,14 +79,16 @@ export function getMemberSummary() {
 }
 
 /** 查询会员分析数据 */
-export function getMemberAnalyse(params: MallMemberStatisticsApi.AnalyseReq) {
+export function getMemberAnalyse(
+  params: MallMemberStatisticsApi.MemberAnalyseReqVO,
+) {
   return requestClient.get<MallMemberStatisticsApi.Analyse>(
     '/statistics/member/analyse',
     {
       params: {
         times: [
-          formatDate2(params.times[0] || new Date()),
-          formatDate2(params.times[1] || new Date()),
+          formatDateTime(params.times[0]),
+          formatDateTime(params.times[1]),
         ],
       },
     },
@@ -117,7 +119,7 @@ export function getMemberTerminalStatisticsList() {
 /** 获得用户数量量对照 */
 export function getUserCountComparison() {
   return requestClient.get<
-    MallDataComparisonResp<MallMemberStatisticsApi.Count>
+    DataComparisonRespVO<MallMemberStatisticsApi.MemberCountRespVO>
   >('/statistics/member/user-count-comparison');
 }
 
@@ -127,7 +129,7 @@ export function getMemberRegisterCountList(beginTime: Date, endTime: Date) {
     '/statistics/member/register-count-list',
     {
       params: {
-        times: [formatDate2(beginTime), formatDate2(endTime)],
+        times: [formatDateTime(beginTime), formatDateTime(endTime)],
       },
     },
   );

apps/web-ele/src/api/mall/statistics/product.ts

@@ -1,8 +1,6 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import type { MallDataComparisonResp } from './common';
-
-import { formatDate2 } from '@vben/utils';
+import type { DataComparisonRespVO } from './common';
 
 import { requestClient } from '#/api/request';
 
@@ -40,58 +38,26 @@ export namespace MallProductStatisticsApi {
     /** 浏览转化率 */
     browseConvertPercent: number;
   }
-
-  /** 会员分析 Request */
-  export interface ProductStatisticsReq {
-    times: Date[];
-  }
 }
 
 /** 获得商品统计分析 */
-export function getProductStatisticsAnalyse(
-  params: MallProductStatisticsApi.ProductStatisticsReq,
-) {
+export function getProductStatisticsAnalyse(params: PageParam) {
   return requestClient.get<
-    MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>
-  >('/statistics/product/analyse', {
-    params: {
-      times: [
-        formatDate2(params.times[0] || new Date()),
-        formatDate2(params.times[1] || new Date()),
-      ],
-    },
-  });
+    DataComparisonRespVO<MallProductStatisticsApi.ProductStatistics>
+  >('/statistics/product/analyse', { params });
 }
 
 /** 获得商品状况明细 */
-export function getProductStatisticsList(
-  params: MallProductStatisticsApi.ProductStatisticsReq,
-) {
+export function getProductStatisticsList(params: PageParam) {
   return requestClient.get<MallProductStatisticsApi.ProductStatistics[]>(
     '/statistics/product/list',
-    {
-      params: {
-        times: [
-          formatDate2(params.times[0] || new Date()),
-          formatDate2(params.times[1] || new Date()),
-        ],
-      },
-    },
+    { params },
   );
 }
 
 /** 导出获得商品状况明细 Excel */
-export function exportProductStatisticsExcel(
-  params: MallProductStatisticsApi.ProductStatisticsReq,
-) {
-  return requestClient.download('/statistics/product/export-excel', {
-    params: {
-      times: [
-        formatDate2(params.times[0] || new Date()),
-        formatDate2(params.times[1] || new Date()),
-      ],
-    },
-  });
+export function exportProductStatisticsExcel(params: PageParam) {
+  return requestClient.download('/statistics/product/export-excel', { params });
 }
 
 /** 获得商品排行榜分页 */

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

@@ -1,6 +1,6 @@
-import type { MallDataComparisonResp } from './common';
+import type { DataComparisonRespVO } from './common';
 
-import { formatDate2 } from '@vben/utils';
+import { formatDate, formatDateTime } from '@vben/utils';
 
 import { requestClient } from '#/api/request';
 
@@ -15,7 +15,7 @@ export namespace MallTradeStatisticsApi {
 
   /** 交易状况 Request */
   export interface TradeTrendReq {
-    times: Date[];
+    times: [Date, Date];
   }
 
   /** 交易状况统计 Response */
@@ -43,7 +43,7 @@ export namespace MallTradeStatisticsApi {
   }
 
   /** 交易订单统计 Response */
-  export interface TradeOrderSummary {
+  export interface TradeOrderSummaryRespVO {
     /** 支付订单商品数 */
     orderPayCount?: number;
     /** 总支付金额，单位：分 */
@@ -64,17 +64,14 @@ export namespace MallTradeStatisticsApi {
 /** 时间参数需要格式化, 确保接口能识别 */
 const formatDateParam = (params: MallTradeStatisticsApi.TradeTrendReq) => {
   return {
-    times: [
-      formatDate2(params.times[0] || new Date()),
-      formatDate2(params.times[1] || new Date()),
-    ],
-  };
+    times: [formatDate(params.times[0]), formatDate(params.times[1])],
+  } as MallTradeStatisticsApi.TradeTrendReq;
 };
 
 /** 查询交易统计 */
 export function getTradeStatisticsSummary() {
   return requestClient.get<
-    MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>
+    DataComparisonRespVO<MallTradeStatisticsApi.TradeSummary>
   >('/statistics/trade/summary');
 }
 
@@ -83,7 +80,7 @@ export function getTradeStatisticsAnalyse(
   params: MallTradeStatisticsApi.TradeTrendReq,
 ) {
   return requestClient.get<
-    MallDataComparisonResp<MallTradeStatisticsApi.TradeTrendSummary>
+    DataComparisonRespVO<MallTradeStatisticsApi.TradeTrendSummary>
   >('/statistics/trade/analyse', { params: formatDateParam(params) });
 }
 
@@ -116,7 +113,7 @@ export function getOrderCount() {
 /** 获得交易订单数量对照 */
 export function getOrderComparison() {
   return requestClient.get<
-    MallDataComparisonResp<MallTradeStatisticsApi.TradeOrderSummary>
+    DataComparisonRespVO<MallTradeStatisticsApi.TradeOrderSummaryRespVO>
   >('/statistics/trade/order-comparison');
 }
 
@@ -127,12 +124,12 @@ export function getOrderCountTrendComparison(
   endTime: Date,
 ) {
   return requestClient.get<
-    MallDataComparisonResp<MallTradeStatisticsApi.TradeOrderTrend>[]
+    DataComparisonRespVO<MallTradeStatisticsApi.TradeOrderTrend>[]
   >('/statistics/trade/order-count-trend', {
     params: {
       type,
-      beginTime: formatDate2(beginTime),
-      endTime: formatDate2(endTime),
+      beginTime: formatDateTime(beginTime),
+      endTime: formatDateTime(endTime),
     },
   });
 }

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

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

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

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import { onMounted, ref } from 'vue';
+
+import dayjs from 'dayjs';
+import { ElDatePicker, ElRadio, ElRadioGroup } from 'element-plus';
+
+import { getRangePickerDefaultProps } from '#/utils/rangePickerProps';
+
+/** 快捷日期范围选择组件 */
+defineOptions({ name: 'ShortcutDateRangePicker' });
+
+const emits = defineEmits<{
+  change: [times: [Dayjs, Dayjs]];
+}>();
+
+const times = ref<[Dayjs, Dayjs]>(); // 日期范围
+
+const rangePickerProps = getRangePickerDefaultProps();
+
+const timeRangeOptions = [
+  {
+    label: '昨天',
+    value: () => [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+  {
+    label: '最近 7 天',
+    value: () => [
+      dayjs().subtract(7, 'day').startOf('day'),
+      dayjs().endOf('day'),
+    ],
+  },
+  {
+    label: '最近 30 天',
+    value: () => [
+      dayjs().subtract(30, 'day').startOf('day'),
+      dayjs().endOf('day'),
+    ],
+  },
+];
+
+const timeRangeType = ref(timeRangeOptions[1]!.label); // 默认选中"最近 7 天"
+
+/** 设置时间范围 */
+function setTimes() {
+  // 根据选中的选项设置时间范围
+  const selectedOption = timeRangeOptions.find(
+    (option) => option.label === timeRangeType.value,
+  );
+  if (selectedOption) {
+    times.value = selectedOption.value() as [Dayjs, Dayjs];
+  }
+}
+
+/** 快捷日期单选按钮选中 */
+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">
+    <ElRadioGroup v-model="timeRangeType" @change="handleShortcutDaysChange">
+      <ElRadio
+        v-for="option in timeRangeOptions"
+        :key="option.label"
+        :value="option.label"
+      >
+        {{ option.label }}
+      </ElRadio>
+    </ElRadioGroup>
+    <ElDatePicker
+      v-model="times as any"
+      type="daterange"
+      :shortcuts="rangePickerProps.shortcuts"
+      :format="rangePickerProps.format"
+      :value-format="rangePickerProps.valueFormat"
+      :start-placeholder="rangePickerProps.startPlaceholder"
+      :end-placeholder="rangePickerProps.endPlaceholder"
+      :default-time="rangePickerProps.defaultTime as any"
+      class="!w-[360px]"
+      @change="handleDateRangeChange"
+    />
+    <slot></slot>
+  </div>
+</template>

apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue

@@ -1,38 +1,30 @@
 <script lang="ts" setup>
 import type { Dayjs } from 'dayjs';
 
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-import { ElCard, ElDatePicker } from 'element-plus';
-import dayjs from 'dayjs';
+import { ElCard } from 'element-plus';
 
 import * as MemberStatisticsApi from '#/api/mall/statistics/member';
-import { getRangePickerDefaultProps } from '#/utils/rangePickerProps';
+import { ShortcutDateRangePicker } from '#/components/shortcut-date-range-picker';
 
 /** 会员概览卡片 */
 defineOptions({ name: 'MemberFunnelCard' });
 
 const loading = ref(false);
 const analyseData = ref<any>();
-const dateRange = ref<[Dayjs, Dayjs]>([
-  dayjs().subtract(7, 'day').startOf('day'),
-  dayjs().endOf('day'),
-]);
-
-const rangePickerProps = getRangePickerDefaultProps();
 
 /** 查询会员概览数据列表 */
-async function loadData(times?: [Dayjs, Dayjs]) {
-  const timesToUse = times || dateRange.value;
-  if (!timesToUse || timesToUse.length !== 2) {
+async function loadData(times: [Dayjs, Dayjs]) {
+  if (!times || times.length !== 2) {
     return;
   }
   loading.value = true;
   try {
     analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
-      times: timesToUse,
+      times,
     });
   } finally {
     loading.value = false;
@@ -40,10 +32,8 @@ async function loadData(times?: [Dayjs, Dayjs]) {
 }
 
 /** 时间范围改变 */
-const handleDateRangeChange = () => {
-  if (dateRange.value && dateRange.value.length === 2) {
-    loadData(dateRange.value);
-  }
+const handleTimeRangeChange = (times: [Dayjs, Dayjs]) => {
+  loadData(times);
 };
 
 /** 计算环比增长率 */
@@ -53,11 +43,6 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
   }
   return (((value || 0) - reference) / reference) * 100;
 };
-
-/** 初始化 */
-onMounted(() => {
-  loadData();
-});
 </script>
 
 <template>
@@ -65,18 +50,7 @@ onMounted(() => {
     <template #header>
       <div class="flex items-center justify-between">
         <span>会员概览</span>
-        <ElDatePicker
-          v-model="dateRange"
-          type="datetimerange"
-          :shortcuts="rangePickerProps.shortcuts"
-          :format="rangePickerProps.format"
-          :value-format="rangePickerProps.valueFormat"
-          :start-placeholder="rangePickerProps.startPlaceholder"
-          :end-placeholder="rangePickerProps.endPlaceholder"
-          :default-time="rangePickerProps.defaultTime"
-          class="!w-[280px]"
-          @change="handleDateRangeChange"
-        />
+        <ShortcutDateRangePicker @change="handleTimeRangeChange" />
       </div>
     </template>
     <div v-loading="loading" class="min-w-[900px] py-4">