关于javascript: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>