feat: 九宫格位置偏差修改

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

@@ -1,62 +1,77 @@
 <template>
   <!-- 九宫格容器 -->
-  <view>
-  </view>
+  <view> </view>
   <view class="lottery-grid">
     <!-- 高亮选中框 -->
-    <view class="highlight-box" :style="{
-      top: highlightTop,
-      left: highlightLeft,
-      transition: isRotating ? 'all 0.07s linear' : 'none'
-    }"></view>
-   
+    <view
+      class="highlight-box"
+      :style="{
+        top: highlightTop,
+        left: highlightLeft,
+        transition: isRotating ? 'all 0.07s linear' : 'none',
+      }"
+    ></view>
 
     <!-- 9个格子 -->
     <view class="grid-item" v-for="(item, index) in 9" :key="index">
       <!-- 中间格子作为抽奖按钮 (索引4) -->
       <template v-if="index === 4">
-        <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img-button" mode="widthFix"
-          @click="handleStartLottery(1)"></image>
+        <image
+          :src="prizesObj.prizes[index]?.iconUrl"
+          class="prize-img-button"
+          mode="widthFix"
+          @click="handleStartLottery(1)"
+        ></image>
       </template>
 
       <!-- 其他8个奖品格子 -->
       <template v-else>
-        <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img" mode="widthFix"></image>
+        <image
+          :src="prizesObj.prizes[index]?.iconUrl"
+          class="prize-img"
+          mode="widthFix"
+        ></image>
         <text class="prize-name">{{ prizesObj.prizes[index]?.name }}</text>
       </template>
     </view>
   </view>
-  <view class="coiled-lottery" v-if="prizesObj.times > 9" @click="handleStartLottery(10)"> 连续抽奖10次 </view>
+  <view
+    class="coiled-lottery"
+    v-if="prizesObj.times > 9"
+    @click="handleStartLottery(10)"
+  >
+    连续抽奖10次
+  </view>
 </template>
 
 <script>
