RentWeAppFront/pages/center/myLease.vue

<template>
  <view class="page">
    <!-- 顶部自定义导航栏 -->
    <customNavbar title="我的租赁资产" />

    <!-- 筛选栏 -->
<!--    <view class="filter-bar">
      <u-button
        v-for="(item, index) in filters"
        :key="index"
        :type="currentFilter === item.value ? 'primary' : 'default'"
        size="mini"
        class="filter-btn"
        @click="changeFilter(item.value)"
      >
        {{ item.label }}
      </u-button>
    </view> -->

    <!-- 租赁资产列表组件 -->
    <scroll-view
      scroll-y
      class="scroll-content"
      @scrolltolower="loadMore"
    >
      <asset-list
        :list="assetList"
        :load-status="loadStatus"
        @click="goDetail"
      />
    </scroll-view>
  </view>
</template>

<script>
import AssetList from '@/components/asset/assetList.vue'

export default {
  name: 'MyLease',
  components: { AssetList},
  data() {
    return {
      filters: [
        { label: '全部', value: 'all' },
        { label: '进行中', value: 'active' },
        { label: '即将到期', value: 'expiring' },
        { label: '已到期', value: 'expired' },
      ],
      currentFilter: 'all',
      assetList: [],
      pageNo: 1,
      pageSize: 10,
      loadStatus: 'loadmore',
    };
  },
  onLoad() {
    this.loadAssets();
  },
  methods: {
    changeFilter(value) {
      if (this.currentFilter === value) return;
      this.currentFilter = value;
      this.pageNo = 1;
      this.assetList = [];
      this.loadAssets();
    },

    loadAssets() {
      this.loadStatus = 'loading';

      setTimeout(() => {
        const mock = [
          {
            id: 1,
            name: '科技园写字楼 501',
            address: '深圳市南山区科兴科学园 A 栋',
            // statusText: '进行中',
            // status: 'active',
            cover: '/static/img/index/swiper/swiper3.jpg',
          },
          {
            id: 2,
            name: '万科公寓 2101',
            address: '龙华区民治街道梅龙路 8 号',
            // statusText: '已到期',
            // status: 'expired',
            cover: '/static/img/index/swiper/swiper3.jpg',
          },
        ];

        let filtered = mock;
        if (this.currentFilter !== 'all') {
          filtered = mock.filter(item => item.status === this.currentFilter);
        }

        this.assetList = this.pageNo === 1 ? filtered : [...this.assetList, ...filtered];
        this.loadStatus = 'nomore';
      }, 500);
    },

    loadMore() {
      if (this.loadStatus === 'nomore') return;
      this.pageNo++;
      this.loadAssets();
    },

    goDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/assetsDetail?id=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f7f8fa;
  padding-top: 120rpx;
}

.filter-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 0;
  margin-top: var(--custom-navbar-height);
  border-bottom: 1rpx solid #f0f0f0;

  .filter-btn {
    min-width: 150rpx;
    text-align: center;
    font-size: 26rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 40rpx;
    margin: 0 8rpx;
  }
}

.scroll-content {
  flex: 1;
  height: calc(100vh - 200rpx);
}
</style>