<view class="page checkout-page">
  <view class="page-header"><view><text class="eyebrow">CHECKOUT</text><text class="page-title">确认充值</text><text class="page-subtitle">支付完成后由服务端通知和主动查单确认到账。</text></view></view>
  <view wx:if="{{loading}}" class="surface loading">正在建立支付会话...</view>
  <block wx:else>
    <view class="checkout-card surface">
      <text class="checkout-label">应付金额</text>
      <text class="checkout-price">¥{{price}}</text>
      <view wx:if="{{order.account}}" class="checkout-line"><text>充值账户</text><text class="checkout-value">{{order.account}}</text></view>
      <view class="checkout-line"><text>订单状态</text><view class="status-wrap"><view class="status-dot {{order.status === 'paid' ? 'success' : order.status === 'closed' ? 'danger' : ''}}"></view><text>{{order.status === 'paid' ? '已到账' : order.status === 'closed' ? '已关闭' : order.status === 'expired' ? '已过期' : order.status === 'review' ? '待核验' : '等待支付'}}</text></view></view>
      <view class="checkout-line"><text>订单编号</text><text class="checkout-value">{{order.id}}</text></view>
      <view wx:if="{{message}}" class="checkout-message">{{message}}</view>
    </view>
    <view wx:if="{{isMock}}" class="notice">演示模式不会创建微信订单或触发扣款。</view>
    <view class="checkout-actions"><button wx:if="{{canPay}}" class="primary-button" loading="{{busy}}" disabled="{{busy}}" bindtap="startPay">{{busy ? '正在确认...' : '确认付款'}}</button><button class="quiet-button" disabled="{{busy}}" bindtap="refresh">刷新付款状态</button><button class="quiet-button" bindtap="goOrders">查看订单记录</button></view>
    <view class="checkout-safe"><text class="safe-title">安全提示</text><text>客户端支付回调只代表调用结束，不代表平台已经入账。金额、商品、付款人和到账结果均由服务端校验。</text></view>
  </block>
</view>
