feat：【mall 商城】会员统计【antd】10% 初始化

2025-10-19 18:40:27 +08:00
parent bd9d8376c2
commit fe62992d78
5 changed files with 386 additions and 25 deletions
--- a/apps/web-antd/src/views/mall/statistics/member/index.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/index.vue
@@ -1,32 +1,116 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';

-import { Button } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import { Col, Row } from 'ant-design-vue';
+
+import { SummaryCard } from '#/components/summary-card';
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+import MemberFunnelCard from './modules/funnel-card.vue';
+import MemberTerminalCard from './modules/terminal-card.vue';
+import MemberAreaCard from './modules/area-card.vue';
+import MemberSexCard from './modules/sex-card.vue';
+
+/** 会员统计 */
+defineOptions({ name: 'MemberStatistics' });
+
+const loading = ref(true); // 加载中
+const summary = ref<MallMemberStatisticsApi.Summary>(); // 会员统计数据
+
+/** 查询会员统计 */
+async function getMemberSummary() {
+  summary.value = await MemberStatisticsApi.getMemberSummary();
+}
+
+/** 初始化 */
+onMounted(async () => {
+  loading.value = true;
+  try {
+    await getMemberSummary();
+  } finally {
+    loading.value = false;
+  }
+});
 </script>

 <template>
-  <Page>
-    <DocAlert
-      title="【统计】会员、商品、交易统计"
-      url="https://doc.iocoder.cn/mall/statistics/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【统计】会员、商品、交易统计"
+        url="https://doc.iocoder.cn/mall/statistics/"
+      />
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <!-- 统计卡片 -->
+      <Row :gutter="16">
+        <Col :md="6" :sm="12" :xs="24">
+          <SummaryCard
+            title="累计会员数"
+            :value="summary?.userCount || 0"
+            icon="fa-solid:users"
+            icon-color="text-blue-500"
+            icon-bg-color="bg-blue-100"
+          />
+        </Col>
+        <Col :md="6" :sm="12" :xs="24">
+          <SummaryCard
+            title="累计充值人数"
+            :value="summary?.rechargeUserCount || 0"
+            icon="fa-solid:user"
+            icon-color="text-purple-500"
+            icon-bg-color="bg-purple-100"
+          />
+        </Col>
+        <Col :md="6" :sm="12" :xs="24">
+          <SummaryCard
+            title="累计充值金额"
+            :value="Number(fenToYuan(summary?.rechargePrice || 0))"
+            :decimals="2"
+            prefix="￥"
+            icon="fa-solid:money-check-alt"
+            icon-color="text-yellow-500"
+            icon-bg-color="bg-yellow-100"
+          />
+        </Col>
+        <Col :md="6" :sm="12" :xs="24">
+          <SummaryCard
+            title="累计消费金额"
+            :value="Number(fenToYuan(summary?.expensePrice || 0))"
+            :decimals="2"
+            prefix="￥"
+            icon="fa-solid:yen-sign"
+            icon-color="text-green-500"
+            icon-bg-color="bg-green-100"
+          />
+        </Col>
+      </Row>
+
+      <!-- 会员概览和会员终端 -->
+      <Row :gutter="16">
+        <Col :md="18" :sm="24" :xs="24">
+          <MemberFunnelCard />
+        </Col>
+        <Col :md="6" :sm="24" :xs="24">
+          <MemberTerminalCard />
+        </Col>
+      </Row>
+
+      <!-- 会员地域分布和性别比例 -->
+      <Row :gutter="16">
+        <Col :md="18" :sm="24" :xs="24">
+          <MemberAreaCard />
+        </Col>
+        <Col :md="6" :sm="24" :xs="24">
+          <MemberSexCard />
+        </Col>
+      </Row>
+    </div>
  </Page>
 </template>
