页面:
<template>
<div class="m-ui-tiger">
<div class="item">
<ul class="roller">
<li v-for="item in list1" :key="item.key">
<img :src="item.value" alt=""/>
</li>
</ul>
</div>
<div class="item">
<ul class="roller">
<li v-for="item in list2" :key="item.key">
<img :src="item.value" alt=""/>
</li>
</ul>
</div>
<div class="item">
<ul class="roller">
<li v-for="item in list3" :key="item.key">
<img :src="item.value" alt=""/>
</li>
</ul>
</div>
<a id="js_toggle" class="toggle" href="javascript:;" @click="start"></a>
</div>
</template>
<script>
import LotteryTiger from './tiger'
export default {
name: 'Gift',
data () {
return {
lottery: null,
list1:[
{
key:2,
value:require('../images/tiger_awards_2.png')
},
{
key:1,
value:require('../images/tiger_awards_1.png')
},
{
key:3,
value:require('../images/tiger_awards_3.png')
},
],
list2:[
{
key:3,
value:require('../images/tiger_awards_3.png')
},
{
key:2,
value:require('../images/tiger_awards_2.png')
},
{
key:1,
value:require('../images/tiger_awards_1.png')
},
],
list3:[
{
key:1,
value:require('../images/tiger_awards_1.png')
},
{
key:3,
value:require('../images/tiger_awards_3.png')
},
{
key:2,
value:require('../images/tiger_awards_2.png')
},
],
awrd:"",
awrd1:""
}
},
mounted() {
var lottery = this.lottery= new LotteryTiger(document.getElementById('js_toggle'), document.querySelectorAll('.roller')) // eslint-disable-line
lottery.on('start', async ()=> {
let list = [];
let awrd = await this.getData();
console.log('awrd',awrd)
console.log('awrd1',this.awrd1)
if (awrd){
this.list1.map((item,index)=>{
if (item.key === awrd) {
list.push(index)
}
})
this.list2.map((item,index)=>{
if (item.key === awrd) {
list.push(index)
}
})
this.list3.map((item,index)=>{
if (item.key === awrd) {
list.push(index)
}
})
lottery.setResult(list);
}
})
lottery.on('end', ()=> {
console.log('接收结果')
})
lottery.on('reset', ()=> {
console.log('接收结果reset')
})
},
methods: {
async start (){
// eslint-disable-next-line no-undef
this.awrd1 = 222
this.lottery.draw()
},
getData(){
return new Promise(resolve => {
console.log('发送数据')
setTimeout(()=>{
this.awrd = 4
resolve('none')
},100)
})
}
}
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0
}
html {
font-size: 20px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
html, body {
width: 100%;
height: 100%;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline
}
img, video {
max-width: 100%;
height: auto;
border: 0 none;
vertical-align: bottom
}
li {
list-style: none
}
svg:not(:root) {
overflow: hidden
}
a {
text-decoration: none
}
a, img, button, input[type='button'], input[type='submit'], input[type='reset'] {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}
input:-ms-clear {
display: none
}
input[type='search']::-webkit-search-cancel-button {
display: none
}
input, textarea {
-webkit-user-modify: read-write-plaintext-only;
-webkit-appearance: none;
outline: none
}
button, input, textarea {
border: 0 none
}
body, button, input, textarea, select, option, pre, optgroup {
line-height: 1.5;
font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Arial;
color: #333;
font-size: 0.6rem
}
.f-cb:after, .f-cb li:after {
content: '';
display: table;
clear: both
}
.f-wsn {
word-wrap: normal;
white-space: nowrap
}
.f-wwb {
white-space: normal;
word-wrap: break-word;
word-break: break-all
}
.f-toe {
overflow: hidden;
word-wrap: normal;
white-space: nowrap;
text-overflow: ellipsis
}
.f-ma {
margin-left: auto;
margin-right: auto
}
.f-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.m-alert {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
background-color: transparent
}
.m-alert .text {
width: 11rem;
padding: 1.25rem 0.75rem;
text-align: center;
line-height: 1.4rem;
font-size: 0.8rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
white-space: normal;
word-wrap: break-word;
word-break: break-all;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 0.25rem
}
.m-alert.fx-fadeIn, .m-alert.fx-fadeOut {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: ease;
animation-fill-mode: ease
}
[class*='fx-'] {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.fx-bug {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible
}
.fx-gpu, .m-lottery-tiger .game .item .roller {
-webkit-transform: "translateZ(0)";
transform: "translateZ(0)";
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px
}
.fx-infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
.fx-fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.fx-fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
@media screen and (min-width: 320px) {
html {
font-size: 20px
}
}
@media screen and (min-width: 360px) {
html {
font-size: 22.5px
}
}
@media screen and (min-width: 375px) {
html {
font-size: 23.4375px
}
}
@media screen and (min-width: 384px) {
html {
font-size: 24px
}
}
@media screen and (min-width: 400px) {
html {
font-size: 25px
}
}
@media screen and (min-width: 412px) {
html {
font-size: 25.75px
}
}
@media screen and (min-width: 414px) {
html {
font-size: 25.875px
}
}
@media screen and (min-width: 533px) {
html {
font-size: 33.3125px
}
}
@media screen and (min-width: 600px) {
html {
font-size: 37.5px
}
}
@media screen and (min-width: 768px) {
html {
font-size: 48px
}
}
.m-ui-dial {
position: relative;
width: 499px;
height: 499px;
margin: 0 auto;
background: url("../images/dial_bg.png") no-repeat center;
background-size: 100%
}
.m-ui-dial .pointer {
margin-top: -139px !important;
background: url("../images/dial_pointer.png") no-repeat center;
background-size: 100%;
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 150px;
height: 238px;
margin: -119px 0 0 -75px;
-webkit-transform-origin: 75px 139px;
transform-origin: 75px 139px
}
.m-ui-dial .btn {
position: absolute;
top: 64px;
left: 0;
display: block;
width: 150px;
height: 150px;
border-radius: 75px
}
.m-ui-scratch {
display: block;
width: 300px;
height: 172.5px;
margin: 20px auto;
background: no-repeat center;
background-size: 100%
}
.m-ui-button {
display: block;
width: 160px;
height: 32px;
margin: 0 auto;
text-align: center;
line-height: 32px;
font-size: 12px;
color: #fff;
background-color: #f94804;
cursor: pointer;
border-radius: 5px
}
.m-ui-tiger {
position: relative;
width: 640px;
height: 432px;
margin: 20px auto;
background: url("../images/tiger_bg.png") no-repeat
}
.m-ui-tiger .toggle {
position: absolute;
top: 306px;
left: 119px;
display: block;
width: 404px;
height: 50px
}
.m-ui-tiger .item {
position: absolute;
top: 77px;
left: 139px;
display: block;
width: 110px;
height: 135px;
overflow: hidden
}
.m-ui-tiger .item:nth-child(2) {
left: 265px
}
.m-ui-tiger .item:nth-child(3) {
left: 391px
}
.m-ui-tiger .roller {
position: relative
}
.m-ui-tiger .roller li {
width: 110px;
height: 135px;
overflow: hidden
}
.m-ui-tiger .roller li:last-child {
position: absolute;
top: 100%;
left: 0
}
.m-ui-tiger .roller img {
display: block;
width: 110px;
height: 135px
}
.m-ui-tiger .roller.fx-roll {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-animation: fx-roll 0.5s 0s infinite linear;
animation: fx-roll 0.5s 0s infinite linear
}
.m-ui-tiger .roller.fx-bounce {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s
}
.m-lottery-scratch {
position: relative;
width: 16rem;
min-height: 100%;
margin: 0 auto;
padding-top: 9rem;
background: url("../images/scratch_page_bg.jpg") no-repeat #ff5e01;
background-size: 100% auto
}
.m-lottery-scratch .game {
position: relative;
display: block;
width: 10rem;
margin: 0 auto;
height: 5.75rem
}
.m-lottery-scratch .game canvas {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-size: 100% 100%
}
.m-lottery-scratch .game button {
display: block;
width: 5rem;
height: 1.5rem;
margin: 0 auto;
text-align: center;
line-height: 1.4rem;
font-size: 0.7rem;
color: #fff;
background-color: #ff5e01;
border: 0 none;
cursor: pointer;
border-radius: 0.3rem
}
.m-lottery-scratch .game button.z-dis {
background-color: #bcbcbc
}
.m-lottery-scratch .game .ceiling {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 4rem;
padding: 0.5rem 0 1.25rem;
background: url("../images/scratch_ceiling.jpg") no-repeat;
background-size: 100% 100%;
overflow: hidden
}
.m-lottery-scratch .game .ceiling .tip {
display: block;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
font-size: 0.8rem;
color: #ff5e01;
overflow: hidden
}
.m-lottery-scratch .des {
margin-top: 2.35rem;
padding: 0 1.1rem 0.5rem;
line-height: 1.15rem;
font-size: 0.6rem;
color: #fff
}
.m-lottery-scratch .des dt {
line-height: 1.2rem;
font-size: 0.7rem;
font-weight: 700
}
.m-lottery-dial {
position: relative;
width: 16rem;
min-height: 100%;
margin: 0 auto;
padding-top: 7rem;
background: url("../images/dial_page_bg.jpg") no-repeat #f94804;
background-size: 100% auto
}
.m-lottery-dial .game-dial {
position: relative;
width: 12.5rem;
height: 12.5rem;
margin: 0 auto
}
.m-lottery-dial .game-dial .dial {
width: 100%;
height: 100%;
background-size: 100% auto
}
.m-lottery-dial .game-dial .pointer {
position: absolute;
top: 50%;
left: 50%;
width: 3.75rem;
height: 5.95rem;
margin: -3.4rem 0 0 -1.875rem;
background-size: 100% auto;
-webkit-transform-origin: 1.875rem 3.4rem;
transform-origin: 1.875rem 3.4rem
}
.m-lottery-dial .game-dial .pointer span {
position: absolute;
top: 1.6rem;
left: 0;
display: block;
width: 3.75rem;
height: 3.75rem;
cursor: pointer
}
.m-lottery-dial .des {
margin-top: 4.2rem;
padding: 0 1.1rem 0.5rem;
line-height: 1.15rem;
font-size: 0.6rem;
color: #fff
}
.m-lottery-dial .des dt {
line-height: 1.2rem;
font-size: 0.7rem;
font-weight: 700
}
.m-lottery-tiger {
position: relative;
width: 16rem;
min-height: 100%;
margin: 0 auto;
padding-top: 5.5rem;
background: url("../images/tiger_page_bg.jpg") no-repeat #ffeec6;
background-size: 100% auto
}
.m-lottery-tiger .game {
position: relative
}
.m-lottery-tiger .game .back {
width: 16rem;
height: 10.8rem;
background-size: 100%;
background-repeat: no-repeat
}
.m-lottery-tiger .game .item {
position: absolute;
top: 1.925rem;
width: 2.75rem;
height: 3.375rem;
overflow: hidden
}
.m-lottery-tiger .game .item:nth-child(1) {
left: 3.475rem
}
.m-lottery-tiger .game .item:nth-child(2) {
left: 6.625rem
}
.m-lottery-tiger .game .item:nth-child(3) {
left: 9.775rem
}
.m-lottery-tiger .game .item .roller {
position: relative
}
.m-lottery-tiger .game .item .roller li.z-last {
position: absolute;
top: 100%;
left: 0
}
.m-lottery-tiger .game .item .roller.fx-bounce {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s
}
.m-lottery-tiger .game .item .roller.fx-roll {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-animation: fx-roll 0.3s 0s infinite linear;
animation: fx-roll 0.3s 0s infinite linear
}
.m-lottery-tiger .game .item img {
display: block;
width: 2.75rem;
height: 3.375rem
}
.m-lottery-tiger .game .btn {
position: absolute;
left: 50%;
top: 7.65rem;
width: 10.1rem;
height: 1.25rem;
margin-left: -5.05rem;
background-size: 100%;
background-repeat: no-repeat
}
.m-lottery-tiger .game .btn span {
display: block;
width: 100%;
height: 100%;
cursor: pointer
}
.m-lottery-tiger .des {
padding: 0 1.1rem 0.5rem;
line-height: 1.15rem;
font-size: 0.6rem;
color: #b26722
}
.m-lottery-tiger .des dt {
line-height: 1.2rem;
font-size: 0.7rem;
font-weight: 700
}
@-webkit-keyframes fx-roll {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes fx-roll {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
.fx-bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
@-webkit-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0)
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0)
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0)
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0)
}
}
</style>
js:
Object.assign = Object.assign ||
function (target) {
// We must check against these specific cases.
if (target === undefined || target === null) {
throw new TypeError('Cannot convert undefined or null to object')
}
const output = Object(target)
for (let index = 1; index < arguments.length; index++) {
const source = arguments[index]
if (source !== undefined && source !== null) {
for (const nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey]
}
}
}
}
return output
}
export default Object.assign
export default class Events {
constructor () {
this._queue = []
}
on (key, callback) {
this._queue[key] = this._queue[key] || []
this._queue[key].push(callback)
return this
}
off (key, callback) {
if (this._queue[key]) {
const index = typeof (callback) === 'undefined' ? -2 : this._queue[key].indexOf(callback)
if (index === -2) {
delete this._queue[key]
} else if (index !== -1) {
this._queue[key].splice(index, 1)
}
if (this._queue[key] && this._queue[key].length === 0) delete this._queue[key]
}
return this
}
has (key) {
return !!this._queue[key]
}
trigger (key, ...args) {
if (this._queue[key]) {
this._queue[key].forEach((callback) => callback.apply(this, args))
}
return this
}
}
const animationEvent = function () {
const el = document.createElement('div')
const animations = {
'animation': 'animationend',
'webkitAnimation': 'webkitAnimationEnd',
'msAnimation': 'MSAnimationEnd',
'oAnimation': 'oanimationend'
}
for (const t in animations) {
if (el.style[t] !== undefined) {
return animations[t]
}
}
return null
}()
/**
* 处理animate动画结束时间
* @param el 绑定事件目标元素
* @param callback 回调函数
* @param animateTime 当不支持animationend使用settimeout处理 延迟时间
*/
export default function (el, callback, animateTime = 0) {
function bind () {
callback()
el.removeEventListener(animationEvent, bind)
}
animationEvent ? el.addEventListener(animationEvent, bind) : setTimeout(() => callback(), animateTime)
}