epmet-apartment-work-mp/pagesA/release/list/list.vue

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