--- a/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { onMounted, ref, shallowRef } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { fenToYuan } from '@vben/utils';
+
+import { Card, Table } from 'ant-design-vue';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+// areaReplace 函数定义
+function areaReplace(areaName: string) {
+  if (!areaName) {
+    return areaName;
+  }
+  return areaName
+    .replace('维吾尔自治区', '')
+    .replace('壮族自治区', '')
+    .replace('回族自治区', '')
+    .replace('自治区', '')
+    .replace('省', '');
+}
+
+import { getAreaChartOptions } from './area-chart-options';
+
+/** 会员地域分布卡片 */
+defineOptions({ name: 'MemberAreaCard' });
+
+const loading = ref(true);
+const areaStatisticsList = shallowRef<MallMemberStatisticsApi.AreaStatistics[]>([]);
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 表格列配置 */
+const columns = [
+  {
+    title: '省份',
+    dataIndex: 'areaName',
+    key: 'areaName',
+    width: 120,
+    sorter: true,
+    ellipsis: true,
+  },
+  {
+    title: '会员数量',
+    dataIndex: 'userCount',
+    key: 'userCount',
+    width: 120,
+    sorter: (a: any, b: any) => (a.userCount || 0) - (b.userCount || 0),
+  },
+  {
+    title: '订单创建数量',
+    dataIndex: 'orderCreateUserCount',
+    key: 'orderCreateUserCount',
+    width: 150,
+    sorter: (a: any, b: any) => (a.orderCreateUserCount || 0) - (b.orderCreateUserCount || 0),
+  },
+  {
+    title: '订单支付数量',
+    dataIndex: 'orderPayUserCount',
+    key: 'orderPayUserCount',
+    width: 150,
+    sorter: (a: any, b: any) => (a.orderPayUserCount || 0) - (b.orderPayUserCount || 0),
+  },
+  {
+    title: '订单支付金额',
+    dataIndex: 'orderPayPrice',
+    key: 'orderPayPrice',
+    width: 150,
+    sorter: (a: any, b: any) => (a.orderPayPrice || 0) - (b.orderPayPrice || 0),
+    customRender: ({ record }: any) => `￥${Number(fenToYuan(record.orderPayPrice || 0)).toFixed(2)}`,
+  },
+];
+
+/** 按照省份，查询会员统计列表 */
+async function getMemberAreaStatisticsList() {
+  loading.value = true;
+  try {
+    const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
+    areaStatisticsList.value = list.map((item: MallMemberStatisticsApi.AreaStatistics) => ({
+      ...item,
+      areaName: areaReplace(item.areaName),
+    }));
+    
+    // 渲染图表
+    await renderEcharts(getAreaChartOptions(areaStatisticsList.value));
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getMemberAreaStatisticsList();
+});
+</script>
+
+<template>
+  <Card :bordered="false" title="会员地域分布" :loading="loading">
+    <div class="flex gap-4">
+      <div class="w-2/5">
+        <EchartsUI ref="chartRef" class="h-[300px] w-full" />
+      </div>
+      <div class="w-3/5">
+        <Table
+          :data-source="areaStatisticsList"
+          :columns="columns"
+          :scroll="{ y: 260 }"
+          size="small"
+          :pagination="false"
+          bordered
+        />
+      </div>
+    </div>
+  </Card>
+</template>
--- a/apps/web-antd/src/views/mall/statistics/member/modules/area-chart-options.ts
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/area-chart-options.ts
@@ -0,0 +1,61 @@
+import type { EChartsOption } from 'echarts';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { fenToYuan } from '@vben/utils';
+
+// 地图数据由 @vben/plugins/echarts 自动处理
+
+/** 会员地域分布图表配置 */
+export function getAreaChartOptions(data: MallMemberStatisticsApi.AreaStatistics[]): EChartsOption {
+  let min = 0;
+  let max = 0;
+  
+  const mapData = data.map((item) => {
+    min = Math.min(min, item.orderPayUserCount || 0);
+    max = Math.max(max, item.orderPayUserCount || 0);
+    return {
+      ...item,
+      name: item.areaName,
+      value: item.orderPayUserCount || 0,
+    };
+  });
+
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        const data = params?.data;
+        if (!data) return params?.name || '';
+        
+        return `${data.areaName || params.name}<br/>
+会员数量：${data.userCount || 0}<br/>
+订单创建数量：${data.orderCreateUserCount || 0}<br/>
+订单支付数量：${data.orderPayUserCount || 0}<br/>
+订单支付金额：￥${Number(fenToYuan(data.orderPayPrice || 0)).toFixed(2)}`;
+      },
+    },
+    visualMap: {
+      text: ['高', '低'],
+      realtime: false,
+      calculable: true,
+      top: 'middle',
+      min,
+      max,
+      inRange: {
+        color: ['#fff', '#3b82f6'],
+      },
+    },
+    series: [
+      {
+        name: '会员地域分布',
+        type: 'map',
+        map: 'china',
+        roam: false,
+        selectedMode: false,
+        data: mapData,
+      },
+    ],
+  };
+}
+
+// 地图数据已在 @vben/plugins/echarts 中自动注册
--- a/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Card } from 'ant-design-vue';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+// 获取字典选项
+function getIntDictOptions(dictType: string) {
+  return getDictOptions(dictType, 'number');
+}
+
+import { getSexChartOptions } from './sex-chart-options';
+
+/** 会员性别比例卡片 */
+defineOptions({ name: 'MemberSexCard' });
+
+const loading = ref(true);
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 按照性别，查询会员统计列表 */
+async function getMemberSexStatisticsList() {
+  loading.value = true;
+  try {
+    const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+    const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
+    dictDataList.push({ label: '未知', value: null } as any);
+    
+    const chartData = dictDataList.map((dictData: any) => {
+      const userCount = list.find(
+        (item: MallMemberStatisticsApi.SexStatistics) => item.sex === dictData.value,
+      )?.userCount;
+      return {
+        name: dictData.label,
+        value: userCount || 0,
+      };
+    });
+    
+    await renderEcharts(getSexChartOptions(chartData));
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getMemberSexStatisticsList();
+});
+</script>
+
+<template>
+  <Card :bordered="false" title="会员性别比例" :loading="loading">
+    <EchartsUI ref="chartRef" class="h-[300px] w-full" />
+  </Card>
+</template>
--- a/apps/web-antd/src/views/mall/statistics/member/modules/sex-chart-options.ts
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/sex-chart-options.ts
@@ -0,0 +1,35 @@
+import type { EChartsOption } from 'echarts';
+
+interface ChartData {
+  name: string;
+  value: number;
+}
+
+/** 会员性别比例图表配置 */
+export function getSexChartOptions(data: ChartData[]): EChartsOption {
+  return {
+    tooltip: {
+      trigger: 'item',
+      confine: true,
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'right',
+    },
+    series: [
+      {
+        name: '会员性别',
+        type: 'pie',
+        roseType: 'area',
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        data,
+      },
+    ],
+  };
+}