修改旋转节奏

src/views/wealth/goldenWheel.vue

@@ -161,11 +161,12 @@ export default {
       showNoTimesModal: false,
       showRuleModal: false,
       isFirstVisit: true,
-      currentRotation: -23.5, // 初始旋转-22.5度
+      currentRotation: -22.5, // 初始旋转-22.5度
       noTimesTimer: null,
       prizeMessage: '',
       prizeAmount: '',
-      textWidth: 0
+      textWidth: 0,
+      targetRotation: 0 // 新增：目标旋转角度
     }
   },
   computed: {
@@ -309,6 +310,37 @@ export default {
       }
     },
     
+    // 计算随机停止位置
+    calculateRandomStop() {
+      // 转盘有8个区域，每个区域45度
+      const sectorDegrees = 45;
+      
+      // 随机选择一个区域 (0-7)
+      const randomSector = Math.floor(Math.random() * 8);
+      
+      // 计算目标角度：从初始位置(-22.5度)到选中区域的中心
+      // 每个区域中心的角度 = 区域索引 * 45度 - 22.5度
+      const targetAngle = randomSector * sectorDegrees - 22.5;
+      
+      // 计算需要旋转的总角度（确保多转几圈）
+      // 从当前位置旋转到目标位置，加上多转的圈数（3-5圈）
+      const extraRotations = 5 + Math.floor(Math.random() * 3); // 3-5圈
+      const extraDegrees = extraRotations * 360;
+      
+      // 计算最终旋转角度
+      // 从当前角度旋转到目标角度，加上额外的圈数
+      // 注意：需要确保旋转方向正确
+      let rotationNeeded = targetAngle - this.currentRotation;
+      
+      // 如果旋转角度为负，加上360度使其为正
+      if (rotationNeeded < 0) {
+        rotationNeeded += 360;
+      }
+      
+      // 加上额外的圈数
+      return this.currentRotation + rotationNeeded + extraDegrees;
+    },
+    
     // 处理转动
     async handleSpin() {
       if (this.showRuleModal || this.isFirstVisit || this.isSpinning) return;
@@ -331,9 +363,14 @@ export default {
         // 有剩余次数，开始抽奖
         this.isSpinning = true;
         
-        // 开始旋转动画（从当前-22.5度位置开始旋转）
-        const newRotation = this.currentRotation + 1440;
-        this.currentRotation = newRotation;
+        // 计算随机停止位置
+        this.targetRotation = this.calculateRandomStop();
+        
+        // 设置CSS变量，用于动画
+        document.documentElement.style.setProperty('--target-rotation', `${this.targetRotation}deg`);
+        
+        // 开始旋转动画
+        this.currentRotation = this.targetRotation;
         
         // 调用抽奖API获取奖品信息
         const success = await this.fetchPrizeInfo();
@@ -538,7 +575,7 @@ export default {
 }
 
 .wheel-img.spinning {
-  animation: optimal-spin 3s cubic-bezier(0.17, 0.67, 0.21, 0.98) forwards;
+  animation: optimal-spin 3s cubic-bezier(0.47, 0.57, 0.45, 0.15) forwards;
   backface-visibility: hidden;
   transform: translateZ(0);
 }
@@ -547,8 +584,14 @@ export default {
   0% {
     transform: rotate(-22.5deg); /* 从-22.5度开始旋转 */
   }
+  20% {
+    transform: rotate(calc(-22.5deg + (var(--target-rotation, 1440deg) + 22.5deg) * 0.2)); /* 加速阶段 */
+  }
+  80% {
+    transform: rotate(calc(-22.5deg + (var(--target-rotation, 1440deg) + 22.5deg) * 0.8)); /* 减速阶段 */
+  }
   100% {
-    transform: rotate(1417.5deg); /* 1440 - 22.5 = 1417.5度 */
+    transform: rotate(var(--target-rotation, 1417.5deg)); /* 使用CSS变量控制最终旋转角度 */
   }
 }