刘翔宇-旅管家 3 years ago
commit feb70a9b06

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

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

@ -1,209 +1,240 @@
<template>
<div> <template>
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="项目抽奖日志"> <div>
<div slot="content"></div> <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="项目抽奖日志">
<slot> <div slot="content"></div>
<div class="selects"> <slot>
<div style="display: flex;align-items: center;" v-show="!sysInfo"> <div class="selects">
<span style="padding: 0 6px;word-break: keep-all;"> <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;"> </span>
<Option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name"> <Select v-model="select.activity_list_id" style="width: 180px;">
</Option> <Option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
</Select> </Option>
</div> </Select>
<div> </div>
<span style="padding: 0 6px;word-break: keep-all;"> <div>
关键字 <span style="padding: 0 6px;word-break: keep-all;">
</span> 关键字
<Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input> </span>
</div> <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="select={page:1,keyword:''}">
<Button style="margin-left: 10px" type="primary" @click="doSearch"></Button> </Button>
<Button style="margin-left: 10px" type="error" @click="doExcel"></Button> <Button style="margin-left: 10px" type="primary" @click="doSearch"></Button>
<Button style="margin-left: 10px" type="primary" @click="doGet"></Button> <Button style="margin-left: 10px" type="error" @click="doExcel"></Button>
<Button style="margin-left: 10px" type="warning" @click="doNoGet"></Button> <Button style="margin-left: 10px" type="primary" @click="doGet"></Button>
</div> <Button style="margin-left: 10px" type="warning" @click="doNoGet"></Button>
</slot> <Button style="margin-left: 10px" type="warning" ghost @click="del"></Button>
</lx-header> </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> <xy-table ref="table" :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
:total="total" @delete="deleteitem" @selectAllClick="handleSelectionChange">>
</template> <template v-slot:btns>
</xy-table>
</div> </template>
</template> </xy-table>
</div>
<script> </template>
import {
drawLog, <script>
destroyDrawLog import {
} from "@/api/activity/drawPrize"; drawLog,
import { destroyDrawLog
index as activityIndex } from "@/api/activity/drawPrize";
} from "@/api/activity/index"; import {
import { index as activityIndex
download } from "@/api/activity/index";
} from '@/utils/downloadRequest' import {
export default { download
data() { } from '@/utils/downloadRequest'
export default {
data() {
return { return {
sysInfo:null, sysInfo:null,
select: { select: {
page: 1, page: 1,
page_size: 20, page_size: 20,
keyword: '', keyword: '',
activity_list_id: "", activity_list_id: "",
ids: [] ids: []
}, },
listActivity: [], listActivity: [],
total: 0, total: 0,
list: [], list: [],
table: [{ table: [{
width: 36, width: 36,
sortable: false, sortable: false,
type: 'selection', type: 'selection',
fixed: "left" fixed: "left",
}, reserveSelection: true
{ },
prop: 'activity_list.name', {
label: '项目名称', prop: 'activity_list.name',
fixed: 'left', label: '项目名称',
align: 'left' fixed: 'left',
}, align: 'left'
{ },
prop: 'mobile', {
label: '手机号', prop: 'mobile',
align: 'center', label: '手机号',
width: "120px" align: 'center',
}, width: "120px"
{ },
prop: 'user.name', {
label: '用户名称', prop: 'user.name',
align: 'center', label: '用户名称',
width: "120px" align: 'center',
}, { width: "120px"
prop: 'user.username', }, {
label: '登录名', prop: 'user.username',
align: 'center', label: '登录名',
width: "120px" align: 'center',
}, { width: "120px"
prop: 'draw_prize.name', }, {
label: '中奖信息', prop: 'draw_prize.name',
align: 'center', label: '中奖信息',
width: "200px" align: 'center',
}, { width: "200px"
prop: 'is_send', }, {
label: '是否领奖', prop: 'is_send',
align: 'center', label: '是否领奖',
width: "120px", align: 'center',
formatter: (v1, v2, value) => { width: "120px",
return value == 1 ? "已领取" : "未领取"; formatter: (v1, v2, value) => {
} return value == 1 ? "已领取" : "未领取";
}, }
},
{
prop: 'created_at', {
label: '抽奖时间', prop: 'created_at',
width: 190, label: '抽奖时间',
formatter: (v1, v2, value) => { width: 190,
return this.$moment(value).format("YYYY-MM-DD HH:mm:ss"); formatter: (v1, v2, value) => {
} return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
} }
], }
} ],
}, }
methods: { },
doGet() { methods: {
del () {
}, let that = this
doNoGet() { this.$confirm("确认删除吗?",{
beforeClose(action,instance,done){
}, if (action === 'confirm') {
// instance.confirmButtonLoading = true;
handleSelectionChange(val) { instance.confirmButtonText = '删除中..';
this.select.ids = val instance.confirmButtonLoading = false;
let option = {}
}, that.$refs['table'].getSelection().forEach((i,index) => {
option[`id[${index}]`] = i.id
})
doExcel() { destroyDrawLog(option).then(res => {
download( done()
'/api/admin/draw-prize/draw-log', })
'get', { } else {
is_export: 1, done()
...this.select }
}, }
'中奖列表.xlsx') }).then(res => {
}, this.$message({
async loadActivity() { type: 'success',
const res = await activityIndex({ message: '删除成功'
page: 1, })
page_size: 999 this.load()
}) })
this.listActivity = res.data; },
}, doGet() {
doSearch() {
this.select.page = 1; },
this.load(); doNoGet() {
},
add() { },
this.$refs['addActivityUser'].isShow = true //
}, handleSelectionChange(val) {
pageSizeChange(e) {
this.select.page_size = e; this.select.ids = val
this.select.page = 1;
this.load(); },
},
async load() {
const res = await drawLog(this.select) doExcel() {
this.total = res.total download(
this.list = res.data '/api/admin/draw-prize/draw-log',
}, 'get', {
deleteitem(row) { is_export: 1,
destroyDrawLog({ ...this.select
id: row.id },
}).then(res => { '中奖列表.xlsx')
this.load(); },
this.$Message.success("操作成功"); async loadActivity() {
}) const res = await activityIndex({
}, page: 1,
pageChange(e) { page_size: 999
this.select.page = e })
this.load() this.listActivity = res.data;
}, },
}, doSearch() {
mounted() { this.select.page = 1;
this.load(); this.load();
this.loadActivity() },
}, add() {
created() { this.$refs['addActivityUser'].isShow = true
let type = parseInt(this.$route.path.split("_")[1]); },
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; this.type = this.select.is_auth = type;
let sysInfo = sessionStorage.getItem('sys_info') let sysInfo = sessionStorage.getItem('sys_info')
if (sysInfo && sysInfo != "") { if (sysInfo && sysInfo != "") {
let _sys = JSON.parse(sysInfo); let _sys = JSON.parse(sysInfo);
that.select.activity_list_id = _sys.id; that.select.activity_list_id = _sys.id;
that.sysInfo=_sys; that.sysInfo=_sys;
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.selects { .selects {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
&>div { &>div {
margin-bottom: 6px; margin-bottom: 6px;
} }
} }
</style> </style>

@ -31,14 +31,14 @@
</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
? !!resultNumbers.find((i) => i === index) ? !!resultNumbers.find((i) => i === index)
: !!resultNumbers.find((i) => i === item), : !!resultNumbers.find((i) => i === item),
}" }"
@ -51,13 +51,13 @@
</div> </div>
<div <div
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
? !!resultNumbers.find((i) => i === index) ? !!resultNumbers.find((i) => i === index)
: !!resultNumbers.find((i) => i === item), : !!resultNumbers.find((i) => i === item),
}" }"
@ -72,15 +72,21 @@
</div> </div>
</div> </div>
<el-image <button class="btn" :disabled="isOver"
:style="{ filter: flag ? 'grayscale(90%)' : '' }" :style="{ filter: isOver ? 'grayscale(90%)' : '' }"
v-if="$route.query.result != 1" v-if="$route.query.result != 1"
:lazy="false" @click="draw">
class="btn" <strong>{{ (flag || isOver) ? '结束抽奖' : '开始抽奖' }}</strong>
:src="require('@/assets/mdLotteryDraw/button.png')" </button>
fit="cover" <!-- <el-image-->
@click="draw" <!-- :style="{ filter: flag ? 'grayscale(90%)' : '' }"-->
></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> </div>
</template> </template>
@ -95,7 +101,8 @@ export default {
maxHeight: '40vh', maxHeight: '40vh',
bkg, bkg,
flag: false, // flag: false, //
isEnd: false, // isEnd: true, //
isOver: false,//
timer: null, timer: null,
config: { config: {
draw_prize: {}, draw_prize: {},
@ -144,6 +151,7 @@ export default {
}, },
draw: throttle(async function () { draw: throttle(async function () {
if (this.isOver) return
if (!this.flag) { if (!this.flag) {
console.log("开始抽奖"); console.log("开始抽奖");
try { try {
@ -156,35 +164,36 @@ export default {
); );
this.result = result.draw_numbers; this.result = result.draw_numbers;
this.flag = true; this.flag = true;
this.isEnd = true; this.isEnd = false;
this.timer = setInterval(() => { this.timer = setInterval(() => {
let set = new Set(); // let set = new Set();
while (set.size < result.draw_numbers.length) { // while (set.size < result.draw_numbers.length) {
let num = Math.floor( // let num = Math.floor(
Math.random() * this.config.numbers_list.length // Math.random() * this.config.numbers_list.length
); // );
set.add(num); // set.add(num);
} // }
//
this.resultNumbers = Array.from(set); // this.resultNumbers = Array.from(set);
if (!this.flag) { if (!this.flag) {
clearInterval(this.timer); clearInterval(this.timer);
setTimeout(() => { setTimeout(() => {
this.resultNumbers = result.draw_numbers; this.resultNumbers = result.draw_numbers;
this.isEnd = false; this.isEnd = true;
this.isOver = true;
}, 150); }, 150);
} }
}, 150); }, 150);
setTimeout(() => {
this.flag = false;
console.log("结束抽奖");
}, 3000);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} else {
this.flag = false;
console.log("结束抽奖");
} }
}), }),
}, },
@ -201,12 +210,13 @@ 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')
); );
} }
return Array.from(set).sort(() => Math.random() - 0.5); return Array.from(set).sort(() => Math.random() - 0.5);
} }
return this.config.numbers_list return this.config.numbers_list
.sort(() => Math.random() - 0.5) .sort(() => Math.random() - 0.5)
.slice(0, 36); .slice(0, 36);
@ -311,11 +321,13 @@ export default {
} }
@keyframes blur { @keyframes blur {
from { 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 { 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(-300%); transform: translateY(-200%);
} }
} }
&__item { &__item {
@ -374,13 +386,21 @@ export default {
} }
} }
.btn { .btn {
border-width: 0 2px 2px 0;
display: block;
cursor: pointer; cursor: pointer;
text-align: center;
font-size: 2.6em;
width: 46.67%; width: 46.67%;
display: flex; font-weight: 900;
justify-content: center;
transition: all 0.2s; 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> </style>

Loading…
Cancel
Save