zhsw_wechat/pages/lijijiaofei/lijijiaofei.wxml

<view class="container">
  <view bindtap="goBack">
      <image src="/static_file/backcion.png" mode="aspectFit" class="back-icon"></image>
    </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>
  </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" maxlength="9" />
        </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>