init

2026-04-08 16:30:42 +08:00
commit 313c036845
131 changed files with 22393 additions and 0 deletions
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
+import { fetchAdminOrderDetail } from '@/services/admin'
+import type { AdminOrderDetail } from '@/types/admin'
+import { formatAdminDateTime } from '@/utils/admin-time'
+import { formatAdminWebhookEventType } from '@/utils/admin-webhook'
+
+const route = useRoute()
+const loading = ref(true)
+const errorMessage = ref('')
+const detail = ref<AdminOrderDetail | null>(null)
+
+onMounted(async () => {
+  try {
+    const response = await fetchAdminOrderDetail(String(route.params.orderId || ''))
+    detail.value = response.data
+  } catch (error) {
+    errorMessage.value = error instanceof Error ? error.message : '读取订单详情失败'
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <section class="admin-panel">
+    <header class="panel-header">
+      <div>
+        <h1>订单详情</h1>
+        <p>查看订单原始信息、商品子项和关联任务。</p>
+      </div>
+    </header>
+
+    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
+    <div v-if="loading" class="empty-block">订单详情加载中</div>
+
+    <template v-else-if="detail">
+      <section class="info-card">
+        <h2>{{ detail.order.platformOrderId }}</h2>
+        <p>支付状态：<AdminStatusTag :status="detail.order.payStatus" /> · 订单状态：<AdminStatusTag :status="detail.order.orderStatus" /></p>
+        <p>
+          系统绑定：<AdminStatusTag :status="detail.order.bindingSummary.systemBindingStatus" />
+          · 完整绑定：<AdminStatusTag :status="detail.order.bindingSummary.userBindingStatus" />
+        </p>
+        <p>
+          任务进度：{{ detail.order.bindingSummary.completedBindingTaskCount }}/{{ detail.order.bindingSummary.totalTaskCount }} 完整绑定
+          · {{ detail.order.bindingSummary.systemBoundTaskCount }}/{{ detail.order.bindingSummary.totalTaskCount }} 系统绑定
+        </p>
+      </section>
+
+      <section class="table-card">
+        <h3>商品子项</h3>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>SKU</th>
+              <th>商品</th>
+              <th>数量</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in detail.items" :key="item.orderItemId">
+              <td>{{ item.skuCode }}</td>
+              <td>{{ item.skuName }}</td>
+              <td>{{ item.quantity }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <section class="table-card">
+        <h3>关联任务</h3>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>任务号</th>
+              <th>状态</th>
+              <th>系统绑定</th>
+              <th>完整绑定</th>
+              <th>错误</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="task in detail.tasks" :key="task.taskId">
+              <td>
+                <RouterLink :to="`/admin/tasks/${task.taskId}`">{{ task.taskNo }}</RouterLink>
+              </td>
+              <td><AdminStatusTag :status="task.status" /></td>
+              <td><AdminStatusTag :status="task.systemBindingStatus" /></td>
+              <td><AdminStatusTag :status="task.userBindingStatus" /></td>
+              <td>{{ task.lastError || '-' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <section class="table-card">
+        <h3>Webhook 摘要</h3>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>事件 ID</th>
+              <th>类型</th>
+              <th>验签</th>
+              <th>处理</th>
+              <th>时间</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="event in detail.webhookEvents" :key="event.eventId">
+              <td>
+                <RouterLink :to="`/admin/webhook-events/${event.eventId}`">{{ event.eventId }}</RouterLink>
+              </td>
+              <td>{{ formatAdminWebhookEventType(event.eventType) }}</td>
+              <td><AdminStatusTag :status="event.signatureValid ? 'success' : 'failed'" /></td>
+              <td><AdminStatusTag :status="event.processed ? 'success' : 'failed'" /></td>
+              <td>{{ formatAdminDateTime(event.createdAt) }}</td>
+            </tr>
+            <tr v-if="detail.webhookEvents.length === 0">
+              <td colspan="5">当前订单还没有关联的 webhook 记录。</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.admin-panel { display: grid; gap: 16px; }
+.panel-header h1 { margin: 0; color: #1d3555; }
+.panel-header p { margin: 8px 0 0; color: #64748b; }
+.info-card,.table-card,.empty-block,.error-copy {
+  padding: 18px; border-radius: 20px; background: rgba(255,255,255,.94); border: 1px solid rgba(86,108,138,.1);
+}
+.error-copy { color: #b42318; }
+.data-table { width: 100%; border-collapse: collapse; }
+.data-table th,.data-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid rgba(86,108,138,.08); }
+</style>