-import { raffleExecute } from '@/api/raffle.js';
-import { getUserInfo } from '@/api/auth.js';
+import { raffleExecute } from "@/api/raffle.js";
+import { getUserInfo } from "@/api/auth.js";
 export default {
   props: {
     // 奖品数据数组
     prizesObj: {
       type: Object,
       required: true,
-      default: () => ({ prizes: [] })
+      default: () => ({ prizes: [] }),
     },
     // 是否禁用抽奖
     isDisabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
 
     remainCount: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
 
   data() {
     return {
       isRotating: false, // 是否正在旋转
-      highlightTop: '0rpx', // 高亮框顶部位置
-      highlightLeft: '0rpx', // 高亮框左侧位置
+      highlightTop: "0rpx", // 高亮框顶部位置
+      highlightLeft: "0rpx", // 高亮框左侧位置
       // 抽奖配置常量
       LOTTERY_PATH: [0, 1, 2, 5, 8, 7, 6, 3], // 抽奖路径顺序（顺时针）
       INITIAL_SPEED: 100, // 初始速度(ms) - 调慢以便观察
@@ -69,77 +84,82 @@ export default {
       animationTimer: null, // 动画计时器
       targetIndex: 0,
       currentPrize: [],
-      currentUserData:{}
-    }
+      currentUserData: {},
+    };
   },
   mounted() {
     this.getUserInfo();
   },
   methods: {
-       // 查询用户等级
-        async getUserInfo() {
-            const result = await getUserInfo();
-            if (result && result.bizcode === 100) {
-                const data = result.data;
-                this.currentUserData = result.data || {};
-            }
-        },
+    // 查询用户等级
+    async getUserInfo() {
+      const result = await getUserInfo();
+      if (result && result.bizcode === 100) {
+        const data = result.data;
+        this.currentUserData = result.data || {};
+      }
+    },
     /**
      * 移动高亮框到指定索引位置
      * @param {number} index - 格子索引
      */
     moveHighlight(index) {
-      const row = Math.floor(index / 3) // 计算行
-      const col = index % 3 // 计算列
-      this.highlightTop = `${row * 202}rpx`
-      this.highlightLeft = `${col * 202}rpx`
+      const row = Math.floor(index / 3); // 计算行
+      const col = index % 3; // 计算列
+      this.highlightTop = `${row * 194}rpx`; // 使用高度值194rpx而不是宽度值203rpx
+      this.highlightLeft = `${col * 203}rpx`; // 水平位置使用宽度值203rpx保持不变
     },
     /**
      * 执行抽奖动画
      * @param {Object} options - 动画参数
      */
     runAnimation(options) {
-      const { currentStep, speed, targetStep, cycleCount, totalSteps } = options
+      const { currentStep, speed, targetStep, cycleCount, totalSteps } =
+        options;
 
       // 清除之前的计时器
       if (this.animationTimer) {
-        clearTimeout(this.animationTimer)
+        clearTimeout(this.animationTimer);
       }
 
       // 计算下一步
-      const nextStep = (currentStep + 1) % this.LOTTERY_PATH.length
-      const nextTotalSteps = totalSteps + 1
-      let nextCycleCount = cycleCount
-      let nextSpeed = speed
+      const nextStep = (currentStep + 1) % this.LOTTERY_PATH.length;
+      const nextTotalSteps = totalSteps + 1;
+      let nextCycleCount = cycleCount;
+      let nextSpeed = speed;
 
       // 计算循环次数
       if (nextStep === 0) {
-        nextCycleCount++
+        nextCycleCount++;
       }
 
       // 速度控制逻辑
       if (nextCycleCount < 1 && nextTotalSteps < this.ACCELERATE_STEPS) {
         // 加速阶段
-        nextSpeed = Math.max(this.MIN_SPEED, nextSpeed - this.SPEED_DECREMENT)
+        nextSpeed = Math.max(this.MIN_SPEED, nextSpeed - this.SPEED_DECREMENT);
       } else {
         // 减速阶段
-        nextSpeed += this.SPEED_INCREMENT
+        nextSpeed += this.SPEED_INCREMENT;
       }
 
       // 移动高亮框到当前步骤位置
-      this.moveHighlight(this.LOTTERY_PATH[nextStep])
+      this.moveHighlight(this.LOTTERY_PATH[nextStep]);
 
       // 检查是否应该停止
       const shouldStop =
-        (nextSpeed > this.STOP_SPEED && nextStep === targetStep) || nextTotalSteps > this.MAX_STEPS
+        (nextSpeed > this.STOP_SPEED && nextStep === targetStep) ||
+        nextTotalSteps > this.MAX_STEPS;
 
       if (shouldStop) {
         // 动画结束
-        this.isRotating = false
-        this.animationTimer = null
+        this.isRotating = false;
+        this.animationTimer = null;
         // 触发抽奖完成事件，返回中奖奖品
-        this.$emit('complete', this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]])
-        return
+        this.$emit(
+          "complete",
+          this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]]
+        );
+        return;
       }
 
       // 继续下一帧动画
@@ -149,21 +169,19 @@ export default {
           speed: nextSpeed,
           targetStep,
           cycleCount: nextCycleCount,
-          totalSteps: nextTotalSteps
-        })
-      }, nextSpeed)
+          totalSteps: nextTotalSteps,
+        });
+      }, nextSpeed);
     },
 
