酒店订房与订房记录改动

src/views/content/bookingRecord/index.vue

@@ -27,10 +27,10 @@
 
     <!-- 状态分类 Tab -->
     <el-tabs v-model="activeTab" @tab-change="handleTabChange">
-      <el-tab-pane label="全部" name="all" />
-      <el-tab-pane label="预约成功" name="0" />
-      <el-tab-pane label="待支付" name="1" />
-      <el-tab-pane label="退订房间" name="2" />
+      <el-tab-pane :label="`全部（${tabCounts.all}）`" name="all" />
+      <el-tab-pane :label="`预约成功（${tabCounts['0']}）`" name="0" />
+      <el-tab-pane :label="`待支付（${tabCounts['1']}）`" name="1" />
+      <el-tab-pane :label="`退订房间（${tabCounts['2']}）`" name="2" />
     </el-tabs>
 
     <!-- 表格 -->
@@ -135,6 +135,9 @@ const dataList = ref([]);
 
 const activeTab = ref('all');
 
+// 各 Tab 数量（复用列表接口的 total，不新增后端接口）
+const tabCounts = reactive({ all: 0, 0: 0, 1: 0, 2: 0 });
+
 const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
@@ -172,6 +175,32 @@ async function getList() {
   } finally {
     loading.value = false;
   }
+  loadCounts();
+}
+
+// 统计各状态数量：按当前搜索条件（不含 status）分别取 total
+async function loadCounts() {
+  const base = {
+    pageNum: 1,
+    pageSize: 1,
+    contactName: queryParams.contactName,
+    contactPhone: queryParams.contactPhone,
+    hotelName: queryParams.hotelName
+  };
+  try {
+    const [all, s0, s1, s2] = await Promise.all([
+      listBooking({ ...base }),
+      listBooking({ ...base, status: '0' }),
+      listBooking({ ...base, status: '1' }),
+      listBooking({ ...base, status: '2' })
+    ]);
+    tabCounts.all = all.total || 0;
+    tabCounts['0'] = s0.total || 0;
+    tabCounts['1'] = s1.total || 0;
+    tabCounts['2'] = s2.total || 0;
+  } catch (err) {
+    console.error('加载数量失败:', err);
+  }
 }
 
 function handleQuery() {