From a693be318296de8fd66c43f432edeb78a0aeaf43 Mon Sep 17 00:00:00 2001
From: wangyx <2838268875@qq.com>
Date: Thu, 14 Aug 2025 16:09:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9C=8B=E6=88=BF=E9=A1=B5=E9=9D=A2=E6=90=AD?=
 =?UTF-8?q?=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                  |   9 +
 pages/tabBar/work/index.vue |   6 +-
 pagesA/kfPage/list.vue      | 571 ++++++++++++++++++++++++++++++++++++
 static/img/close-circle.png | Bin 0 -> 1343 bytes
 4 files changed, 585 insertions(+), 1 deletion(-)
 create mode 100644 pagesA/kfPage/list.vue
 create mode 100644 static/img/close-circle.png

diff --git a/pages.json b/pages.json
index 3709b37..4846fb3 100644
--- a/pages.json
+++ b/pages.json
@@ -143,6 +143,15 @@
           "navigationBarTitleText": "上报",
           "disableScroll": true
         }
+      },
+      {
+      	"path" : "kfPage/list",
+      	"style" : 
+      	{
+      		"navigationBarTitleText" : "预约看房",
+      		"enablePullDownRefresh": true,
+      		"onReachBottomDistance": 100
+      	}
       }
     ]
 	}],
