商城：增加商城首页

src/views/mall/home/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="flex flex-col">
+    <!-- 数据对照 -->
+    <el-row :gutter="16" class="row">
+      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
+        <ComparisonCard
+          tag="今日"
+          title="销售额"
+          prefix="￥"
+          ::decimals="2"
+          :value="fenToYuan(orderComparison?.value?.orderPayPrice || 0)"
+          :reference="fenToYuan(orderComparison?.reference?.orderPayPrice || 0)"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
+        <ComparisonCard
+          tag="今日"
+          title="用户访问量"
+          :value="userComparison?.value?.visitUserCount || 0"
+          :reference="userComparison?.reference?.visitUserCount || 0"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
+        <ComparisonCard
+          tag="今日"
+          title="订单量"
+          :value="fenToYuan(orderComparison?.value?.orderPayCount || 0)"
+          :reference="fenToYuan(orderComparison?.reference?.orderPayCount || 0)"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
+        <ComparisonCard
+          tag="今日"
+          title="新增用户"
+          :value="userComparison?.value?.createUserCount || 0"
+          :reference="userComparison?.reference?.createUserCount || 0"
+        />
+      </el-col>
+    </el-row>
+    <el-row :gutter="16" class="row">
+      <el-col :md="12">
+        <!-- 快捷入口 -->
+        <ShortcutCard />
+      </el-col>
+      <el-col :md="12">
+        <!-- 运营数据 -->
+        <OperationDataCard />
+      </el-col>
+    </el-row>
+    <el-row :gutter="16" class="mb-4">
+      <el-col :md="18" :sm="24">
+        <!-- 会员概览 -->
+        <MemberFunnelCard />
+      </el-col>
+      <el-col :md="6" :sm="24">
+        <!-- 会员终端 -->
+        <MemberTerminalCard />
+      </el-col>
+    </el-row>
+    <!-- 交易量趋势 -->
+    <TradeTrendCard class="mb-4" />
+    <!-- 会员统计 -->
+    <MemberStatisticsCard />
+  </div>
+</template>
+<script lang="ts" setup>
+import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
+import * as MemberStatisticsApi from '@/api/mall/statistics/member'
+import {
+  TradeOrderSummaryRespVO,
+  TradeStatisticsComparisonRespVO
+} from '@/api/mall/statistics/trade'
+import { MemberCountRespVO } from '@/api/mall/statistics/member'
+import { fenToYuan } from '@/utils'
+import ComparisonCard from './components/ComparisonCard.vue'
+import MemberStatisticsCard from './components/MemberStatisticsCard.vue'
+import OperationDataCard from './components/OperationDataCard.vue'
+import ShortcutCard from './components/ShortcutCard.vue'
+import TradeTrendCard from './components/TradeTrendCard.vue'
+import MemberTerminalCard from '@/views/mall/statistics/member/components/MemberTerminalCard.vue'
+import MemberFunnelCard from '@/views/mall/statistics/member/components/MemberFunnelCard.vue'
+
+/** 商城首页 */
+defineOptions({ name: 'MallHome' })
+
+const loading = ref(true) // 加载中
+const orderComparison = ref<TradeStatisticsComparisonRespVO<TradeOrderSummaryRespVO>>() // 交易对照数据
+const userComparison = ref<TradeStatisticsComparisonRespVO<MemberCountRespVO>>() // 用户对照数据
+
+/** 查询交易对照卡片数据 */
+const getOrderComparison = async () => {
+  orderComparison.value = await TradeStatisticsApi.getOrderComparison()
+}
+
+/** 查询会员用户数量对照卡片数据 */
+const getUserCountComparison = async () => {
+  userComparison.value = await MemberStatisticsApi.getUserCountComparison()
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  loading.value = true
+  await Promise.all([getOrderComparison(), getUserCountComparison()])
+  loading.value = false
+})
+</script>
+<style lang="scss" scoped>
+.row {
+  .el-col {
+    margin-bottom: 1rem;
+  }
+}
+</style>