RentWeAppFront/pages/center/contract.vue

<template>
  <view class="contract-page">
	 <!-- 顶部导航栏 -->
     <customNavbar title="我的合同"/>
    <!-- 顶部筛选栏 -->
    <u-tabs
      :list="tabList"
      :current="currentTab"
      @change="onTabChange"
      lineColor="#2979ff"
      activeColor="#2979ff"
    ></u-tabs>

    <!-- 合同列表 -->
    <scroll-view
      scroll-y
      class="scroll-content"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refresh"
    >
      <view v-if="contracts.length > 0" class="contract-list">
        <view
          class="contract-card"
          v-for="item in contracts"
          :key="item.id"
          @click="goDetail(item)"
        >
          <!-- 左侧封面图 -->
          <image
            class="contract-cover"
            :src="item.coverUrl || defaultCover"
            mode="aspectFill"
          />

          <!-- 右侧信息 -->
          <view class="contract-info">
            <view class="top-row">
              <text class="asset-name">{{ item.assetName }}</text>
              <u-icon name="arrow-right" size="28" color="#ccc" />
            </view>
            <view class="asset-room">{{ item.assetRoom || '—' }}</view>
            <view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>

            <view :class="['status-tag', item.status]">
              {{ getStatusText(item.status) }}
            </view>
          </view>
        </view>

        <u-loadmore :status="loadStatus" />
      </view>

      <view v-else class="empty">
        <u-empty mode="list" text="暂无合同记录" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { name: '全部', value: 'all' },
        { name: '待签署', value: 'pending' },
        { name: '已签署', value: 'signed' },
        { name: '已过期', value: 'expired' }
      ],
      currentTab: 0,
      statusFilter: 'all',

      contracts: [],
      pageNo: 1,
      pageSize: 10,
      loadStatus: 'loadmore',
      isRefreshing: false,
      defaultCover: '/static/img/index/swiper/swiper3.jpg' // 可换成你的默认封面
    };
  },
  onLoad() {
    this.loadContracts();
  },
  methods: {
    onTabChange(index) {
      this.currentTab = index;
      this.statusFilter = this.tabList[index].value;
      this.pageNo = 1;
      this.contracts = [];
      this.loadContracts();
    },

    loadContracts() {
      this.loadStatus = 'loading';
      setTimeout(() => {
        const allData = [
          {
            id: 1,
            assetName: '金辉大厦',
            assetRoom: '502',
            coverUrl: '/static/img/index/swiper/swiper3.jpg',
            status: 'pending',
            startDate: '2025-01-01',
            endDate: '2025-12-31'
          },
          {
            id: 2,
            assetName: '东方广场',
            assetRoom: '',
            coverUrl: '/static/img/index/swiper/swiper3.jpg',
            status: 'signed',
            startDate: '2024-03-01',
            endDate: '2025-03-01'
          },
          {
            id: 3,
            assetName: '海景公寓',
            assetRoom: 'A-1201',
            coverUrl: '/static/img/index/swiper/swiper3.jpg',
            status: 'expired',
            startDate: '2023-01-01',
            endDate: '2024-01-01'
          }
        ];

        const filtered =
          this.statusFilter === 'all'
            ? allData
            : allData.filter(i => i.status === this.statusFilter);

        this.contracts = filtered;
        this.loadStatus = 'nomore';
        this.isRefreshing = false;
      }, 400);
    },

    refresh() {
      this.isRefreshing = true;
      this.pageNo = 1;
      this.loadContracts();
    },

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

    goDetail(item) {
	  console.log('跳转合同详情页')
      uni.navigateTo({
        url: `/pages/detail/contractDetail?id=${item.id}`
      });
    },

    getStatusText(status) {
      switch (status) {
        case 'pending':
          return '待签署';
        case 'signed':
          return '已签署';
        case 'expired':
          return '已过期';
        default:
          return '';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.contract-page {
  background-color: #f8f8f8;
  padding-top: 175rpx; /* 给导航栏留空间 */
  min-height: 100vh;
}

.scroll-content {
  height: calc(100vh - 100rpx);
}

.contract-list {
  padding: 20rpx;
}

.contract-card {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.contract-cover {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.contract-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  position: relative;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .asset-name {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
  }
}

.asset-room {
  font-size: 26rpx;
  color: #555;
  margin-top: 10rpx;
}

.date-range {
  font-size: 24rpx;
  color: #888;
  margin-top: 8rpx;
}

.status-tag {
  position: absolute;
  bottom: 10rpx;
  right: 0rpx;
  padding: 6rpx 16rpx;
  border-radius: 24rpx;
  font-size: 24rpx;

  &.pending {
    background: #fff8e1;
    color: #ff9800;
  }
  &.signed {
    background: #e8f5e9;
    color: #4caf50;
  }
  &.expired {
    background: #fbe9e7;
    color: #e53935;
  }
}

.empty {
  margin-top: 200rpx;
}
</style>