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

先给大家展示下效果图:

0e714147c811a2dcfbe838290cd94891.png

4cd2fe6081b0d9749addf9f8aae10146.png

HTML代码:

我的积分: 1000

  • 8金转

  • 128金转

    立即
    抽奖

    128金转

  • 256金转

活动规则

  • 1、活动时间:2017年9月8日起;
  • 2、活动期间,股事汇用户每次抽奖消耗20积分,抽奖次数不限
  • 3、金钻可用于向投顾提问、送礼、赞赏;
  • 4、积分赚取:每日签到、分享文章/问答/直播间、点赞、金钻充值均可获得积分哦
  • 5、活动最终解释权归股事汇所有。

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实现的九宫格抽奖功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值