zhsw_wechat/pages/zhangdanlist/zhangdanlist.wxml

<view class="container">
  <view class="fixed-back" bindtap="goBack">←</view>
  
  <!-- 固定顶部区域 -->
  <view class="header">
    <image class="background" src="{{images.background}}" mode="widthFix" />
  </view>

  <!-- 固定用户信息 -->
  <view class="user-info-container">
    <view class="user-info">
      <view class="user-name">{{userInfo.name}}</view>
      <view class="user-id">
        <image src="/static_file/hh.png" class="id-icon"></image>
        <text>{{userInfo.id}}</text>
      </view>
      <view class="user-address">
        <image src="/static_file/location.png" class="address-icon"></image>
        <text>{{userInfo.address}}</text>
      </view>
    </view>
  </view>
  
  <!-- 添加固定高度的外层容器 -->
  <view class="bill-list-wrapper">
    <!-- 可滚动的账单列表 -->
    <scroll-view class="bill-list" scroll-y="true">
      <block wx:for="{{billList}}" wx:key="index">
        <view class="bill-card" bindtap="goToBillDetail" data-bill="{{item}}">
          <view class="bill-date">
            <text>{{item.billDate}}</text>
            <view wx:if="{{item.isPaid}}" class="invoice-btn" catchtap="getInvoice" data-bill="{{item}}">开发票></view>
          </view>
          
          <view class="bill-info">
            <!-- 水滴图标区域 -->
            <view class="bill-icon">
              <image src="/static_file/water.png" class="water-icon"></image>
            </view>
            
            <!-- 账单信息区域 -->
            <view class="bill-info-left">
              <view class="bill-number">{{item.billNumber}}</view>
              <view class="bill-usage">用水{{item.usage}}m³ | 读数{{item.meterReading}}</view>
              <view class="bill-payment-time">缴费时间: {{item.paymentTime}}</view>
            </view>
            
            <!-- 金额和状态区域 -->
            <view class="bill-info-right">
              <view class="bill-amount {{!item.isPaid ? 'unpaid-amount' : ''}}">¥ {{item.amount}}</view>
              <view class="bill-status {{item.isPaid ? 'paid' : 'unpaid'}}">{{item.isPaid ? '已缴费' : '未缴费'}}</view>
            </view>
          </view>
        </view>
      </block>
      
      <view class="no-more" wx:if="{{billList.length > 0}}"> ─────  没有更多了  ─────</view>
      <view class="no-data" wx:else>暂无账单数据</view>
    </scroll-view>
  </view>
</view>