feat: 订单详情代码完善

pages/order/components/CustomNoMore/index.vue

@@ -1,14 +0,0 @@
-<template>
-  <view class="nomore">
-    <image
-      class="nomore-image"
-      mode="aspectFit"
-      src="./images/no_more.png"
-    ></image>
-    <text class="nomore-text">已经到达宇宙尽头啦~</text>
-  </view>
-</template>
-
-<style scoped>
-@import "./styles/index.scss";
-</style>

pages/order/components/CustomNoMore/styles/index.scss

@@ -1,17 +0,0 @@
-.nomore {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  align-items: center;
-  padding: 10px 0;
-}
-.nomore-image {
-  width: 100px;
-  height: 65px;
-}
-.nomore-text {
-  margin-top: 5px;
-  font-size: 12px;
-  color: #222963;
-}

pages/order/components/CustomRefresher/index.vue

@@ -1,39 +0,0 @@
-
-<!-- z-paging自定义的下拉刷新view -->
-<template>
-  <view class="refresher-container">
-    <image
-      class="refresher-image"
-      mode="aspectFit"
-      src="./images/refresher_loading.gif"
-    ></image>
-    <text class="refresher-text">{{ statusText }}</text>
-  </view>
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-const props = defineProps({
-  status: {
-    type: String,
-    default: "",
-  },
-});
-
-const statusText = computed(() => {
-  // 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue);
-  // 获取到当前语言之后，就可以自定义不同语言下的展示内容了
-  const statusTextMap = {
-    default: "哎呀，用点力继续下拉！",
-    "release-to-refresh": "拉疼我啦，松手刷新~~",
-    loading: "正在努力刷新中...",
-    complete: "刷新成功啦~",
-  };
-  return statusTextMap[this.status];
-});
-</script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

pages/order/components/CustomRefresher/styles/index.scss

@@ -1,21 +0,0 @@
-.refresher-container {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  height: 150rpx;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.refresher-image {
-  margin-top: 10rpx;
-  height: 45px;
-  width: 45px;
-}
-
-.refresher-text {
-  margin-top: 10rpx;
-  font-size: 24rpx;
-  color: #666666;
-}

pages/order/components/OrderCard/index.vue

@@ -4,13 +4,13 @@
     <view class="card-header">
       <view class="status-info">
         <image class="status-icon" src="./images/service.png"></image>
-        <view class="order-title">{{ orderData.title }}</view>
+        <view class="order-title">{{ orderData.visitorName }}</view>
       </view>
       <view
         v-if="orderData.status !== 'pending'"
-        :class="['status-tag', `tag-${orderData.status}`]"
+        :class="['status-tag', `tag-${orderData.orderStatus}`]"
       >
-        {{ getStatusText(orderData.status) }}
+        {{ getStatusText(orderData.orderStatus) }}
       </view>
     </view>
 
@@ -25,7 +25,7 @@
       </view>
       <view class="info-row">
         <text class="label">联系房客：</text>
-        <text class="value">{{ orderData.contactName }}</text>
+        <text class="value">{{ orderData.visitorName }}</text>
       </view>
       <view class="info-row">
         <text class="label">联系电话：</text>
@@ -55,7 +55,7 @@ const props = defineProps({
       createTime: "",
       contactName: "",
       contactPhone: "",
-      status: "pending", // pending-待处理, completed-已完成, cancelled-已取消
+      orderStatus: "pending", // pending-待处理, completed-已完成, cancelled-已取消
     }),
   },
 });
@@ -66,10 +66,13 @@ const emit = defineEmits(["click", "call", "complete"]);
 // 获取状态文本
 const getStatusText = (status) => {
   const statusMap = {
-    pending: "待处理",
+    0: "待支付",
-    completed: "已完成",
+    1: "待确认",
-    cancelled: "已取消",
+    2: "待使用",
-    processing: "处理中",
+    3: "已取消",
+    4: "退款中",
+    5: "已关闭",
+    6: "已完成",
   };
   return statusMap[status] || "未知状态";
 };
