feat：【mall 商城】商城首页的迁移【antd】45%：member-funnel-card.vue 修复缺陷

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

@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import { ref } from 'vue';
+
+import { 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' });
+
+const loading = ref(false);
+const analyseData = ref<any>();
+
+/** 查询会员概览数据列表 */
+async function loadData(times: [Dayjs, Dayjs]) {
+  if (!times || times.length !== 2) {
+    return;
+  }
+  loading.value = true;
+  try {
+    analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+      times,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 时间范围改变 */
+const handleTimeRangeChange = (times: [Dayjs, Dayjs]) => {
+  loadData(times);
+};
+
+/** 计算环比增长率 */
+const calculateRelativeRate = (value?: number, reference?: number) => {
+  if (!reference || reference === 0) {
+    return 0;
+  }
+  return (((value || 0) - reference) / reference) * 100;
+};
+</script>
+
+<template>
+  <Card :bordered="false" :loading="loading">
+    <template #title>
+      <div class="flex items-center justify-between">
+        <span>会员概览</span>
+        <ShortcutDateRangePicker @change="handleTimeRangeChange" />
+      </div>
+    </template>
+    <div class="min-w-[900px] py-4">
+      <div class="flex h-24">
+        <div class="flex w-[75%] bg-blue-50">
+          <div class="ml-[50px] flex flex-col justify-center">
+            <div class="font-bold">
+              注册用户数量：
+              {{ analyseData?.comparison?.value?.registerUserCount || 0 }}
+            </div>
+            <div class="mt-2 text-sm">
+              环比增长率：
+              {{
+                calculateRelativeRate(
+                  analyseData?.comparison?.value?.registerUserCount,
+                  analyseData?.comparison?.reference?.registerUserCount,
+                ).toFixed(2)
+              }}%
+            </div>
+          </div>
+        </div>
+        <div
+          class="-ml-[154px] mt-1.5 flex w-[308px] flex-col items-center justify-center bg-blue-500 text-sm text-white [transform:perspective(5em)_rotateX(-11deg)]"
+        >
+          <span class="text-2xl font-bold">
+            {{ analyseData?.visitUserCount || 0 }}
+          </span>
+          <span>访客</span>
+        </div>
+      </div>
+      <div class="flex h-24">
+        <div class="flex w-[75%] bg-cyan-50">
+          <div class="ml-[50px] flex flex-col justify-center">
+            <div class="font-bold">
+              活跃用户数量：
+              {{ analyseData?.comparison?.value?.visitUserCount || 0 }}
+            </div>
+            <div class="mt-2 text-sm">
+              环比增长率：
+              {{
+                calculateRelativeRate(
+                  analyseData?.comparison?.value?.visitUserCount,
+                  analyseData?.comparison?.reference?.visitUserCount,
+                ).toFixed(2)
+              }}%
+            </div>
+          </div>
+        </div>
+        <div
+          class="-ml-[112px] mt-[6.8px] flex h-[100px] w-[224px] flex-col items-center justify-center bg-cyan-500 text-sm text-white [transform:perspective(7em)_rotateX(-20deg)]"
+        >
+          <span class="text-2xl font-bold">
+            {{ analyseData?.orderUserCount || 0 }}
+          </span>
+          <span>下单</span>
+        </div>
+      </div>
+      <div class="flex h-24">
+        <div class="flex w-[75%] bg-slate-50">
+          <div class="ml-[50px] flex flex-row gap-x-16">
+            <div class="flex flex-col justify-center">
+              <div class="font-bold">
+                充值用户数量：
+                {{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
+              </div>
+              <div class="mt-2 text-sm">
+                环比增长率：
+                {{
+                  calculateRelativeRate(
+                    analyseData?.comparison?.value?.rechargeUserCount,
+                    analyseData?.comparison?.reference?.rechargeUserCount,
+                  ).toFixed(2)
+                }}%
+              </div>
+            </div>
+            <div class="flex flex-col justify-center">
+              <div class="font-bold">
+                客单价：{{ fenToYuan(analyseData?.atv || 0) }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="-ml-[72px] mt-[13px] flex h-[92px] w-[144px] flex-col items-center justify-center bg-slate-500 text-sm text-white [transform:perspective(3em)_rotateX(-13deg)]"
+        >
+          <span class="text-2xl font-bold">
+            {{ analyseData?.payUserCount || 0 }}
+          </span>
+          <span>成交用户</span>
+        </div>
+      </div>
+    </div>
+  </Card>
+</template>

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

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+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';
+
+import { getTerminalChartOptions } from './terminal-chart-options';
+
+/** 会员终端卡片 */
+defineOptions({ name: 'MemberTerminalCard' });
+
+const loading = ref(true);
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 按照终端，查询会员统计列表 */
+const getMemberTerminalStatisticsList = async () => {
+  loading.value = true;
+  try {
+    const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
+    const dictDataList = getDictOptions('terminal');
+    const chartData = dictDataList.map((dictData: any) => {
+      const userCount = list.find(
+        (item: any) => item.terminal === dictData.value,
+      )?.userCount;
+      return {
+        name: dictData.label,
+        value: userCount || 0,
+      };
+    });
+    await renderEcharts(getTerminalChartOptions(chartData));
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 初始化 */
+onMounted(() => {
+  getMemberTerminalStatisticsList();
+});
+</script>
+
+<template>
+  <Card :bordered="false" title="会员终端" class="h-full">
+    <Spin :spinning="loading">
+      <EchartsUI ref="chartRef" class="h-[300px] w-full" />
+    </Spin>
+  </Card>
+</template>

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

@@ -0,0 +1,31 @@
+/**
+ * 会员终端统计图配置
+ */
+export function getTerminalChartOptions(data: any[]): any {
+  return {
+    tooltip: {
+      trigger: 'item',
+      confine: true,
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'right',
+    },
+    roseType: 'area',
+    series: [
+      {
+        name: '会员终端',
+        type: 'pie',
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        data,
+      },
+    ],
+  };
+}
+