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">王源</view>
      <view class="user-id">
        <image src="/static_file/hh.png" class="id-icon"></image>
        <text>320185452454104</text>
      </view>
      <view class="user-address">
        <image src="/static_file/location.png" class="address-icon"></image>
        <text>徐州市丰县****楼102室</text>
      </view>
      <!-- <view class="change-btn" bindtap="switchMeter">切换水表</view> -->
    </view>
  </view>

  <!-- 缴费金额 -->
  <view class="payment-section">
    <view class="amount-container">
      <view class="amount-title">实缴金额</view>
      <view class="amount-display">
        <text class="amount-value">{{amount}}</text>
        <text class="amount-unit">元</text>
      </view>
      
      <!-- 余额显示 -->
      <view class="balance-info">
        <text class="balance-label">应缴金额：</text>
        <text class="balance-value">{{actualAmount}} </text><text class="balance-unit">元</text>
        <text class="balance-label margin-left">余额：</text>
        <text class="balance-value">{{balance}} </text><text class="balance-unit">元</text>
      </view>
      
      <view class="quick-amount">
        <view class="amount-btn {{selectedAmount == 10 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="10">10元</view>
        <view class="amount-btn {{selectedAmount == 30 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="30">30元</view>
        <view class="amount-btn {{selectedAmount == 50 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="50">50元</view>
        <view class="amount-btn {{selectedAmount == 100 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="100">100元</view>
        <view class="amount-btn {{selectedAmount == 200 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="200">200元</view>
        <view class="amount-btn {{selectedAmount == 500 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="500">500元</view>
        <view class="custom-input-container {{customAmount || inputFocus ? 'selected' : ''}}">
          <text class="yuan-symbol">¥</text>
          <input class="custom-amount-input" type="digit" bindinput="onCustomAmountInput" 
                 value="{{customAmount}}" placeholder="自定义金额"
                 bindfocus="onInputFocus" bindblur="onInputBlur"/>
        </view>
      </view>
    </view>
  </view>

  <!-- 温馨提示 - 调整位置 -->
  <view class="tips">
    <text class="tips-title">温馨提示：</text>
    <text class="tips-content">若无应缴金额，系统将充值到余额。</text>
  </view>

  <!-- 缴费按钮 - 调整样式 -->
  <view class="pay-btn" bindtap="payNow">立即缴费</view>

  <!-- 数字键盘部分 -->
  <view class="keyboard" wx:if="{{showKeyboard}}">
    <view class="keyboard-row">
      <view class="key" bindtap="inputNumber" data-number="1">1</view>
      <view class="key" bindtap="inputNumber" data-number="2">2</view>
      <view class="key" bindtap="inputNumber" data-number="3">3</view>
      <view class="key delete" bindtap="deleteNumber"><image src="/images/delete-icon.png" mode="aspectFit"></image></view>
    </view>
    <view class="keyboard-row">
      <view class="key" bindtap="inputNumber" data-number="4">4</view>
      <view class="key" bindtap="inputNumber" data-number="5">5</view>
      <view class="key" bindtap="inputNumber" data-number="6">6</view>
      <view class="key confirm" bindtap="confirmInput">确定</view>
    </view>
    <view class="keyboard-row">
      <view class="key" bindtap="inputNumber" data-number="7">7</view>
      <view class="key" bindtap="inputNumber" data-number="8">8</view>
      <view class="key" bindtap="inputNumber" data-number="9">9</view>
    </view>
    <view class="keyboard-row">
      <view class="key zero" bindtap="inputNumber" data-number="0">0</view>
      <view class="key" bindtap="inputNumber" data-number=".">.</view>
    </view>
  </view>

</view>