zhsw_wechat/pages/zhangdanlist/zhangdanlist.wxml

<view class="container">
  <!-- 顶部导航以及背景 -->
  <view class="header">
    <image class="background" src="{{images.background}}" mode="widthFix" />
    <view class="back-icon" bindtap="goBack">←</view>
  </view>

  <!-- 添加自定义导航栏 -->
  <view class="custom-nav" style="height: 200rpx; background-color: #4285f4;"></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>
  

  <!-- 账单列表 -->
  <scroll-view class="bill-list-container" scroll-y="true">
    <block wx:for="{{billList}}" wx:key="index">
      <view class="bill-date-section">{{item.date}}</view>
      <view class="bill-card">
        <view class="bill-info">
          <view class="bill-icon">
            <image src="/static_file/water.png" mode="aspectFit"></image>
          </view>
          <view class="bill-details">
            <view class="bill-number">{{item.billNumber}}</view>
            <view class="bill-usage">用水{{item.usage}}㎡ | 读数{{item.startReading}}-{{item.endReading}}</view>
            <view class="bill-payment-time">缴费时间: {{item.paymentTime}}</view>
          </view>
          <view class="bill-amount-status">
            <view class="bill-amount {{item.status === '未缴费' ? 'unpaid' : 'paid'}}">¥ {{item.amount}}</view>
            <view class="bill-status {{item.status === '未缴费' ? 'unpaid' : 'paid'}}">{{item.status}}</view>
          </view>
        </view>
        <view class="bill-action" wx:if="{{item.status === '未缴费'}}">
          <button class="pay-btn">立即缴费</button>
        </view>
        <view class="bill-action" wx:else>
          <button class="detail-btn">开发票 ></button>
        </view>
      </view>
    </block>
    <view class="list-end" wx:if="{{billList.length > 0}}">没有更多了</view>
    <view class="empty-list" wx:else>暂无账单数据</view>
  </scroll-view>
</view>