基于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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
js仿京东放大镜效果
Aug 09 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
MySQL相关说明
2007/01/15 PHP
使用php来实现网络服务
2009/09/15 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python实现抢购IPhone手机
2018/02/07 Python
python定时关机小脚本
2018/06/20 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
学校搬迁方案
2014/06/15 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
红色经典观后感
2015/06/18 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers