feat：【mall 商城】商城首页的迁移【antd】20%：初始化

apps/web-antd/src/views/mall/home/index.vue

@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import type { DataComparisonRespVO } from '#/api/mall/statistics/common';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
 
-import { Col, Row } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { Col, Row } from 'ant-design-vue';
+
+import { getUserCountComparison } from '#/api/mall/statistics/member';
+import { getOrderComparison } from '#/api/mall/statistics/trade';
 
 import ComparisonCard from './modules/comparison-card.vue';
 import MemberFunnelCard from './modules/member-funnel-card.vue';
@@ -21,23 +25,25 @@ import TradeTrendCard from './modules/trade-trend-card.vue';
 defineOptions({ name: 'MallHome' });
 
 const loading = ref(true); // 加载中
-const orderComparison = ref<any>(); // 交易对照数据
-const userComparison = ref<any>(); // 用户对照数据
+const orderComparison =
+  ref<DataComparisonRespVO<MallTradeStatisticsApi.TradeOrderSummaryRespVO>>(); // 交易对照数据
+const userComparison =
+  ref<DataComparisonRespVO<MallMemberStatisticsApi.MemberCountRespVO>>(); // 用户对照数据
 
 /** 查询交易对照卡片数据 */
-const getOrderComparison = async () => {
-  orderComparison.value = await TradeStatisticsApi.getOrderComparison();
-};
+async function loadOrderComparison() {
+  orderComparison.value = await getOrderComparison();
+}
 
 /** 查询会员用户数量对照卡片数据 */
-const getUserCountComparison = async () => {
-  userComparison.value = await MemberStatisticsApi.getUserCountComparison();
-};
+async function loadUserCountComparison() {
+  userComparison.value = await getUserCountComparison();
+}
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
-  await Promise.all([getOrderComparison(), getUserCountComparison()]);
+  await Promise.all([loadOrderComparison(), loadUserCountComparison()]);
   loading.value = false;
 });
 </script>
@@ -61,7 +67,9 @@ onMounted(async () => {
             prefix="￥"
             :decimals="2"
             :value="fenToYuan(orderComparison?.value?.orderPayPrice || 0)"
-            :reference="fenToYuan(orderComparison?.reference?.orderPayPrice || 0)"
+            :reference="
+              fenToYuan(orderComparison?.reference?.orderPayPrice || 0)
+            "
           />
         </Col>
         <Col :md="6" :sm="12" :xs="24">
@@ -89,7 +97,6 @@ onMounted(async () => {
           />
         </Col>
       </Row>
-
       <!-- 快捷入口和运营数据 -->
       <Row :gutter="16">
         <Col :md="12" :xs="24">
@@ -99,7 +106,6 @@ onMounted(async () => {
           <OperationDataCard />
         </Col>
       </Row>
-
       <!-- 会员概览和会员终端 -->
       <Row :gutter="16">
         <Col :md="18" :sm="24" :xs="24">
@@ -109,10 +115,8 @@ onMounted(async () => {
           <MemberTerminalCard />
         </Col>
       </Row>
-
       <!-- 交易量趋势 -->
       <TradeTrendCard />
-
       <!-- 会员统计 -->
       <MemberStatisticsCard />
     </div>

apps/web-antd/src/views/mall/home/modules/comparison-card.vue

@@ -1,31 +1,32 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import { Card, Tag } from 'ant-design-vue';
-
 import { IconifyIcon } from '@vben/icons';
 
-import { erpCalculatePercentage } from '@vben/utils';
+import { Card, Tag } from 'ant-design-vue';
 
 /** 交易对照卡片 */
 defineOptions({ name: 'ComparisonCard' });
 
-interface Props {
-  title: string;
-  tag?: string;
-  prefix?: string;
-  value: number | string;
-  reference: number | string;
-  decimals?: number;
-}
-
 const props = withDefaults(defineProps<Props>(), {
+  title: '',
   tag: '',
   prefix: '',
+  value: 0,
+  reference: 0,
   decimals: 0,
 });
 
-// 计算环比
+interface Props {
+  title?: string;
+  tag?: string;
+  prefix?: string;
+  value?: number | string;
+  reference?: number | string;
+  decimals?: number;
+}
+
+/** 计算环比百分比 */
 const percent = computed(() => {
   const refValue = Number(props.reference);
   const curValue = Number(props.value);
@@ -33,12 +34,13 @@ const percent = computed(() => {
   return ((curValue - refValue) / refValue) * 100;
 });
 
-// 格式化数值
+/** 格式化今日数据 */
 const formattedValue = computed(() => {
   const numValue = Number(props.value);
   return numValue.toFixed(props.decimals);
 });
 
+/** 格式化昨日数据 */
 const formattedReference = computed(() => {
   const numValue = Number(props.reference);
   return numValue.toFixed(props.decimals);
@@ -46,17 +48,18 @@ const formattedReference = computed(() => {
 </script>
 
 <template>
-  <Card :bordered="false" class="comparison-card">
+  <Card :bordered="false" class="h-full">
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between text-gray-500">
         <span>{{ title }}</span>
         <Tag v-if="tag">{{ tag }}</Tag>
       </div>
       <div class="flex items-baseline justify-between">
-        <div class="text-3xl font-semibold">
-          {{ prefix }}{{ formattedValue }}
-        </div>
-        <span :class="percent > 0 ? 'text-red-500' : 'text-green-500'">
+        <div class="text-3xl">{{ prefix }}{{ formattedValue }}</div>
+        <span
+          :class="percent > 0 ? 'text-red-500' : 'text-green-500'"
+          class="flex items-center gap-0.5"
+        >
           {{ Math.abs(percent).toFixed(2) }}%
           <IconifyIcon
             :icon="percent > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
@@ -73,10 +76,3 @@ const formattedReference = computed(() => {
     </div>
   </Card>
 </template>
-
-<style lang="less" scoped>
-.comparison-card {
-  height: 100%;
-}
-</style>
-