VUE实现的九宫格抽奖功能

2019独角兽企业重金招聘Python工程师标准>>>

效果图如下：

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。 HTML代码：

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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;
   }
  }
 }
}

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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

转载于:https://my.oschina.net/u/3970421/blog/2993202