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

2023.9.13

Browse Source
master
xy 3 years ago
parent 78fa9bead6
commit 45d2d22bd9
5 changed files with 688 additions and 547 deletions
Show Stats Download Patch File Download Diff File

5
src/api/activity/drawPrize.js
Unescape View File

@ -9,11 +9,12 @@ export function index(params) {
}
export function drawLog(params) {
export function drawLog(params,isLoading=true) {
return request({
method: 'get',
url: '/api/admin/draw-prize/draw-log',
params
params,
isLoading
})
}

8
src/api/mdLotteryDraw/index.js
Unescape View File

@ -1,17 +1,17 @@
import request from "@/utils/request";
const activity_list_id = 8
export function drawConfig (params) {
export function drawConfig (params,isLoading=false) {
return request({
url: '/api/admin/draw-prize/draw-config',
method: 'get',
params
params,isLoading
})
}
export function draw (params) {
export function draw (params,isLoading=false) {
return request({
url: '/api/admin/draw-prize/draw',
method: 'get',
params
params,isLoading
})
}

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

@ -14,6 +14,16 @@
</div>
</div>
</template>
<template v-slot:apply>
<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.apply" style="width: 300px;" />
</div>
</div>
</template>
<template v-slot:rate>
<div class="xy-table-item">
<div class="xy-table-item-label">
@ -144,6 +154,7 @@
activity_list_id: "",
rate: 0,
name: "",
apply: "",
status: 1,
image_id: "",
total: 0,

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

@ -34,6 +34,30 @@
<template v-slot:btns v-if="type==0 ">
</template>
<template v-slot:btns v-else>
<el-table-column fixed="right" header-align="center" label="操作" width="200">
<template #default="{ row }">
<Poptip :transfer="true" confirm placement="bottom" title="确认要删除吗"
@on-ok="deleteitem(row)">
<Button ghost size="small" type="error">删除
</Button>
</Poptip>
<Button style="margin-left: 4px;" size="small" type="primary" ghost
@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>
<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>
</template>
</el-table-column>
</template>
</xy-table>
<addDrawPrize ref="addDrawPrize" :listActivity="listActivity" @refresh="load()"></addDrawPrize>
</div>

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

@ -1,30 +1,56 @@
<template>
<div id="lottery-draw" class="body" :style="{ 'background-image': 'url(' + bkg + ')' }">
<div
id="lottery-draw"
class="body"
:style="{ 'background-image': 'url(' + bkg + ')' }"
>
<h3 class="title">
正在抽取三等奖
<span v-if="!$route.query.result">正在抽取</span>
{{ config.draw_prize.name }}
<span v-if="$route.query.result">中奖名单</span>
</h3>
<div class="container">
<div class="left">
<el-image class="image" :src="config.draw_prize.image" fit="cover">
<el-image
class="image"
:src="
config.draw_prize.image_file ? config.draw_prize.image_file.url : ''
"
fit="cover"
>
</el-image>
<div class="info">
<p>奖品：{{ config.draw_prize.name }}</p>
<p>赞助商 : 泽科信息科技（苏州）有限公司 </p>
<p>奖品： {{ config.draw_prize.name }}</p>
<p>赞助商： {{ config.draw_prize.apply }}</p>
</div>
</div>
<div class="right">
<div class="numbers">
<div class="numbers__item" :class="{ 'numbers__item--active': !!resultNumbers.find(i => i === item) }" v-for="(item,index) in numbers" :key="item">
<div
class="numbers__item"
:class="{
'numbers__item--active': !!resultNumbers.find((i) => i === item),
}"
v-for="(item, index) in numbers"
:key="item"
>
{{ item }}
</div>
</div>
</div>
</div>
<el-image class="btn" :src="require('@/assets/mdLotteryDraw/button.png')" fit="cover" @click="draw"></el-image>
<el-image
v-if="$route.query.result != 1"
:lazy="false"
class="btn"
:src="require('@/assets/mdLotteryDraw/button.png')"
fit="cover"
@click="draw"
></el-image>
</div>
</template>
@ -32,16 +58,19 @@
import bkg from "@/assets/mdLotteryDraw/bkg.png";
import { draw, drawConfig } from "@/api/mdLotteryDraw";
import { throttle } from "@/utils";
import { drawLog } from "@/api/activity/drawPrize";
export default {
data() {
return {
bkg,
flag: false, //是否开始
timer: null,
config: {
draw_prize: {},
numbers_list: []
numbers_list: [],
},
resultNumbers: [],
}
};
},
methods: {
init() {
@ -50,37 +79,92 @@ export default {
const scale = document.documentElement.clientWidth / 1920;
dom.style.fontSize = baseSize * Math.min(scale, 2) + "px";
},
async getConfig () {
async getConfig() {
const res = await drawConfig({
id: this.$route.params.id
})
console.log(res)
this.config = res
id: this.$route.params.id,
});
this.config = res;
},
async getResult() {
const res = await drawLog(
{
page: 1,
page_size: 9999,
activity_list_id: 8,
},
false
);
console.log(res);
this.resultNumbers = res.data
.filter((i) => i.draw_prize_id == this.$route.params.id)
.map((i) => Number(i.mobile));
},
draw: throttle(function () {
this.resultNumbers = [1,10,30,60]
draw: throttle(async function () {
if (!this.flag) {
console.log("开始抽奖");
try {
const result = await draw({
id: this.$route.params.id,
});
console.log(result);
this.flag = true;
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(this.config.numbers_list[num]);
}
this.resultNumbers = Array.from(set);
if (!this.flag) {
clearInterval(this.timer);
setTimeout(() => {
this.resultNumbers = result.draw_numbers;
}, 500);
}
}, 500);
} catch (err) {
console.log(err);
}
} else {
this.flag = false;
console.log("结束抽奖");
}
}),
},
computed: {
numbers () {
numbers() {
if (this.$route.query.result) {
return this.resultNumbers;
}
if (this.config.numbers_list) {
return this.config.numbers_list.sort(() => Math.random() - 0.5)
return this.config.numbers_list.sort(() => Math.random() - 0.5);
} else {
return []
return [];
}
}
},
},
created() {
this.getConfig()
this.getConfig();
if (this.$route.query.result == 1) {
this.getResult();
}
},
mounted() {
this.init();
window.onresize = () => {
this.init();
}
}
}
};
},
};
</script>
<style scoped lang="scss">
@ -89,15 +173,28 @@ export default {
width: 100vw;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
padding-top: 17.31vh;
.title {
letter-spacing: 2px;
font-size: 3.11em;
font-family: FZHanZhenGuangBiaoS-GB,sans-serif;
font-family: FZHanZhenGuangBiaoS-GB, sans-serif;
font-weight: 600;
color: #9e302e;
text-align: center;
background: linear-gradient(to right,#0000,#dcbb78 8%,#dcbb78 12%,#dcbb78 34%,#f1e2bb 40%,#dcc68e 58%,#dcc68e 66%,#f5ecd0 92%,#0000);
background: linear-gradient(
to right,
#0000,
#dcbb78 8%,
#dcbb78 12%,
#dcbb78 34%,
#f1e2bb 40%,
#dcc68e 58%,
#dcc68e 66%,
#f5ecd0 92%,
#0000
);
}
.container {
@ -106,12 +203,12 @@ export default {
box-sizing: border-box;
display: flex;
padding: 6.6em 7.71vw 0 7.71vw;
padding: 9.1vh 7.71vw 0 7.71vw;
.left {
font-size: 1em;
padding-top: 4em;
padding-top: 5.5vh;
margin-right: 9.13em;
.image {
width: 30.75em;
@ -119,62 +216,70 @@ export default {
}
.info {
font-weight: 400;
color: #FFFFFF;
color: #ffffff;
line-height: 2.5em;
font-size: 1.6em;
font-family: FZZhengHeiS-M-GB,sans-serif;
font-family: FZZhengHeiS-M-GB, sans-serif;
margin-top: 2.73em;
margin-top: 3.8vh;
}
}
.right {
flex: 1;
max-height: 42vh;
max-height: 39.5vh;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 4px;
width: 0px;
}
.numbers {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 2.8em;
grid-row-gap: .73em;
grid-row-gap: 0.93vh;
&__item {
color: #ebd1a8;
text-align: center;
font-size: 3.44em;
font-family: PingFang SC,sans-serif;
font-size: 3.4em;
font-family: PingFang SC, sans-serif;
font-weight: 800;
border-radius: 2.8em;
transition: all 0.2s ease-out;
&--active {
animation: filter .2s ease-out forwards;
animation: filter 0.3s ease-out forwards;
}
}
}
}
}
@keyframes filter {
from {
filter: blur(5px);
}
to {
filter: blur(0);
color: #A9262C;
background: linear-gradient(264deg, #F8EACC, #E0C48A, #F5E0B8, #EDDDAC, #E1B872);
@keyframes filter {
from {
filter: blur(6px);
}
to {
filter: blur(0);
color: #a9262c;
background: linear-gradient(
264deg,
#f8eacc,
#e0c48a,
#f5e0b8,
#edddac,
#e1b872
);
}
}
}
.btn {
cursor: pointer;
width: 46.67%;
display: flex;
justify-content: center;
margin: 4.9em auto 0 auto;
margin: 4.5vh auto 0 auto;
}
}
</style>

Write Preview
Loading…
Cancel
Save