加入效果

miniprogram/app.js

@@ -0,0 +1,10 @@
+// app.js
+App({
+  onLaunch: function() {
+    // 小程序启动时执行的逻辑
+    console.log('小程序启动');
+  },
+  globalData: {
+    // 全局数据
+  }
+})

miniprogram/app.json

@@ -0,0 +1,13 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/webview/webview"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#ff9800",
+    "navigationBarTitleText": "扭蛋游戏",
+    "navigationBarTextStyle": "white"
+  },
+  "sitemapLocation": "sitemap.json"
+}

miniprogram/app.wxss

@@ -0,0 +1,20 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+}
+
+.btn {
+  margin-top: 30rpx;
+  width: 80%;
+  background-color: #07C160;
+  color: white;
+  border-radius: 10rpx;
+  padding: 20rpx 0;
+  text-align: center;
+}

miniprogram/images/background.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="750" height="1334" xmlns="http://www.w3.org/2000/svg">
+  <!-- 渐变背景 -->
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FF8C00;stop-opacity:1" />
+    </linearGradient>
+    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+      <stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
+      <stop offset="100%" style="stop-color:white;stop-opacity:0" />
+    </radialGradient>
+  </defs>
+  
+  <!-- 背景 -->
+  <rect width="100%" height="100%" fill="url(#grad1)" />
+  
+  <!-- 装饰圆圈 -->
+  <circle cx="150" cy="150" r="100" fill="url(#grad2)" />
+  <circle cx="600" cy="300" r="80" fill="url(#grad2)" />
+  <circle cx="200" cy="800" r="120" fill="url(#grad2)" />
+  <circle cx="550" cy="1100" r="90" fill="url(#grad2)" />
+  
+  <!-- 扭蛋机图案 -->
+  <g transform="translate(375, 667) scale(0.8)">
+    <!-- 扭蛋机主体 -->
+    <rect x="-150" y="-200" width="300" height="400" rx="20" ry="20" fill="#FF5722" stroke="#333" stroke-width="5" />
+    
+    <!-- 扭蛋机透明窗口 -->
+    <ellipse cx="0" cy="-50" rx="120" ry="120" fill="#FFECB3" stroke="#333" stroke-width="3" />
+    
+    <!-- 扭蛋 -->
+    <circle cx="-40" cy="-80" r="30" fill="#E91E63" stroke="#333" stroke-width="2" />
+    <circle cx="50" cy="-30" r="30" fill="#2196F3" stroke="#333" stroke-width="2" />
+    <circle cx="-20" cy="0" r="30" fill="#4CAF50" stroke="#333" stroke-width="2" />
+    
+    <!-- 扭蛋机底部出口 -->
+    <rect x="-50" y="200" width="100" height="30" fill="#333" />
+    
+    <!-- 旋钮 -->
+    <circle cx="150" cy="100" r="40" fill="#FFC107" stroke="#333" stroke-width="3" />
+    <circle cx="150" cy="100" r="15" fill="#333" />
+  </g>
+  
+  <!-- 装饰星星 -->
+  <g fill="#FFFFFF" opacity="0.8">
+    <polygon points="50,50 60,80 40,80" />
+    <polygon points="700,200 710,230 690,230" />
+    <polygon points="200,1200 210,1230 190,1230" />
+    <polygon points="600,1000 610,1030 590,1030" />
+    <polygon points="400,400 410,430 390,430" />
+  </g>
+</svg>

miniprogram/pages/index/index.js

@@ -0,0 +1,337 @@
+// 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
+            });
+          }
+        }
+      }
+    });
+  }
+})

miniprogram/pages/index/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "跳转示例"
+}

miniprogram/pages/index/index.wxml

@@ -0,0 +1,24 @@
+<!--index.wxml-->
+<view class="container">
+  <!-- 背景图片 -->
+  <image class="bg-image" src="/images/background.png" mode="aspectFill"></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">支付1元</button>
+    </block>
+    
+    <!-- 已付款状态显示扭蛋游戏按钮 -->
+    <block wx:else>
+      <view class="subtitle">付款成功！可以开始游戏了</view>
+      <button class="btn game-btn" bindtap="navigateToWebsite">开始扭蛋游戏</button>
+    </block>
+  </view>
+
+  <!-- 清除付款记录按钮 -->
+  <button wx:if="{{hasPaid}}" class="clear-btn" bindtap="clearPayment">清除记录</button>
+</view>

