RentWeAppFront/pages/bill/payHistory.vue

<template>
  <view class="pay-history-page">
    <customNavbar title="缴费记录" />

    <!-- 顶部tab切换 -->
    <view class="tab-bar">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab-item', activeTab === tab.value ? 'active' : '']"
        @click="activeTab = tab.value"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- 收支记录列表 -->
    <scroll-view scroll-y class="scroll-content">
      <view v-if="filteredRecords.length > 0" class="record-list">
        <view
          v-for="(item, index) in filteredRecords"
          :key="index"
          class="record-item"
          @click="goDetail(item)"
        >
          <!-- 左侧信息 -->
          <view class="left">
            <view class="title">{{ item.feeName }}</view>
            <view class="sub">{{ item.timeLabel }}：{{ item.time || '—' }}</view>
          </view>

          <!-- 右侧金额 + 图标 -->
          <view class="right">
            <view
              class="amount"
              :class="item.type === 'income' ? 'income' : 'expense'"
            >
              {{ item.type === 'income' ? '+' : '-' }}{{ item.amount.toFixed(2) }}
            </view>
            <u-icon name="arrow-right" size="32" color="#ccc"></u-icon>
          </view>
        </view>
      </view>

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

<script>
export default {
  data() {
    return {
      activeTab: 'income', // 默认显示“收”
      tabs: [
        { label: '收', value: 'income' },
        { label: '支', value: 'expense' },
      ],
      records: [
        {
          id: 1,
          type: 'income', // 收
          feeName: '第一期租金（2024.01.01 - 2024.03.31）',
          time: '2024-01-05',
          timeLabel: '收款时间',
          amount: 8500,
        },
        {
          id: 2,
          type: 'expense', // 支
          feeName: '押金缴纳',
          time: '2024-01-03',
          timeLabel: '支付时间',
          amount: 5000,
        },
        {
          id: 3,
          type: 'expense',
          feeName: '第二期租金（2024.04.01 - 2024.06.30）',
          time: '',
          timeLabel: '支付时间',
          amount: 8500,
        },
      ],
    };
  },
  computed: {
    filteredRecords() {
      return this.records.filter((r) => r.type === this.activeTab);
    },
  },
  methods: {
    statusText(status) {
      const map = {
        paid: '已支付 / 已收款',
        unpaid: '待支付',
        pending: '处理中',
      };
      return map[status] || '未知状态';
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/bill/detail?id=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-history-page {
  background: #f8f8f8;
  min-height: 100vh;
  padding-top: 175rpx;

  .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: 24rpx 0;
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
      transition: all 0.2s;

      &.active {
        color: #007aff;
        font-weight: 700;
        background: #eaf3ff;
      }
    }
  }

  .record-list {
    padding: 20rpx;

    .record-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);

      .left {
        flex: 1;
        .title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }
        .sub {
          font-size: 24rpx;
          color: #888;
          margin-bottom: 6rpx;
        }
        .status {
          font-size: 24rpx;
          &.paid {
            color: #4caf50;
          }
          &.unpaid {
            color: #f56c6c;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        .amount {
          font-size: 30rpx;
          font-weight: bold;
          margin-right: 10rpx;
          &.income {
            color: #4caf50;
          }
          &.expense {
            color: #f56c6c;
          }
        }
      }
    }
  }

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