Vue3实现九宫格抽奖的三种形态

最近业务需要，就自己写了几个九宫格抽奖的大概模板和思路给大家分享一下。。。

第一种

奖品名称

第二种

奖品名称 + 带奖品图

第三种

抽奖按钮在中间

1. 修改抽奖处理逻辑

将模拟中奖信息的逻辑改为通过 API 请求获取。假设我们有一个返回随机奖品的 API。

// 抽奖处理
const startLottery = async () => {
  if (isSpinning.value) return // 防止在旋转时重复点击

  isSpinning.value = true
  activeIndex.value = -1

  // 模拟抽奖过程
  let count = 0
  const interval = setInterval(() => {
    activeIndex.value = Math.floor(Math.random() * items.value.length)
    count++

    // 停止旋转
    if (count >= 10) {
      clearInterval(interval)
      setTimeout(async () => {
        isSpinning.value = false
        
        // 从接口获取中奖项
        const winningItem = await fetchWinningItem(activeIndex.value);
        alert(`恭喜你获得：${winningItem.label}`);
      }, 500)
    }
  }, 200)
}

// 模拟接口请求中奖项
const fetchWinningItem = async (index: number): Promise<GridItem> => {
  // 这里是模拟API请求，你可以替换为实际接口
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(items.value[index]);
    }, 300); // 模拟延迟
  });
}

2. 解释更改

• 在 startLottery 函数中，当抽奖结束时，调用 fetchWinningItem 函数获取中奖的奖品。
• fetchWinningItem 函数模拟了一个异步请求，它接受 index 参数并返回相应的奖品。实际中可以替换成 fetch 调用你的真实 API。
• 使用 setTimeout 模拟 API 请求的延迟。

这样，你的抽奖功能就可以通过接口获取中奖信息，便于以后的扩展和实际应用。一般常见的九宫格的形态~希望这个能帮助到你处理类似的业务；