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

<template>
  <!-- 九宫格容器 -->
  <view>
  </view>
  <view class="lottery-grid">
    <!-- 高亮选中框 -->
    <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>
      </template>

      <!-- 其他8个奖品格子 -->
      <template v-else>
        <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 > 10" @click="handleStartLottery(10)"> 连续抽奖10次 </view>
</template>

<script>
import { raffleExecute } from '@/api/raffle.js';
export default {
  props: {
    // 奖品数据数组
    prizesObj: {
      type: Object,
      required: true,
      default: () => ({ prizes: [] })
    },
    // 是否禁用抽奖
    isDisabled: {
      type: Boolean,
      default: false
    },

    remainCount: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      isRotating: false, // 是否正在旋转
      highlightTop: '0rpx', // 高亮框顶部位置
      highlightLeft: '0rpx', // 高亮框左侧位置
      // 抽奖配置常量
      LOTTERY_PATH: [0, 1, 2, 5, 8, 7, 6, 3], // 抽奖路径顺序（顺时针）
      INITIAL_SPEED: 100, // 初始速度(ms) - 调慢以便观察
      MAX_STEPS: 50, // 最大步数，防止无限循环
      ACCELERATE_STEPS: 5, // 加速步数
      SPEED_DECREMENT: 10, // 加速时的速度减少量
      SPEED_INCREMENT: 15, // 减速时的速度增加量
      MIN_SPEED: 50, // 最小速度
      STOP_SPEED: 250, // 停止时的速度阈值
      animationTimer: null, // 动画计时器
      targetIndex: 0,
      currentPrize: []
    }
  },
  methods: {
    /**
     * 移动高亮框到指定索引位置
     * @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`
    },
    /**
     * 执行抽奖动画
     * @param {Object} options - 动画参数
     */
    runAnimation(options) {
      const { currentStep, speed, targetStep, cycleCount, totalSteps } = options

      // 清除之前的计时器
      if (this.animationTimer) {
        clearTimeout(this.animationTimer)
      }

      // 计算下一步
      const nextStep = (currentStep + 1) % this.LOTTERY_PATH.length
      const nextTotalSteps = totalSteps + 1
      let nextCycleCount = cycleCount
      let nextSpeed = speed

      // 计算循环次数
      if (nextStep === 0) {
        nextCycleCount++
      }

      // 速度控制逻辑
      if (nextCycleCount < 1 && nextTotalSteps < this.ACCELERATE_STEPS) {
        // 加速阶段
        nextSpeed = Math.max(this.MIN_SPEED, nextSpeed - this.SPEED_DECREMENT)
      } else {
        // 减速阶段
        nextSpeed += this.SPEED_INCREMENT
      }

      // 移动高亮框到当前步骤位置
      this.moveHighlight(this.LOTTERY_PATH[nextStep])

      // 检查是否应该停止
      const shouldStop =
        (nextSpeed > this.STOP_SPEED && nextStep === targetStep) || nextTotalSteps > this.MAX_STEPS

      if (shouldStop) {
        // 动画结束
        this.isRotating = false
        this.animationTimer = null
        // 触发抽奖完成事件，返回中奖奖品
        this.$emit('complete', this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]])
        return
      }

      // 继续下一帧动画
      this.animationTimer = setTimeout(() => {
        this.runAnimation({
          currentStep: nextStep,
          speed: nextSpeed,
          targetStep,
          cycleCount: nextCycleCount,
          totalSteps: nextTotalSteps
        })
      }, nextSpeed)
    },



    /**
  * 处理开始抽奖事件
  */
    async handleStartLottery(num) {
      if (this.prizesObj.times <= 0) {
        uni.showToast({
          title: `您当前未获取到抽奖次数，快去获取吧～`,
          icon: 'none'
        });
        return;
      }

      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)

    },

    /**
     * 处理开始抽奖点击事件
     */
    handleStartClick(num) {
      // 如果正在抽奖或被禁用，则不执行
      if (this.isDisabled || this.isRotating) {
        console.log('抽奖被禁用或正在进行中')
        return
      }
      // 减少抽奖次数
      if (this.remainCount <= 0) {
        uni.showToast({
          title: '抽奖次数不足',
          icon: 'none'
        })
        return
      }


      // 通知父组件开始抽奖
      this.$emit('start', num, this.currentPrize)

      // 开始抽奖动画（无论父组件做了什么处理）
      this.startLotteryAnimation()
    },
    /**
     * 开始抽奖动画
     */
    startLotteryAnimation() {
      // 重置动画参数
      clearTimeout(this.animationTimer)

      // 标记为正在抽奖
      this.isRotating = true

      // 开始动画
      this.runAnimation({
        currentStep: 0,
        speed: this.INITIAL_SPEED,
        targetStep: this.targetIndex,
        cycleCount: 0,
        totalSteps: 0
      })
    }
  },
  beforeDestroy() {
    // 组件销毁时清理计时器
    if (this.animationTimer) {
      clearTimeout(this.animationTimer)
      this.animationTimer = null
    }
  }
}
</script>

<style scoped>
.lottery-grid {
  width: 615rpx;
  height: 605rpx;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border-radius: 16rpx;
  background-color: transparent;
  box-sizing: content-box;
  margin: 45rpx 0 0 10rpx;
}

.grid-item {
  width: 203rpx;
  height: 194rpx;
  box-sizing: border-box;
  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%);
  box-shadow: inset 0px 0 24rpx 0px rgba(255, 129, 9, 0.5);
  border-radius: 20rpx;
}

.lottery-btn {
  width: 203rpx;
  height: 194rpx;
  background: linear-gradient(135deg, #ff5252 0%, #e63946 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6rpx 12rpx rgba(230, 57, 70, 0.3);
  /* 增加点击反馈 */
  transition: transform 0.2s;
}

.lottery-btn:active {
  transform: scale(0.95);
}

.lottery-btn text {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  padding: 0 10rpx;
}

.prize-img {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.prize-img-button {
  width: 100%;
  height: 100%;

}

.prize-name {
  font-size: 26rpx;
  color: #333;
  text-align: center;
  padding: 0 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.highlight-box {
  position: absolute;
  width: 200rpx;
  height: 194rpx;
  box-sizing: border-box;
  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%);
  box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
  border-radius: 44rpx;
  margin: 120rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 32rpx;
  color: #FFFFFF;
}
</style>