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

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>