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

2023.9.18

Browse Source
master
xy 3 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>
</div> </div>
</template> </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> <template v-slot:apply>
<div class="xy-table-item"> <div class="xy-table-item">
<div class="xy-table-item-label"> <div class="xy-table-item-label">
@ -169,6 +179,7 @@
activity_list_id: "", activity_list_id: "",
rate: 0, rate: 0,
name: "", name: "",
price_item: '',
apply: "", apply: "",
status: 1, status: 1,
image_id: "", 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'">编辑 @click="$refs['addDrawPrize'].id = row.id,$refs['addDrawPrize'].isShow = true,$refs['addDrawPrize'].type = 'editor'">编辑
</Button> </Button>
<Button v-if="row.activity_list_id === 8" style="margin-left: 4px;" size="small" type="primary" ghost <Button v-if="row.activity_list_id === 8 && (row.draw_logs_count < row.total)" style="margin-left: 4px;" size="small" type="primary" ghost
@click="$router.push('/mdLotteryDraw/'+row.id)">抽奖 @click="toDraw(1,row)">抽奖
</Button> </Button>
<Button v-if="row.activity_list_id === 8" style="margin-left: 4px;" size="small" type="primary" ghost <Button v-if="row.activity_list_id === 8 && !(row.draw_logs_count < row.total)" style="margin-left: 4px;" size="small" type="primary" ghost
@click="$router.push('/mdLotteryDraw/'+row.id+'?result=1')">中奖结果 @click="toDraw(2,row)">中奖结果
</Button> </Button>
</template> </template>
@ -136,6 +136,13 @@
} }
}, },
methods: { 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() { async loadActivity() {
const res = await activityIndex({ const res = await activityIndex({

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

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

Write Preview
Loading…
Cancel
Save