HTML代码：

 

SCSS样式：

@import "~base";.luckDraw {
     .turntable-wrapper {    padding: 0 px3rem(38);    position: relative;    @include background-cover("background-luck.png");    padding-top: px3rem(121);    .luck-wrapper {      width: px3rem(300);      height: px3rem(377);      margin: 0 auto;      position: relative;      @include background-cover("background-turntable.png");      .integral {        width: 100%;        color: #6d2d00;        font-size: px3rem(16);        font-weight: normal;        text-align: center;        position: absolute;        top: px3rem(58);        span {          font-weight: 600;          color: #ff2f4d;        }      }      .nineGrid {
           position: absolute;        top: px3rem(86);        left: 50%;        margin-left: px3rem(-130);        width: px3rem(260);        height: px3rem(260);        li {          height: px3rem(80);          display: flex;          margin-top: px3rem(5);          > div {            flex: 1;            margin-right: px3rem(5);            height: 100%;            text-align: center;            position: relative;            .wrapper {              width: 100%;              height: 100%;              margin: 0;              @include background-cover("background-grid.png");            }            img {
                 width: px3rem(46);              height: px3rem(38);              vertical-align: middle;              margin-top: px3rem(8);            }            .mask {
                 position: absolute;              top: 0;              left: 0;              width: 100%;              height: 100%;              opacity: 0.5;              border-radius: px3rem(10);              background-color: #000;              display: none;            }          }          > div.active {
               .mask {              display: block;            }          }          > div:first-child {
               margin-left: px3rem(5);          }          > div.getLuck {
               @include background-cover("background-getLuck.png");            font-size: 0;            p {              font-size: px3rem(20);              font-weight: 600;              color: #fff;              line-height: 1.1;              margin-top: px3rem(11);            }          }        }        li:last-child {
             margin-bottom: px3rem(5);        }      }    }    .share {
         width: px3rem(160);      height: px3rem(42);      margin: 0 auto;      text-align: center;      line-height:px3rem(42);      @include background-cover("luckShrae.png");      margin-top: px3rem(22);      color: #6d2d00;      font-size: px3rem(16);      font-weight: 600;      .icon-go {        @include size(30);        @include background-cover("goShare-icon.png");        display: inline-block;        vertical-align: middle;        margin-bottom: px3rem(2);      }    }    .rule {
         margin-top: px3rem(14);      color: #fff;      font-size: px3rem(14);      padding-bottom: px3rem(39);      .rule-title {        text-align: center;        position: relative;        font-size: px3rem(16);        margin-bottom: px3rem(14);      }      .rule-title:before,      .rule-title:after {
           content: '';        position: absolute;        top: 52%;        background: #fff;        width: 30%;        height: px3rem(1);      }      .rule-title:before {
           left: 0;      }      .rule-title:after {
           right: 0;      }    }  }}

 

JS代码：

 

// import Utils from 'utils'import TitleBar from 'components/TitleBar.vue'import LuckToast from 'components/luckToast.vue'export default {  name: 'luckDraw',  components: {    TitleBar,    LuckToast,  },  data () {    return {      title: '积分转盘',      index: -1,    // 当前转动到哪个位置，起点位置      count: 8,    // 总共有多少个位置      timer: 0,    // 每次转动定时器      speed: 200,   // 初始转动速度      times: 0,    // 转动次数      cycle: 50,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节      prize: -1,   // 中奖位置      click: true,      showToast: false,      toastType: 'luck',    }  },  props: {  },  methods: {    // 开始抽奖    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) || 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 === 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)      }    },    // 每一次转动    oneRoll () {      let index = this.index  // 当前转动到哪个位置      const count = this.count  // 总共有多少个位置      index += 1      if (index > count - 1) {        index = 0      }      this.index = index    },    // 关闭弹出框    closeToast () {      this.showToast = false    },  },  beforeMount () {  },  created () {  },  beforeDestroy () {  },}