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="search-container">
    <view class="search-button" bindtap="showYearPicker">
      <image src="/static_file/search.png" class="search-icon"></image>
      <text>{{selectedYear || '全部账单'}}</text>
    </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="{{isInvoic&&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 class="picker-mask" wx:if="{{showYearPicker}}" bindtap="hideYearPicker"></view>
  <view class="picker-container-modal {{showYearPicker ? 'show' : ''}}">
    <view class="picker-header">
      <view class="picker-cancel" bindtap="hideYearPicker">取消</view>
      <view class="picker-title">选择年份</view>
      <view class="picker-confirm" bindtap="confirmYearSelection">确定</view>
    </view>
    <picker-view 
      class="year-picker" 
      indicator-style="height: 100rpx; border-top: 1rpx solid #eee; border-bottom: 1rpx solid #eee;" 
      value="{{yearPickerValue}}" 
      bindchange="onYearChange"
    >
      <picker-view-column>
        <view wx:for="{{years}}" wx:key="index" class="picker-item">{{item}}</view>
      </picker-view-column>
    </picker-view>
  </view>
</view>