看房记录

pagesA/kfPage/list.vue

@@ -3,7 +3,7 @@
     <!-- 搜索框 -->
     <view class="search-container">
       <u-search
-        v-model="searchPhone"
+        v-model="queryParams.telephone"
         placeholder="请输入手机号"
         :show-action="false"
         :clearabled="true"
@@ -20,7 +20,14 @@
 
     <!-- 预约列表 -->
     <view class="appointment-list">
-      <scroll-view scroll-y="true">
+      <scroll-view
+        scroll-y="true"
+        :lower-threshold="80"
+        @scrolltolower="handleLoadMore"
+        :refresher-enabled="true"
+        :refresher-triggered="refreshing"
+        @refresherrefresh="handleRefresh"
+      >
         <view
           class="appointment-card"
           v-for="item in filteredAppointmentList"
@@ -30,7 +37,7 @@
           <view class="card-header">
             <u-icon name="home" size="16" color="#08B3B3"></u-icon>
             <text class="community-info"
-              >{{ item.community }} | {{ item.houseType }}</text
+              >{{ item.apartmentName }} | {{ item.houseTypeName }}</text
             >
           </view>
 
@@ -38,25 +45,31 @@
           <view class="card-content">
             <view class="info-row">
               <text class="label">预约人：</text>
-              <text class="value">{{ item.appointee }}</text>
+              <text class="value">{{ item.graduateName }}</text>
             </view>
             <view class="info-row">
               <text class="label">预约人电话：</text>
-              <text class="value">{{ item.phone }}</text>
+              <text class="value">{{ item.telephone }}</text>
             </view>
             <view class="info-row">
               <text class="label">预约时间：</text>
-              <text class="value">{{ item.appointmentTime }}</text>
+              <text class="value">{{ formatCheckInTime(
+              item.reservationTimeFrom,
+              item.reservationTimeTo
+            ) }}</text>
             </view>
           </view>
 
           <!-- 操作按钮 -->
-          <view class="actionButtons">
+          <view class="actionButtons" v-if="item.state == 0">
             <button class="btn process" @click="handleViewHouse(item)">
               看房登记
             </button>
           </view>
         </view>
+        <!-- 底部加载与无更多提示 -->
+        <view class="list-footer" v-if="loadingMore">加载中...</view>
+        <view class="list-footer" v-else-if="!hasMore && appointmentList.length > 0">没有更多了</view>
       </scroll-view>
     </view>
 
@@ -179,6 +192,7 @@
 </template>
 
 <script>
