Kaynağa Gözat

feat(refund): update refund statistics display and fetch logic

- Replaced static values with dynamic bindings for refund statistics, including handling duration and counts for pending and waiting statuses.
- Introduced a computed property for handling duration in hours.
- Implemented a new API call to fetch refund statistics and update the state accordingly.
ylong 1 hafta önce
ebeveyn
işleme
32b7a6d9c2
1 değiştirilmiş dosya ile 40 ekleme ve 8 silme
  1. 40 8
      src/views/mallOrder/refund/index.vue

+ 40 - 8
src/views/mallOrder/refund/index.vue

@@ -10,7 +10,7 @@
                         :body-style="{ padding: '10px' }"
                     >
                         <div class="stat-title">退款处理时长</div>
-                        <div class="stat-value">6.35h</div>
+                        <div class="stat-value">{{ handleDuration }}</div>
                     </el-card>
                 </el-col>
                 <el-col :span="4">
@@ -20,7 +20,7 @@
                         :body-style="{ padding: '10px' }"
                     >
                         <div class="stat-title">待平台处理</div>
-                        <div class="stat-value">10</div>
+                        <div class="stat-value">{{ stat.pendingHandleCount }}</div>
                     </el-card>
                 </el-col>
                 <el-col :span="4">
@@ -30,7 +30,7 @@
                         :body-style="{ padding: '10px' }"
                     >
                         <div class="stat-title">退款待处理</div>
-                        <div class="stat-value">10</div>
+                        <div class="stat-value">{{ stat.pendingHandleCount }}</div>
                     </el-card>
                 </el-col>
                 <el-col :span="4">
@@ -40,7 +40,7 @@
                         :body-style="{ padding: '10px' }"
                     >
                         <div class="stat-title">待平台收货</div>
-                        <div class="stat-value">10</div>
+                        <div class="stat-value">{{ stat.waitingPlatformReceiveCount }}</div>
                     </el-card>
                 </el-col>
                 <el-col :span="4">
@@ -49,8 +49,8 @@
                         class="stat-card bg-gray-50"
                         :body-style="{ padding: '10px' }"
                     >
-                        <div class="stat-title">24小时内即将追期</div>
-                        <div class="stat-value">10</div>
+                        <div class="stat-title">24小时内即将逾期</div>
+                        <div class="stat-value">{{ stat.expiringIn24hCount }}</div>
                     </el-card>
                 </el-col>
                 <el-col :span="4">
@@ -60,7 +60,7 @@
                         :body-style="{ padding: '10px' }"
                     >
                         <div class="stat-title">待买家处理</div>
-                        <div class="stat-value">10</div>
+                        <div class="stat-value">{{ stat.waitingBuyerHandleCount }}</div>
                     </el-card>
                 </el-col>
             </el-row>
@@ -135,7 +135,7 @@
 </template>
 
 <script setup>
-    import { ref, reactive, onMounted } from 'vue';
+    import { ref, reactive, computed, onMounted } from 'vue';
     import { EleMessage } from 'ele-admin-plus/es';
     import request from '@/utils/request';
     import PageSearch from './components/page-search.vue';
@@ -160,12 +160,44 @@
 
     const list = ref([]);
 
+    const stat = ref({
+        pendingHandleCount: 0,
+        waitingPlatformReceiveCount: 0,
+        expiringIn24hCount: 0,
+        waitingBuyerHandleCount: 0,
+        avgHandleSeconds: 0
+    });
+
+    const handleDuration = computed(() => {
+        const seconds = Number(stat.value.avgHandleSeconds || 0);
+        return `${(seconds / 3600).toFixed(2)}h`;
+    });
+
+    const fetchStat = () => {
+        request
+            .get('/shop/shopOrder/refundStat')
+            .then((res) => {
+                if (res.data.code !== 200) {
+                    EleMessage.error(res.data.msg);
+                    return;
+                }
+                stat.value = {
+                    ...stat.value,
+                    ...(res.data.data || {})
+                };
+            })
+            .catch((e) => {
+                EleMessage.error(e.message || '获取退款统计失败');
+            });
+    };
+
     const pushSmsDialogRef = ref(null);
     const refundDetailDialogRef = ref(null);
     const confirmRefundDialogRef = ref(null);
     const remarkRef = ref(null);
 
     const fetchData = () => {
+        fetchStat();
         loading.value = true;
         const params = {
             ...pageParams,