!273 商城首页

Merge pull request !273 from 疯狂的世界/dev

Author: YunaiV

src/api/mall/statistics/common.ts

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

src/api/mall/statistics/member.ts

@@ -1,6 +1,6 @@
 import request from '@/config/axios'
 import dayjs from 'dayjs'
-import { TradeStatisticsComparisonRespVO } from '@/api/mall/statistics/trade'
+import { DataComparisonRespVO } from '@/api/mall/statistics/common'
 import { formatDate } from '@/utils/formatTime'
 
 /** 会员分析 Request VO */
@@ -10,17 +10,17 @@ export interface MemberAnalyseReqVO {
 
 /** 会员分析 Response VO */
 export interface MemberAnalyseRespVO {
-  visitorCount: number
+  visitUserCount: number
   orderUserCount: number
   payUserCount: number
   atv: number
-  comparison: TradeStatisticsComparisonRespVO<MemberAnalyseComparisonRespVO>
+  comparison: DataComparisonRespVO<MemberAnalyseComparisonRespVO>
 }
 
 /** 会员分析对照数据 Response VO */
 export interface MemberAnalyseComparisonRespVO {
-  userCount: number
-  activeUserCount: number
+  registerUserCount: number
+  visitUserCount: number
   rechargeUserCount: number
 }
 
@@ -29,8 +29,8 @@ export interface MemberAreaStatisticsRespVO {
   areaId: number
   areaName: string
   userCount: number
-  orderCreateCount: number
-  orderPayCount: number
+  orderCreateUserCount: number
+  orderPayUserCount: number
   orderPayPrice: number
 }
 
@@ -54,6 +54,20 @@ export interface MemberTerminalStatisticsRespVO {
   userCount: number
 }
 
+/** 会员数量统计 Response VO */
+export interface MemberCountRespVO {
+  /** 用户访问量 */
+  visitUserCount: string
+  /** 新增用户数量 */
+  createUserCount: number
+}
+
+/** 会员注册数量 Response VO */
+export interface MemberRegisterCountRespVO {
+  date: string
+  count: number
+}
+
 // 查询会员统计
 export const getMemberSummary = () => {
   return request.get<MemberSummaryRespVO>({
@@ -89,3 +103,21 @@ export const getMemberTerminalStatisticsList = () => {
     url: '/statistics/member/get-terminal-statistics-list'
   })
 }
+
+// 获得用户数量量对照
+export const getUserCountComparison = () => {
+  return request.get<DataComparisonRespVO<MemberCountRespVO>>({
+    url: '/statistics/member/user-count-comparison'
+  })
+}
+
+// 获得会员注册数量列表
+export const getMemberRegisterCountList = (
+  beginTime: dayjs.ConfigType,
+  endTime: dayjs.ConfigType
+) => {
+  return request.get<MemberRegisterCountRespVO[]>({
+    url: '/statistics/member/register-count-list',
+    params: { times: [formatDate(beginTime), formatDate(endTime)] }
+  })
+}

src/api/mall/statistics/pay.ts

@@ -0,0 +1,6 @@
+import request from '@/config/axios'
+
+/** 获取钱包充值金额 */
+export const getWalletRechargePrice = async () => {
+  return await request.get<number>({ url: `/statistics/pay/wallet-recharge-price` })
+}

src/api/mall/statistics/trade.ts

@@ -1,12 +1,7 @@
 import request from '@/config/axios'
 import dayjs from 'dayjs'
 import { formatDate } from '@/utils/formatTime'
-
-/** 交易统计对照 Response VO */
-export interface TradeStatisticsComparisonRespVO<T> {
-  value: T
-  reference: T
-}
+import { DataComparisonRespVO } from '@/api/mall/statistics/common'
 
 /** 交易统计 Response VO */
 export interface TradeSummaryRespVO {
@@ -24,46 +19,100 @@ export interface TradeTrendReqVO {
 /** 交易状况统计 Response VO */
 export interface TradeTrendSummaryRespVO {
   time: string
-  turnover: number
+  turnoverPrice: number
   orderPayPrice: number
   rechargePrice: number
   expensePrice: number
-  balancePrice: number
+  orderWalletPayPrice: number
   brokerageSettlementPrice: number
   orderRefundPrice: number
 }
 
+/** 交易订单数量 Response VO */
+export interface TradeOrderCountRespVO {
+  /** 待发货 */
+  undelivered?: number
+  /** 待核销 */
+  pickUp?: number
+  /** 退款中 */
+  afterSaleApply?: number
+  /** 提现待审核 */
+  auditingWithdraw?: number
+}
+
+/** 交易订单统计 Response VO */
+export interface TradeOrderSummaryRespVO {
+  /** 支付订单商品数 */
+  orderPayCount?: number
+  /** 总支付金额，单位：分 */
+  orderPayPrice?: number
+}
+
+/** 订单量趋势统计 Response VO */
+export interface TradeOrderTrendRespVO {
+  /** 日期 */
+  date: string
+  /** 订单数量 */
+  orderPayCount: number
+  /** 订单支付金额 */
+  orderPayPrice: number
+}
+
 // 查询交易统计
 export const getTradeStatisticsSummary = () => {
-  return request.get<TradeStatisticsComparisonRespVO<TradeSummaryRespVO>>({
+  return request.get<DataComparisonRespVO<TradeSummaryRespVO>>({
     url: '/statistics/trade/summary'
   })
 }
 
 // 获得交易状况统计
 export const getTradeTrendSummary = (params: TradeTrendReqVO) => {
-  return request.get<TradeStatisticsComparisonRespVO<TradeTrendSummaryRespVO>>({
+  return request.get<DataComparisonRespVO<TradeTrendSummaryRespVO>>({
     url: '/statistics/trade/trend/summary',
     params: formatDateParam(params)
   })
 }
 
 // 获得交易状况明细
-export const getTradeTrendList = (params: TradeTrendReqVO) => {
+export const getTradeStatisticsList = (params: TradeTrendReqVO) => {
   return request.get<TradeTrendSummaryRespVO[]>({
-    url: '/statistics/trade/trend/list',
+    url: '/statistics/trade/list',
     params: formatDateParam(params)
   })
 }
 
 // 导出交易状况明细
-export const exportTradeTrend = (params: TradeTrendReqVO) => {
+export const exportTradeStatisticsExcel = (params: TradeTrendReqVO) => {
   return request.download({
-    url: '/statistics/trade/trend/export-excel',
+    url: '/statistics/trade/export-excel',
     params: formatDateParam(params)
   })
 }
 
+// 获得交易订单数量
+export const getOrderCount = async () => {
+  return await request.get<TradeOrderCountRespVO>({ url: `/statistics/trade/order-count` })
+}
+
+// 获得交易订单数量对照
+export const getOrderComparison = async () => {
+  return await request.get<DataComparisonRespVO<TradeOrderSummaryRespVO>>({
+    url: `/statistics/trade/order-comparison`
+  })
+}
+
+// 获得订单量趋势统计
+export const getOrderCountTrendComparison = (
+  type: number,
+  beginTime: dayjs.ConfigType,
+  endTime: dayjs.ConfigType
+) => {
+  return request.get<DataComparisonRespVO<TradeOrderTrendRespVO>[]>({
+    url: '/statistics/trade/order-count-trend',
+    params: { type, beginTime: formatDate(beginTime), endTime: formatDate(endTime) }
+  })
+}
+
 /** 时间参数需要格式化, 确保接口能识别 */
 const formatDateParam = (params: TradeTrendReqVO) => {
   return { times: [formatDate(params.times[0]), formatDate(params.times[1])] } as TradeTrendReqVO

src/components/ShortcutDateRangePicker/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <el-radio-group v-model="shortcutDays" @change="handleShortcutDaysChange">
+      <el-radio-button :label="1">昨天</el-radio-button>
+      <el-radio-button :label="7">最近7天</el-radio-button>
+      <el-radio-button :label="30">最近30天</el-radio-button>
+    </el-radio-group>
+    <el-date-picker
+      v-model="times"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+      :shortcuts="shortcuts"
+      class="!w-240px"
+      @change="emitDateRangePicker"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import * as DateUtil from '@/utils/formatTime'
+
+/** 快捷日期范围选择组件 */
+defineOptions({ name: 'ShortcutDateRangePicker' })
+
+const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
+const times = ref<[dayjs.ConfigType, dayjs.ConfigType]>(['', '']) // 时间范围参数
+defineExpose({ times }) // 暴露时间范围参数
+/** 日期快捷选择 */
+const shortcuts = [
+  {
+    text: '昨天',
+    value: () => DateUtil.getDayRange(new Date(), -1)
+  },
+  {
+    text: '最近7天',
+    value: () => DateUtil.getLast7Days()
+  },
+  {
+    text: '本月',
+    value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
+  },
+  {
+    text: '最近30天',
+    value: () => DateUtil.getLast30Days()
+  },
+  {
+    text: '最近1年',
+    value: () => DateUtil.getLast1Year()
+  }
+]
+
+/** 设置时间范围 */
+function setTimes() {
+  const beginDate = dayjs().subtract(shortcutDays.value, 'd')
+  const yesterday = dayjs().subtract(1, 'd')
+  times.value = DateUtil.getDateRange(beginDate, yesterday)
+}
+
+/** 快捷日期单选按钮选中 */
+const handleShortcutDaysChange = async () => {
+  // 设置时间范围
+  setTimes()
+  // 发送时间范围选中事件
+  await emitDateRangePicker()
+}
+
+/** 触发事件：时间范围选中 */
+const emits = defineEmits<{
+  (e: 'change', times: [dayjs.ConfigType, dayjs.ConfigType]): void
+}>()
+/** 触发时间范围选中事件 */
+const emitDateRangePicker = async () => {
+  // 开始与截止在同一天的, 折线图出不来, 需要延长一天
+  if (DateUtil.isSameDay(times.value[0], times.value[1])) {
+    // 前天
+    times.value[0] = DateUtil.formatDate(dayjs(times.value[0]).subtract(1, 'd'))
+  }
+  emits('change', times.value)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  handleShortcutDaysChange()
+})
+</script>

src/utils/index.ts

@@ -233,3 +233,16 @@ export const yuanToFen = (amount: string | number): number => {
 export const fenToYuan = (price: string | number): number => {
   return formatToFraction(price)
 }
+
+/**
+ * 计算环比
+ *
+ * @param value 当前数值
+ * @param reference 对比数值
+ */
+export const calculateRelativeRate = (value?: number, reference?: number) => {
+  // 防止除0
+  if (!reference) return 0
+
+  return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
+}

src/views/mall/home/components/ComparisonCard.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
+    <div class="flex items-center justify-between text-gray-500">
+      <span>{{ title }}</span>
+      <el-tag>{{ tag }}</el-tag>
+    </div>
+    <div class="flex flex-row items-baseline justify-between">
+      <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" class="text-3xl" />
+      <span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
+        {{ Math.abs(toNumber(percent)) }}%
+        <Icon :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'" class="!text-sm" />
+      </span>
+    </div>
+    <el-divider class="mb-1! mt-2!" />
+    <div class="flex flex-row items-center justify-between text-sm">
+      <span class="text-gray-500">昨日数据</span>
+      <span>{{ prefix || '' }}{{ reference }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { toNumber } from 'lodash-es'
+import { calculateRelativeRate } from '@/utils'
+
+/** 交易对照卡片 */
+defineOptions({ name: 'ComparisonCard' })
+
+const props = defineProps({
+  title: propTypes.string.def('').isRequired,
+  tag: propTypes.string.def(''),
+  prefix: propTypes.string.def(''),
+  value: propTypes.number.def(0).isRequired,
+  reference: propTypes.number.def(0).isRequired,
+  decimals: propTypes.number.def(0)
+})
+
+// 计算环比
+const percent = computed(() =>
+  calculateRelativeRate(props.value as number, props.reference as number)
+)
+</script>