You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
4.1 KiB
181 lines
4.1 KiB
<template>
|
|
<view class="checkout-list-bg">
|
|
<scroll-view
|
|
class="content"
|
|
scroll-y
|
|
refresher-enabled
|
|
:refresher-triggered="isRefreshing"
|
|
@refresherrefresh="refreshData"
|
|
@scrolltolower="loadMore"
|
|
style="height: 100vh"
|
|
>
|
|
<view v-for="(item, index) in listData" :key="item.roomId">
|
|
<view class="checkout-card" @click="goDetail(item)">
|
|
<image
|
|
:src="item.houseTypeCoverImg"
|
|
class="room-img"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="room-info">
|
|
<view class="room-title">{{ item.roomNamePath }}</view>
|
|
<view class="room-user">
|
|
<text class="gender">待释放</text>
|
|
</view>
|
|
<view class="room-date">退房日期{{ item.checkoutTime }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="text-align: center" v-if="isLoading">加载中...</view>
|
|
<!-- <view v-else style="text-align: center">没有更多了~</view> -->
|
|
<view v-else-if="listData.length <= 0" class="no-data"> 暂无数据~ </view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { listWaitingReleaseRooms } from "@/pages/api";
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
isRefreshing: false,
|
|
noMore: false,
|
|
form: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
listData: [],
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.refreshData();
|
|
},
|
|
onShow() {
|
|
// 可选：如需每次进入都刷新，取消注释
|
|
this.refreshData();
|
|
},
|
|
methods: {
|
|
// 下拉刷新
|
|
refreshData() {
|
|
this.isRefreshing = true;
|
|
this.noMore = false;
|
|
this.listData = [];
|
|
this.form.pageNum = 1;
|
|
this.fetchData();
|
|
},
|
|
// 上拉加载
|
|
loadMore() {
|
|
if (this.isLoading || this.noMore) return;
|
|
this.isLoading = true;
|
|
this.form.pageNum++;
|
|
this.fetchData();
|
|
},
|
|
// 获取数据
|
|
async fetchData() {
|
|
try {
|
|
const {
|
|
rows = [],
|
|
code,
|
|
msg,
|
|
total
|
|
} = await listWaitingReleaseRooms(this.form);
|
|
if (code === 200) {
|
|
let page = this.form.pageNum;
|
|
if (page === 1) {
|
|
this.listData = rows;
|
|
} else {
|
|
if (rows.length > 0) {
|
|
this.listData = [...this.listData, ...rows];
|
|
}
|
|
}
|
|
if (total < this.form.pageSize *this.form.pageNum) {
|
|
this.noMore = true;
|
|
if (page !== 1) {
|
|
// uni.showToast({
|
|
// title: "已经加载全部",
|
|
// icon: "none",
|
|
// });
|
|
}
|
|
}
|
|
} else {
|
|
uni.showToast({ title: msg || "获取数据失败", icon: "none" });
|
|
}
|
|
} catch (err) {
|
|
uni.showToast({ title: "网络异常", icon: "none" });
|
|
} finally {
|
|
this.isLoading = false;
|
|
this.isRefreshing = false;
|
|
}
|
|
},
|
|
goDetail(item) {
|
|
console.log(item, "item");
|
|
|
|
uni.navigateTo({
|
|
url: `/pagesA/release/detail/detail?roomId=${
|
|
item.roomId
|
|
}&userInfo=${JSON.stringify(item)}`,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.checkout-list-bg {
|
|
background: #f7f7f7;
|
|
min-height: 80vh;
|
|
padding: 24rpx 0;
|
|
}
|
|
.checkout-card {
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
margin: 24rpx 24rpx 0 24rpx;
|
|
padding: 20rpx;
|
|
align-items: center;
|
|
}
|
|
.room-img {
|
|
width: 160rpx;
|
|
height: 120rpx;
|
|
border-radius: 12rpx;
|
|
object-fit: cover;
|
|
margin-right: 20rpx;
|
|
}
|
|
.room-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.room-title {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.room-user {
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.room-user .gender {
|
|
margin-left: 16rpx;
|
|
color: #fcaa30;
|
|
}
|
|
.room-user .phone {
|
|
margin-left: 16rpx;
|
|
}
|
|
.room-date {
|
|
color: #bbb;
|
|
font-size: 26rpx;
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
.no-data {
|
|
text-align: center;
|
|
color: #bbb;
|
|
margin-top: 40rpx;
|
|
}
|
|
</style>
|
|
|