基于VUE的九宫格抽奖功能

HTML代码：

<template>
  <div class="luckDraw">
    <title-bar :title="title"></title-bar>
    <div class="container">
      <div class="turntable-wrapper">
        <div class="luck-wrapper">
          <p class="integral">我的积分: <span>1000</span></p>
          <ul class="nineGrid">
            <li class="row">
              <div v-for="(n, key) in 3" :key="n" :class="index === key ? `active` : ``">
                <div class="wrapper">
                  <img src="../../assets/luck-icon.png" alt="">
                  <p>8金转</p>
                </div>
                <div class="mask"></div>
              </div>
            </li>
            <li class="row">
              <div :class="index === 7 ? 'active': ''">
                <div class="wrapper">
                  <img src="../../assets/luck-icon.png" alt="">
                  <p>128金转</p>
                </div>
                <div class="mask"></div>
              </div>
              <div class="getLuck" @click="startLottery">
                <p>立即<br>抽奖</p>
              </div>
               <div :class="index === 3 ? 'active': ''">
                <div class="wrapper">
                  <img src="../../assets/luck-icon.png" alt="">
                  <p>128金转</p>
                </div>
                <div class="mask"></div>
              </div>
            </li>
            <li class="row">
              <div v-for="(n, key) in 3" :key="n" :class="index === 6-key ? `active` : ``">
                <div class="wrapper">
                  <img src="../../assets/luck-icon.png" alt="">
                  <p>256金转</p>
                </div>
                <div class="mask"></div>
              </div>
            </li>
          </ul>
        </div>

        <p class="share">分享领积分 <i class="icon-go"></i></p>

        <div class="rule">
          <p class="rule-title">活动规则</p>
          <ul class="rule-main">
            <li>1、活动时间：2017年9月8日起；</li>
            <li>2、活动期间，股事汇用户每次抽奖消耗20积分，抽奖次数不限</li>
            <li>3、金钻可用于向投顾提问、送礼、赞赏；</li>
            <li>4、积分赚取：每日签到、分享文章/问答/直播间、点赞、金钻充值均可获得积分哦</li>
            <li>5、活动最终解释权归股事汇所有。</li>
          </ul>
        </div>

        <div></div>
      </div>

      <LuckToast :showToast="showToast" :toastType="toastType" @closeToast="closeToast" @startLottery="startLottery"></LuckToast>
    </div>
  </div>
</template>

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 () {

  },
}