vue九宫格抽奖

突然想写一个关于抽奖的东西，借鉴了其他大佬的实现。做的一个概率类型的抽奖，css跟数据都是瞎弄的。不想优化了。哈哈哈哈

<template>
  <div class="home_page">
    <!--    <headerPage />-->
    <content-page>
      <div>抽奖测试</div>
      <div class="choujiang">
        <ul class="ul">
          <li
            v-for="(item,i) in arr"
            :key="i"
            :class="{isActive:i === index }"
            class="li"
          > {{ item }} </li>
        </ul>
      </div>
      <!--      <div v-show="isShow" class="begin" @click="begin">开始抽奖</div>-->
      <!--      <div v-show="!isShow" class="begin" @click="stop">结束抽奖</div>-->
      <div v-show="isShow" class="begin" @click="startLottery">开始抽奖</div>

    </content-page>
  </div>
</template>

<script>
// import headerPage from '../components/header_page'
import contentPage from '../components/content_page'
// import footerPage from '../components/footer_page'
export default {
  name: 'Home',
  components: {
    // headerPage,
    contentPage,
    // footerPage,
  },
  data() {
    return {
      arr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      isShow: true,
      randomIndex: -1,
      curIndex: 0,
      // timer: '',
      /** 修改版本 **/
      index: -1, // 当前转动到哪个位置，起点位置
      count: 10, // 总共有多少个位置
      timer: 0, // 每次转动定时器
      speed: 200, // 初始转动速度
      times: 0, // 转动次数
      cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: -1, // 中奖位置
      click: true,
      showToast: false, // 显示中奖弹窗
    }
  },
  computed: {},
  create() {
  },
  mounted() {
  },

  methods: {
    startLottery() {
      if (!this.click) { return }
      this.startRoll()
    },
    // 开始转动
    startRoll() {
      this.times += 1 // 转动次数
      this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
      if (this.times > this.cycle && this.prize === this.index) {
        this.$message({
          type: 'success ',
          message: `中将号码: ${this.index}`,
        })
        // console.log('中奖了')
        // console.log(this.index)
        // console.log(this.prize)
        // console.log(this.times)
        // console.log(this.speed)
        clearTimeout(this.timer) // 清除转动定时器，停止转动
        this.prize = -1
        this.times = 0
        this.speed = 200
        this.click = true
        var that = this
        setTimeout(() => {
          that.showToast = true
        }, 500)
      } else {
        if (this.times < this.cycle) {
          this.speed -= 10 // 加快转动速度
        } else if (this.times === this.cycle) {
          // const index = parseInt(Math.random() * 10, 0) || 0 // 随机获得一个中奖位置

          this.prize = this.random() // 中奖位置,可由后台返回

          if (this.prize > 9) { this.prize = 9 }
        } else if (this.times > this.cycle && ((this.prize === 0 && this.index === 9) || this.prize === this.index + 1)) {
          this.speed += 110
        } else {
          this.speed += 20
        }
        if (this.speed < 40) { this.speed = 40 }
        this.timer = setTimeout(this.startRoll, this.speed)
      }
    },

    // 每一次转动
    oneRoll() {
      let index = this.index // 当前转动到哪个位置
      const count = this.count // 总共有多少个位置
      index += 1
      if (index > count - 1) { index = 0 }
      this.index = index
    },
    /** 生成概率的数据 **/
    random() {
      const arr1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // 对应的奖品号码
      const arr2 = [0.02, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.01, 0.07, 0.3] // 奖品号码的概率
      let sum = 0
      let factor = 0
      let random = Math.random()

      for (let i = arr2.length - 1; i >= 0; i--) {
        sum += arr2[i] // 统计概率总和
      }
      random *= sum // 生成概率随机数(只是为了让定义的部分是个let)可以不写
      for (let m = arr2.length - 1; m >= 0; m--) {
        factor += arr2[m]
        if (random <= factor) {
          return arr1[m]
        }
      }
      return null
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../assets/style/base.scss";
  .home_page{
    font-size: pxTorem(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    .choujiang{
      .ul{
        width: pxTorem(240px);
        display: flex;
        flex-wrap: wrap;
        .li{
          padding: pxTorem(8px) pxTorem(20px);
          margin: pxTorem(10px) pxTorem(10px);
          /*background-color: salmon;*/
          border: 1px solid;
        }
      }
    }
    .begin{
      margin-top: pxTorem(40px);
      padding: pxTorem(18px) pxTorem(24px);
      background-color: salmon;
      text-align: center;
      cursor: pointer;
    }

  }
  .isActive{
    background-color: salmon;
  }
</style>