init

pages/wae/waeRecords.vue

@@ -0,0 +1,154 @@
+<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-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: 175rpx 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-left {
+      display: flex;
+      flex-direction: column;
+      gap: 10rpx;
+
+      .record-title {
+        font-size: 28rpx;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .record-time {
+        font-size: 24rpx;
+        color: #888;
+      }
+    }
+
+    .record-right {
+      display: flex;
+      align-items: center;
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #333;
+
+      .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>