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

  },
}