VUE游戏九宫格

<!-- 九宫格 -->
<template>
  <div class="jiu">
    <div class="content">
      <div class="head">
        <div class="icon" @click="backFn">
          <i class="iconfont icon-fanhui1"></i>
        </div>
        <div class="txt">榜单</div>
      </div>
      <div class="img">
        <img src="../../assets/images/activity/txt.png" alt />
      </div>
      <div class="tip">
        <div class="tip-txt">刚刚用户铃**小，抽中了小米手机</div>
      </div>
      <div class="wrap">
        <div class="jifen">我的积分96756</div>
      </div>
      <div class="pan">
        <div
          class="item"
          v-for="item in  [1,2,3,4,5,6,7,8,9]"
          :key="item"
          :class="[index===item && item!==5?'active':'',item===5?'anniu':'']"
        >
          <div class="img" v-if="item!==5">
            <img :src="require('../../assets/images/activity/l'+item+'.png')" alt />
          </div>
          <div class="now" v-if="item===5" @click="startLottery">立即抽奖</div>
          <div class="n-txt" v-if="item===5">消耗1500积分</div>
          <div class="txt" v-if="item!==5">{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "积分转盘",
      index: 0, // 当前转动到哪个位置，起点位置
      count: 10, // 总共有多少个位置
      timer: 0, // 每次转动定时器
      speed: 200, // 初始转动速度
      times: 0, // 转动次数
      cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: -1, // 中奖位置
      click: true,
      showToast: false,
      toastType: "luck"
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    backFn() {
      this.$getBackPathData();
    },
    // 开始抽奖
    startLottery() {
      if (!this.click) {
        //避免多次点击
        return;
      }
      this.closeToast(); //关闭提示
      this.speed = 200; //初始化速度
      this.click = false; //重新开始点击(这里要优化)
      this.startRoll(); //开始转动
    },

    // 开始转动
    startRoll() {
      this.times += 1; // 转动次数
      this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
      if (this.times > this.cycle + 10 && this.prize === this.index) {
        clearTimeout(this.timer); // 清除转动定时器，停止转动
        this.prize = -1;
        this.times = 0;
        this.click = true;
        this.showToast = true;
        this.toastType = "comeOn";
        console.log("你已经中奖了");
      } else {
        if (this.times < this.cycle) {
          this.speed -= 10; // 加快转动速度
        } else if (this.times === this.cycle) {
          // 随机获得一个中奖位置(调接口获取)
          const index = parseInt(Math.random() * 10, 0);
          this.prize = index;
          //   if (this.prize > 7) {
          //     this.prize = 7;
          //   }
          console.log(`中奖位置${this.prize}`);
        } else if (
          this.times > this.cycle + 10 &&
          ((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;
    },
    // 关闭弹出框
    closeToast() {
      this.showToast = false;
    }
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.jiu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: linear-gradient(
    159deg,
    rgba(22, 3, 50, 1) 0%,
    rgba(38, 0, 65, 1) 100%
  );
  .content {
    background: url("../../assets/images/activity/bgjiu.png") no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    .head {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 30px;
      position: relative;
      height: 98px;
      box-sizing: border-box;
      .icon {
        position: absolute;
        left: 30px;
        > .iconfont {
          font-size: 70px;
          color: #ffffff;
        }
      }
      .txt {
        font-size: 32px;
        font-weight: bold;
        color: #ffffff;
      }
    }
    .img {
      text-align: center;
      padding-top: 20px;
      img {
        width: 646px;
        height: 122px;
      }
    }
    .tip {
      display: flex;
      justify-content: center;
      padding-top: 24px;
      padding-bottom: 30px;
      .tip-txt {
        width: 546px;
        height: 50px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 8px;
        font-size: 28px;
        color: rgba(254, 189, 215, 1);
        text-align: center;
        line-height: 50px;
      }
    }
    .wrap {
      display: flex;
      justify-content: center;
      .jifen {
        width: 366px;
        height: 60px;
        background: linear-gradient(
          84deg,
          rgba(213, 64, 114, 0) 0%,
          rgba(200, 56, 114, 0.98) 51%,
          rgba(232, 88, 123, -0.16) 100%
        );
        text-align: center;
        line-height: 60px;
        color: #ffffff;
      }
    }
    .pan {
      margin: 30px 16px;
      width: 716px;
      height: 716px;
      background: url("../../assets/images/activity/abg.png") no-repeat;
      background-size: 100% 716px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 62px 60px;
      .item {
        width: 186px;
        height: 186px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: url("../../assets/images/activity/chang.png") no-repeat
          center/100%;
        &.active {
          background: url("../../assets/images/activity/zhong.png") no-repeat
            center/100%;
        }
        &.anniu {
          background: url("../../assets/images/activity/chou.png") no-repeat
            center/100%;
        }
        .img {
          img {
            width: 88px;
            height: 88px;
          }
        }
        .txt {
          font-size: 26px;
          color: rgba(127, 62, 62, 1);
          line-height: 73px;
        }
        .now {
          font-size: 36px;
          font-weight: bold;
          color: rgba(236, 64, 46, 1);
          line-height: 72px;
        }
        .n-txt {
          font-size: 22px;
          color: rgba(236, 64, 46, 1);
        }
      }
    }
  }
}
</style>