refactor(shareDiscount): improve metrics display and update data handling

- Refactored the number metrics display to use a grid layout for better presentation.
- Updated labels and values for clarity, including changes to titles and formatting.
- Removed unused formatting functions and adjusted the active period handling for improved data fetching.
- Enhanced chart configuration with a new legend and adjusted grid settings for better visibility.

src/views/marketing/shareDiscount/fission/index.vue

@@ -93,22 +93,14 @@
 
             <!-- Numbers Cards -->
             <div class="number-metrics mb-6">
-                <el-row :gutter="20">
-                    <el-col
-                        :span="4"
-                        v-for="(item, index) in numberMetricsData"
-                        :key="index"
-                    >
-                        <el-card shadow="hover" class="bg-gray-50">
-                            <div class="text-2xl font-bold mb-1 text-center">{{
-                                item.value
-                            }}</div>
-                            <div class="text-sm text-gray-500 text-center">{{
-                                item.label
-                            }}</div>
-                        </el-card>
-                    </el-col>
-                </el-row>
+                <div
+                    v-for="(item, index) in numberMetricsData"
+                    :key="index"
+                    class="number-card"
+                >
+                    <div class="number-value">{{ item.value }}</div>
+                    <div class="number-label">{{ item.label }}</div>
+                </div>
             </div>
 
             <!-- Chart Section -->
@@ -130,11 +122,11 @@
     defineOptions({ name: 'ShareDiscountFission' });
 
     // State
-    const activePeriod = ref('30d');
+    const activePeriod = ref('');
     const chartRef = ref(null);
     let chart = null;
     const dateRange = ref([
-        dayjs().subtract(29, 'day').format('YYYY-MM-DD'),
+        dayjs().format('YYYY-MM-DD'),
         dayjs().format('YYYY-MM-DD')
     ]);
     const loading = ref(false);
@@ -151,18 +143,6 @@
         return str.includes('%') ? str : `${str}%`;
     };
 
-    const formatMoney = (value) => {
-        if (value === null || value === undefined || value === '') {
-            return '¥0';
-        }
-        const num = Number(value);
-        if (Number.isNaN(num)) return '¥0';
-        return `¥${num.toLocaleString('zh-CN', {
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 2
-        })}`;
-    };
-
     const resultData = computed(() => statisticData.value?.data || {});
 
     const displayDateRange = computed(() => {
@@ -177,34 +157,34 @@
         const data = resultData.value;
         return [
             {
-                title: '降价助力人数',
-                value: data.reduceHelpNum ?? 0,
+                title: '今日助力人数',
+                value: `${data.reduceHelpNum ?? 0}人`,
                 change: formatComparison(data.reduceHelpNumComparison)
             },
             {
-                title: '参与活动订单数',
-                value: data.reduceOrderNum ?? 0,
+                title: '今日参与活动订单数',
+                value: `${data.reduceOrderNum ?? 0}单`,
                 change: formatComparison(data.reduceOrderNumComparison)
             },
             {
-                title: '活动加购次数',
-                value: data.reduceCartNum ?? 0,
-                change: formatComparison(data.reduceCartNumComparison)
+                title: '今日活动订单浏览量',
+                value: `${data.bookViewTimes ?? 0}次`,
+                change: formatComparison(data.bookViewTimesComparison)
             },
             {
-                title: '活动加购参与占比',
-                value: formatPercent(data.cartJoinRate),
-                change: formatComparison(data.cartJoinRateComparison)
+                title: '参与占比/活动参与浏览量',
+                value: formatPercent(data.viewJoinRate),
+                change: formatComparison(data.viewJoinRateComparison)
             },
             {
-                title: '助力新用户占比',
-                value: formatPercent(data.newUserRate),
-                change: formatComparison(data.newUserRateComparison)
+                title: '今日助力使用产品占比',
+                value: formatPercent(data.helpNewUserRate),
+                change: formatComparison(data.helpNewUserRateComparison)
             },
             {
                 title: '裂变转化率',
-                value: formatPercent(data.conversionRate),
-                change: formatComparison(data.conversionRateComparison)
+                value: formatPercent(data.fissionConversionRate),
+                change: formatComparison(data.fissionConversionRateComparison)
             }
         ];
     });
@@ -212,12 +192,15 @@
     const numberMetricsData = computed(() => {
         const data = resultData.value;
         return [
-            { label: '降价活动分享人数', value: data.reduceShareNum ?? 0 },
+            { label: '参与用户数', value: data.reduceShareNum ?? 0 },
             { label: '助力次数', value: data.reduceHelpTimes ?? 0 },
-            { label: '订单总本书', value: data.orderBookNum ?? 0 },
-            { label: '订单总金额', value: formatMoney(data.orderTotalMoney) },
-            { label: '降价总金额', value: formatMoney(data.reduceTotalMoney) },
-            { label: '累计实付金额', value: formatMoney(data.orderPayMoney) }
+            { label: '订单总本数', value: data.orderBookNum ?? 0 },
+            { label: '参与活动本数', value: data.reduceBookNum ?? 0 },
+            { label: '参与活动总金额', value: data.orderTotalMoney ?? 0 },
+            { label: '订单带收益金额', value: data.orderPayMoney ?? 0 },
+            { label: '降价带收益金额', value: data.reduceTotalMoney ?? 0 },
+            { label: '实际降价金额', value: data.actualReduceMoney ?? 0 },
+            { label: '加购次数', value: data.reduceCartNum ?? 0 }
         ];
     });
 
@@ -288,7 +271,12 @@
     };
 
     const resetFilters = () => {
-        changePeriod('30d');
+        activePeriod.value = '';
+        dateRange.value = [
+            dayjs().format('YYYY-MM-DD'),
+            dayjs().format('YYYY-MM-DD')
+        ];
+        fetchData();
     };
 
     const fetchData = async () => {
@@ -329,10 +317,11 @@
 
         chart.setOption({
             tooltip: { trigger: 'axis' },
+            legend: { data: ['分享人数趋势'], bottom: 0 },
             grid: {
                 left: '3%',
                 right: '4%',
-                bottom: '3%',
+                bottom: '12%',
                 containLabel: true
             },
             xAxis: {
@@ -343,7 +332,7 @@
             yAxis: { type: 'value', min: 0 },
             series: [
                 {
-                    name: '分享人数',
+                    name: '分享人数趋势',
                     type: 'line',
                     smooth: true,
                     data: chartData.value.values,
@@ -372,9 +361,35 @@
 
 <style scoped>
     .metric-card {
-        height: 140px;
+        height: 150px;
         display: flex;
         flex-direction: column;
         justify-content: center;
     }
+
+    .number-metrics {
+        display: grid;
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        gap: 12px;
+    }
+
+    .number-card {
+        background: #f7f8fa;
+        border-radius: 8px;
+        padding: 16px 8px;
+        text-align: center;
+    }
+
+    .number-value {
+        font-size: 22px;
+        font-weight: 700;
+        color: #f6a623;
+        margin-bottom: 8px;
+        word-break: break-all;
+    }
+
+    .number-label {
+        font-size: 13px;
+        color: #606266;
+    }
 </style>