master
xy 2 years ago
parent f4249e3d25
commit f1986f7787

@ -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: "",

@ -1,206 +1,213 @@
<template>
<div>
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="项目奖品管理">
<div slot="content"></div>
<slot>
<div class="selects">
<div style="display: flex;align-items: center;" v-show="!sysInfo">
<span style="padding: 0 6px;word-break: keep-all;">
项目
</span>
<Select v-model="select.activity_list_id" style="width: 180px;">
<Option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
</Option>
</Select>
</div>
<div>
<span style="padding: 0 6px;word-break: keep-all;">
关键字
</span>
<Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
</div>
<Button style="margin-left: 10px" type="primary" @click="select={page:1,keyword:''}">
</Button>
<Button style="margin-left: 10px" type="primary" @click="doSearch"></Button>
<Button style="margin-left: 10px" type="primary" @click="add"></Button>
</div>
</slot>
</lx-header>
<xy-table :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
:total="total" @delete="deleteitem"
@editor="(row)=>{$refs['addDrawPrize'].id = row.id;$refs['addDrawPrize'].isShow = true;$refs['addDrawPrize'].type = 'editor'}">
<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>
</template>
<script>
import {
index,
destroy,
show
} from "@/api/activity/drawPrize";
import {
index as activityIndex
} from "@/api/activity/index";
import addDrawPrize from '@/views/activity/components/addDrawPrize'
export default {
components: {
addDrawPrize
},
data() {
return {
sysInfo: null,
select: {
page: 1,
page_size: 20,
keyword: '',
activity_list_id: ""
},
listActivity: [],
total: 0,
list: [],
table: [{
prop: 'activity_list.name',
label: '项目名称',
fixed: 'left',
align: 'left'
}, {
prop: 'name',
label: '奖品名称',
align: 'left',
}, {
prop: 'total',
label: '总数',
align: 'right'
},
{
prop: 'rate',
label: '概率',
align: 'right'
}, {
prop: 'has_total',
label: '剩余数量',
align: 'right'
}, {
prop: 'sort',
label: '排序',
align: 'right'
}, {
prop: 'money',
label: '金额',
align: 'right'
},
{
prop: 'created_at',
label: '创建信息',
width: 190,
formatter: (v1, v2, value) => {
return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
}
}
],
}
},
methods: {
async loadActivity() {
const res = await activityIndex({
page: 1,
page_size: 999
})
this.listActivity = res.data;
},
doSearch() {
this.select.page = 1;
this.load();
},
add() {
this.$refs['addDrawPrize'].isShow = true
},
pageSizeChange(e) {
this.select.page_size = e;
this.select.page = 1;
this.load();
},
async load() {
const res = await index(this.select)
this.total = res.total
this.list = res.data
},
deleteitem(row) {
destroy({
id: row.id
}).then(res => {
this.load();
this.$Message.success("操作成功");
})
},
pageChange(e) {
this.select.page = e
this.load()
},
},
mounted() {
this.load();
this.loadActivity()
},
created() {
let type = parseInt(this.$route.path.split("_")[1]);
this.type = this.select.is_auth = type;
let that = this;
let sysInfo = sessionStorage.getItem('sys_info');
console.log(sysInfo)
if (sysInfo && sysInfo != "") {
let _sys = JSON.parse(sysInfo);
that.select.activity_list_id = _sys.id;
that.sysInfo = _sys;
}
}
}
</script>
<style lang="scss" scoped>
.selects {
display: flex;
flex-wrap: wrap;
&>div {
margin-bottom: 6px;
}
}
</style>
<template>
<div>
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="项目奖品管理">
<div slot="content"></div>
<slot>
<div class="selects">
<div style="display: flex;align-items: center;" v-show="!sysInfo">
<span style="padding: 0 6px;word-break: keep-all;">
项目
</span>
<Select v-model="select.activity_list_id" style="width: 180px;">
<Option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
</Option>
</Select>
</div>
<div>
<span style="padding: 0 6px;word-break: keep-all;">
关键字
</span>
<Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
</div>
<Button style="margin-left: 10px" type="primary" @click="select={page:1,keyword:''}">
</Button>
<Button style="margin-left: 10px" type="primary" @click="doSearch"></Button>
<Button style="margin-left: 10px" type="primary" @click="add"></Button>
</div>
</slot>
</lx-header>
<xy-table :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
:total="total" @delete="deleteitem"
@editor="(row)=>{$refs['addDrawPrize'].id = row.id;$refs['addDrawPrize'].isShow = true;$refs['addDrawPrize'].type = 'editor'}">
<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 && (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 && !(row.draw_logs_count < row.total)" style="margin-left: 4px;" size="small" type="primary" ghost
@click="toDraw(2,row)">中奖结果
</Button>
</template>
</el-table-column>
</template>
</xy-table>
<addDrawPrize ref="addDrawPrize" :listActivity="listActivity" @refresh="load()"></addDrawPrize>
</div>
</template>
<script>
import {
index,
destroy,
show
} from "@/api/activity/drawPrize";
import {
index as activityIndex
} from "@/api/activity/index";
import addDrawPrize from '@/views/activity/components/addDrawPrize'
export default {
components: {
addDrawPrize
},
data() {
return {
sysInfo: null,
select: {
page: 1,
page_size: 20,
keyword: '',
activity_list_id: ""
},
listActivity: [],
total: 0,
list: [],
table: [{
prop: 'activity_list.name',
label: '项目名称',
fixed: 'left',
align: 'left'
}, {
prop: 'name',
label: '奖品名称',
align: 'left',
}, {
prop: 'total',
label: '总数',
align: 'right'
},
{
prop: 'rate',
label: '概率',
align: 'right'
}, {
prop: 'has_total',
label: '剩余数量',
align: 'right'
}, {
prop: 'sort',
label: '排序',
align: 'right'
}, {
prop: 'money',
label: '金额',
align: 'right'
},
{
prop: 'created_at',
label: '创建信息',
width: 190,
formatter: (v1, v2, value) => {
return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
}
}
],
}
},
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({
page: 1,
page_size: 999
})
this.listActivity = res.data;
},
doSearch() {
this.select.page = 1;
this.load();
},
add() {
this.$refs['addDrawPrize'].isShow = true
},
pageSizeChange(e) {
this.select.page_size = e;
this.select.page = 1;
this.load();
},
async load() {
const res = await index(this.select)
this.total = res.total
this.list = res.data
},
deleteitem(row) {
destroy({
id: row.id
}).then(res => {
this.load();
this.$Message.success("操作成功");
})
},
pageChange(e) {
this.select.page = e
this.load()
},
},
mounted() {
this.load();
this.loadActivity()
},
created() {
let type = parseInt(this.$route.path.split("_")[1]);
this.type = this.select.is_auth = type;
let that = this;
let sysInfo = sessionStorage.getItem('sys_info');
console.log(sysInfo)
if (sysInfo && sysInfo != "") {
let _sys = JSON.parse(sysInfo);
that.select.activity_list_id = _sys.id;
that.sysInfo = _sys;
}
}
}
</script>
<style lang="scss" scoped>
.selects {
display: flex;
flex-wrap: wrap;
&>div {
margin-bottom: 6px;
}
}
</style>

@ -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"
:style="{ filter: isOver ? 'grayscale(90%)' : '' }"
v-if="$route.query.result != 1"
@click="draw">
<strong>{{ (flag || isOver) ? '结束抽奖' : '开始抽奖' }}</strong>
<button
class="btn"
:disabled="isOver"
:style="{ filter: isOver ? 'grayscale(90%)' : '' }"
v-if="$route.query.result != 1"
@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>

Loading…
Cancel
Save