预约看房

pages/api.js

@@ -231,4 +231,34 @@ export function updateForceEvictionRecord(data) {
     method: "put",
     params: data,
   });
+}
+// 看房列表
+export function listViewing(data) {
+  return request({
+    url: "/mz/showings/list",
+    method: "get",
+    params: data,
+  });
+}
+// 看房详情
+export function viewingDetail(data) {
+  return request({
+    url: `/mz/showings/${data.id}`,
+    method: "get",
+  });
+}
+// 看房登记
+export function viewingRegister(data) {
+  return request({
+    url: "/mz/showings/registration",
+    method: "post",
+    data: data,
+  });
+}
+// 预约看房提醒数量
+export function getViewingCount() {
+  return request({
+    url: "/mz/showings/getReminderQuantity",
+    method: "get",
+  });
 }

pages/tabBar/work/index.vue

@@ -14,6 +14,14 @@
         >
           <image :src="item.image" class="itemImg"></image>
           <text class="itemText">{{ item.text }}</text>
+          <u-badge
+            v-if="(item.count || 0) > 0"
+            :value="item.count"
+            type="error"
+            max="99"
+            absolute
+            :offset="[0, 4]"
+          />
         </view>
       </view>
     </view>
@@ -86,7 +94,7 @@
 </template>
 
 <script>
-import { getRouters } from "../../../pages/api";
+import { getRouters, getViewingCount } from "@/pages/api";
 export default {
   data() {
     return {
@@ -100,7 +108,7 @@ export default {
         // { image: '/static/img/看房.png', text: '看房确认' },
         { image: "/static/img/退房检查.png", text: "退房检查" },
         { image: "/static/img/释放.png", text: "释放房源检查" },
-        { image: '/static/img/预约.png', text: '预约看房' },
+        { image: "/static/img/预约.png", text: "预约看房", count: 0 },
         { image: "/static/img/强制清退.png", text: "强制清退" },
       ],
       xjList: [
@@ -112,12 +120,12 @@ export default {
         { image: "/static/img/电费.png", text: "电量上报" },
       ],
       bxList: [
-      { image: '/static/img/上报.png', text: '上报' },
+        { image: "/static/img/上报.png", text: "上报" },
-      { image: '/static/img/处理.png', text: '处理' },
+        { image: "/static/img/处理.png", text: "处理" },
       ],
       bsList: [
-      { image: '/static/img/上报.png', text: '上报' },
+        { image: "/static/img/上报.png", text: "上报" },
-      { image: '/static/img/处理.png', text: '处理' },
+        { image: "/static/img/处理.png", text: "处理" },
       ],
     };
   },
@@ -129,7 +137,18 @@ export default {
       });
     }
   },
+  onShow() {
+    this.getViewingCount();
+  },
   methods: {
+    async getViewingCount() {
+      const res = await getViewingCount();
+      this.fyList.forEach((item) => {
+        if (item.text == "预约看房") {
+          item.count = res.data;
+        }
+      });
+    },
     // 获取路由
     async getRouter() {
       const res = await getRouters();
@@ -143,7 +162,7 @@ export default {
         if (menu.children) return hasMenu(menu.children, name);
         return false;
       }
-      console.log('resdata',res.data)
+      console.log("resdata", res.data);
       this.showCheckOut = hasMenu(res.data || res, "Check_out");
       this.showInspection = hasMenu(res.data || res, "Inspection");
       this.showElectric = hasMenu(res.data || res, "ElectricMeterRecord");
@@ -170,10 +189,10 @@ export default {
         uni.navigateTo({
           url: "/pagesA/force/list/list",
         });
-      }else if (item.text == "预约看房"){
+      } else if (item.text == "预约看房") {
         uni.navigateTo({
-          url: "/pagesA/kfPage/list"
+          url: "/pagesA/kfPage/list",
-        })
+        });
       }
     },
     handleBxClick(item) {
@@ -183,8 +202,8 @@ export default {
         });
       } else {
         uni.navigateTo({
-          url:"/pagesA/bxPage/bxReport"
+          url: "/pagesA/bxPage/bxReport",
-        })
+        });
       }
     },
     handleBsClick(item) {
@@ -260,6 +279,7 @@ export default {
 }
 
 .conItem-cont-item {
+  position: relative;
   width: 23%;
   display: flex;
   justify-content: center;

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() {
-      this.loading = true;
+      if (this.loading || this.refreshing || this.loadingMore) {
-      // 模拟API调用
+        // 防抖，避免重复请求
-      setTimeout(() => {
+      }
-        this.loading = false;
+      // 首屏或非刷新加载时展示整页 loading
-        // 停止下拉刷新
+      if (this.queryParams.pageNum === 1 && !this.refreshing) {
-        uni.stopPullDownRefresh();
+        this.loading = true;
-      }, 1000);
+      }
+      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();
+            this.refreshing = false;
+          }
+          this.loading = false;
+          this.loadingMore = false;
+        });
     },
 
     // 搜索预约
     handleSearch(value) {
-      console.log("搜索:", value);
+      this.queryParams.pageNum = 1;
-      // 搜索逻辑通过computed属性自动处理
+      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>