Browse Source

Merge branch '815' into dev

dev
wangyx 1 week ago
parent
commit
ede691874a
  1. 152
      pagesA/kfPage/list.vue

152
pagesA/kfPage/list.vue

@ -24,12 +24,9 @@
scroll-y="true" scroll-y="true"
:lower-threshold="150" :lower-threshold="150"
@scrolltolower="handleLoadMore" @scrolltolower="handleLoadMore"
@scroll="handleScroll"
:refresher-enabled="true" :refresher-enabled="true"
:refresher-triggered="refreshing" :refresher-triggered="refreshing"
@refresherrefresh="handleRefresh" @refresherrefresh="handleRefresh"
:scroll-top="scrollTop"
:scroll-with-animation="false"
:enable-back-to-top="true" :enable-back-to-top="true"
> >
<view <view
@ -72,16 +69,18 @@
</view> </view>
</view> </view>
<!-- 底部加载与无更多提示 --> <!-- 底部加载与无更多提示 -->
<view class="list-footer" v-if="loadingMore">加载中...</view> <view v-if="loading" class="loading-more">
<view class="list-footer" v-else-if="!hasMore && appointmentList.length > 0">没有更多了</view> <text>加载中...</text>
</view>
<view v-if="!hasMore && appointmentList.length > 0" class="no-more">
<text>没有更多数据了</text>
</view>
</scroll-view> </scroll-view>
<!-- 空状态 --> <!-- 空状态 -->
<u-empty <view v-if="appointmentList.length === 0 && !loading" class="empty-state">
v-if="appointmentList.length === 0 && !loading" <text class="empty-text">暂无预约信息</text>
text="暂无预约信息" </view>
mode="list"
></u-empty>
<!-- 加载状态 --> <!-- 加载状态 -->
<u-loading-page <u-loading-page
@ -199,20 +198,16 @@ import { listViewing, viewingRegister,viewingDetail } from "@/pages/api";
export default { export default {
data() { data() {
return { return {
searchPhone: "", //
loading: false, // loading: false, //
appointmentList: [], appointmentList: [],
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
telephone: "",
}, },
total: 0, total: 0,
hasMore: true, hasMore: true,
refreshing: false, refreshing: false,
loadingMore: false,
scrollTop: 0,
isScrolling: false,
scrollTimer: null,
showRegisterPopup: false, // showRegisterPopup: false, //
currentAppointment: {}, // currentAppointment: {}, //
viewingStatus: "1", // (1: , 0: ,2: ) viewingStatus: "1", // (1: , 0: ,2: )
@ -227,16 +222,16 @@ export default {
], ],
}; };
}, },
onLoad() { async onLoad() {
this.resetAndLoad(); await this.resetAndLoad();
}, },
// //
onPullDownRefresh() { async onPullDownRefresh() {
this.handleRefresh(); await this.handleRefresh();
}, },
// //
onReachBottom() { async onReachBottom() {
this.handleLoadMore(); await this.handleLoadMore();
}, },
methods: { methods: {
formatCheckInTime(fromTime, toTime) { formatCheckInTime(fromTime, toTime) {
@ -268,97 +263,84 @@ export default {
} }
}, },
// //
resetAndLoad() { async resetAndLoad() {
this.appointmentList = []; this.appointmentList = [];
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.hasMore = true; this.hasMore = true;
this.refreshing = false; this.refreshing = false;
this.loadingMore = false; await this.loadAppointmentList(true);
this.scrollTop = 0; //
this.loadAppointmentList();
}, },
// //
handleRefresh() { async handleRefresh() {
if (this.loading || this.refreshing) return;
this.refreshing = true;
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.refreshing = true;
this.hasMore = true; this.hasMore = true;
this.scrollTop = 0; // await this.loadAppointmentList(true);
this.loadAppointmentList();
}, },
//
handleScroll(e) {
this.isScrolling = true;
//
clearTimeout(this.scrollTimer);
this.scrollTimer = setTimeout(() => {
this.isScrolling = false;
}, 100);
},
// //
handleLoadMore() { async handleLoadMore() {
if (this.loading || this.loadingMore || !this.hasMore || this.isScrolling) return; if (!this.hasMore || this.loading) return;
this.loadingMore = true;
this.loadAppointmentList(); await this.loadAppointmentList();
}, },
// //
loadAppointmentList() { async loadAppointmentList(isRefresh = false) {
if (this.loading || this.refreshing || this.loadingMore) { if (this.loading) return;
//
}
// loading
if (this.queryParams.pageNum === 1 && !this.refreshing) {
this.loading = true; this.loading = true;
}
listViewing(this.queryParams) try {
.then((response) => { const response = await listViewing(this.queryParams);
if (response.code === 200) {
const rows = Array.isArray(response?.rows) ? response.rows : []; const rows = Array.isArray(response?.rows) ? response.rows : [];
if (this.queryParams.pageNum === 1) {
if (isRefresh) {
this.appointmentList = rows; this.appointmentList = rows;
} else if (rows.length) { this.queryParams.pageNum = 1;
} else {
this.appointmentList = [...this.appointmentList, ...rows]; this.appointmentList = [...this.appointmentList, ...rows];
} }
this.total = Number(response?.total || 0); this.total = Number(response?.total || 0);
// pageSize total
const pageHasMore = rows.length >= this.queryParams.pageSize; //
const totalHasMore = this.appointmentList.length < this.total; if (rows.length < this.queryParams.pageSize) {
this.hasMore = pageHasMore && (this.total ? totalHasMore : true); this.hasMore = false;
if (this.hasMore) { } else {
this.hasMore = true;
this.queryParams.pageNum++; this.queryParams.pageNum++;
} }
})
.catch((err) => {
//
})
.finally(() => {
//
if (this.refreshing) {
uni.stopPullDownRefresh();
this.refreshing = false;
} }
} catch (error) {
console.error("加载预约列表失败:", error);
} finally {
this.loading = false; this.loading = false;
this.loadingMore = false; this.refreshing = false;
}); }
}, },
// //
handleSearch(value) { async handleSearch(value) {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.loadAppointmentList(); this.hasMore = true;
await this.loadAppointmentList(true);
}, },
// //
handleClear() { async handleClear() {
this.queryParams = { this.queryParams = {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
telephone: "", telephone: "",
}; };
this.loadAppointmentList(); this.hasMore = true;
await this.loadAppointmentList(true);
}, },
// //
@ -696,4 +678,26 @@ export default {
font-size: 26rpx; font-size: 26rpx;
padding: 20rpx 0; padding: 20rpx 0;
} }
.loading-more,
.no-more {
text-align: center;
padding: 30rpx;
color: #999;
font-size: 26rpx;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 30rpx;
color: #999;
}
.empty-text {
font-size: 28rpx;
color: #999;
}
</style> </style>

Loading…
Cancel
Save