From 1a722cc1a11c7596696eebfa58909693d3bb4fca Mon Sep 17 00:00:00 2001
From: zhaoruhui <national_zrh@163.com>
Date: Sun, 14 Sep 2025 10:30:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=97=8B=E8=BD=AC=E8=8A=82?=
 =?UTF-8?q?=E5=A5=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/wealth/goldenWheel.vue | 57 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/views/wealth/goldenWheel.vue b/src/views/wealth/goldenWheel.vue
index ff4b5c5..2fdfd27 100644
--- a/src/views/wealth/goldenWheel.vue
+++ b/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变量控制最终旋转角度 */
   }
 }