rentease-app/pages/meter-readings/meter-readings.vue

<template>
  <view class="meter-readings-page">
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-back" @click="goBack">
          <uni-icons type="left" size="20" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">抄表记录</text>
        <view class="nav-actions">
          <view class="nav-btn" @click="addReading">
            <uni-icons type="plus" size="20" color="#2563EB"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="page-content" @scrolltolower="loadMore">
      <view class="filter-section">
        <view class="filter-tabs">
          <view v-for="(tab, index) in filterTabs" :key="index" class="filter-tab" :class="{ active: currentFilter === tab.value }" @click="switchFilter(tab.value)">
            <text>{{tab.label}}</text>
          </view>
        </view>
      </view>

      <view class="reading-list">
        <view v-for="(item, index) in readingList" :key="index" class="reading-card">
          <view class="reading-header">
            <view class="room-info">
              <text class="room-number">{{item.roomNumber || '-'}}</text>
              <text class="reading-date">{{item.readingDate}}</text>
            </view>
            <view class="reading-type" :class="item.type">
              <text>{{item.type === 'water' ? '水表' : '电表'}}</text>
            </view>
          </view>
          <view class="reading-content">
            <view class="reading-item">
              <text class="item-label">本次读数</text>
              <text class="item-value current">{{item.currentReading}}</text>
            </view>
            <view class="reading-item">
              <text class="item-label">上次读数</text>
              <text class="item-value">{{item.previousReading || '-'}}</text>
            </view>
            <view class="reading-item">
              <text class="item-label">用量</text>
              <text class="item-value usage">{{item.usage || calculateUsage(item)}} {{item.type === 'water' ? '吨' : '度'}}</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="readingList.length === 0 && !isLoading" class="empty-state">
        <text class="empty-text">暂无抄表记录</text>
        <button class="add-btn" @click="addReading">添加记录</button>
      </view>

      <view class="safe-area-bottom" style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
  import { meterReadingApi } from '../../api/index.js'

  export default {
    data() {
      return {
        currentFilter: 'all',
        filterTabs: [
          { label: '全部', value: 'all' },
          { label: '水表', value: 'water' },
          { label: '电表', value: 'electricity' }
        ],
        readingList: [],
        isLoading: false,
        page: 1,
        pageSize: 10,
        hasMore: true
      }
    },
    onLoad() {
      this.loadData()
    },
    onShow() {
      this.loadData()
    },
    methods: {
      async loadData() {
        if (this.isLoading) return
        this.isLoading = true
        try {
          const params = { page: this.page, pageSize: this.pageSize }
          if (this.currentFilter !== 'all') {
            params.type = this.currentFilter
          }
          const res = await meterReadingApi.list(params)
          const list = res.data || []
          if (this.page === 1) {
            this.readingList = list
          } else {
            this.readingList = [...this.readingList, ...list]
          }
          this.hasMore = list.length >= this.pageSize
        } catch (error) {
          uni.showToast({ title: '加载失败', icon: 'none' })
        } finally {
          this.isLoading = false
        }
      },
      loadMore() {
        if (this.hasMore && !this.isLoading) {
          this.page++
          this.loadData()
        }
      },
      switchFilter(value) {
        this.currentFilter = value
        this.page = 1
        this.loadData()
      },
      addReading() {
        uni.navigateTo({ url: '/pages/meter-reading-add/meter-reading-add' })
      },
      calculateUsage(item) {
        if (item.currentReading && item.previousReading) {
          return (parseFloat(item.currentReading) - parseFloat(item.previousReading)).toFixed(2)
        }
        return '-'
      },
      goBack() { uni.navigateBack() }
    }
  }
</script>

<style scoped>
  .meter-readings-page { min-height: 100vh; background: #F8FAFC; display: flex; flex-direction: column; }
  .custom-nav { background: #FFFFFF; border-bottom: 2rpx solid #F1F5F9; }
  .nav-content { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 32rpx; }
  .nav-back { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
  .nav-title { font-size: 36rpx; font-weight: 700; color: #1E293B; }
  .nav-actions { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
  .page-content { flex: 1; padding: 24rpx 32rpx; }
  .filter-section { margin-bottom: 24rpx; }
  .filter-tabs { display: flex; gap: 16rpx; }
  .filter-tab { padding: 16rpx 32rpx; background: #FFFFFF; border-radius: 12rpx; font-size: 28rpx; color: #64748B; }
  .filter-tab.active { background: #2563EB; color: #FFFFFF; }
  .reading-list { display: flex; flex-direction: column; gap: 24rpx; }
  .reading-card { background: #FFFFFF; border-radius: 24rpx; padding: 32rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
  .reading-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; }
  .room-info { display: flex; flex-direction: column; gap: 8rpx; }
  .room-number { font-size: 32rpx; font-weight: 700; color: #1E293B; }
  .reading-date { font-size: 24rpx; color: #94A3B8; }
  .reading-type { padding: 8rpx 20rpx; border-radius: 8rpx; font-size: 24rpx; }
  .reading-type.water { background: #DBEAFE; color: #2563EB; }
  .reading-type.electricity { background: #FEF3C7; color: #D97706; }
  .reading-content { display: flex; justify-content: space-around; padding-top: 24rpx; border-top: 2rpx solid #F1F5F9; }
  .reading-item { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
  .item-label { font-size: 24rpx; color: #94A3B8; }
  .item-value { font-size: 32rpx; font-weight: 600; color: #1E293B; }
  .item-value.current { color: #2563EB; }
  .item-value.usage { color: #10B981; }
  .empty-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 0; }
  .empty-text { font-size: 28rpx; color: #94A3B8; margin-bottom: 32rpx; }
  .add-btn { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: #FFFFFF; font-size: 28rpx; padding: 24rpx 64rpx; border-radius: 16rpx; border: none; }
</style>