draw-lottery
Version:
一个老虎机抽奖，可以XY切换的插件，可以循环多个使用
340 lines (332 loc) • 8.76 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>lottery</title>
</head>
<style>
.id_box {
width: 330px;
height: 330px;
border: 1px solid red;
border-radius: 5px;
overflow: hidden;
position: relative;
background-size: 100% 100%;
background-image: url("./dist/img/bg.png");
}
.id_box::before {
content: "";
width: 3px;
height: 330px;
background: yellow;
position: absolute;
z-index: 9;
left: 50%;
}
.id_box::after {
content: "";
width: 330px;
height: 3px;
background: yellow;
position: absolute;
z-index: 9;
top: 50%;
left: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.boxa {
width: 50px;
height: 50px;
border-radius: 6px;
margin-top: 4px;
background: red;
display: inline-block;
position: absolute;
}
.w{
width: 100px;
}
.green {
width: 110px;
height: 110px;
line-height: 110px;
text-align: center;
color: #000;
border-radius: 6px;
display: inline-block;
background: red;
margin: 10px;
background-color: #6fb936;
}
</style>
<body>
<div id="app">
<draw-lottery
:multi-draw-data="multiDrawData"
:draw-x-y="drawxy"
ref="helloworld"
:win-prize-index="'-7700'"
:tween-max-init="{ delay: 0 }"
:res-data="resData"
:get-start="getStart"
:win-index="2"
:get-update="getUpdate"
:get-complete="getComplete"
:get-repeat="getReqeat"></draw-lottery>
<div style="width: 990px;">
<input type="text" v-model='num' style="width: 100px;height: 50px;font-size: 18px;">
<div class="green" @click="drawY">
开始Y
</div>
<div class="green" @click="drawX">
开始X
</div>
</div>
</div>
<script src="./dist/vue.min.js"></script>
<script src="./dist/draw.js"></script>
<script>
new Vue({
data() {
return {
drawxy:true,
num:1,
msg: "Welcome to Your Vue.js App",
sum: 0,
drawData: [
{
src: "./dist/img/no.png",
name: "1",
},
{
src: "./dist/img/no1.png",
name: "2",
},
{
src: "./dist/img/no.png",
name: "3",
},
{
src: "./dist/img/no1.png",
name: "4",
},
],
drawDataSuccess: {
src: "./dist/img/yes.png",
name: "中奖",
},
resData: {
WH: {
width: "110",
height: "110",
overflow: "hidden",
},
IdBox: ["wi", "id_box"],
classBox: ["", ""],
classImg: ["w"],
},
multiDrawData: [
{
drawData: [
{
src: "https://asset.yskins.com/9frg4EpbifmM1FjkvQtu3hvSMoEF0h9JjjpzfeLv.png",
name: "1",
},
{
src: "https://asset.yskins.com/Ke4T4zu8wQTmHWdHGFuqwarAzIAe9wPlaMAasu76.png",
name: "2",
},
{
src: "https://asset.yskins.com/9frg4EpbifmM1FjkvQtu3hvSMoEF0h9JjjpzfeLv.png",
name: "3",
},
{
src: "https://asset.yskins.com/Ke4T4zu8wQTmHWdHGFuqwarAzIAe9wPlaMAasu76.png",
name: "4",
},
],
drawDataSuccess: {
src: "https://asset.yesskins.com/pvzZR7bOvTkf9jPYlDo1d6rnrA3x7u6RPbCv0Ljm.png",
name: "中奖1",
},
},
{
drawData: [
{
src: "https://asset.yskins.com/9frg4EpbifmM1FjkvQtu3hvSMoEF0h9JjjpzfeLv.png",
name: "1",
},
{
src: "https://asset.yskins.com/Ke4T4zu8wQTmHWdHGFuqwarAzIAe9wPlaMAasu76.png",
name: "2",
},
{
src: "https://asset.yskins.com/9frg4EpbifmM1FjkvQtu3hvSMoEF0h9JjjpzfeLv.png",
name: "3",
},
{
src: "https://asset.yskins.com/Ke4T4zu8wQTmHWdHGFuqwarAzIAe9wPlaMAasu76.png",
name: "4",
},
],
drawDataSuccess: {
src: "https://asset.yesskins.com/pvzZR7bOvTkf9jPYlDo1d6rnrA3x7u6RPbCv0Ljm.png",
name: "中奖2",
},
},
{
drawData: [
{
src: "https://asset.yskins.com/9frg4EpbifmM1FjkvQtu3hvSMoEF0h9JjjpzfeLv.png",
name: "1",
},
{
src: "https://asset.yskins.com/Ke4T4zu8wQTmHWdHGFuqwarAzIAe9wPlaMAasu76.png",
name: "2",
},
{
src: "https://asset.yskins.com/9frg4EpbifmM1FjkvQtu3hvSMoEF0h9JjjpzfeLv.png",
name: "3",
},
{
src: "https://asset.yskins.com/Ke4T4zu8wQTmHWdHGFuqwarAzIAe9wPlaMAasu76.png",
name: "4",
},
],
drawDataSuccess: {
src: "https://asset.yesskins.com/pvzZR7bOvTkf9jPYlDo1d6rnrA3x7u6RPbCv0Ljm.png",
name: "中奖3",
},
},
],
};
},
methods: {
//动画结束时
getComplete() {
console.log("动画结束时...............................");
let multiDrawData = [
{
drawData: [
{
src: "./assets/no.png",
name: "1",
},
{
src: "./assets/no1.png",
name: "2",
},
{
src: "./assets/no1.png",
name: "3",
},
{
src: "./assets/no.png",
name: "4",
},
],
drawDataSuccess: {
src: "https://asset.yskins.com/9frg4EpbifmM1FjkvQtu3hvSMoEF0h9JjjpzfeLv.png",
name: "中奖1",
},
},
{
drawData: [
{
src: "./assets/no1.png",
name: "1",
},
{
src: "./assets/no1.png",
name: "2",
},
{
src: "./assets/no1.png",
name: "3",
},
{
src: "./assets/no1.png",
name: "4",
},
],
drawDataSuccess: {
src: "https://asset.yesskins.com/pvzZR7bOvTkf9jPYlDo1d6rnrA3x7u6RPbCv0Ljm.png",
name: "中奖2",
},
},
{
drawData: [
{
src: "./assets/no.png",
name: "1",
},
{
src: "./assets/no.png",
name: "2",
},
{
src: "./assets/no.png",
name: "3",
},
{
src: "./assets/no.png",
name: "4",
},
],
drawDataSuccess: {
src: "https://asset.yskins.com/9frg4EpbifmM1FjkvQtu3hvSMoEF0h9JjjpzfeLv.png",
name: "中奖3",
},
},
]
console.log(multiDrawData)
let item = setTimeout(()=>{
this.sum +=1
this.$refs.helloworld.play.restart(true);
this.$refs.helloworld.play.pause();
if(this.sum >= this.num){
clearTimeout(item)
return
}
this.multiDrawData = multiDrawData
this.$refs.helloworld.playClick()
},2000)
},
//进行中
getUpdate() {
console.log("进行中...");
},
// 点击开始
drawY() {
this.drawxy = true
setTimeout(()=>{
this.$refs.helloworld.playClick()
},1000)
this.$refs.helloworld.playClick();
},
drawX() {
this.drawxy = false
setTimeout(()=>{
this.$refs.helloworld.playClick()
},1000)
},
// 开始
getStart() {
console.log("开始");
},
// 重新开始的时候
getReqeat() {
},
}
}).$mount('#app')
</script>
</body>
</html>