feat: 订单列表接口对接

pages/order/list.vue

@@ -1,7 +1,11 @@
 <template>
-  <view class="order-page">
-    <!-- 顶部导航栏 - 固定定位 -->
-    <view class="top-nav-fixed">
+  <z-paging
+    ref="paging"
+    v-model="dataList"
+    safe-area-inset-bottom
+    @query="queryList"
+  >
+    <template #top>
       <TopNavBar>
         <template #title>
           <Tabs
@@ -11,33 +15,40 @@
           />
         </template>
       </TopNavBar>
-    </view>
+    </template>
 
-    <!-- 工单列表区域 - 全屏模式 -->
-    <OrderList
-      :orderList="currentOrderList"
-      :hasMore="hasMore"
-      :isLoading="isLoading"
-      :currentTab="currentTab"
-      :emptyText="getEmptyText()"
-      :useVirtualList="false"
-      :virtualListHeight="'100vh'"
-      :cellHeightMode="'auto'"
-      :fixedHeight="120"
-      @refresh="handleRefresh"
-      @loadMore="handleLoadMore"
-      @orderClick="handleOrderClick"
-      @orderCall="handleOrderCall"
-      @orderComplete="handleOrderComplete"
+    <template #empty>
+      <CustomEmpty statusText="您暂无订单" />
+    </template>
+
+    <template #refresher="{ refresherStatus }">
+      <CustomRefresher :status="refresherStatus" />
+    </template>
+
+    <template #loadingMoreNoMore>
+      <CustomNoMore />
+    </template>
+
+    <OrderCard
+      v-for="(item, index) in dataList"
+      :key="item.id || index"
+      :orderData="item"
+      @click="handleOrderClick"
+      @call="handleOrderCall"
+      @complete="handleOrderComplete"
     />
-  </view>
+  </z-paging>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import TopNavBar from "./components/TopNavBar/index.vue";
 import Tabs from "./components/Tabs/index.vue";
