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