|
|
|
|
@ -31,14 +31,14 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="right" :style="{ 'height': maxHeight }">
|
|
|
|
|
<div class="numbers" :class="{ 'numbers-active': isEnd }" ref="numbers">
|
|
|
|
|
<div class="numbers" :class="{ 'numbers-active': !isEnd }" ref="numbers">
|
|
|
|
|
<div
|
|
|
|
|
class="numbers__item"
|
|
|
|
|
:style="{
|
|
|
|
|
'animation-timing-function': flag ? '' : 'ease-out'
|
|
|
|
|
}"
|
|
|
|
|
:class="{
|
|
|
|
|
'numbers__item--active': isEnd
|
|
|
|
|
'numbers__item--active': !isEnd
|
|
|
|
|
? !!resultNumbers.find((i) => i === index)
|
|
|
|
|
: !!resultNumbers.find((i) => i === item),
|
|
|
|
|
}"
|
|
|
|
|
@ -51,13 +51,13 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
v-show="isEnd"
|
|
|
|
|
v-show="!isEnd"
|
|
|
|
|
class="numbers__item"
|
|
|
|
|
:style="{
|
|
|
|
|
'animation-timing-function': flag ? '' : 'ease-out'
|
|
|
|
|
}"
|
|
|
|
|
:class="{
|
|
|
|
|
'numbers__item--active': isEnd
|
|
|
|
|
'numbers__item--active': !isEnd
|
|
|
|
|
? !!resultNumbers.find((i) => i === index)
|
|
|
|
|
: !!resultNumbers.find((i) => i === item),
|
|
|
|
|
}"
|
|
|
|
|
@ -72,15 +72,21 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-image
|
|
|
|
|
:style="{ filter: flag ? 'grayscale(90%)' : '' }"
|
|
|
|
|
v-if="$route.query.result != 1"
|
|
|
|
|
:lazy="false"
|
|
|
|
|
class="btn"
|
|
|
|
|
:src="require('@/assets/mdLotteryDraw/button.png')"
|
|
|
|
|
fit="cover"
|
|
|
|
|
@click="draw"
|
|
|
|
|
></el-image>
|
|
|
|
|
<button class="btn" :disabled="isOver"
|
|
|
|
|
:style="{ filter: isOver ? 'grayscale(90%)' : '' }"
|
|
|
|
|
v-if="$route.query.result != 1"
|
|
|
|
|
@click="draw">
|
|
|
|
|
<strong>{{ (flag || isOver) ? '结束抽奖' : '开始抽奖' }}</strong>
|
|
|
|
|
</button>
|
|
|
|
|
<!-- <el-image-->
|
|
|
|
|
<!-- :style="{ filter: flag ? 'grayscale(90%)' : '' }"-->
|
|
|
|
|
<!-- v-if="$route.query.result != 1"-->
|
|
|
|
|
<!-- :lazy="false"-->
|
|
|
|
|
<!-- class="btn"-->
|
|
|
|
|
<!-- :src="require('@/assets/mdLotteryDraw/button.png')"-->
|
|
|
|
|
<!-- fit="cover"-->
|
|
|
|
|
<!-- @click="draw"-->
|
|
|
|
|
<!-- ></el-image>-->
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -95,7 +101,8 @@ export default {
|
|
|
|
|
maxHeight: '40vh',
|
|
|
|
|
bkg,
|
|
|
|
|
flag: false, //是否开始
|
|
|
|
|
isEnd: false, //视图结束
|
|
|
|
|
isEnd: true, //视图结束
|
|
|
|
|
isOver: false,//抽奖是否结束
|
|
|
|
|
timer: null,
|
|
|
|
|
config: {
|
|
|
|
|
draw_prize: {},
|
|
|
|
|
@ -144,6 +151,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
draw: throttle(async function () {
|
|
|
|
|
if (this.isOver) return
|
|
|
|
|
if (!this.flag) {
|
|
|
|
|
console.log("开始抽奖");
|
|
|
|
|
try {
|
|
|
|
|
@ -156,35 +164,36 @@ export default {
|
|
|
|
|
);
|
|
|
|
|
this.result = result.draw_numbers;
|
|
|
|
|
this.flag = true;
|
|
|
|
|
this.isEnd = true;
|
|
|
|
|
this.isEnd = false;
|
|
|
|
|
|
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
|
let set = new Set();
|
|
|
|
|
while (set.size < result.draw_numbers.length) {
|
|
|
|
|
let num = Math.floor(
|
|
|
|
|
Math.random() * this.config.numbers_list.length
|
|
|
|
|
);
|
|
|
|
|
set.add(num);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.resultNumbers = Array.from(set);
|
|
|
|
|
// let set = new Set();
|
|
|
|
|
// while (set.size < result.draw_numbers.length) {
|
|
|
|
|
// let num = Math.floor(
|
|
|
|
|
// Math.random() * this.config.numbers_list.length
|
|
|
|
|
// );
|
|
|
|
|
// set.add(num);
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// this.resultNumbers = Array.from(set);
|
|
|
|
|
|
|
|
|
|
if (!this.flag) {
|
|
|
|
|
clearInterval(this.timer);
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.resultNumbers = result.draw_numbers;
|
|
|
|
|
this.isEnd = false;
|
|
|
|
|
this.isEnd = true;
|
|
|
|
|
this.isOver = true;
|
|
|
|
|
}, 150);
|
|
|
|
|
}
|
|
|
|
|
}, 150);
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.flag = false;
|
|
|
|
|
console.log("结束抽奖");
|
|
|
|
|
}, 3000);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.log(err);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
this.flag = false;
|
|
|
|
|
console.log("结束抽奖");
|
|
|
|
|
}
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
@ -201,12 +210,13 @@ export default {
|
|
|
|
|
set.add(
|
|
|
|
|
this.config.numbers_list[
|
|
|
|
|
Math.floor(Math.random() * this.config.numbers_list.length)
|
|
|
|
|
]
|
|
|
|
|
].toString().padStart(3,'0')
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return Array.from(set).sort(() => Math.random() - 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return this.config.numbers_list
|
|
|
|
|
.sort(() => Math.random() - 0.5)
|
|
|
|
|
.slice(0, 36);
|
|
|
|
|
@ -311,11 +321,13 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
@keyframes blur {
|
|
|
|
|
from {
|
|
|
|
|
text-shadow: 2px 4px #00000066;
|
|
|
|
|
filter: blur(1.5px) drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
text-shadow: 2px 4px #00000066;
|
|
|
|
|
filter: blur(1.5px) drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
|
|
|
|
|
transform: translateY(-300%);
|
|
|
|
|
transform: translateY(-200%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&__item {
|
|
|
|
|
@ -374,13 +386,21 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.btn {
|
|
|
|
|
border-width: 0 2px 2px 0;
|
|
|
|
|
display: block;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 2.6em;
|
|
|
|
|
width: 46.67%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
background: linear-gradient(to bottom,rgb(242, 172, 106),rgb(247, 232, 203));
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
color: rgb(152, 50, 22);
|
|
|
|
|
box-shadow: 1px 4px 10px 6px #00000055;
|
|
|
|
|
|
|
|
|
|
margin: 4.5vh auto 0 auto;
|
|
|
|
|
margin: 4.2vh auto 0 auto;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
刘翔宇-旅管家
2 years ago