记录一次9宫格转盘

<template>
  <div class="turntable clearfix">
    <div class="music1"></div>
    <div class="prizeBox clearfix">
      <div class="prizeTle"></div>
      <ul>
        <li
          v-for="(item, indx) in prizeList"
          :key="indx"
          :class="index == indx ? 'on' : ''"
        >
          <div class="v_box">
            <div class="prizecon">
              <div class="md-img"><img :src="item.pic" alt="" /></div>
              <p v-if="item.money">{{ item.money }}</p>
            </div>
            <span
              v-if="item.money"
              v-html="
                item.name.indexOf('元') != -1
                  ? item.name.split('元')[0] +
                    '元<br/>' +
                    item.name.split('元')[1]
                  : item.name
              "
            ></span>
          </div>
        </li>
      </ul>
      <div class="prizeBtn" @click="startLottery"></div>
    </div>
    <div class="text">
      <p>您还有<span>0次</span>抽奖机会</p>
    </div>
    <div class="prizeBtm">
      <div class="prize">
        <ul :class="animate ? 'anim' : ''">
          <li v-for="(item, index) in noticeList" :key="index">
            <!-- {{item.txt}} -->
            <p>
              {{ item.txt }}<span>{{ item.money }}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>

    <!-- 恭喜中奖  start -->
    <prizemc :prizeStatu.sync="prizeTrue"></prizemc>
    <!-- 恭喜中奖  end -->

    <!-- 元宵祝福  start -->
    <blessingmc :blessingStatu.sync="blessingTrue"></blessingmc>
    <!-- 元宵祝福  end -->
  </div>
