九宫格转盘

九宫格转盘

思路：

1. 标记：按钮点击间隔时间、转盘标记(转盘是否在执行)、按钮标记(按钮是否可点击)、按钮重置点击延时器
2. 点击按钮开始抽奖，将按钮标记置为 false，添加延时器（防止异步报错导致按钮无法点击）
3. 请求接口返回抽中奖品，将按钮标记置为 true，转盘标记置为 true

转载于: https://www.cnblogs.com/lijun12138/p/16533423.html

下面展示一些 内联代码片。

<template>
  <div>
    <div class="turntable">
      <div
        :class="['turntable-item', { active: activeIndex === item.activeIndex }]"
        v-for="(item, index) in list"
        :key="index"
      >
        <span>{{ item.content }}</span>
      </div>
    </div>

    <button @click="handleOnClick">开始抽奖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 1,
      list: [
        {
          title: 1,
          activeIndex: 1,
          content: '谢谢惠顾'
        },
        {
          title: 2,
          activeIndex: 2,
          content: '一等奖'
        },
        {
          title: 3,
          activeIndex: 3,
          content: '谢谢惠顾'
        },
        {
          title: 4,
          activeIndex: 4,
          content: '三等奖'
        },
        {
          title: 5,
          activeIndex: 5,
          content: '谢谢惠顾'
        },
        {
          title: 6,
          activeIndex: 6,
          content: '二等奖'
        },
        {
          title: 8,
          activeIndex: 8,
          content: '谢谢惠顾'
        },
        {
          title: 7,
          activeIndex: 7,
          content: '四等奖'
        },
        {
          title: 9,
          activeIndex: 9,
          content: '谢谢惠顾'
        }
      ],
      cicles: 0, //定义圈数
      time: 500, //定义速度
      buttonClickIntervalTime: 15 * 1000, // 按钮点击间隔时间 15 秒
      turntableFlag: false, // 转盘执行标记(转盘是否在执行)
      buttonFlag: true, // 按钮标记(按钮是否可点击)
      buttonResetClickTimer: null // 按钮重置点击延时器
    }
  },
  methods: {
  	// 移除按钮重置点击延时器
    clearButtonResetClickTimer() {
      if (this.buttonResetClickTimer) {
        clearTimeout(this.buttonResetClickTimer)
        this.buttonResetClickTimer = null
      }
    },
    // 点击抽奖
    handleOnClick() {
      // 是否满足抽奖条件
      const { data: isClick, message: tip } = await getPrizeConditionApi()
      if (!isClick) return Toast(`${tip}!`)
 
      if (this.buttonFlag) {
        this.buttonFlag = false // 按钮标记关闭

        this.clearButtonResetClickTimer()
        // 延时结束后按钮置为可点击(防止异步报错)
        this.buttonResetClickTimer = setTimeout(() => {
          this.buttonFlag = true
        }, this.buttonClickIntervalTime)

        // 奖品列表不为空 && 转盘在非执行状态
        if (this.list.length && !this.turntableFlag) {
          this.activeIndex = 1
          this.cicles = 0
          this.time = 500
          this.handleOnStart()
        }
      }
    },
    // 执行转盘转动
    async handleOnStart() {
      // const selectIndex = Math.round(Math.random() * 8) + 1
      const { data } = await getActivityPrizeApi() // 获取抽取奖品

      this.buttonFlag = true // 按钮标记打开
      this.clearButtonResetClickTimer()

      if (data && data.sort) {
        const selectIndex = Number(data.sort)
        console.log('奖品编号：', selectIndex)

        this.turntableFlag = true // 转盘标记打开

        this.startView(selectIndex, () => {
          this.turntableFlag = false // 转盘执行完毕，关闭标记
          Toast(`恭喜您抽中: ${data.prizeName}!`)
          console.log('当前抽中: ' + data.prizeName)
        })
      } else {
        this.buttonFlag = true // 按钮标记打开
      }
    },
    startView(selectIndex, fn) {
      if (this.activeIndex === selectIndex && this.cicles < 4) {
        this.cicles += 1 //圈数+1
        this.time -= 130 //速度加快
      }
      if (this.activeIndex === selectIndex && this.cicles >= 4) {
        this.cicles += 1
        this.time += 80 //圈数>4时速度减慢
      }
      if (this.cicles > 7 && this.activeIndex === selectIndex) {
        //圈数为8时停止
        return fn()
      }
      let turntableTimer = setTimeout(() => {
        //定时器轮询
        if (this.activeIndex < 10) {
          this.activeIndex++
        } else {
          this.activeIndex = 1
        }

        // 每走一步清除定时器再递归调用，实现连续效果
        clearTimeout(turntableTimer)
        this.startView(selectIndex, fn)
      }, this.time)
    }
  }
}
</script>

<style lang="scss" scoped>
.turntable {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  width: calc(100vw - 134px);
  height: calc(100vw - 134px);

  .turntable-item {
    width: calc((100% - 2 * 4px) / 3);
    height: calc((100% - 2 * 4px) / 3);
    background-color: aqua;
  }

  .active {
    background-color: orange;
  }
}
</style>