@@ -97,4 +100,4 @@ defineExpose({
 
 <style scoped lang="scss">
 @import "./styles/index.scss";
-</style>
+</style>

pages/order/components/OrderCard/styles/index.scss

@@ -1,10 +1,10 @@
 .order-card {
   background-color: #fff;
   border-radius: 6px 6px 12px 12px;
-  box-shadow: 0px 3px 8px 0 rgba(0,0,0,0.12); 
+  box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12);
   margin: 12px;
   transition: all 0.3s ease;
-  
+
   &:active {
     transform: scale(0.98);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
@@ -46,37 +46,42 @@
 .status-tag {
   box-sizing: border-box;
   padding: 6px 16px;
-  border-radius: 20px ;
+  border-radius: 20px;
   font-size: 12px;
   font-weight: 500;
-  
+
-  &.tag-pending {
+  &.tag-1 {
-    background-color: #FFF7E6;
+    color: #f00044;
-    color: #FF8C00;
+    border: 1px solid #f00044;
-    border: 1px solid #FFD591;
   }
-  
+
-  &.tag-completed {
+  &.tag-2 {
-    background-color: #F6FFED;
+    color: #ff8c00;
-    color: #52C41A;
+    border: 1px solid #ffd591;
-    border: 1px solid #B7EB8F;
   }
-  
+
-  &.tag-cancelled {
+  &.tag-3 {
-    background-color: #F5F5F5;
+    color: #818181;
+    border: 1px solid #818181;
+  }
+
+  &.tag-4 {
+    color: #00a6ff;
+    border: 1px solid #00a6ff;
+  }
+
+  &.tag-6 {
+    color: #52c41a;
+    border: 1px solid #b7eb8f;
+  }
+
+  &.tag-5 {
+    background-color: #f5f5f5;
     color: #999999;
-    border: 1px solid #D9D9D9;
+    border: 1px solid #d9d9d9;
-  }
-  
-  &.tag-processing {
-    background-color: #E6F7FF;
-    color: #1890FF;
-    border: 1px solid #91D5FF;
   }
 }
 
-
-
 .card-content {
   padding: 16px;
 }
@@ -85,7 +90,7 @@
   display: flex;
   align-items: center;
   margin-bottom: 10px;
-  
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -112,19 +117,19 @@
   width: 280px;
   height: 42px;
   border-radius: 50px;
-  border: 2px solid #FFCA70;
+  border: 2px solid #ffca70;
   font-size: 14px;
   font-weight: 500;
   transition: all 0.3s ease;
-  background: linear-gradient( 179deg, #FFB100 0%, #FF7F19 100%);
+  background: linear-gradient(179deg, #ffb100 0%, #ff7f19 100%);
   color: #ffffff;
   margin: 0 auto;
 
   &:hover {
-    background: linear-gradient(135deg, #FF7A00 0%, #FF6600 100%);
+    background: linear-gradient(135deg, #ff7a00 0%, #ff6600 100%);
   }
-  
+
   &:active {
     transform: scale(0.95);
   }
-}
+}

pages/order/list.vue

@@ -2,6 +2,9 @@
   <z-paging
     ref="paging"
     v-model="dataList"
+    use-virtual-list
+    :force-close-inner-list="true"
+    cell-height-mode="dynamic"
     safe-area-inset-bottom
     @query="queryList"
   >
@@ -21,14 +24,6 @@
       <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"
@@ -46,8 +41,6 @@ import TopNavBar from "./components/TopNavBar/index.vue";
 import Tabs from "./components/Tabs/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配置
@@ -78,14 +71,12 @@ const queryList = async (pageNum, pageSize) => {
 
     if (res && res.data && res.data.records) {
       const records = res.data.records;
-      const hasMore = pageNum < res.data.pages; // 判断是否还有更多数据
 
       // 完成数据加载，第二个参数表示是否还有更多数据
-      paging.value.complete(records, !hasMore);
+      paging.value.complete(records);
-      console.log("数据加载完成", records.length, "条记录，hasMore:", hasMore);
     } else {
       // 没有数据
-      paging.value.complete([], true);
+      paging.value.complete([]);
     }
   } catch (error) {
     console.error("查询列表失败:", error);
@@ -124,4 +115,4 @@ const handleOrderComplete = (orderData) => {
 
 <style scoped lang="scss">
 @import "./styles/list.scss";
-</style>
+</style>