miniprogram/pages/index/index.wxss

@@ -0,0 +1,115 @@
+/**index.wxss**/
+page {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 30rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.bg-image {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.content-wrapper {
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 30rpx;
+  padding: 50rpx 40rpx;
+  width: 85%;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  backdrop-filter: blur(10rpx);
+  border: 2rpx solid rgba(255, 255, 255, 0.7);
+}
+
+.title {
+  font-size: 44rpx;
+  margin-bottom: 20rpx;
+  text-align: center;
+  font-weight: bold;
+  color: #FF6D00;
+  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
+}
+
+.subtitle {
+  font-size: 32rpx;
+  margin-bottom: 40rpx;
+  text-align: center;
+  color: #555;
+}
+
+.btn {
+  width: 90%;
+  color: white;
+  font-size: 34rpx;
+  border-radius: 50rpx;
+  padding: 24rpx 0;
+  margin-top: 30rpx;
+  box-shadow: 0 6rpx 10rpx rgba(0,0,0,0.1);
+  font-weight: bold;
+  letter-spacing: 2rpx;
+  transition: all 0.3s;
+}
+
+.btn:active {
+  transform: translateY(3rpx);
+  box-shadow: 0 3rpx 5rpx rgba(0,0,0,0.1);
+}
+
+.pay-btn {
+  background: linear-gradient(135deg, #1989fa, #0066cc);
+}
+
+.game-btn {
+  background: linear-gradient(135deg, #ff9800, #ff5722);
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.clear-btn {
+  position: fixed;
+  left: 20rpx;
+  bottom: 20rpx;
+  padding: 12rpx 24rpx;
+  background-color: rgba(255, 255, 255, 0.8);
+  border: 1rpx solid #ccc;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  color: #666;
+  z-index: 100;
+  opacity: 0.7;
+  transition: all 0.3s;
+}
+
+.clear-btn:active {
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.9);
+  transform: scale(0.95);
+}

miniprogram/pages/webview/webview.js

@@ -0,0 +1,10 @@
+// webview.js
+Page({
+  data: {
+    // 页面的初始数据
+  },
+  onLoad: function(options) {
+    // 页面加载时执行的初始化逻辑
+    console.log('webview页面加载');
+  }
+})

miniprogram/pages/webview/webview.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "扭蛋游戏"
+}

miniprogram/pages/webview/webview.wxml

@@ -0,0 +1,2 @@
+<!--webview.wxml-->
+<web-view src="https://map.baidu.com"></web-view>

miniprogram/pages/webview/webview.wxss

@@ -0,0 +1,2 @@
+/**webview.wxss**/
+/* web-view组件会自动占满整个页面，无需额外样式 */

miniprogram/project.config.json

@@ -0,0 +1,35 @@
+{
+  "setting": {
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "uglifyFileName": false,
+    "enhance": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "useCompilerPlugins": false,
+    "minifyWXML": true,
+    "compileWorklet": false,
+    "uploadWithSourceMap": true,
+    "packNpmManually": false,
+    "minifyWXSS": true,
+    "localPlugins": false,
+    "disableUseStrict": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true
+  },
+  "compileType": "miniprogram",
+  "simulatorPluginLibVersion": {},
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "appid": "wx2e7829414e68a058",
+  "editorSetting": {},
+  "libVersion": "3.10.0"
+}

miniprogram/project.private.config.json

@@ -0,0 +1,22 @@
+{
+  "libVersion": "3.10.0",
+  "projectname": "miniprogram",
+  "setting": {
+    "urlCheck": true,
+    "coverView": true,
+    "lazyloadPlaceholderEnable": false,
+    "skylineRenderEnable": false,
+    "preloadBackgroundData": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "compileHotReLoad": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "ignoreDevUnusedFiles": true,
+    "bigPackageSizeSupport": false
+  }
+}

miniprogram/sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本站的微信索引配置",
+  "rules": [{
+    "action": "allow",
+    "page": "*"
+  }]
+}