zhsw_wechat/pages/lijijiaofei/lijijiaofei.wxml

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

    <view 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 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>