zhsw_wechat/pages/jiaofeixiangqing/jiaofeixiangqing.wxml

<view class="container4">

  <!-- 返回按钮 -->
  <view class="custom-nav">
    <view bindtap="goBack">
      <image src="/static_file/backcion.png" mode="aspectFit" class="back-icon"></image>
    </view>
    <view class="nav-title">缴费详情</view>
  </view>

  <!-- 固定在顶部的部分 -->
  <view class="fixed-top-section">
    <!-- 缴费总览卡片 - 美化设计 -->
    <view class="overview-card">
      <!-- 账单金额 -->
      <view class="bill-row">
        <text class="label">账单金额</text>
        <text class="value">¥ {{billData.oughttohavepaid}}</text>
      </view>
      <!-- 余额抵扣 -->
      <view class="bill-row">
        <text class="label">余额抵扣</text>
        <text class="value">¥ {{billData.balancededuction}}</text>
      </view>

      <!-- 减免 -->
      <view class="bill-row">
        <text class="label">减免</text>
        <text class="value">¥ {{billData.allfeewaiver}}</text>
      </view>


      <!-- 滞纳金 -->
      <view class="bill-row">
        <text class="label">滞纳金</text>
        <text class="value">¥ {{billData.latefees}}</text>
      </view>

      <!-- 应缴金额 - 高亮显示 -->
      <view class="bill-row">
        <text class="label">应缴金额</text>
        <text class="value">¥ {{billData.actualdue}}</text>
      </view>

      <!-- 实缴金额 - 高亮显示 -->
      <view class="bill-row highlight-row">
        <text class="label">实缴金额</text>
        <text class="value highlight">¥ {{billData.actualdue}}</text>
      </view>
    </view>

    <!-- 账单明细标题栏 -->
    <view class="bill-list-header">
      <view class="bill-list-title">账单明细</view>
      <view class="bill-count">共{{billData.bills.length}}笔</view>
    </view>
  </view>

  <!-- 可滚动内容区域 - 确保第一个卡片完全可见 -->
  <view class="scrollable-content">
    <!-- 账单明细列表，可滚动区域 -->
    <scroll-view scroll-y="true" class="bill-list-container">
      <block wx:for="{{billData.bills}}" wx:key="billnumber">
        <view class="bill-card">
          <view class="bill-header">
            <view class="meter-reading">
              <text class="water-icon">💧</text>
              <view class="bill-info">
                <text class="bill-number">{{item.billnumber}}</text>
                <text class="due-date">抄表日 {{item.thismeterreadingdate}}</text>
              </view>
            </view>
            <view class="payment-status-tag {{item.status === '3' ? 'paid-tag' : 'unpaid-tag'}}">
              {{item.status === '3' ? '已缴费' : '未缴费'}}
            </view>
          </view>

          <view class="usage-section">
            <view class="usage-item">
              <text class="usage-label">用水量</text>
              <text class="usage-value">{{item.currentwateruse}} m³</text>
            </view>
            <view class="usage-divider"></view>
            <view class="usage-item">
              <text class="usage-label">读数</text>
              <text class="usage-value">{{item.meterReading}}</text>
            </view>
          </view>

          <view class="fee-section">
            <view class="fee-row">
              <text class="fee-label">减免</text>
              <text class="fee-value">¥ {{item.feewaiver}}</text>
            </view>
            <view class="fee-row">
              <text class="fee-label">滞纳金</text>
              <text class="fee-value">¥ {{item.latefees}}</text>
            </view>
          </view>

          <view class="bill-footer">
            <text class="due-label">应付金额</text>
            <text class="total-amount">¥ {{item.actualdue}}</text>
          </view>
        </view>
      </block>
      <!-- 底部空白区域，确保最后一个卡片不会贴近屏幕底部 -->
      <view class="bottom-space"></view>
    </scroll-view>
  </view>
</view>