epmet-apartment-work-mp/pagesA/release/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.id">
        <view class="checkout-card" @click="goDetail(item)">
          <image :src="item.img" 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>
      </u-list-item>
    </u-list>
    <div v-else class="no-data">
      暂无数据~
    </div>
  </view>
</template>

<script>
import {listWaitingReleaseRooms} from "../../../common/api";
export default {
  data() {
    return {
      list: [
        // {
        //   id: 1,
        //   img: "/static/img/login-top.png",
        //   roomNo: "5号楼1单元101 房间1",
        //   tenant: "王静",
        //   gender: "女",
        //   phone: "187****8801",
        //   startDate: "2025-04-01",
        //   endDate: "2025-05-08",
        // },
        // {
        //   id: 2,
        //   img: "/static/img/login-top.png",
        //   roomNo: "2号楼1单元501 房间1",
        //   tenant: "刘宇",
        //   gender: "男",
        //   phone: "187****8202",
        //   startDate: "2025-04-01",
        //   endDate: "2025-05-08",
        // },
      ],
      page: 1,
      pageSize: 10,
      refreshing: false,
      finished: false,
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.page = 1;
      this.finished = false;
      this.getList();
    },
    // 上拉加载
    loadMore() {
      if (this.finished) return;
      this.page++;
      this.getList();
    },
		async getList() { 
      try{
        const {rows,code,msg} = await listWaitingReleaseRooms()
        if(code === 200){
            this.list = rows
        }
      }catch(err){
        console.log(err);
      }
    },
		goDetail(item) {
			 uni.navigateTo({
        url: `/pagesA/release/detail/detail?id=${item.id}`
      })
		}
  },
};
</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>