+import { listViewing, viewingRegister,viewingDetail } from "@/pages/api";
 export default {
   data() {
     return {
@@ -204,9 +218,17 @@ export default {
           idCard: "370832199606062002",
         },
       ],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      hasMore: true,
+      refreshing: false,
+      loadingMore: false,
       showRegisterPopup: false, // 看房登记弹框显示状态
       currentAppointment: {}, // 当前选中的预约信息
-      viewingStatus: "1", // 看房状态 (1: 已看房, 2: 未看房)
+      viewingStatus: "1", // 看房状态 (1: 已看房, 0: 未看房,2: 已取消)
       viewingStatusText: "已看房", // 看房状态文本
       viewingDescription: "", // 看房说明
       showStatusDropdown: false, // 看房状态下拉
@@ -232,35 +254,125 @@ export default {
     },
   },
   onLoad() {
-    this.loadAppointmentList();
+    this.resetAndLoad();
   },
   // 下拉刷新
   onPullDownRefresh() {
-    this.loadAppointmentList();
+    this.handleRefresh();
   },
   // 上拉加载
-  onReachBottom() {},
+  onReachBottom() {
+    this.handleLoadMore();
+  },
   methods: {
+     formatCheckInTime(fromTime, toTime) {
+      if (!fromTime || !toTime) {
+        return "";
+      }
+
+      try {
+        // 解析开始时间
+        const fromDate = new Date(fromTime);
+        const fromDateStr = fromDate.toISOString().split("T")[0]; // 获取日期部分 YYYY-MM-DD
+        const fromTimeStr = fromDate.toTimeString().substring(0, 5); // 获取时间部分 HH:MM
+
+        // 解析结束时间
+        const toDate = new Date(toTime);
+        const toTimeStr = toDate.toTimeString().substring(0, 5); // 获取时间部分 HH:MM
+
+        // 如果开始和结束是同一天，只显示一次日期
+        if (fromDateStr === toDate.toISOString().split("T")[0]) {
+          return `${fromDateStr} ${fromTimeStr}-${toTimeStr}`;
+        } else {
+          // 如果不是同一天，显示完整格式
+          const toDateStr = toDate.toISOString().split("T")[0];
+          return `${fromDateStr} ${fromTimeStr}-${toDateStr} ${toTimeStr}`;
+        }
+      } catch (error) {
+        console.error("日期格式化错误:", error);
+        return "";
+      }
+    },
+    // 重置并加载
+    resetAndLoad() {
+      this.appointmentList = [];
+      this.queryParams.pageNum = 1;
+      this.hasMore = true;
+      this.refreshing = false;
+      this.loadingMore = false;
+      this.loadAppointmentList();
+    },
+
+    // 下拉刷新
+    handleRefresh() {
+      if (this.loading || this.refreshing) return;
+      this.refreshing = true;
+      this.queryParams.pageNum = 1;
+      this.hasMore = true;
+      this.loadAppointmentList();
+    },
+
+    // 上拉加载更多
+    handleLoadMore() {
+      if (this.loading || this.loadingMore || !this.hasMore) return;
+      this.loadingMore = true;
+      this.loadAppointmentList();
+    },
+
     // 加载预约列表
     loadAppointmentList() {
+      if (this.loading || this.refreshing || this.loadingMore) {
+        // 防抖，避免重复请求
+      }
+      // 首屏或非刷新加载时展示整页 loading
+      if (this.queryParams.pageNum === 1 && !this.refreshing) {
         this.loading = true;
-      // 模拟API调用
-      setTimeout(() => {
-        this.loading = false;
-        // 停止下拉刷新
+      }
+      listViewing(this.queryParams)
+        .then((response) => {
+          const rows = Array.isArray(response?.rows) ? response.rows : [];
+          if (this.queryParams.pageNum === 1) {
+            this.appointmentList = rows;
+          } else if (rows.length) {
+            this.appointmentList = [...this.appointmentList, ...rows];
+          }
+          this.total = Number(response?.total || 0);
+          // 是否还有更多：优先用返回条数与 pageSize 判断，兼容 total
+          const pageHasMore = rows.length >= this.queryParams.pageSize;
+          const totalHasMore = this.appointmentList.length < this.total;
+          this.hasMore = pageHasMore && (this.total ? totalHasMore : true);
+          if (this.hasMore) {
+            this.queryParams.pageNum++;
+          }
+        })
+        .catch((err) => {
+          // 错误时不改变已有列表，仅结束本次加载状态
+        })
+        .finally(() => {
+          // 统一收敛状态
+          if (this.refreshing) {
             uni.stopPullDownRefresh();
-      }, 1000);
+            this.refreshing = false;
+          }
+          this.loading = false;
+          this.loadingMore = false;
+        });
     },
 
     // 搜索预约
     handleSearch(value) {
-      console.log("搜索:", value);
-      // 搜索逻辑通过computed属性自动处理
+      this.queryParams.pageNum = 1;
+      this.loadAppointmentList();
     },
 
     // 清空搜索
     handleClear() {
-      this.searchPhone = "";
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        telephone: "",
+      };
+      this.loadAppointmentList();
     },
 
     // 看房登记
@@ -303,6 +415,27 @@ export default {
         });
         return;
       }
+      const params = {
+        id: this.currentAppointment.id,
+        state: this.viewingStatus,
+        remark: this.viewingDescription,
+      };
+      viewingRegister(params)
+        .then((res) => {
+          if (res.code === 200) {
+            // 先关闭弹框，避免遮挡 toast
+            this.handleClosePopup();
+            this.$nextTick(() => {
+              uni.showToast({
+                title: '提交成功',
+                icon: 'none',
+              });
+              // 成功后重置并刷新列表
+              this.resetAndLoad();
+            });
+          }
+        })
+        .catch(() => {})
     },
 
     // 取消看房登记
@@ -568,4 +701,11 @@ export default {
     }
   }
 }
+
+.list-footer {
+  text-align: center;
+  color: #999;
+  font-size: 26rpx;
+  padding: 20rpx 0;
+}
 </style>