5 changed files with 217 additions and 6 deletions
@ -0,0 +1,187 @@ |
|||||
|
<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="index"> |
||||
|
<view class="checkout-card" @click="goDetail(item)"> |
||||
|
<image |
||||
|
v-if="item.coverImg" |
||||
|
:src="item.coverImg || ''" |
||||
|
class="room-img" |
||||
|
mode="aspectFill" |
||||
|
></image> |
||||
|
<view class="room-info"> |
||||
|
<view class="room-title">{{ item.roomNamePath }}</view> |
||||
|
<view class="room-user"> |
||||
|
<text>{{ item.graduateName }}</text> |
||||
|
<text class="gender">{{ item.gender == 1 ? "男" : "女" }}</text> |
||||
|
<text class="phone">{{ maskPhoneNumber(item.telephone) }}</text> |
||||
|
</view> |
||||
|
<view class="room-date">{{ item.checkInDate }}至{{ item.checkOutDate }}</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 { listCheckout } from "../../../pages/api"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
isLoading: false, |
||||
|
isRefreshing: false, |
||||
|
noMore: false, |
||||
|
form: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
}, |
||||
|
listData: [], |
||||
|
}; |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.refreshData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
maskPhoneNumber(phoneNumber) { |
||||
|
if (!phoneNumber || phoneNumber.length !== 11) { |
||||
|
return phoneNumber; |
||||
|
} |
||||
|
return phoneNumber.substr(0, 3) + "****" + phoneNumber.substr(7); |
||||
|
}, |
||||
|
// 下拉刷新 |
||||
|
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 res = await listCheckout(this.form); |
||||
|
console.log(res, "res"); |
||||
|
|
||||
|
const tempList = res.rows || []; |
||||
|
let page = this.form.pageNum; |
||||
|
if (page === 1) { |
||||
|
// this.listData = tempList; |
||||
|
this.listData = []; |
||||
|
} else { |
||||
|
if (tempList.length > 0) { |
||||
|
this.listData = [...this.listData, ...tempList]; |
||||
|
} |
||||
|
} |
||||
|
// 判断是否还有更多 |
||||
|
if (res.total <= this.form.pageSize * this.form.pageNum) { |
||||
|
this.noMore = true; |
||||
|
if (page !== 1) { |
||||
|
// uni.showToast({ |
||||
|
// title: "已经加载全部", |
||||
|
// icon: "none" |
||||
|
// }); |
||||
|
} |
||||
|
} |
||||
|
} catch (error) { |
||||
|
uni.showToast({ title: "网络异常", icon: "none" }); |
||||
|
} finally { |
||||
|
this.isLoading = false; |
||||
|
this.isRefreshing = false; |
||||
|
} |
||||
|
}, |
||||
|
goDetail(item) { |
||||
|
uni.setStorageSync("checkoutDetail", { |
||||
|
idCard: item.graduateIdCard, |
||||
|
roomNamePath: item.roomNamePath, // 房间 |
||||
|
graduateName: item.graduateName, // 居住人 |
||||
|
gender: item.gender, // 性别 |
||||
|
telephone: item.telephone, // 联系电话 |
||||
|
checkInDate: item.checkInDate, |
||||
|
checkOutDate: item.checkOutDate, // 居住日期 |
||||
|
houseTypeCoverImg: item.coverImg, |
||||
|
}); |
||||
|
uni.navigateTo({ |
||||
|
url: `/pagesA/force/index/index?houseId=${item.houseId}&idCard=${item.graduateIdCard}`, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</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; |
||||
|
} |
||||
|
.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> |
||||
Loading…
Reference in new issue