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

2023.9.18

Browse Source
master
xy 2 years ago
parent f4249e3d25
commit f1986f7787
3 changed files with 303 additions and 250 deletions
Show Stats Download Patch File Download Diff File

11
src/views/activity/components/addDrawPrize.vue
Unescape View File

@ -15,6 +15,16 @@
</div>
</div>
</template>
<template v-slot:price_item>
<div class="xy-table-item">
<div class="xy-table-item-label">
奖项
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写奖项" v-model="detail.price_item" style="width: 300px;" />
</div>
</div>
</template>
<template v-slot:apply>
<div class="xy-table-item">
<div class="xy-table-item-label">
@ -169,6 +179,7 @@
activity_list_id: "",
rate: 0,
name: "",
price_item: '',
apply: "",
status: 1,
image_id: "",

15
src/views/activity/drawPrize.vue
Unescape View File

@ -47,12 +47,12 @@
@click="$refs['addDrawPrize'].id = row.id,$refs['addDrawPrize'].isShow = true,$refs['addDrawPrize'].type = 'editor'">编辑
</Button>
<Button v-if="row.activity_list_id === 8" style="margin-left: 4px;" size="small" type="primary" ghost
@click="$router.push('/mdLotteryDraw/'+row.id)">抽奖
<Button v-if="row.activity_list_id === 8 && (row.draw_logs_count < row.total)" style="margin-left: 4px;" size="small" type="primary" ghost
@click="toDraw(1,row)">抽奖
</Button>
<Button v-if="row.activity_list_id === 8" style="margin-left: 4px;" size="small" type="primary" ghost
@click="$router.push('/mdLotteryDraw/'+row.id+'?result=1')">中奖结果
<Button v-if="row.activity_list_id === 8 && !(row.draw_logs_count < row.total)" style="margin-left: 4px;" size="small" type="primary" ghost
@click="toDraw(2,row)">中奖结果
</Button>
</template>
@ -136,6 +136,13 @@
}
},
methods: {
toDraw (type = 1, row) {
if (type === 1) {
window.open(this.$router.resolve({path: '/mdLotteryDraw/'+row.id}).href,'_blank')
} else {
window.open(this.$router.resolve({path: '/mdLotteryDraw/'+row.id+'?result=1'}).href,'_blank')
}
},
async loadActivity() {
const res = await activityIndex({

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

@ -6,8 +6,8 @@
>
<h3 class="title">
<span v-if="!$route.query.result">正在抽取</span>
{{ config.draw_prize.name }}
<span v-if="$route.query.result">中奖名单</span>
{{ config.draw_prize.price_item }}
</h3>
<div class="container">
@ -22,20 +22,24 @@
</el-image>
<div class="info">
<p>
奖品： {{ config.draw_prize.name }}
</p>
<p>奖品： {{ config.draw_prize.price_item }}</p>
<p>本次抽取： {{ config.draw_prize.total }} 个</p>
<p>赞助商： {{ config.draw_prize.apply }}</p>
</div>
</div>
<div class="right" :style="{ 'height': maxHeight }">
<div class="numbers" :class="{ 'numbers-active': !isEnd }" ref="numbers">
<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'
'animation-timing-function': flag ? '' : 'ease-out',
}"
:class="{
'numbers__item--active': !isEnd
@ -45,16 +49,15 @@
v-for="(item, index) in numbers"
:key="$route.query.result ? index : item"
>
<span>{{
item
}}</span>
<span>{{ item }}</span>
</div>
<div
v-if="!$route.query.result"
v-show="!isEnd"
class="numbers__item"
:style="{
'animation-timing-function': flag ? '' : 'ease-out'
'animation-timing-function': flag ? '' : 'ease-out',
}"
:class="{
'numbers__item--active': !isEnd
@ -72,21 +75,24 @@
</div>
</div>
<button class="btn" :disabled="isOver"
<button
class="btn"
:disabled="isOver"
:style="{ filter: isOver ? 'grayscale(90%)' : '' }"
v-if="$route.query.result != 1"
@click="draw">
<strong>{{ (flag || isOver) ? '结束抽奖' : '开始抽奖' }}</strong>
@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>-->
<!-- <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>
@ -98,11 +104,11 @@ import { drawLog } from "@/api/activity/drawPrize";
export default {
data() {
return {
maxHeight: '40vh',
maxHeight: "40vh",
bkg,
flag: false, //是否开始
isEnd: true, //视图结束
isOver: false,//抽奖是否结束
isOver: false, //抽奖是否结束
timer: null,
config: {
draw_prize: {},
@ -120,19 +126,23 @@ export default {
dom.style.fontSize = baseSize * Math.min(scale, 2) + "px";
this.$nextTick(() => {
this.maxHeight = this.$refs['numbers'].getBoundingClientRect().height + 'px'
})
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'))
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'
})
this.maxHeight =
this.$refs["numbers"].getBoundingClientRect().height + "px";
});
},
async getResult() {
const res = await drawLog(
@ -148,10 +158,15 @@ export default {
this.resultNumbers = res.data
.filter((i) => i.draw_prize_id == this.$route.params.id)
.map((i) => i.mobile.padStart(3, "0"));
this.$nextTick(() => {
this.maxHeight =
this.$refs["numbers"].getBoundingClientRect().height + "px";
});
},
draw: throttle(async function () {
if (this.isOver) return
if (this.isOver) return;
if (!this.flag) {
console.log("开始抽奖");
try {
@ -186,12 +201,10 @@ export default {
}, 150);
}
}, 150);
} catch (err) {
console.log(err);
}
} else {
this.flag = false;
console.log("结束抽奖");
}
@ -210,7 +223,9 @@ export default {
set.add(
this.config.numbers_list[
Math.floor(Math.random() * this.config.numbers_list.length)
].toString().padStart(3,'0')
]
.toString()
.padStart(3, "0")
);
}
@ -219,8 +234,8 @@ export default {
let temp = this.config.numbers_list
.sort(() => Math.random() - 0.5)
.slice(0, 36)
console.log(temp)
.slice(0, 36);
console.log(temp);
return temp;
} else {
return [];
@ -251,6 +266,7 @@ export default {
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
transform-style: preserve-3d;
padding-top: 17.31vh;
.title {
@ -306,13 +322,21 @@ export default {
flex: 1;
overflow: hidden;
position: relative;
.numbers {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
//grid-template-rows: repeat(6, 1fr);
grid-column-gap: 2.8em;
grid-row-gap: 0.93vh;
justify-content: center;
align-content: center;
transform: translateY(-50%);
position: absolute;
top: 50%;
left: 0;
right: 0;
&-active {
& > div:nth-child(2n + 1) {
animation: blur 0.15s infinite linear;
@ -324,11 +348,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);
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);
filter: blur(1.5px) drop-shadow(0 0 4px #00000055)
drop-shadow(0 0 8px #00000033);
transform: translateY(-200%);
}
}
@ -388,7 +414,7 @@ export default {
}
}
.btn {
border-width: 0 2px 2px 0;
border-width: 0;
display: block;
cursor: pointer;
text-align: center;
@ -396,13 +422,22 @@ export default {
width: 46.67%;
font-weight: 900;
transition: all 0.2s;
background: linear-gradient(to bottom,rgb(242, 172, 106),rgb(247, 232, 203));
background: linear-gradient(
to bottom,
rgb(241, 170, 102) 20%,
rgb(234, 219, 188)
);
border-radius: 6px;
color: rgb(152, 50, 22);
box-shadow: 1px 4px 10px 6px #00000055;
box-shadow: 1px 4px 10px 6px #00000088;
transform: translateZ(0);
margin: 4.2vh auto 0 auto;
padding: 10px 0;
&:active {
transform: perspective(100px) translateZ(-5px);
}
}
}
</style>

Write Preview
Loading…
Cancel
Save