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

<template>
  <view class="checkout-list-bg">
    <u-list
      @scrolltolower="loadMore"
      @refresh="onRefresh"
      :refreshing="refreshing"
      :finished="finished"
      :finished-text="'没有更多了'"
      v-if="list && list.length > 0"
    >
      <u-list-item v-for="item in list" :key="item.chooseRoomRecId">
        <view class="checkout-card" @click="goDetail(item)">
          <image
            v-if="item.houseTypeCoverImg"
            :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>{{ item.graduateName }}</text>
              <text class="gender">{{ item.gender == 1 ? "男" : "女" }}</text>
              <text class="phone">{{ item.telephone }}</text>
            </view>
            <view class="room-date"
              >{{ item.checkInDate }}至{{ item.checkOutDate }}</view
            >
          </view>
        </view>
      </u-list-item>
    </u-list>
    <view v-else class="no-data"> 暂无数据~ </view>
  </view>
</template>

<script>
import { listCheckoutAlert } from "../../../pages/api";
export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      refreshing: false,
      finished: false,
      loading: false,
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    async getList(isLoadMore = false) {
      if (this.loading) return; // 防止重复请求

      this.loading = true;

      try {
        const res = await listCheckoutAlert({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        });

        console.log("列表数据:", res);

        if (res.code === 200) {
          const newList = res.rows || [];

          if (isLoadMore) {
            // 上拉加载更多：追加数据
            this.list = [...this.list, ...newList];
          } else {
            // 下拉刷新或首次加载：替换数据
            this.list = newList;
          }

          // 判断是否还有更多数据
          this.finished = newList.length < this.pageSize;

          // 如果还有数据，页码+1，为下次加载做准备
          if (newList.length > 0) {
            this.pageNum++;
          }
        } else {
          uni.showToast({ title: res.msg || "获取数据失败", icon: "none" });
        }
      } catch (error) {
        console.error("获取列表失败:", error);
        uni.showToast({ title: "网络异常", icon: "none" });
      } finally {
        this.loading = false;
        this.refreshing = false; // 结束刷新状态
      }
    },

    // 下拉刷新
    async onRefresh() {
      this.refreshing = true;
      this.pageNum = 1; // 重置页码
      this.finished = false; // 重置完成状态
      await this.getList(false); // 不是加载更多
    },
    // 上拉加载更多
    async loadMore() {
      if (this.finished || this.loading) return; // 已完成或正在加载则返回
      await this.getList(true); // 是加载更多
    },

    goDetail(item) {
      uni.setStorageSync("checkoutDetail", {
        idCard: item.idCard,
        roomNamePath: item.roomNamePath, // 房间
        graduateName: item.graduateName, // 居住人
        gender: item.gender, // 性别
        telephone: item.telephone, // 联系电话
        checkInDate: item.checkInDate,
        checkOutDate: item.checkOutDate, // 居住日期
        houseTypeCoverImg: item.houseTypeCoverImg,
      });
      uni.navigateTo({
        url: `/pagesA/checkout/detail/detail?houseId=${item.houseId}`,
      });
    },
  },
};
</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;
}
</style>