f

src/pages/report/detail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onLoad } from '@dcloudio/uni-app'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
 import { ref } from 'vue'
 import { getQueryDetailByOrderId, getQueryDetailByOrderNo } from '@/api'
 import VehicleReportShell from '@/components/report/VehicleReportShell.vue'
@@ -18,55 +18,101 @@ definePage({
 const orderNo = ref('')
 const orderId = ref('')
 const loading = ref(true)
+const pending = ref(false)
 const errText = ref('')
 const productName = ref('')
 const queryParams = ref({})
 const rows = ref(normalizeVehicleQueryData([]))
 
+let pollTimer = null
+
 onLoad((options) => {
   orderNo.value = options?.orderNo || ''
   orderId.value = options?.orderId || ''
   void load()
 })
 
-async function load() {
+onUnload(() => {
+  stopPoll()
+})
+
+function stopPoll() {
+  if (pollTimer) {
+    clearInterval(pollTimer)
+    pollTimer = null
+  }
+}
+
+function startPoll() {
+  if (pollTimer)
+    return
+  pollTimer = setInterval(() => {
+    void load({ silent: true })
+  }, 2000)
+}
+
+async function load(opts = {}) {
+  const silent = opts.silent === true
   if (!orderNo.value && !orderId.value) {
     loading.value = false
+    pending.value = false
     errText.value = '缺少订单信息'
     return
   }
-  loading.value = true
-  errText.value = ''
+  if (!silent) {
+    loading.value = true
+    errText.value = ''
+    pending.value = false
+  }
   try {
     const res = orderId.value
-      ? await getQueryDetailByOrderId(orderId.value)
-      : await getQueryDetailByOrderNo(orderNo.value)
+      ? await getQueryDetailByOrderId(orderId.value, { skipLoading: silent })
+      : await getQueryDetailByOrderNo(orderNo.value, { skipLoading: silent })
     const parsed = parseEncryptedQueryReport(res)
     productName.value = parsed.productName || '查询报告'
+
+    if (parsed.pending) {
+      pending.value = true
+      errText.value = parsed.msg || '报告生成中，请稍候…'
+      rows.value = normalizeVehicleQueryData([])
+      startPoll()
+      return
+    }
+
+    stopPoll()
+    pending.value = false
+
     if (parsed.ok) {
       queryParams.value = parsed.queryParams
       rows.value = parsed.rows
-      if (!rows.value.length)
-        errText.value = '暂无报告模块数据'
+      errText.value = rows.value.length ? '' : '暂无报告模块数据'
     }
     else {
+      rows.value = normalizeVehicleQueryData([])
       errText.value = parsed.msg || '加载失败'
     }
   }
   catch {
+    stopPoll()
+    pending.value = false
     errText.value = '网络异常或未登录'
   }
   finally {
-    loading.value = false
+    if (!silent)
+      loading.value = false
   }
 }
 </script>
 
 <template>
   <view class="page-root">
-    <view v-if="loading" class="state">
+    <view v-if="loading && !pending" class="state">
       加载中…
     </view>
+    <view v-else-if="pending" class="state pending">
+      <view class="spinner" />
+      <text>{{ errText || '报告生成中，请稍候…' }}</text>
+    </view>
     <view v-else-if="errText && !rows.length" class="state">
       {{ errText }}
     </view>
@@ -95,6 +141,28 @@ async function load() {
   color: #86909c;
 }
 
+.state.pending {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24rpx;
+}
+
+.spinner {
+  width: 64rpx;
+  height: 64rpx;
+  border: 6rpx solid #e5e6eb;
+  border-top-color: #1768ff;
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .content {
   padding: 24rpx 24rpx 48rpx;
   box-sizing: border-box;