-import OrderList from "./components/OrderList/index.vue";
+import OrderCard from "./components/OrderCard/index.vue";
+import CustomEmpty from "./components/CustomEmpty/index.vue";
+import CustomRefresher from "./components/CustomRefresher/index.vue";
+import CustomNoMore from "./components/CustomNoMore/index.vue";
+import { userOrderList, userWorkOrderList } from "@/request/api/OrderApi";
 
 // Tab配置
 const tabList = ref([
@@ -46,214 +57,69 @@ const tabList = ref([
 ]);
 
 // 当前状态
-const currentTab = ref("all");
 const currentTabIndex = ref(0);
-const isLoading = ref(false);
-const hasMore = ref(true);
-const pageNum = ref(1);
-const pageSize = ref(10);
-const showConsultationBar = ref(false);
+const dataList = ref([]);
+const paging = ref(null);
 
-// 工单数据
-const allOrderList = ref([]);
-const serviceOrderList = ref([]);
+const queryList = async (pageNum, pageSize) => {
+  try {
+    let apiCall;
+    // 根据当前Tab选择不同的API
+    if (currentTabIndex.value === 0) {
+      // 全部订单
+      apiCall = userOrderList({ pageNum, pageSize });
+    } else {
+      // 服务工单
+      apiCall = userWorkOrderList({ pageNum, pageSize });
+    }
 
-// 模拟工单数据
-const mockOrderData = [
-  {
-    id: "001",
-    title: "空调不制冷，需要维修",
-    createTime: "2024-01-15 14:30",
-    contactName: "张先生",
-    contactPhone: "138****8888",
-    status: "pending",
-    type: "service",
-  },
-  {
-    id: "002",
-    title: "卫生间水龙头漏水",
-    createTime: "2024-01-15 10:20",
-    contactName: "李女士",
-    contactPhone: "139****9999",
-    status: "processing",
-    type: "service",
-  },
-  {
-    id: "003",
-    title: "客厅灯泡需要更换",
-    createTime: "2024-01-14 16:45",
-    contactName: "王先生",
-    contactPhone: "137****7777",
-    status: "completed",
-    type: "service",
-  },
-  {
-    id: "004",
-    title: "普通订单 - 商品配送",
-    createTime: "2024-01-14 09:15",
-    contactName: "赵女士",
-    contactPhone: "136****6666",
-    status: "completed",
-    type: "order",
-  },
-  {
-    id: "005",
-    title: "网络连接异常",
-    createTime: "2024-01-15 11:30",
-    contactName: "刘先生",
-    contactPhone: "135****5555",
-    status: "pending",
-    type: "service",
-  },
-];
+    const res = await apiCall;
+    console.log("API响应:", res);
 
-// 计算当前显示的工单列表
-const currentOrderList = computed(() => {
-  return currentTab.value === "all"
-    ? allOrderList.value
-    : serviceOrderList.value;
-});
+    if (res && res.data && res.data.records) {
+      const records = res.data.records;
+      const hasMore = pageNum < res.data.pages; // 判断是否还有更多数据
 
-// 获取空状态文案
-const getEmptyText = () => {
-  return currentTab.value === "all" ? "暂无订单数据" : "暂无服务工单";
+      // 完成数据加载，第二个参数表示是否还有更多数据
+      paging.value.complete(records, !hasMore);
+      console.log("数据加载完成", records.length, "条记录，hasMore:", hasMore);
+    } else {
+      // 没有数据
+      paging.value.complete([], true);
+    }
+  } catch (error) {
+    console.error("查询列表失败:", error);
+    // 加载失败
+    paging.value.complete(false);
+  }
 };
 
 // Tab切换处理
-const handleTabChange = ({ index, item }) => {
-  console.log("切换到:", item.label);
-  currentTab.value = item.value;
+const handleTabChange = ({ index }) => {
+  console.log("Tab切换到:", index);
   currentTabIndex.value = index;
-
-  // 如果当前Tab没有数据，则加载数据
-  if (currentOrderList.value.length === 0) {
-    loadOrderData(true);
-  }
+  // 清空当前数据并重新加载
+  dataList.value = [];
+  paging.value.reload();
 };
 
-// 加载工单数据
-const loadOrderData = async (isRefresh = false) => {
-  if (isLoading.value) return;
-
-  isLoading.value = true;
-
-  try {
-    // 模拟API请求延迟
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    // 模拟数据过滤
-    let filteredData = [];
-    if (currentTab.value === "all") {
-      filteredData = mockOrderData;
-    } else {
-      filteredData = mockOrderData.filter((item) => item.type === "service");
-    }
-
-    if (isRefresh) {
-      // 刷新数据
-      if (currentTab.value === "all") {
-        allOrderList.value = [...filteredData];
-      } else {
-        serviceOrderList.value = [...filteredData];
-      }
-      pageNum.value = 1;
-      hasMore.value = true;
-    } else {
-      // 加载更多
-      if (currentTab.value === "all") {
-        allOrderList.value.push(...filteredData.slice(0, 2));
-      } else {
-        serviceOrderList.value.push(...filteredData.slice(0, 2));
-      }
-      pageNum.value++;
-
-      // 模拟没有更多数据
-      if (pageNum.value >= 3) {
-        hasMore.value = false;
-      }
-    }
-  } catch (error) {
-    console.error("加载数据失败:", error);
-    uni.showToast({
-      title: "加载失败，请重试",
-      icon: "none",
-    });
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// 下拉刷新
-const handleRefresh = async () => {
-  await loadOrderData(true);
-};
-
-// 上拉加载更多
-const handleLoadMore = async () => {
-  if (!hasMore.value) return;
-  await loadOrderData(false);
-};
-
-// 工单点击处理
+// 处理订单点击
 const handleOrderClick = (orderData) => {
-  console.log("点击工单:", orderData);
-  uni.navigateTo({
-    url: `/pages/order/detail?id=${orderData.id}`,
-  });
+  console.log("订单点击:", orderData);
+  // 这里可以添加订单详情跳转逻辑
 };
 
-// 工单呼叫处理
+// 处理订单呼叫
 const handleOrderCall = (orderData) => {
-  console.log("呼叫:", orderData);
-
-  // 显示底部咨询栏
-  showConsultationBar.value = true;
-
-  uni.makePhoneCall({
-    phoneNumber: orderData.contactPhone.replace(/\*/g, ""),
-    fail: () => {
-      uni.showToast({
-        title: "拨号失败",
-        icon: "none",
-      });
-    },
-  });
+  console.log("订单呼叫:", orderData);
+  // 这里可以添加呼叫逻辑
 };
 
-// 工单完成处理
+// 处理订单完成
 const handleOrderComplete = (orderData) => {
-  console.log("标记完成:", orderData);
-
-  uni.showModal({
-    title: "确认操作",
-    content: "确定要标记此工单为已完成吗？",
-    success: (res) => {
-      if (res.confirm) {
-        // 更新工单状态
-        const targetList =
-          currentTab.value === "all"
-            ? allOrderList.value
-            : serviceOrderList.value;
-        const orderIndex = targetList.findIndex(
-          (item) => item.id === orderData.id
-        );
-        if (orderIndex !== -1) {
-          targetList[orderIndex].status = "completed";
-        }
-
-        uni.showToast({
-          title: "操作成功",
-          icon: "success",
-        });
-      }
-    },
-  });
+  console.log("订单完成:", orderData);
+  // 这里可以添加订单完成逻辑
 };
-
-// 页面加载时初始化数据
-onMounted(() => {
-  loadOrderData(true);
-});
 </script>
 
 <style scoped lang="scss">