wangyifang
/
h5-service-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023.9.14

Browse Source
master
xy 2 years ago
parent 67d8b4bb44
commit d147d7a03c
1 changed files with 78 additions and 31 deletions
Show Stats Download Patch File Download Diff File

109
src/views/page/MidAutumnLotteryDraw.vue
Unescape View File

@ -22,29 +22,58 @@
</el-image>
<div class="info">
<p>奖品： {{ config.draw_prize.name }} ✕ {{ config.draw_prize.has_total }}（个）</p>
<p>
奖品： {{ config.draw_prize.name }} ✕
{{ config.draw_prize.has_total }}（个）
</p>
<p>赞助商： {{ config.draw_prize.apply }}</p>
</div>
</div>
<div class="right">
<div class="numbers" :class="{ 'numbers-active': isEnd }">
<div class="right" :style="{ 'height': maxHeight }">
<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 ? !!resultNumbers.find((i) => i === index) : !!resultNumbers.find((i) => i === item),
}"
'numbers__item--active': isEnd
? !!resultNumbers.find((i) => i === index)
: !!resultNumbers.find((i) => i === item),
}"
v-for="(item, index) in numbers"
:key="$route.query.result ? index : item"
>
<span>{{ isEnd ? config.numbers_list[Math.floor(Math.random() * 36)] : item }}</span>
<span>{{
isEnd ? config.numbers_list[Math.floor(Math.random() * 36)] : item
}}</span>
</div>
<div
v-show="isEnd"
class="numbers__item"
:style="{
'animation-timing-function': flag ? '' : 'ease-out'
}"
:class="{
'numbers__item--active': isEnd
? !!resultNumbers.find((i) => i === index)
: !!resultNumbers.find((i) => i === item),
}"
v-for="(item, index) in numbers"
:key="($route.query.result ? index : item) + 'b'"
>
<span>{{
isEnd ? config.numbers_list[Math.floor(Math.random() * 36)] : item
}}</span>
</div>
</div>
</div>
</div>
<el-image
:style="{ 'filter': flag ? 'grayscale(90%)' : '' }"
:style="{ filter: flag ? 'grayscale(90%)' : '' }"
v-if="$route.query.result != 1"
:lazy="false"
class="btn"
@ -63,9 +92,10 @@ import { drawLog } from "@/api/activity/drawPrize";
export default {
data() {
return {
maxHeight: '40vh',
bkg,
flag: false, //是否开始
isEnd: false,//视图结束
isEnd: false, //视图结束
timer: null,
config: {
draw_prize: {},
@ -81,12 +111,21 @@ export default {
const dom = document.getElementById("lottery-draw");
const scale = document.documentElement.clientWidth / 1920;
dom.style.fontSize = baseSize * Math.min(scale, 2) + "px";
this.$nextTick(() => {
this.maxHeight = this.$refs['numbers'].getBoundingClientRect().height + 'px'
})
},
async getConfig() {
const res = await drawConfig({
id: this.$route.params.id,
});
res.numbers_list = res.numbers_list.map(i => i.toString().padStart(3,'0'))
this.config = res;
this.$nextTick(() => {
this.maxHeight = this.$refs['numbers'].getBoundingClientRect().height + 'px'
})
},
async getResult() {
const res = await drawLog(
@ -101,7 +140,7 @@ export default {
this.resultNumbers = res.data
.filter((i) => i.draw_prize_id == this.$route.params.id)
.map((i) => Number(i.mobile));
.map((i) => i.mobile.padStart(3, "0"));
},
draw: throttle(async function () {
@ -112,6 +151,9 @@ export default {
id: this.$route.params.id,
});
console.log(result);
result.draw_numbers = result.draw_numbers.map((i) =>
i.toString().padStart(3, "0")
);
this.result = result.draw_numbers;
this.flag = true;
this.isEnd = true;
@ -139,7 +181,7 @@ export default {
setTimeout(() => {
this.flag = false;
console.log("结束抽奖");
}, 3000)
}, 3000);
} catch (err) {
console.log(err);
}
@ -154,14 +196,20 @@ export default {
if (this.config.numbers_list) {
if (this.result.length > 0) {
let set = new Set();
this.result.forEach(i => set.add(i))
while ((set.size < 36) && (set.size < this.config.numbers_list.length)) {
set.add(this.config.numbers_list[Math.floor(Math.random() * this.config.numbers_list.length)])
this.result.forEach((i) => set.add(i));
while (set.size < 36 && set.size < this.config.numbers_list.length) {
set.add(
this.config.numbers_list[
Math.floor(Math.random() * this.config.numbers_list.length)
]
);
}
return Array.from(set).sort(() => Math.random() - 0.5)
return Array.from(set).sort(() => Math.random() - 0.5);
}
return this.config.numbers_list.sort(() => Math.random() - 0.5).slice(0, 36);
return this.config.numbers_list
.sort(() => Math.random() - 0.5)
.slice(0, 36);
} else {
return [];
}
@ -252,23 +300,22 @@ export default {
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 2.8em;
grid-row-gap: 0.93vh;
overflow: hidden;
&-active {
& > div:nth-child(2n+1) {
animation: blur .15s infinite linear;
& > div:nth-child(2n + 1) {
animation: blur 0.15s infinite linear;
}
& > div:nth-child(2n+2) {
animation: blur .15s infinite linear reverse;
& > div:nth-child(2n + 2) {
animation: blur 0.15s infinite linear reverse;
}
}
@keyframes blur {
from {
filter: blur(1.5px);
filter: blur(1.5px) drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
}
to {
filter: blur(1.5px);
transform: translateY(-100%);
filter: blur(1.5px) drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
transform: translateY(-300%);
}
}
&__item {
@ -288,16 +335,16 @@ export default {
color: #a9262c;
&::before {
content: "";
transition: all .5s ease-out;
transition: all 0.5s ease-out;
border-radius: 2.8em;
color: #a9262c;
background: linear-gradient(
264deg,
#f8eacc,
#e0c48a,
#f5e0b8,
#edddac,
#e1b872
264deg,
#f8eacc,
#e0c48a,
#f5e0b8,
#edddac,
#e1b872
);
z-index: 0;
@ -331,7 +378,7 @@ export default {
width: 46.67%;
display: flex;
justify-content: center;
transition: all .2s;
transition: all 0.2s;
margin: 4.5vh auto 0 auto;
}

Write Preview
Loading…
Cancel
Save