feat：【mall 商城】会员统计【ele】100% 全部完成

apps/web-ele/src/views/mall/statistics/member/index.vue

@@ -1,85 +1,113 @@
 <script lang="ts" setup>
-import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member'; // 会员统计数据
-import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, Page, SummaryCard } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member'; // 会员统计数据
-// import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
-// import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
-// import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
+import { ElCol, ElRow } from 'element-plus';
 
-import MemberRegionCard from './components/member-region-card.vue';
-import MemberSexCard from './components/member-sex-card.vue';
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
 
-const summary = ref<MallMemberStatisticsApi.Summary>();
+import MemberAreaCard from './modules/area-card.vue';
+import MemberFunnelCard from './modules/funnel-card.vue';
+import MemberSexCard from './modules/sex-card.vue';
+import MemberTerminalCard from './modules/terminal-card.vue';
 
-const overviewItems = ref<AnalysisOverviewIconItem[]>([]);
-const loadOverview = async () => {
+/** 会员统计 */
+defineOptions({ name: 'MemberStatistics' });
+
+const loading = ref(true); // 加载中
+const summary = ref<MallMemberStatisticsApi.Summary>(); // 会员统计数据
+
+/** 查询会员统计 */
+async function getMemberSummary() {
   summary.value = await MemberStatisticsApi.getMemberSummary();
-  overviewItems.value = [
-    {
-      icon: 'fa-solid:users', // 自定义立体用户群组图标 - 累计会员数
-      title: '累计会员数',
-      value: summary.value?.userCount || 0,
-      iconBgColor: 'text-blue-500',
-      iconColor: 'bg-blue-100',
-    },
-    {
-      icon: 'fa-solid:user', // 自定义立体信用卡图标 - 累计充值人数
-      title: '累计充值人数',
-      value: summary.value?.rechargeUserCount || 0,
-      iconBgColor: 'text-purple-500',
-      iconColor: 'bg-purple-100',
-    },
-    {
-      icon: 'fa-solid:money-check-alt', // 自定义立体钞票图标 - 累计充值金额
-      title: '累计充值金额',
-      value: Number(fenToYuan(summary.value?.rechargePrice || 0)),
-      iconBgColor: 'text-yellow-500',
-      iconColor: 'bg-yellow-100',
-      prefix: '￥',
-      decimals: 2,
-    },
-    {
-      icon: 'fa-solid:yen-sign', // 自定义立体用户添加图标 - 今日会员注册量
-      title: '累计消费金额',
-      value: Number(fenToYuan(summary.value?.expensePrice || 0)),
-      iconBgColor: 'text-green-500',
-      iconColor: 'bg-green-100',
-      prefix: '￥',
-      decimals: 2,
-    },
-  ];
-};
+}
 
+/** 初始化 */
 onMounted(async () => {
-  loadOverview();
+  loading.value = true;
+  try {
+    await getMemberSummary();
+  } finally {
+    loading.value = false;
+  }
 });
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【统计】会员、商品、交易统计"
-      url="https://doc.iocoder.cn/mall/statistics/"
-    />
-    <div class="mt-5 w-full md:flex">
-      <AnalysisOverviewIcon
-        v-model:model-value="overviewItems"
-        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【统计】会员、商品、交易统计"
+        url="https://doc.iocoder.cn/mall/statistics/"
       />
-    </div>
-    <div class="mb-4 mt-5 w-full md:flex">
-      <MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
-      <MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
-    </div>
-    <div class="mb-4 mt-5 w-full md:flex">
-      <MemberRegionCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
-      <MemberSexCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <!-- 统计卡片 -->
+      <ElRow :gutter="16">
+        <ElCol :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"
+          />
+        </ElCol>
+        <ElCol :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"
+          />
+        </ElCol>
+        <ElCol :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"
+          />
+        </ElCol>
+        <ElCol :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"
+          />
+        </ElCol>
+      </ElRow>
+      <!-- 会员概览和会员终端 -->
+      <ElRow :gutter="16">
+        <ElCol :md="18" :sm="24" :xs="24">
+          <MemberFunnelCard />
+        </ElCol>
+        <ElCol :md="6" :sm="24" :xs="24">
+          <MemberTerminalCard />
+        </ElCol>
+      </ElRow>
+      <!-- 会员地域分布和性别比例 -->
+      <ElRow :gutter="16">
+        <ElCol :md="18" :sm="24" :xs="24">
+          <MemberAreaCard />
+        </ElCol>
+        <ElCol :md="6" :sm="24" :xs="24">
+          <MemberSexCard />
+        </ElCol>
+      </ElRow>
     </div>
   </Page>
 </template>