-
-
     /**
-  * 处理开始抽奖事件
-  */
+     * 处理开始抽奖事件
+     */
     async handleStartLottery(num) {
-      if(this.currentUserData.contractStatus != 4){
-          uni.showToast({
+      if (this.currentUserData.contractStatus != 4) {
+        uni.showToast({
           title: `您当前尚未签署合同，请先签署合同再参与抽奖～`,
-          icon: 'none'
+          icon: "none",
         });
         return;
       }
@@ -171,7 +189,7 @@ export default {
       if (this.prizesObj.times <= 0) {
         uni.showToast({
           title: `您当前未获取到抽奖次数，快去获取吧～`,
-          icon: 'none'
+          icon: "none",
         });
         return;
       }
@@ -180,19 +198,24 @@ export default {
         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.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)
-
+      this.handleStartClick(num);
     },
 
     /**
@@ -201,34 +224,32 @@ export default {
     handleStartClick(num) {
       // 如果正在抽奖或被禁用，则不执行
       if (this.isDisabled || this.isRotating) {
-        console.log('抽奖被禁用或正在进行中')
-        return
+        console.log("抽奖被禁用或正在进行中");
+        return;
       }
       // 减少抽奖次数
       if (this.remainCount <= 0) {
         uni.showToast({
-          title: '抽奖次数不足',
-          icon: 'none'
-        })
-        return
+          title: "抽奖次数不足",
+          icon: "none",
+        });
+        return;
       }
 
-
       // 标记为正在抽奖
-      this.isRotating = true
+      this.isRotating = true;
       // 通知父组件开始抽奖
-      this.$emit('start', num, this.currentPrize)
+      this.$emit("start", num, this.currentPrize);
 
       // 开始抽奖动画（无论父组件做了什么处理）
-      this.startLotteryAnimation()
+      this.startLotteryAnimation();
     },
     /**
      * 开始抽奖动画
      */
     startLotteryAnimation() {
       // 重置动画参数
-      clearTimeout(this.animationTimer)
-
+      clearTimeout(this.animationTimer);
 
       // 开始动画
       this.runAnimation({
@@ -236,18 +257,18 @@ export default {
         speed: this.INITIAL_SPEED,
         targetStep: this.targetIndex,
         cycleCount: 0,
-        totalSteps: 0
-      })
-    }
+        totalSteps: 0,
+      });
+    },
   },
   beforeDestroy() {
     // 组件销毁时清理计时器
     if (this.animationTimer) {
-      clearTimeout(this.animationTimer)
-      this.animationTimer = null
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
     }
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
@@ -267,14 +288,14 @@ export default {
   width: 203rpx;
   height: 194rpx;
   box-sizing: border-box;
-  border: 8rpx solid #FF4646;
+  border: 8rpx solid #ff4646;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
   flex-shrink: 0;
-  background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%);
+  background: linear-gradient(180deg, #fff7e7 0%, #ffdab2 100%);
   box-shadow: inset 0px 0 24rpx 0px rgba(255, 129, 9, 0.5);
   border-radius: 20rpx;
 }
@@ -313,7 +334,6 @@ export default {
 .prize-img-button {
   width: 100%;
   height: 100%;
-
 }
 
 .prize-name {
@@ -328,25 +348,27 @@ export default {
 
 .highlight-box {
   position: absolute;
-  width: 200rpx;
+  width: 203rpx;
   height: 194rpx;
   box-sizing: border-box;
-  border: 6rpx solid #FFDAB2;
+  border: 6rpx solid #ffdab2;
   background-color: rgba(255, 64, 129, 0.4);
   z-index: 1;
   pointer-events: none;
   border-radius: 20rpx;
-  /* 增加高亮动画效果 */
-  /* box-shadow: 0 0 15rpx 2rpx rgba(255, 64, 129, 0.5); */
-
-  /* background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%); */
   box-shadow: inset 0px 0 24px 0px rgba(255, 129, 9, 0.5);
 }
 
 .coiled-lottery {
   width: 670rpx;
   height: 88rpx;
-  background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%);
+  background: linear-gradient(
+    180deg,
+    #ffe361 0%,
+    #ff7b21 70%,
+    #ffb931 91%,
+    #ffb245 100%
+  );
   box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
   border-radius: 44rpx;
   margin: 120rpx auto 0;
@@ -355,6 +377,6 @@ export default {
   justify-content: center;
   font-weight: 500;
   font-size: 32rpx;
-  color: #FFFFFF;
+  color: #ffffff;
 }
-</style>
+</style>