基于VUE实现的九宫格抽奖功能


Posted in Javascript onSeptember 30, 2018

先给大家展示下效果图:

基于VUE实现的九宫格抽奖功能基于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 () {

 },
}

总结

以上所述是小编给大家介绍的基于VUE实现的九宫格抽奖功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 #Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 #Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 #Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 #Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 #Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 #Javascript
详解如何webpack使用DllPlugin
Sep 30 #Javascript
You might like
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python实现的防DDoS脚本
2011/02/08 Python
python函数返回多个值的示例方法
2013/12/04 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
Python 没有main函数的原因
2020/07/10 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
中药学专业求职信
2014/05/31 职场文书
采购部长岗位职责
2014/06/13 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
JavaScript实现两个数组的交集
2022/03/25 Javascript