<view class="shangjia-chongzhi-page">
  <!-- 顶部余额展示 -->
  <view class="balance-card">
    <view class="balance-header">
      <view class="balance-title">
        <text class="title-text">商家余额</text>
        <view class="title-decoration">
          <view class="decoration-line"></view>
          <view class="decoration-dot"></view>
          <view class="decoration-line"></view>
        </view>
      </view>
      <view class="balance-chip">
        <text class="chip-text">VIP商家账户</text>
      </view>
    </view>
    
    <view class="balance-amount">
      <text class="currency">¥</text>
      <text class="amount" data-amount="{{sjyue}}">{{sjyue}}</text>
      <text class="unit">元</text>
    </view>
    
    <view class="balance-footer">
      <view class="balance-tag">
        <text class="tag-text">资金安全</text>
      </view>
      <view class="balance-tag">
        <text class="tag-text">实时到账</text>
      </view>
    </view>
    
    <!-- 机甲装饰元素 -->
    <view class="mech-decoration">
      <view class="mech-line line-1"></view>
      <view class="mech-line line-2"></view>
      <view class="mech-corner corner-1"></view>
      <view class="mech-corner corner-2"></view>
      <view class="mech-corner corner-3"></view>
      <view class="mech-corner corner-4"></view>
    </view>
  </view>
  
  <!-- 充值金额选择区域 -->
  <view class="amount-section">
    <view class="section-header">
      <text class="section-title">充值金额</text>
      <view class="section-subtitle">
        <text class="subtitle-text">选择或输入充值金额</text>
      </view>
    </view>
    
    <!-- 快捷金额按钮 -->
    <view class="quick-amount-grid">
      <block wx:for="{{quickAmounts}}" wx:key="index">
        <view 
          class="amount-item {{selectedAmount == item ? 'active' : ''}}"
          data-amount="{{item}}"
          bindtap="selectAmount"
        >
          <text class="amount-text">¥{{item}}</text>
          <view class="amount-halo" wx:if="{{selectedAmount == item}}"></view>
        </view>
      </block>
    </view>
    
    <!-- 自定义金额输入 -->
    <view class="custom-amount">
      <view class="custom-input-wrapper">
        <text class="input-label">¥</text>
        <input 
          class="custom-input"
          type="digit"
          placeholder="输入其他金额"
          placeholder-class="placeholder"
          value="{{customAmount}}"
          bindinput="onCustomInput"
          bindfocus="onInputFocus"
          bindblur="onInputBlur"
          maxlength="6"
        />
        <view class="input-line {{inputFocus ? 'active' : ''}}"></view>
      </view>
      <text class="amount-hint">
        单次充值范围：¥{{minAmount}} - ¥{{maxAmount}}
      </text>
    </view>
  </view>
  
  <!-- 支付按钮 - 改为view更好控制 -->
  <view class="pay-section">
    <view class="pay-button-wrapper">
      <view 
        class="pay-button {{canPay ? 'active' : ''}}" 
        bindtap="handlePay"
      >
        <view class="button-content">
          <text class="button-text">立即充值</text>
        </view>
        <!-- 闪光特效 -->
        <view class="pay-button-shine"></view>
      </view>
    </view>
  </view>
  
  <!-- 支付状态提示 -->
  <view class="payment-status" wx:if="{{showStatus}}">
    <view class="status-content">
      <text class="status-text">{{statusText}}</text>
      <text class="status-subtext">{{statusSubtext}}</text>
      
      <view class="status-actions" wx:if="{{showAction}}">
        <view class="action-button" bindtap="handleStatusAction">
          <text class="action-text">{{actionText}}</text>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 加载遮罩 -->
  <view class="loading-mask" wx:if="{{isLoading}}">
    <view class="loading-content">
      <view class="loading-spinner"></view>
      <text class="loading-text">{{loadingText}}</text>
    </view>
  </view>
  <global-notification id="global-notification" />

</view>