基于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 相关文章推荐
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
JavaScript window.location对象
2014/11/14 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
校园广播稿500字
2014/02/04 职场文书
人力资源职位说明书
2014/07/29 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python