九宫格抽奖逻辑

九宫格抽奖

• 1.cardList 为循环的奖品列表
• 2.it.name为奖品列表中中奖奖品的字段
• 3.根据active判断给选中项添加不同的类名
• 4.需要在cardList 列表中添加中间按钮this.cardList.splice(4, 0, 按钮);

// 抽奖
    lotteryFn() {
      // 取出中奖奖品的对应的下标
      let cIndex = this.cardList.findIndex(
        (it) => it == it.name
      );
      // 如果没有 return
      if (cIndex == -1) {
        return;
      }
      // console.log("中奖奖品索引", cIndex);
      // 奖品排序数组
      let sort = [0, 1, 2, 5, 8, 7, 6, 3];
      let length = 8;
      // 确定cIndex在sort中的位置
      let turnPlus = sort.findIndex((it) => it == cIndex);
      turnPlus = turnPlus < 5 ? turnPlus + length : turnPlus;
      // 多走的间隔 以最后一次的时间递减   最后一次走3秒走完最后的减速
      let totalTime = 3000;
      let splitTime = ~~(totalTime / turnPlus);
      // 大于 5 小于 8
      let turn = ~~Math.random() * (9 - 5) + 5;
      let turnStart = 0;
      // 样式下一个
      const turnStyle = () => {
        this.cardList[sort[this.start]].active = 0;
        this.start++;
        if (this.start == length) {
          this.start = 0;
        }
        this.cardList[sort[this.start]].active = 1;
      };
      const clearStyle = () => {
        this.cardList = this.cardList.map((item) => {
          item.active = 0;
          return item;
        });
        this.cardList[0].active = 1;
        this.start = 0;
      };
      // 转圈，先均速转5到8圈，然后再越来越慢走5个定位到中奖的元素
      // 从头开始转
      clearStyle();
      const turnTime = setInterval(() => {
        turnStart++;
        turnStyle();
        if (turnStart == turn * length) {
          clearInterval(turnTime);
          // 越来越慢5个
          // 100 200 400 800 1600
          for (let i = 1; i < turnPlus + 1; i++) {
            setTimeout(
              () => {
                turnStyle();
                if (i == turnPlus) {
                  this.$nextTick(() => {
                    setTimeout(() => {
                      // 中奖之后的逻辑
                    }, 300);
                  });
                }
              },
              splitTime * i,
              i
            );
          }
        }
      }, 100);
    },