zhsw_wechat/pages/zhangdanxiangqing/zdxiangqing.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="bill-card">
    <view class="bill-row">
      <text class="label">本次抄表日期</text>
      <text class="value">{{billDetail.currentDate}}</text>
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text class="label">本次抄表数</text>
      <text class="value">{{billDetail.currentReading}}</text>
    </view>
  </view>

  <!-- 第二个卡片：上次抄表信息 -->
  <view class="bill-card">
    <view class="bill-row">
      <text class="label">上次抄表日期</text>
      <text class="value">{{billDetail.lastDate}}</text>
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text class="label">上次抄表数</text>
      <text class="value">{{billDetail.lastReading}}</text>
    </view>
  </view>

  <!-- 第三个卡片：费用明细 -->
  <view class="bill-card">
    <view class="bill-row">
      <text class="label">用水量</text>
      <text class="value">{{billDetail.usage}}m³</text>
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text class="label">总费用</text>
      <text class="value">{{billDetail.totalAmount}}元</text>
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text class="label">减免费用</text>
      <text class="value">{{billDetail.discount}}元</text>
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text class="label">滞纳金</text>
      <text class="value">{{billDetail.lateFee}}元</text>
    </view>
  </view>

  <!-- 第四个卡片：应缴费用 -->
  <view class="bill-card">
    <view class="bill-row total">
      <text class="label">应缴费用</text>
      <text class="value"><text class="amount">{{billDetail.amount}}</text>元</text>
    </view>
  </view>
</view>