diff --git a/pages/tabBar/work/index.vue b/pages/tabBar/work/index.vue
index 248907c..f402f7d 100644
--- a/pages/tabBar/work/index.vue
+++ b/pages/tabBar/work/index.vue
@@ -100,7 +100,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: '预约看房' },
         { image: "/static/img/强制清退.png", text: "强制清退" },
       ],
       xjList: [
@@ -170,6 +170,10 @@ export default {
         uni.navigateTo({
           url: "/pagesA/force/list/list",
         });
+      }else if (item.text == "预约看房"){
+        uni.navigateTo({
+          url: "/pagesA/kfPage/list"
+        })
       }
     },
     handleBxClick(item) {
diff --git a/pagesA/kfPage/list.vue b/pagesA/kfPage/list.vue
new file mode 100644
index 0000000..dd69e5c
--- /dev/null
+++ b/pagesA/kfPage/list.vue
@@ -0,0 +1,571 @@
+<template>
+  <view class="container">
+    <!-- 搜索框 -->
+    <view class="search-container">
+      <u-search
+        v-model="searchPhone"
+        placeholder="请输入手机号"
+        :show-action="false"
+        :clearabled="true"
+        bg-color="#fff"
+        shape="square"
+        @search="handleSearch"
+        @clear="handleClear"
+      >
+        <template v-slot:prefix>
+          <u-icon name="search" size="16" color="#999"></u-icon>
+        </template>
+      </u-search>
+    </view>
+
+    <!-- 预约列表 -->
+    <view class="appointment-list">
+      <scroll-view scroll-y="true">
+        <view
+          class="appointment-card"
+          v-for="item in filteredAppointmentList"
+          :key="item.id"
+        >
+          <!-- 卡片头部 -->
+          <view class="card-header">
+            <u-icon name="home" size="16" color="#08B3B3"></u-icon>
+            <text class="community-info"
+              >{{ item.community }} | {{ item.houseType }}</text
+            >
+          </view>
+
+          <!-- 卡片内容 -->
+          <view class="card-content">
+            <view class="info-row">
+              <text class="label">预约人：</text>
+              <text class="value">{{ item.appointee }}</text>
+            </view>
+            <view class="info-row">
+              <text class="label">预约人电话：</text>
+              <text class="value">{{ item.phone }}</text>
+            </view>
+            <view class="info-row">
+              <text class="label">预约时间：</text>
+              <text class="value">{{ item.appointmentTime }}</text>
+            </view>
+          </view>
+
+          <!-- 操作按钮 -->
+          <view class="actionButtons">
+            <button class="btn process" @click="handleViewHouse(item)">
+              看房登记
+            </button>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 空状态 -->
+    <u-empty
+      v-if="filteredAppointmentList.length === 0 && !loading"
+      text="暂无预约信息"
+      mode="list"
+    ></u-empty>
+
+    <!-- 加载状态 -->
+    <u-loading-page
+      v-if="loading"
+      :loading="true"
+      text="加载中..."
+    ></u-loading-page>
+
+    <!-- 看房登记弹框 -->
+    <u-popup
+      :show="showRegisterPopup"
+      mode="center"
+      :round="16"
+      @close="handleClosePopup"
+      bgColor="transparent"
+    >
+      <view class="register-popup" @click="showStatusDropdown = false">
+        <view class="popup-close" @click.stop="handleClosePopup">
+          <u-icon
+            name="/static/img/close-circle.png"
+            size="22"
+            color="#666"
+          ></u-icon>
+        </view>
+        <view class="popup-title" style="letter-spacing: 1rpx">看房登记</view>
+
+        <view class="form-container">
+          <!-- 看房状态 -->
+          <view class="form-item">
+            <text class="required">*</text>
+            <text class="form-label"> 看房状态 </text>
+            <view class="dropdown" @click.stop="toggleStatusDropdown">
+              <u-input
+                v-model="viewingStatusText"
+                placeholder="请选择看房状态"
+                :disabled="true"
+                :border="true"
+                shape="round"
+                :custom-style="{ backgroundColor: '#fff' }"
+              >
+                <template v-slot:suffix>
+                  <u-icon
+                    :class="{ 'arrow-open': showStatusDropdown }"
+                    name="arrow-down"
+                    size="14"
+                    color="#999"
+                  ></u-icon>
+                </template>
+              </u-input>
+              <view v-if="showStatusDropdown" class="dropdown-list">
+                <view
+                  v-for="opt in statusColumns"
+                  :key="opt.value"
+                  class="dropdown-item"
+                  @click.stop="selectStatus(opt)"
+                >
+                  {{ opt.text }}
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <!-- 看房说明 -->
+          <view class="form-item" style="flex-direction: column">
+            <text class="form-label">看房说明</text>
+            <u-textarea
+              v-model="viewingDescription"
+              placeholder="请输入看房说明"
+              :border="true"
+              shape="round"
+              :custom-style="{ backgroundColor: '#fff' }"
+              :maxlength="200"
+              :count="true"
+            ></u-textarea>
+          </view>
+        </view>
+
+        <!-- 操作按钮 -->
+        <view class="popup-actions">
+          <u-button
+            type="default"
+            plain
+            :custom-style="{
+              background: '#ffffff',
+              color: '#B0B0B0',
+              borderColor: '#D7D7D7',
+              height: '35px',
+            }"
+            shape="circle"
+            @click="handleCancel"
+          >
+            取消
+          </u-button>
+          <u-button
+            type="primary"
+            :custom-style="{
+              background: '#22C1C3',
+              color: '#ffffff',
+              borderColor: '#22C1C3',
+              height: '35px',
+            }"
+            shape="circle"
+            @click="handleConfirm"
+          >
+            确定
+          </u-button>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchPhone: "", // 搜索手机号
+      loading: false, // 加载状态
+      appointmentList: [
+        {
+          id: 1,
+          community: "西海岸路乐业社区",
+          houseType: "三居室",
+          appointee: "杨斌",
+          phone: "13362000010",
+          appointmentTime: "2025-08-06 上午09:00-12:00",
+          idCard: "370832199606062001",
+        },
+        {
+          id: 2,
+          community: "西海岸路乐业社区",
+          houseType: "三居室",
+          appointee: "曲曼",
+          phone: "17700020202",
+          appointmentTime: "2025-08-06 上午09:00-12:00",
+          idCard: "370832199606062002",
+        },
+      ],
+      showRegisterPopup: false, // 看房登记弹框显示状态
+      currentAppointment: {}, // 当前选中的预约信息
+      viewingStatus: "1", // 看房状态 (1: 已看房, 2: 未看房)
+      viewingStatusText: "已看房", // 看房状态文本
+      viewingDescription: "", // 看房说明
+      showStatusDropdown: false, // 看房状态下拉
+      statusColumns: [
+        {
+          text: "已看房",
+          value: "1",
+        },
+      ],
+    };
+  },
+  computed: {
+    // 过滤后的预约列表
+    filteredAppointmentList() {
+      if (!this.searchPhone) {
+        return this.appointmentList;
+      }
+      return this.appointmentList.filter(
+        (item) =>
+          item.phone.includes(this.searchPhone) ||
+          item.appointee.includes(this.searchPhone)
+      );
+    },
+  },
+  onLoad() {
+    this.loadAppointmentList();
+  },
+  // 下拉刷新
+  onPullDownRefresh() {
+    this.loadAppointmentList();
+  },
+  // 上拉加载
+  onReachBottom() {},
+  methods: {
+    // 加载预约列表
+    loadAppointmentList() {
+      this.loading = true;
+      // 模拟API调用
+      setTimeout(() => {
+        this.loading = false;
+        // 停止下拉刷新
+        uni.stopPullDownRefresh();
+      }, 1000);
+    },
+
+    // 搜索预约
+    handleSearch(value) {
+      console.log("搜索:", value);
+      // 搜索逻辑通过computed属性自动处理
+    },
+
+    // 清空搜索
+    handleClear() {
+      this.searchPhone = "";
+    },
+
+    // 看房登记
+    handleViewHouse(item) {
+      this.currentAppointment = item;
+      this.viewingStatus = item.viewingStatus || "1"; // 如果有已有的看房状态，则使用
+      this.viewingStatusText =
+        this.statusColumns.find((col) => col.value === this.viewingStatus)
+          ?.text || "已看房";
+      this.viewingDescription = item.viewingDescription || "";
+      this.showRegisterPopup = true;
+    },
+
+    // 关闭弹框
+    handleClosePopup() {
+      this.showRegisterPopup = false;
+      this.currentAppointment = {};
+      this.viewingStatus = "1";
+      this.viewingStatusText = "已看房";
+      this.viewingDescription = "";
+      this.showStatusDropdown = false;
+    },
+
+    // 内联下拉切换与选择
+    toggleStatusDropdown() {
+      this.showStatusDropdown = !this.showStatusDropdown;
+    },
+    selectStatus(opt) {
+      this.viewingStatus = opt.value;
+      this.viewingStatusText = opt.text;
+      this.showStatusDropdown = false;
+    },
+
+    // 确定看房登记
+    handleConfirm() {
+      if (!this.viewingStatus) {
+        uni.showToast({
+          title: "请选择看房状态",
+          icon: "none",
+        });
+        return;
+      }
+    },
+
+    // 取消看房登记
+    handleCancel() {
+      this.handleClosePopup();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  background-color: #f8f8f8;
+  padding: 20rpx;
+}
+
+.search-container {
+  margin-bottom: 30rpx;
+}
+
+.appointment-list {
+  .appointment-card {
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 30rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+    position: relative;
+    transition: all 0.3s ease;
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 24rpx;
+
+      .community-info {
+        margin-left: 16rpx;
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+
+    .card-content {
+      background: #fbfbfb;
+      padding: 20rpx;
+
+      .info-row {
+        display: flex;
+        margin-bottom: 16rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .label {
+          color: #999;
+          font-size: 28rpx;
+          min-width: 160rpx;
+          text-align: right;
+        }
+
+        .value {
+          color: #333;
+          font-size: 28rpx;
+          flex: 1;
+        }
+      }
+    }
+
+    .actionButtons {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: 20rpx;
+      margin-left: auto;
+      gap: 20rpx;
+      width: fit-content;
+    }
+
+    .btn {
+      height: 52rpx;
+      line-height: 46rpx;
+      border-radius: 52rpx;
+      background-color: rgba(255, 255, 255, 1);
+      color: rgba(8, 179, 179, 1);
+      font-size: 28rpx;
+      text-align: center;
+      font-family: AlibabaPuHui-regular;
+      border: 2rpx solid rgba(8, 179, 179, 1);
+    }
+  }
+}
+
+/* 看房登记弹框样式 */
+.register-popup {
+  width: 76%;
+  padding: 36rpx 50rpx 32rpx;
+  background: radial-gradient(
+      110% 140% at 80% 0%,
+      rgba(35, 217, 208, 0.35) 0%,
+      rgba(35, 217, 208, 0.18) 22%,
+      rgba(255, 255, 255, 0) 60%
+    ),
+    radial-gradient(
+      120% 140% at 0% 100%,
+      rgba(255, 173, 199, 0.28) 0%,
+      rgba(255, 173, 199, 0.12) 28%,
+      rgba(255, 255, 255, 0) 58%
+    ),
+    #ffffff;
+  border-radius: 45rpx;
+  box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.18);
+  border: 1rpx solid rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+
+  .popup-close {
+    position: absolute;
+    top: -35rpx;
+    right: -48rpx;
+  }
+
+  .popup-title {
+    font-size: 40rpx;
+    font-weight: 700;
+    color: #111;
+    margin-bottom: 36rpx;
+    text-align: center;
+  }
+
+  .form-container {
+    width: 100%;
+    margin-bottom: 32rpx;
+
+    .appointment-info {
+      background-color: #fafafa;
+      border-radius: 16rpx;
+      padding: 24rpx 30rpx;
+      margin-bottom: 28rpx;
+      border: 1rpx solid #efefef;
+      box-shadow: none;
+
+      .info-item {
+        display: flex;
+        margin-bottom: 16rpx;
+        align-items: center;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .label {
+          color: #6c757d;
+          font-size: 28rpx;
+          min-width: 200rpx;
+          font-weight: 500;
+        }
+
+        .value {
+          color: #495057;
+          font-size: 28rpx;
+          flex: 1;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .form-item {
+      margin-bottom: 30rpx;
+      display: flex;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .required {
+        color: #ff0000;
+        font-size: 28rpx;
+        margin-top: 16rpx;
+      }
+      .form-label {
+        display: flex;
+        align-items: center;
+        font-size: 30rpx;
+        margin-bottom: 16rpx;
+        white-space: nowrap;
+        margin-right: 20rpx;
+      }
+      .u-input,
+      .u-textarea {
+        background-color: #fff;
+        border: 1rpx solid #e6e6e6;
+        border-radius: 14rpx;
+        padding: 20rpx;
+        font-size: 28rpx;
+        color: #333;
+        min-height: 80rpx;
+        transition: all 0.3s ease;
+
+        &:focus {
+          border-color: #08b3b3;
+          box-shadow: 0 0 0 2rpx rgba(8, 179, 179, 0.1);
+        }
+      }
+
+      .u-textarea {
+        padding-top: 16rpx;
+        min-height: 120rpx;
+        resize: none;
+      }
+
+      /* 下拉样式 */
+      .dropdown {
+        position: relative;
+      }
+      .dropdown-list {
+        position: absolute;
+        top: calc(100% + 8rpx);
+        left: 0;
+        right: 0;
+        background: #ffffff;
+        border: 1rpx solid #e6e6e6;
+        border-radius: 14rpx;
+        box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
+        z-index: 9;
+        overflow: hidden;
+      }
+      .dropdown-item {
+        padding: 22rpx 24rpx;
+        font-size: 28rpx;
+        color: #333;
+      }
+      .dropdown-item:active {
+        background: #f6f7fb;
+      }
+      .arrow-open {
+        transform: rotate(180deg);
+        transition: transform 0.2s ease;
+      }
+    }
+  }
+
+  .popup-actions {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 36rpx;
+    gap: 28rpx;
+
+    .u-button {
+      flex: 1;
+      border-radius: 48rpx;
+      font-size: 30rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+    }
+  }
+}
+</style>
diff --git a/static/img/close-circle.png b/static/img/close-circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..57e76be3cb919a5ccd4bbfe4355ae0a8f7b25aac
GIT binary patch
literal 1343
zcmV-F1;F}=P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px(`AI}UR9HvVm|5&yQxwL3p9k?I5+aC(#uzn|&}t125<}Ef9h6d(dNA~FEEPnl
z8rtFkRaDKTXa!9?sG(?LsG(x0s1QVm#*=vP$@+Jne|AsLaBq7nv67v8bM{)_{?0mk
zt-aP38!5JT295#_1$NCwAg;;A2f&+>e%zR))QyqteSiyqVZdSC*a9nncY%45zUb7p
zBZ9WK2Ks<0K>Xhn`4gB8%#sxU8>N+??X!VvfFU(VpQg|G8xSL8yENj{?_XoL3YaPB
z@g|0i1a035Tv-9|8qhx^t!`St_U^#(*(j^uCF!a<j9P-W7Xu?phRcEbBt6^qX{zRJ
zj{z<LjwsD9k#usEO(j9wj{y@(2Gb<nx-rDcHny(^rk9>CkaSL2cLRd9Cj<AF6vs<?
zsu$!64BKY{PnIw*mh?dWY(0Xu#{y5Ury#Wk(xwo%?UMaCNzW9|1{P1LB=S@qt-~a}
zw<!eLY;6xs`LR%q=#F*!Q&3LuCg8>luuoFttIaO9Bfrkd7P?td@L5MNoe<%vA_*^-
zG<>r&%NDTxP8Qway`gd96a>RlmuLE8>r#pBqf2{qS<{Pjs-IHOz}^GqNSaa*{1`Ye
zEwofpB-To?eH$<}P5uoWE9tE&W!pyruLE1A`5BU~Yru}=e_WbhDd`~Dj^pUN%xJ2l
z+grRcA1HEGR4&Izir)cAxNoE?C!Q~q6p6Z4Y+nn^$P@+#!E=E}vxh_4stwy)0ZYPr
z$u9Qqa7q89J-r1GdnzI{B)m9M(qAnEqgsk6E@Wa5%=h0aN&7Z|6mzzB16~C7OV1Wb
z8kGn>51gK!e+HZ?>Dvx*KhIL#oFEvBoRW-d&%`Ql+arJ=vwfN`(o&?2kY9mOlHTrw
zTza{@26!n5<^l4Er1LukOMs(+y5eDsq=jALJq(<eY*q%rKY(r0gF7Te?bnsqz7)8p
zWOSLNd%FT!my>4#S0}r*y&|}0L@97U0{#RTE$QoC5X?Vu^b3=^0kyp?@LZ&tl3k>j
zGbH`qCEi1+?+LU1Pn-wI3zCZH>j>9&9<f0xq#!#G*&Ttc`^1ZY(~^FFkmPA*nWVBO
zYO!rU2wa#HegF<m|33l-rT=p!UDO4^c*){8?N2k~fhRJ6oh1F-23R`sLVbj!NY3Gf
zC^Yia(s;xbYuVlr_$gcatRNT-c)WcflO=^`nmiXR=-rvZBuVpf1KZI*$9^j03Q2iM
zwE@2E@N`~L4=Rd<_p?U)RY@n-u}f{}f^5FlI~87@(9~wyeg!xoVXu&MctJ4UtjPW`
z-&AhJxg7;Y$S;z{wRk&Ph#iv78c7qY^ef7(*^>JH9|ddL*yWPHXKiK&0atEA*Dv`K
z!6^63O;gX?%`(}F_OrTaN+ip*A^Pvz&WVzuAnuo{#yx@{i00Ds_OqhhjP>T1gQ)K6
zBU*qWQVXIzYeOsA%vd8Ld~kUSG+iEj1H{c#E}QG}Xtkt0s)DKQ`Yr0YxQ!~y(zw=*
zzNCZxCHjoGC5!9gqGQYP;<ha6$x3Oxcd>m7Fs&g~MASub@D=c7(%T!@D-{oQ7oVXz
zUD6E=*c%2(m9p(aQq@vaE=`!7%*_R&%K5NOxz&R?Kq49ueiE=t8+d8{d*J01sjb8c
z+pY+f$i{w(ThX|Yh@Pexp|&;~D}lw5V&8Tx{{mL%3KC#~<sSe5002ovPDHLkV1jez
Be!~C&

literal 0
HcmV?d00001