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

Write Preview
Loading…
Cancel
Save