|
|
|
@ -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> |
|
|
|
|
