WX_PAY_codePro9_8/miniprogram/pages/index/index.wxml

<!--index.wxml-->
<view class="container">
  <!-- 背景图片 -->
  <image class="bg-image" src="/images/capsule_bg.png" mode="aspectFill"></image>
  
  <!-- 扭蛋机图片 -->
  <image wx:if="{{hasPaid}}" class="capsule-machine" src="/images/capsule_machine.png" mode="aspectFit" animation="{{animationData}}"></image>
  
  <!-- 扭蛋玩具 -->
  <image wx:if="{{showCapsule}}" class="capsule-toy" src="/images/capsule_toy.png" mode="aspectFit" animation="{{capsuleAnimation}}"></image>
  
  <view class="content-wrapper">
    <view class="title">欢迎使用扭蛋游戏</view>
    
    <!-- 未付款状态显示付款按钮 -->
    <block wx:if="{{!hasPaid}}">
      <view class="subtitle">请先支付1元开启游戏</view>
      <button class="btn pay-btn" bindtap="requestPayment" animation="{{buttonAnimation}}">
        <text class="btn-text">支付1元</text>
        <text class="btn-icon">💰</text>
      </button>
    </block>
    
    <!-- 已付款状态显示扭蛋游戏按钮 -->
    <block wx:else>
      <view class="subtitle">付款成功！可以开始游戏了</view>
      <button class="btn game-btn" bindtap="navigateToWebsite" animation="{{buttonAnimation}}">
        <text class="btn-text">开始扭蛋游戏</text>
        <text class="btn-icon">🎮</text>
      </button>
    </block>
  </view>

  <!-- 清除付款记录按钮 -->
  <button wx:if="{{hasPaid}}" class="clear-btn" bindtap="clearPayment">
    <image class="clear-icon" src="/images/clear-icon.png" mode="aspectFit"></image>
    <text>清除记录</text>
  </button>
  
  <!-- 装饰元素 -->
  <view wx:if="{{hasPaid}}" class="decoration-dots">
    <view class="dot dot1"></view>
    <view class="dot dot2"></view>
    <view class="dot dot3"></view>
  </view>
</view>