统计卡片修改为全局组件

src/views/mall/statistics/member/index.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <el-row :gutter="16" class="summary">
       <el-col :sm="6" :xs="12" v-loading="loading">
-        <TradeTrendValue
+        <SummaryCard
           title="累计会员数"
           icon="fa-solid:users"
           icon-color="bg-blue-100"
@@ -11,7 +11,7 @@
         />
       </el-col>
       <el-col :sm="6" :xs="12" v-loading="loading">
-        <TradeTrendValue
+        <SummaryCard
           title="累计充值人数"
           icon="fa-solid:user"
           icon-color="bg-purple-100"
@@ -20,7 +20,7 @@
         />
       </el-col>
       <el-col :sm="6" :xs="12" v-loading="loading">
-        <TradeTrendValue
+        <SummaryCard
           title="累计充值金额"
           icon="fa-solid:money-check-alt"
           icon-color="bg-yellow-100"
@@ -31,7 +31,7 @@
         />
       </el-col>
       <el-col :sm="6" :xs="12" v-loading="loading">
-        <TradeTrendValue
+        <SummaryCard
           title="累计消费金额"
           icon="fa-solid:yen-sign"
           icon-color="bg-green-100"
@@ -120,7 +120,7 @@
 </template>
 <script lang="ts" setup>
 import * as MemberStatisticsApi from '@/api/mall/statistics/member'
-import TradeTrendValue from '../trade/components/TradeTrendValue.vue'
+import SummaryCard from '@/components/SummaryCard/index.vue'
 import { EChartsOption } from 'echarts'
 import china from '@/assets/map/json/china.json'
 import { fenToYuan } from '@/utils'

src/views/mall/statistics/trade/components/TradeTrendValue.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4">
-    <div
-      class="h-12 w-12 flex flex-shrink-0 items-center justify-center rounded-1"
-      :class="`${iconColor} ${iconBgColor}`"
-    >
-      <Icon :icon="icon" class="!text-6" />
-    </div>
-    <div class="flex flex-col gap-1">
-      <div class="flex items-center gap-1 text-gray-500">
-        <span class="text-3.5">{{ title }}</span>
-        <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
-          <Icon icon="ep:warning" class="item-center flex !text-3" />
-        </el-tooltip>
-      </div>
-      <div class="flex flex-row items-baseline gap-2">
-        <div class="text-7">
-          <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" />
-        </div>
-        <span
-          v-if="percent != undefined"
-          :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'"
-        >
-          <span class="text-sm">{{ Math.abs(toNumber(percent)) }}%</span>
-          <Icon
-            :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
-            class="ml-0.5 !text-3"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { propTypes } from '@/utils/propTypes'
-import { toNumber } from 'lodash-es'
-
-/** 交易状况统计值组件 */
-defineOptions({ name: 'TradeTrendValue' })
-
-defineProps({
-  title: propTypes.string.def(''),
-  tooltip: propTypes.string.def(''),
-  icon: propTypes.string.def(''),
-  iconColor: propTypes.string.def(''),
-  iconBgColor: propTypes.string.def(''),
-  prefix: propTypes.string.def(''),
-  value: propTypes.number.def(0),
-  decimals: propTypes.number.def(0),
-  percent: propTypes.oneOfType([Number, String]).def(undefined)
-})
-</script>

src/views/mall/statistics/trade/index.vue

@@ -76,7 +76,7 @@
       <!-- 统计值 -->
       <el-row :gutter="16">
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="营业额"
             tooltip="商品支付金额、充值金额"
             icon="fa-solid:yen-sign"
@@ -94,7 +94,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="商品支付金额"
             tooltip="用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）"
             icon="fa-solid:shopping-cart"
@@ -112,7 +112,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="充值金额"
             tooltip="用户成功充值的金额"
             icon="fa-solid:money-check-alt"
@@ -130,7 +130,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="支出金额"
             tooltip="余额支付金额、支付佣金金额、商品退款金额"
             icon="ep:warning-filled"
@@ -148,7 +148,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="余额支付金额"
             tooltip="用户下单时使用余额实际支付的金额"
             icon="fa-solid:wallet"
@@ -166,7 +166,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="支付佣金金额"
             tooltip="后台给推广员支付的推广佣金，以实际支付为准"
             icon="fa-solid:award"
@@ -184,7 +184,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="商品退款金额"
             tooltip="用户成功退款的商品金额"
             icon="fa-solid:times-circle"
@@ -212,7 +212,7 @@
 <script lang="ts" setup>
 import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
 import TradeStatisticValue from './components/TradeStatisticValue.vue'
-import TradeTrendValue from './components/TradeTrendValue.vue'
+import SummaryCard from '@/components/SummaryCard/index.vue'
 import { EChartsOption } from 'echarts'
 import { DataComparisonRespVO } from '@/api/mall/statistics/common'
 import { TradeSummaryRespVO, TradeTrendSummaryRespVO } from '@/api/mall/statistics/trade'

src/views/mall/trade/delivery/pickUpOrder/index.vue

@@ -76,7 +76,7 @@
   <!-- 统计卡片 -->
   <el-row :gutter="16" class="summary">
     <el-col :sm="6" :xs="12" v-loading="loading">
-      <TradeTrendValue
+      <SummaryCard
         title="订单数量"
         icon="icon-park-outline:transaction-order"
         icon-color="bg-blue-100"
@@ -85,7 +85,7 @@
       />
     </el-col>
     <el-col :sm="6" :xs="12" v-loading="loading">
-      <TradeTrendValue
+      <SummaryCard
         title="订单金额"
         icon="streamline:money-cash-file-dollar-common-money-currency-cash-file"
         icon-color="bg-purple-100"
@@ -96,7 +96,7 @@
       />
     </el-col>
     <el-col :sm="6" :xs="12" v-loading="loading">
-      <TradeTrendValue
+      <SummaryCard
         title="退款单数"
         icon="heroicons:receipt-refund"
         icon-color="bg-yellow-100"
@@ -105,7 +105,7 @@
       />
     </el-col>
     <el-col :sm="6" :xs="12" v-loading="loading">
-      <TradeTrendValue
+      <SummaryCard
         title="退款金额"
         icon="ri:refund-2-line"
         icon-color="bg-green-100"
@@ -199,7 +199,7 @@ import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import { DICT_TYPE } from '@/utils/dict'
 import { fenToYuan, floatToFixed2 } from '@/utils'
 import { fenToYuanFormat } from '@/utils/formatter'
-import TradeTrendValue from '@/views/mall/statistics/trade/components/TradeTrendValue.vue'
+import SummaryCard from '@/components/SummaryCard/index.vue'
 import { dateFormatter } from '@/utils/formatTime'
 import { DeliveryTypeEnum } from '@/utils/constants'
 import { TradeOrderSummaryRespVO } from '@/api/mall/trade/order'