master
xy 2 years ago
parent f4249e3d25
commit f1986f7787

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

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

@ -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,21 +75,24 @@
</div> </div>
</div> </div>
<button class="btn" :disabled="isOver" <button
:style="{ filter: isOver ? 'grayscale(90%)' : '' }" class="btn"
v-if="$route.query.result != 1" :disabled="isOver"
@click="draw"> :style="{ filter: isOver ? 'grayscale(90%)' : '' }"
<strong>{{ (flag || isOver) ? '结束抽奖' : '开始抽奖' }}</strong> v-if="$route.query.result != 1"
@click="draw"
>
<strong>{{ flag || isOver ? "结束抽奖" : "开始抽奖" }}</strong>
</button> </button>
<!-- <el-image--> <!-- <el-image-->
<!-- :style="{ filter: flag ? 'grayscale(90%)' : '' }"--> <!-- :style="{ filter: flag ? 'grayscale(90%)' : '' }"-->
<!-- v-if="$route.query.result != 1"--> <!-- v-if="$route.query.result != 1"-->
<!-- :lazy="false"--> <!-- :lazy="false"-->
<!-- class="btn"--> <!-- class="btn"-->
<!-- :src="require('@/assets/mdLotteryDraw/button.png')"--> <!-- :src="require('@/assets/mdLotteryDraw/button.png')"-->
<!-- fit="cover"--> <!-- fit="cover"-->
<!-- @click="draw"--> <!-- @click="draw"-->
<!-- ></el-image>--> <!-- ></el-image>-->
</div> </div>
</template> </template>
@ -98,11 +104,11 @@ 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, //
isOver: false,// isOver: false, //
timer: null, timer: null,
config: { config: {
draw_prize: {}, draw_prize: {},
@ -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>

Loading…
Cancel
Save