WX_PAY_codePro9_8/miniprogram/pages/index/index.js

// index.js
Page({
  data: {
    // 页面的初始数据
    hasPaid: false, // 默认未付款状态
    animationData: {}, // 动画数据
    showCapsule: false, // 是否显示扭蛋玩具
    capsuleAnimation: {}, // 扭蛋动画数据
    buttonAnimation: {} // 按钮动画数据
  },
  
  onLoad: function() {
    // 页面加载时执行的初始化逻辑
    // 检查是否已经付款（从本地存储中读取状态）
    try {
      const hasPaid = wx.getStorageSync('hasPaid');
      if (hasPaid) {
        this.setData({
          hasPaid: true
        });
      }
    } catch (e) {
      console.error('获取支付状态失败', e);
    }
    
    // 创建按钮动画
    this.initButtonAnimation();
  },
  
  onShow: function() {
    // 页面显示时，初始化动画
    this.initAnimation();
  },
  
  // 初始化按钮动画
  initButtonAnimation: function() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    });
    
    // 创建一个循环动画
    setInterval(() => {
      animation.scale(1.05).step();
      animation.scale(1).step();
      this.setData({
        buttonAnimation: animation.export()
      });
    }, 2000);
  },
  
  // 初始化扭蛋机动画
  initAnimation: function() {
    if (this.data.hasPaid) {
      const animation = wx.createAnimation({
        duration: 1000,
        timingFunction: 'ease',
      });
      
      animation.rotate(5).step();
      animation.rotate(-5).step();
      animation.rotate(0).step();
      
      this.setData({
        animationData: animation.export()
      });
      
      // 循环动画
      setTimeout(() => {
        this.initAnimation();
      }, 3000);
    }
  },
  
  // 请求支付
  requestPayment: function() {
    const that = this;
    
    // 在实际应用中，这里应该调用后端接口获取支付参数
    // 这里仅做模拟演示，直接显示支付成功
    wx.showLoading({
      title: '请求支付中...',
    });
    
    // 按钮动画效果
    const animation = wx.createAnimation({
      duration: 300,
      timingFunction: 'ease',
    });
    animation.scale(0.9).step();
    animation.scale(1).step();
    this.setData({
      buttonAnimation: animation.export()
    });
    
    // 模拟网络请求延迟
    setTimeout(function() {
      wx.hideLoading();
      
      // 模拟支付过程
      wx.showModal({
        title: '【琼辉】模拟支付',
        content: '由于这是演示，点击确定将直接模拟支付成功。实际应用中需要调用微信支付API。',
        success: function(res) {
          if (res.confirm) {
            // 模拟支付成功
            wx.showToast({
              title: '支付成功',
              icon: 'success',
              duration: 2000
            });
            
            // 更新支付状态
            that.setData({
              hasPaid: true
            });
            
            // 保存支付状态到本地存储
            try {
              wx.setStorageSync('hasPaid', true);
            } catch (e) {
              console.error('保存支付状态失败', e);
            }
            
            // 初始化动画
            that.initAnimation();
          }
        }
      });
    }, 1500);
    
    // 实际微信支付代码（仅供参考，需要后端配合）
    /*
    wx.request({
      url: '你的后端支付接口',
      method: 'POST',
      data: {
        amount: 1 // 1元
      },
      success: function(res) {
        // 获取到支付参数后调用支付接口
        wx.requestPayment({
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          signType: res.data.signType,
          paySign: res.data.paySign,
          success: function(payRes) {
            // 支付成功
            wx.showToast({
              title: '支付成功',
              icon: 'success',
              duration: 2000
            });
            
            // 更新支付状态
            that.setData({
              hasPaid: true
            });
            
            // 保存支付状态到本地存储
            try {
              wx.setStorageSync('hasPaid', true);
            } catch (e) {
              console.error('保存支付状态失败', e);
            }
          },
          fail: function(payError) {
            // 支付失败
            wx.showToast({
              title: '支付失败',
              icon: 'none',
              duration: 2000
            });
            console.error('支付失败', payError);
          }
        });
      },
      fail: function(error) {
        wx.hideLoading();
        wx.showToast({
          title: '获取支付参数失败',
          icon: 'none',
          duration: 2000
        });
        console.error('获取支付参数失败', error);
      }
    });
    */
  },
  
  // 跳转到百度地图
  navigateToWebsite: function() {
    const that = this;
    
    // 显示扭蛋动画
    this.playCapsuleAnimation();
    
    // 延迟后跳转
    setTimeout(function() {
      // 跳转到webview页面，该页面包含web-view组件用于显示百度地图
      wx.navigateTo({
        url: '/pages/webview/webview',
        success: function() {
          console.log('跳转到webview页面成功');
        },
        fail: function(error) {
          console.error('跳转到webview页面失败', error);
          // 如果跳转失败，提示用户复制链接
          wx.showModal({
            title: '提示',
            content: '跳转失败，是否复制百度地图链接到剪贴板？',
            success: function(res) {
              if (res.confirm) {
                // 复制链接到剪贴板
                wx.setClipboardData({
                  data: 'https://map.baidu.com',
                  success: function() {
                    wx.showToast({
                      title: '链接已复制，请在浏览器中粘贴访问',
                      icon: 'none',
                      duration: 2000
                    });
                  }
                });
              }
            }
          });
        }
      });
    }, 2500);
  },
  
  // 播放扭蛋动画
  playCapsuleAnimation: function() {
    const that = this;
    
    // 创建扭蛋机摇动动画
    const machineAnimation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    });
    
    machineAnimation.rotate(10).step();
    machineAnimation.rotate(-10).step();
    machineAnimation.rotate(8).step();
    machineAnimation.rotate(-8).step();
    machineAnimation.rotate(5).step();
    machineAnimation.rotate(-5).step();
    machineAnimation.rotate(0).step();
    
    this.setData({
      animationData: machineAnimation.export()
    });
    
    // 显示扭蛋玩具
    setTimeout(function() {
      that.setData({
        showCapsule: true
      });
      
      // 创建扭蛋玩具动画
      const capsuleAnimation = wx.createAnimation({
        duration: 1000,
        timingFunction: 'ease',
      });
      
      capsuleAnimation.opacity(0).translateY(-100).scale(0).step();
      capsuleAnimation.opacity(1).translateY(0).scale(1).step();
      
      that.setData({
        capsuleAnimation: capsuleAnimation.export()
      });
      
      // 2秒后隐藏扭蛋玩具
      setTimeout(function() {
        const hideAnimation = wx.createAnimation({
          duration: 500,
          timingFunction: 'ease',
        });
        
        hideAnimation.opacity(0).scale(0.5).step();
        
        that.setData({
          capsuleAnimation: hideAnimation.export()
        });
        
        setTimeout(function() {
          that.setData({
            showCapsule: false
          });
        }, 500);
      }, 2000);
    }, 1000);
  },
  
  // 清除付款记录
  clearPayment: function() {
    const that = this;
    
    // 按钮动画效果
    const animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease',
    });
    animation.scale(0.9).step();
    animation.scale(1).step();
    
    wx.showModal({
      title: '提示',
      content: '确定要清除付款记录吗？清除后将需要重新支付',
      success: function(res) {
        if (res.confirm) {
          try {
            wx.removeStorageSync('hasPaid');
            that.setData({
              hasPaid: false,
              showCapsule: false
            });
            wx.showToast({
              title: '已清除付款记录',
              icon: 'success',
              duration: 2000
            });
          } catch (e) {
            console.error('清除付款记录失败', e);
            wx.showToast({
              title: '清除失败',
              icon: 'none',
              duration: 2000
            });
          }
        }
      }
    });
  }
})