fixbug：修改抽奖停留位置不对

pages/other_package/nine-grid/components/LotteryGrid.vue

@@ -15,7 +15,7 @@
       <!-- 中间格子作为抽奖按钮 (索引4) -->
       <template v-if="index === 4">
         <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img-button" mode="widthFix"
-          @click="handleStartClick(1)"></image>
+          @click="handleStartLottery(1)"></image>
       </template>
 
       <!-- 其他8个奖品格子 -->
@@ -25,10 +25,11 @@
       </template>
     </view>
   </view>
-  <view class="coiled-lottery" v-if="prizesObj.times > 10" @click="handleStartClick(10)"> 连续抽奖10次 </view>
+  <view class="coiled-lottery" v-if="prizesObj.times > 10" @click="handleStartLottery(10)"> 连续抽奖10次 </view>
 </template>
 
 <script>
+import { raffleExecute } from '@/api/raffle.js';
 export default {
   props: {
     // 奖品数据数组
@@ -42,12 +43,13 @@ export default {
       type: Boolean,
       default: false
     },
-    // 指定停止的位置索引 (0-7)
-    targetIndex: {
+
+    remainCount: {
       type: Number,
-      default: null
+      default: 0
     }
   },
+
   data() {
     return {
       isRotating: false, // 是否正在旋转
@@ -62,7 +64,9 @@ export default {
       SPEED_INCREMENT: 15, // 减速时的速度增加量
       MIN_SPEED: 50, // 最小速度
       STOP_SPEED: 250, // 停止时的速度阈值
-      animationTimer: null // 动画计时器
+      animationTimer: null, // 动画计时器
+      targetIndex: 0,
+      currentPrize: []
     }
   },
   methods: {
@@ -135,37 +139,40 @@ export default {
         })
       }, nextSpeed)
     },
-    /**
-     * 获取目标位置
-     * @returns {number} 目标位置索引
-     */
-    getTargetStep() {
-      // 如果传入了targetIndex，则使用传入的值
-      if (this.targetIndex !== null && this.targetIndex >= 0 && this.targetIndex < this.LOTTERY_PATH.length) {
-        return this.targetIndex
-      }
-      // 否则随机生成目标位置（带权重）
-      return this.getRandomTarget()
-    },
-    /**
-     * 随机生成目标位置（带权重）
-     * @returns {number} 目标位置索引
-     */
-    getRandomTarget() {
-      // 奖品权重配置，数值越高概率越大
-      const weights = [2, 2, 1, 0.5, 2, 1, 3, 2]
-      const total = weights.reduce((sum, w) => sum + w, 0) // 计算总权重
-      let random = Math.random() * total // 生成随机数
 
-      // 根据权重计算目标位置
-      for (let i = 0; i < weights.length; i++) {
-        random -= weights[i]
-        if (random <= 0) return i
+
+
+    /**
+  * 处理开始抽奖事件
+  */
+    async handleStartLottery(num) {
+      if (this.prizesObj.times <= 0) {
+        uni.showToast({
+          title: `您当前未获取到抽奖次数，快去获取吧～`,
+          icon: 'none'
+        });
+        return;
       }
 
-      // 兜底：随机返回一个位置
-      return Math.floor(Math.random() * this.LOTTERY_PATH.length)
+      if (this.prizesObj.times < num) {
+        return;
+      }
+
+
+      const params = {
+        id: this.prizesObj.id,
+        times: num,
+      }
+      const { data } = await raffleExecute(params);
+      this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === data.idList[0]);
+      console.log("0------", this.prizesObj.prizes, data.idList, this.targetIndex)
+
+      this.currentPrize = data.prizeList;
+
+      this.handleStartClick(num)
+
     },
+
     /**
      * 处理开始抽奖点击事件
      */
@@ -175,9 +182,18 @@ export default {
         console.log('抽奖被禁用或正在进行中')
         return
       }
+      // 减少抽奖次数
+      if (this.remainCount <= 0) {
+        uni.showToast({
+          title: '抽奖次数不足',
+          icon: 'none'
+        })
+        return
+      }
+
 
       // 通知父组件开始抽奖
-      this.$emit('start', num)
+      this.$emit('start', num, this.currentPrize)
 
       // 开始抽奖动画（无论父组件做了什么处理）
       this.startLotteryAnimation()
@@ -196,7 +212,7 @@ export default {
       this.runAnimation({
         currentStep: 0,
         speed: this.INITIAL_SPEED,
-        targetStep: this.getTargetStep(),
+        targetStep: this.targetIndex,
         cycleCount: 0,
         totalSteps: 0
       })

pages/other_package/nine-grid/components/ResultModal.vue

@@ -10,8 +10,8 @@
           <view class="prize-name">{{ item.prizeName }}</view>
         </view>
       </view>
-      <view class="close" @click="jumpGetFun"> </view>
-      <view class="confirm-btn" @click="jumpGetFun">立即领取</view>
+      <view class="close" @click.stop="jumpGetFun"> </view>
+      <view class="confirm-btn" @click.stop="jumpGetFun">立即领取</view>
     </view>
   </view>
 </template>

pages/other_package/nine-grid/nine-grid.vue

@@ -11,8 +11,8 @@
 
 
     <!-- 九宫格抽奖组件 -->
-    <LotteryGrid :prizesObj="prizesObj" :is-disabled="isRotating" @start="handleStartLottery"
-      @complete="handleLotteryComplete" :targetIndex="targetIndex" />
+    <LotteryGrid :prizesObj="prizesObj" :remainCount="prizesObj.times" :is-disabled="isRotating"
+      @start="handleStartLottery" @complete="handleLotteryComplete" :targetIndex="targetIndex" />
 
     <!-- 规则 -->
     <view class="rule">
@@ -43,7 +43,6 @@ export default {
       },
 
       // 状态管理
-      remainCount: 3, // 剩余抽奖次数
       isRotating: false, // 是否正在抽奖
       showResult: false, // 是否显示结果弹窗
       currentPrize: [],// 当前中奖奖品
@@ -79,29 +78,11 @@ export default {
     /**
      * 处理开始抽奖事件
      */
-    async handleStartLottery(num) {
-      if (this.prizesObj.times <= 0) {
-        uni.showToast({
-          title: `您当前未获取到抽奖次数，快去获取吧～`,
-          icon: 'none'
-        });
-        return;
-      }
-
-      if (this.prizesObj.times < num) {
-        return;
-      }
+    async handleStartLottery(num, currentPrize) {
 
 
-      const params = {
-        id: this.prizesObj.id,
-        times: num,
-      }
-      const { data } = await raffleExecute(params);
-      this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === data.idList[0]);
+      this.currentPrize = currentPrize;
 
-      this.currentPrize = data.prizeList;
-      console.log("0------", this.currentPrize)
 
       // 减少抽奖次数并标记为正在抽奖