master
xy 2 years ago
parent d147d7a03c
commit c5f0bf3218

@ -29,7 +29,6 @@ export function destroyDrawLog(params) {
export function save(data) {
return request({
url: '/api/admin/draw-prize/save',

@ -166,7 +166,10 @@ export default {
},
toggleAllSelection() {
this.$refs.table.toggleAllSelection()
}
},
getSelection(){
return this.$refs.table?.store?.states?.selection ?? []
},
},
created() {
this.initLoad()
@ -310,6 +313,7 @@ export default {
prop={item.prop}
sortable={item.sortable ?? true}
type={item.type}
reserve-selection={ item.type === 'selection' ? item.reserveSelection : false }
selectable={item.selectable}
scopedSlots={item.type === 'expand' ? {
default(props){

@ -1,202 +1,232 @@
<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;">
<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="error" @click="doExcel"></Button>
<Button style="margin-left: 10px" type="primary" @click="doGet"></Button>
<Button style="margin-left: 10px" type="warning" @click="doNoGet"></Button>
</div>
</slot>
</lx-header>
<xy-table :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
:total="total" @delete="deleteitem" @selectAllClick="handleSelectionChange">>
<template v-slot:btns>
</template>
</xy-table>
</div>
</template>
<script>
import {
drawLog,
destroyDrawLog
} from "@/api/activity/drawPrize";
import {
index as activityIndex
} from "@/api/activity/index";
import {
download
} from '@/utils/downloadRequest'
export default {
data() {
return {
select: {
page: 1,
page_size: 20,
keyword: '',
activity_list_id: "",
ids: []
},
listActivity: [],
total: 0,
list: [],
table: [{
width: 36,
sortable: false,
type: 'selection',
fixed: "left"
},
{
prop: 'activity_list.name',
label: '项目名称',
fixed: 'left',
align: 'left'
},
{
prop: 'mobile',
label: '手机号',
align: 'center',
width: "120px"
},
{
prop: 'user.name',
label: '用户名称',
align: 'center',
width: "120px"
}, {
prop: 'user.username',
label: '登录名',
align: 'center',
width: "120px"
}, {
prop: 'draw_prize.name',
label: '中奖信息',
align: 'center',
width: "200px"
}, {
prop: 'is_send',
label: '是否领奖',
align: 'center',
width: "120px",
formatter: (v1, v2, value) => {
return value == 1 ? "已领取" : "未领取";
}
},
{
prop: 'created_at',
label: '抽奖时间',
width: 190,
formatter: (v1, v2, value) => {
return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
}
}
],
}
},
methods: {
doGet() {
},
doNoGet() {
},
//
handleSelectionChange(val) {
this.select.ids = val
},
doExcel() {
download(
'/api/admin/draw-prize/draw-log',
'get', {
is_export: 1,
...this.select
},
'中奖列表.xlsx')
},
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['addActivityUser'].isShow = true
},
pageSizeChange(e) {
this.select.page_size = e;
this.select.page = 1;
this.load();
},
async load() {
const res = await drawLog(this.select)
this.total = res.total
this.list = res.data
},
deleteitem(row) {
destroyDrawLog({
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;
}
}
</script>
<style lang="scss" scoped>
.selects {
display: flex;
flex-wrap: wrap;
&>div {
margin-bottom: 6px;
}
}
<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;">
<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="error" @click="doExcel"></Button>
<Button style="margin-left: 10px" type="primary" @click="doGet"></Button>
<Button style="margin-left: 10px" type="warning" @click="doNoGet"></Button>
<Button style="margin-left: 10px" type="warning" ghost @click="del"></Button>
</div>
</slot>
</lx-header>
<xy-table ref="table" :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
:total="total" @delete="deleteitem" @selectAllClick="handleSelectionChange">>
<template v-slot:btns>
</template>
</xy-table>
</div>
</template>
<script>
import {
drawLog,
destroyDrawLog
} from "@/api/activity/drawPrize";
import {
index as activityIndex
} from "@/api/activity/index";
import {
download
} from '@/utils/downloadRequest'
export default {
data() {
return {
select: {
page: 1,
page_size: 20,
keyword: '',
activity_list_id: "",
ids: []
},
listActivity: [],
total: 0,
list: [],
table: [{
width: 36,
sortable: false,
type: 'selection',
fixed: "left",
reserveSelection: true
},
{
prop: 'activity_list.name',
label: '项目名称',
fixed: 'left',
align: 'left'
},
{
prop: 'mobile',
label: '手机号',
align: 'center',
width: "120px"
},
{
prop: 'user.name',
label: '用户名称',
align: 'center',
width: "120px"
}, {
prop: 'user.username',
label: '登录名',
align: 'center',
width: "120px"
}, {
prop: 'draw_prize.name',
label: '中奖信息',
align: 'center',
width: "200px"
}, {
prop: 'is_send',
label: '是否领奖',
align: 'center',
width: "120px",
formatter: (v1, v2, value) => {
return value == 1 ? "已领取" : "未领取";
}
},
{
prop: 'created_at',
label: '抽奖时间',
width: 190,
formatter: (v1, v2, value) => {
return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
}
}
],
}
},
methods: {
del () {
let that = this
this.$confirm("确认删除吗?",{
beforeClose(action,instance,done){
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '删除中..';
instance.confirmButtonLoading = false;
let option = {}
that.$refs['table'].getSelection().forEach((i,index) => {
option[`id[${index}]`] = i.id
})
destroyDrawLog(option).then(res => {
done()
})
} else {
done()
}
}
}).then(res => {
this.$message({
type: 'success',
message: '删除成功'
})
this.load()
})
},
doGet() {
},
doNoGet() {
},
//
handleSelectionChange(val) {
this.select.ids = val
},
doExcel() {
download(
'/api/admin/draw-prize/draw-log',
'get', {
is_export: 1,
...this.select
},
'中奖列表.xlsx')
},
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['addActivityUser'].isShow = true
},
pageSizeChange(e) {
this.select.page_size = e;
this.select.page = 1;
this.load();
},
async load() {
const res = await drawLog(this.select)
this.total = res.total
this.list = res.data
},
deleteitem(row) {
destroyDrawLog({
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;
}
}
</script>
<style lang="scss" scoped>
.selects {
display: flex;
flex-wrap: wrap;
&>div {
margin-bottom: 6px;
}
}
</style>

@ -31,14 +31,14 @@
</div>
<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
class="numbers__item"
:style="{
'animation-timing-function': flag ? '' : 'ease-out'
}"
:class="{
'numbers__item--active': isEnd
'numbers__item--active': !isEnd
? !!resultNumbers.find((i) => i === index)
: !!resultNumbers.find((i) => i === item),
}"
@ -51,13 +51,13 @@
</div>
<div
v-show="isEnd"
v-show="!isEnd"
class="numbers__item"
:style="{
'animation-timing-function': flag ? '' : 'ease-out'
}"
:class="{
'numbers__item--active': isEnd
'numbers__item--active': !isEnd
? !!resultNumbers.find((i) => i === index)
: !!resultNumbers.find((i) => i === item),
}"
@ -72,15 +72,21 @@
</div>
</div>
<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>
<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>-->
</div>
</template>
@ -95,7 +101,8 @@ export default {
maxHeight: '40vh',
bkg,
flag: false, //
isEnd: false, //
isEnd: true, //
isOver: false,//
timer: null,
config: {
draw_prize: {},
@ -144,6 +151,7 @@ export default {
},
draw: throttle(async function () {
if (this.isOver) return
if (!this.flag) {
console.log("开始抽奖");
try {
@ -156,35 +164,36 @@ export default {
);
this.result = result.draw_numbers;
this.flag = true;
this.isEnd = true;
this.isEnd = false;
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(num);
}
this.resultNumbers = Array.from(set);
// let set = new Set();
// while (set.size < result.draw_numbers.length) {
// let num = Math.floor(
// Math.random() * this.config.numbers_list.length
// );
// set.add(num);
// }
//
// this.resultNumbers = Array.from(set);
if (!this.flag) {
clearInterval(this.timer);
setTimeout(() => {
this.resultNumbers = result.draw_numbers;
this.isEnd = false;
this.isEnd = true;
this.isOver = true;
}, 150);
}
}, 150);
setTimeout(() => {
this.flag = false;
console.log("结束抽奖");
}, 3000);
} catch (err) {
console.log(err);
}
} else {
this.flag = false;
console.log("结束抽奖");
}
}),
},
@ -201,12 +210,13 @@ export default {
set.add(
this.config.numbers_list[
Math.floor(Math.random() * this.config.numbers_list.length)
]
].toString().padStart(3,'0')
);
}
return Array.from(set).sort(() => Math.random() - 0.5);
}
return this.config.numbers_list
.sort(() => Math.random() - 0.5)
.slice(0, 36);
@ -311,11 +321,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);
}
to {
text-shadow: 2px 4px #00000066;
filter: blur(1.5px) drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
transform: translateY(-300%);
transform: translateY(-200%);
}
}
&__item {
@ -374,13 +386,21 @@ export default {
}
}
.btn {
border-width: 0 2px 2px 0;
display: block;
cursor: pointer;
text-align: center;
font-size: 2.6em;
width: 46.67%;
display: flex;
justify-content: center;
font-weight: 900;
transition: all 0.2s;
background: linear-gradient(to bottom,rgb(242, 172, 106),rgb(247, 232, 203));
border-radius: 6px;
color: rgb(152, 50, 22);
box-shadow: 1px 4px 10px 6px #00000055;
margin: 4.5vh auto 0 auto;
margin: 4.2vh auto 0 auto;
padding: 10px 0;
}
}
</style>

Loading…
Cancel
Save