RentWeAppFront/pages/bill/bill.vue

<template>
  <view class="bill-list-page">
    <!-- 自定义导航栏 -->
    <customNavbar
      title="我的账单"
    ></customNavbar>

    <!-- Tab 按钮 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === 'out' }"
        @click="switchTab('out')"
      >
        支
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'in' }"
        @click="switchTab('in')"
      >
        收
      </view>
    </view>

    <!-- 账单列表 -->
    <scroll-view
      scroll-y
      class="scroll-content"
      :scroll-top="0"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refresh"
      @scrolltolower="loadMore"
    >
      <view v-if="bills.length > 0">
        <view
          class="bill-item"
          v-for="item in bills"
          :key="item.id"
          @click="goDetail(item)"
        >
          <!-- 左侧信息 -->
          <view class="bill-left">
            <text class="bill-name">{{ item.feeName }}</text>
            <text class="bill-date" v-if="item.payTime">支付时间：{{ item.payTime }}</text>
            <text
              class="bill-status"
              v-if="currentTab === 'out'"
            >{{ item.status }}</text>
          </view>

          <!-- 右侧金额 + 箭头 -->
          <view class="bill-right">
            <text class="amount">{{ formatMoney(item.amount) }}</text>
            <u-icon name="arrow-right" size="28" color="#ccc" />
          </view>
        </view>
      </view>

      <view v-else class="empty">
        <u-empty mode="list" text="暂无账单" />
      </view>

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

<script>
export default {
  data() {
    return {
      currentTab: 'out', // in 收 / out 支
      bills: [],
      isRefreshing: false,
      loadStatus: 'more', // u-loadmore 状态
    };
  },
  onLoad(options) {
    // 可以从 options 获取用户ID或合同ID
    this.loadBills();
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab;
      this.loadBills();
    },

    loadBills() {
      // 模拟数据加载
      if (this.currentTab === 'in') {
        this.bills = [
          {
            id: 'b101',
            feeName: '第一期（2024.12.01-2024.12.31）',
            payTime: '2024-12-05',
            amount: 3000,
            status: '已收',
          },
          {
            id: 'b102',
            feeName: '第二期（2025.01.01-2025.01.31）',
            payTime: '',
            amount: 3000,
            status: '未收',
          },
        ];
      } else {
        this.bills = [
          {
            id: 'b201',
            feeName: '第一期租金（2024.12.01-2024.12.31）',
            payTime: '2024-12-05',
            amount: 3000,
            status: '已支付',
          },
          {
            id: 'b202',
            feeName: '第二期租金（2025.01.01-2025.01.31）',
            payTime: '',
            amount: 3000,
            status: '待支付',
          },
        ];
      }
    },

    refresh() {
      this.isRefreshing = true;
      setTimeout(() => {
        this.loadBills();
        this.isRefreshing = false;
      }, 1000);
    },

    loadMore() {
      // 可以调用接口分页加载更多数据
      this.loadStatus = 'noMore';
    },

    formatMoney(val) {
      if (!val && val !== 0) return '—';
      return '¥' + Number(val).toFixed(2);
    },

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

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

.tab-bar {
  display: flex;
  background: #fff;
  margin: 0 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    &.active {
      color: #fff;
      background: #007aff;
    }
  }
}

.scroll-content {
  margin-top: 20rpx;
  padding-bottom: 20rpx;
}

.bill-item {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin: 0 20rpx 20rpx 20rpx;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.bill-left {
  display: flex;
  flex-direction: column;

  .bill-name {
    font-size: 30rpx;
    color: #2D2B2C;
    font-weight: 500;
  }

  .bill-date,
  .bill-status {
    font-size: 24rpx;
    color: #ADADB1;
    margin-top: 18rpx;
  }
}

.bill-right {
  display: flex;
  align-items: center;

  .amount {
    font-size: 30rpx;
    color: #F34038;
    margin-right: 10rpx;
  }
}

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