wxminipay/pages/zf_static/index.wxml

<view class="container">
  <!-- Custom Navigation Bar -->
  <view class="custom-nav">
    <view class="back-btn" bindtap="handleBack">
      <view class="back-arrow"></view>
    </view>
    <view class="nav-title">MewLive充值中心</view>
  </view>

  <!-- Logo -->
  <view class="logo-section">
    <image class="logo-icon" src="/image/logo.png" mode="aspectFit"></image>
    <text class="logo-text">MewLive</text>
  </view>

  <!-- ID Input -->
  <view class="input-section">
    <input 
      class="id-input" 
      type="text" 
      placeholder="请输入要充值的ID" 
      placeholder-style="color: #999;"
      bindinput="handleIdInput"
      value="{{rechargeId}}"
    />
  </view>

  <!-- Recharge Options -->
  <view class="recharge-section">
    <view class="section-title">选择要充值的金币数量</view>
    <view class="recharge-grid">
      <view 
        class="recharge-item {{selectedIndex === index ? 'active' : ''}}" 
        wx:for="{{rechargeOptions}}" 
        wx:key="index"
        bindtap="selectOption"
        data-index="{{index}}"
      >
        <view class="coin-icon">
          <image class="coin-img" src="/image/coin.png" mode="aspectFit"></image>
        </view>
        <view class="amount">{{item.amount}}</view>
        <view class="price">¥{{item.price}}</view>
      </view>
    </view>
  </view>

  <!-- Login Button -->
  <view class="action-section">
    <button class="login-btn" bindtap="handleLogin">确认充值</button>
    <view class="agreement-text">
      我已阅读并同意 <text class="link" bindtap="showAgreement">《用户充值协议》</text>
    </view>
  </view>

  <!-- Tips -->
  <view class="tips-section">
    <view class="tips-title">温馨提示：</view>
    <view class="tips-content">
      <view class="tip-line">1. 充值前请确定您已满 18 周岁并具有完全民事行为能力。</view>
      <view class="tip-line">2. 安全账号转账、理赔转账、刷单、代充均为骗局，请认真核实并确认</view>
      <view class="tip-line">3. 大额充值，请确保支付账户余额充足</view>
      <view class="tip-line">4. 如有疑问，请联系服务号客服</view>
    </view>
  </view>

  <!-- Agreement Popup (Page Container) -->
  <page-container 
    show="{{agreementVisible}}" 
    round="true" 
    overlay="true" 
    position="bottom" 
    custom-style="height: 80%; background: #fff;"
    bind:clickoverlay="hideAgreement"
  >
    <view class="agreement-popup">
      <view class="popup-header">
        <text>用户充值协议</text>
        <view class="close-btn" bindtap="hideAgreement">×</view>
      </view>
      <view class="agreement-content">
         <text style="padding: 20px 0; display: block; text-align: center; color: #666; font-size: 14px;">
           点击下方按钮查看《用户充值协议》
         </text>
         <button bindtap="openAgreementLink" type="primary" style="width: 80%;">查看协议详情</button>
      </view>
    </view>
  </page-container>
</view>