</template>
<script>
import prizemc from "@/components/prize.vue";
import blessingmc from "@/components/blessing.vue";
export default {
  name: "turntable",
  data() {
    return {
      prizeTrue: true, //恭喜中奖弹窗
      blessingTrue: true, //元宵祝福弹窗
      prizeList: [
        {
          pic: require("../assets/pri1.png"),
          money: "100元",
          name: "手机话费",
        },
        {
          pic: require("../assets/pri2.png"),
          money: "100元",
          name: "手机话费",
        },
        {
          pic: require("../assets/pri3.png"),
          money: "月卡",
          name: "腾讯视频会员",
        },
        {
          pic: require("../assets/pri4.png"),
          money: "0.33元",
          name: "红包",
        },
        {
          pic: require("../assets/pri5.png"),
          money: "3元",
          name: "流量券代金券",
        },
        {
          pic: require("../assets/pri1.png"),
          money: "10元",
          name: "手机话费",
        },
        {
          pic: require("../assets/pri6.png"),
          money: "5元",
          name: "京东E卡",
        },
        {
          pic: require("../assets/pri4.png"),
          money: "0.66元",
          name: "红包",
        },
      ],
      index: -1, // 九宫格-----------当前转动到哪个位置，起点位置
      timer: null, // 九宫格-----------每次转动定时器
      speed: 200, // 九宫格-----------初始转动速度
      times: 0, // 九宫格-----------转动次数
      cycle: 50, // 九宫格-----------转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: -1, // 九宫格-----------中奖位置
      click: true, // 九宫格-----------抽检按钮禁止

      //中奖名单信息
      animate: false,
      noticeList: [
        {
          txt: "恭喜187****9819抽中",
          money: "50元话费",
        },
        {
          txt: "恭喜187****9819抽中",
          money: "腾讯（月卡）",
        },
        {
          txt: "恭喜187****9819抽中",
          money: "10元话费",
        },
        {
          txt: "恭喜187****9819抽中",
          money: "10元话费",
        },
      ],
    };
  },
  components: {
    prizemc,
    blessingmc,
  },
  mounted() {
    //直接执行事件
    this.prizeSwiper();
  },
  methods: {
    //
    startLottery() {
      if (!this.click) {
        return;
      }
      this.startRoll();
    },
    // 开始转动
    startRoll() {
      // 防抖
      this.click = false;

      this.times += 1; // 转动次数
      let index = this.index; // 当前转动到哪个位置
      index += 1;
      if (index > 8 - 1) {
        index = 0;
      }
      this.index = index;
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
      if (this.times > this.cycle + 10 && this.prize === this.index) {
        clearTimeout(this.timer); // 清除转动定时器，停止转动
        this.prize = -1;
        this.times = 0;
        this.speed = 200;
        this.click = true;
        var that = this;
        setTimeout((res) => {
          console.log("这里是中奖位置到了之后的事件");
        }, 500);
      } else {
        if (this.times < this.cycle) {
          this.speed -= 10; // 加快转动速度
        } else if (this.times === this.cycle) {
          this.prize = 2; //中奖位置,可由后台返回
          if (this.prize > 7) {
            this.prize = 7;
          }
        } else if (
          this.times > this.cycle + 10 &&
          ((this.prize === 0 && this.index === 7) ||
            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);
      }
    },

    /**
     * 中奖名单滚动
     * */
    prizeSwiper: function () {
      const that = this;
      setInterval(function () {
        that.animate = true; //因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
        setTimeout(function () {
          that.noticeList.push(that.noticeList[0]); //将数组的第一个元素添加到数组的
          that.noticeList.shift(); //删除数组的第一个元素
          that.animate = false; //margin-top 为0 的时候取消过渡动画，实现无缝滚动
        }, 500);
      }, 1000);
    },
  },
};
</script>
<style scoped>
.turntable {
  background: url(../assets/turntableBj.png) no-repeat;
  background-size: 100%;
  width: 7.5rem;
  min-height: 100vh;
}
.music1 {
  background: url(../assets/music1.png) no-repeat;
  background-size: 100%;
  width: 1.11rem;
  height: 1.89rem;
  position: absolute;
  right: 0.1rem;
}
.prizeBox {
  width: 6.59rem;
  height: 7.28rem;
  background: url(../assets/prizeBox.png) no-repeat;
  background-size: 100%;
  position: relative;
  margin: 3.72rem auto 0;
}
.prizeTle {
  background: url(../assets/prizeTle.png) no-repeat;
  background-size: 100%;
  width: 1.93rem;
  height: 0.73rem;
  margin: -0.53rem auto 0;
}
.prizeBox ul {
  display: block;
  width: 6.59rem;
  height: 7.28rem;
  margin: 0.2rem auto;
  position: relative;
}
.prizeBox li {
  width: 2.27rem;
  height: 2.36rem;
  position: absolute;
  background: url(../assets/joinCon.png) no-repeat;
  background-size: 100% 100%;
}
.prizeBox li.on::after {
  position: absolute;
  background: url(../assets/turnBox.png) no-repeat;
  background-size: 100%;
  width: 2.1rem;
  height: 2.2rem;
  content: "";
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
}
.prizeBox li span {
  padding: 0 0.25rem;
  text-align: center;
  font-size: 0.24rem;
  color: #fdeccc;
  line-height: 0.3rem;
  display: block;
  margin: 0.45rem auto 0.3rem;
}
.prizecon {
  width: 1.41rem;
  height: 1.08rem;
  position: relative;
  margin: 0 auto 0;
}
.prizecon p {
  position: absolute;
  bottom: -0.6rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.24rem;
  color: #fdeccc;
  margin: 0.15rem;
}
.prizeBox li:nth-child(1) {
  left: 0.2rem;
  top: 0;
}
.prizeBox li:nth-child(2) {
  left: 2.2rem;
  top: 0;
}
.prizeBox li:nth-child(3) {
  left: 4.2rem;
  top: 0;
}
.prizeBox li:nth-child(4) {
  left: 4.2rem;
  top: 2.2rem;
}
.prizeBox li:nth-child(5) {
  left: 4.2rem;
  top: 4.4rem;
}
.prizeBox li:nth-child(6) {
  left: 2.2rem;
  top: 4.4rem;
}
.prizeBox li:nth-child(7) {
  left: 0.2rem;
  top: 4.4rem;
}
.prizeBox li:nth-child(8) {
  left: 0.2rem;
  top: 2.2rem;
}
.prizeBtn {
  width: 2.16rem;
  height: 2.16rem;
  background: url(../assets/prizeBtn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  top: 52%;
  -webkit-transform: translate(-50%, -50%);
}
.text {
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.4rem;
  margin-top: 0.1rem;
}
.text p {
  color: #ffd800;
}
.text span {
  color: #fff;
}
.prizeBtm {
  background: url(../assets/prizeBtm.png) no-repeat;
  background-size: 100%;
  width: 6.38rem;
  height: 2.85rem;
  margin: 0.23rem auto;
  position: relative;
}

.prize {
  height: 1.2rem;
  overflow: hidden;
  bottom: 0.7rem;
  position: absolute;
  left: 0.1rem;
}
.prize li {
  font-size: 0.26rem;
  line-height: 0.5rem;
  text-align: center;
  padding: 0 0.8rem;
  box-sizing: border-box;
  margin-top: 0.08rem;
}
.prize li p {
  color: #541b1a;
}
.prize li p span {
  color: #c41213;
  margin-left: 0.3rem;
}
.prize .anim li:nth-child(2) {
  opacity: 1;
  -webkit-transition: all 0.5s;
}
.prize li:nth-child(1) {
  opacity: 1;
}
.anim {
  -webkit-transition: all 0.5s;
  margin-top: -0.59rem;
}
</style>