RentWeAppFront/pages/wae/waeRecords.vue

<template>
  <view class="water-electric-page">
    <!-- 页面标题栏 -->
   <customNavbar title="水电费明细" />
    <!-- 空状态 -->
    <view v-if="records.length === 0" class="empty">
      <image src="/static/empty.png" mode="aspectFit" />
      <text>暂明细记录</text>
    </view>

    <!-- 列表部分 -->
    <view v-else class="record-list">
      <view
        class="record-item"
        v-for="(item, index) in records"
        :key="index"
        @click="toDetail(item)"
      >
		<view class="record-icon">
			<image src="/static/icon/水费.png" class="icon-1" v-if="item.feeType=='水费'"></image>
			<image src="/static/icon/电费.png" class="icon-2" v-else></image>
		</view>
        <!-- 左侧信息 -->
        <view class="record-left">
          <text class="record-title">{{ item.feeType }}（{{ item.period }}）</text>
          <text class="record-time">支付时间：{{ item.payTime }}</text>
        </view>

        <!-- 右侧金额 + 箭头 -->
        <view class="record-right">
          <view class="amount">
            ￥{{ item.amount.toFixed(2) }}
            <u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [
        {
          id: 1,
          feeType: '电费',
          period: '2024.08.01 - 2024.08.31',
          payTime: '2024-09-05 12:21',
          amount: 120.5
        },
        {
          id: 2,
          feeType: '水费',
          period: '2024.08.01 - 2024.08.31',
          payTime: '',
          amount: 45.8
        },
        {
          id: 3,
          feeType: '电费',
          period: '2024.09.01 - 2024.09.30',
          payTime: '2024-10-03 15:12',
          amount: 133.2
        }
      ]
    };
  },
  methods: {
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/bill/waterElectricDetail?id=${item.id}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.water-electric-page {
  padding: 120rpx 20rpx 20rpx 20rpx;
  
  .header {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    text-align: center;

    .title {
      font-size: 32rpx;
      font-weight: 600;
    }
  }

  .record-list {
    margin-top: 20rpx;
  }

  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 24rpx 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	
	.record-icon{
		display: flex;
		align-items: center;
		justify-content: center;
		.icon-1{
			width: 33rpx;
			height: 47rpx;
		}
		
		.icon-2{
			width: 35rpx;
			height: 57rpx;
		}
	}

    .record-left {
      display: flex;
      flex-direction: column;
      gap: 10rpx;

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

      .record-time {
        font-size: 24rpx;
        color: #86868C;
      }
    }

    .record-right {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-weight: 400;
      color: #222222;

      .amount {
        display: flex;
        align-items: center;
        gap: 8rpx;
      }
    }
  }

  .empty {
    margin-top: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #aaa;
    font-size: 28rpx;

    image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>