master
xy 3 years ago
parent 78fa9bead6
commit 45d2d22bd9

@ -1,55 +1,56 @@
import request from "@/utils/request";
export function index(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/index',
params
})
}
export function drawLog(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/draw-log',
params
})
}
export function destroyDrawLog(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/draw-log-destroy',
params
})
import request from "@/utils/request";
export function index(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/index',
params
})
}
export function drawLog(params,isLoading=true) {
return request({
method: 'get',
url: '/api/admin/draw-prize/draw-log',
params,
isLoading
})
}
export function destroyDrawLog(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/draw-log-destroy',
params
})
}
export function save(data) {
return request({
url: '/api/admin/draw-prize/save',
method: 'post',
data
})
}
export function save(data) {
return request({
url: '/api/admin/draw-prize/save',
method: 'post',
data
})
}
export function show(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/show',
params
})
}
export function destroy(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/destroy',
params
})
export function show(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/show',
params
})
}
export function destroy(params) {
return request({
method: 'get',
url: '/api/admin/draw-prize/destroy',
params
})
}

@ -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
})
}

@ -1,50 +1,60 @@
<template>
<div>
<!-- 编辑-->
<xy-dialog :is-show.sync="isShow" title="抽奖奖项编辑" type="form" :form="detail" :rules="rules" @submit="editor"
ref="addActivity">
<template v-slot:name>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>奖品名字
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写奖品名字" v-model="detail.name" style="width: 300px;" />
</div>
</div>
</template>
<template v-slot:rate>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>概率
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写概率" v-model="detail.rate" style="width: 100px;" />
</div>
</div>
</template>
<template v-slot:total>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总数
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写总数" v-model="detail.total" style="width: 100px;" />
</div>
</div>
</template> <template v-slot:sort>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写排序" v-model="detail.sort" style="width: 100px;" />
</div>
</div>
<template>
<div>
<!-- 编辑-->
<xy-dialog :is-show.sync="isShow" title="抽奖奖项编辑" type="form" :form="detail" :rules="rules" @submit="editor"
ref="addActivity">
<template v-slot:name>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>奖品名字
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写奖品名字" v-model="detail.name" style="width: 300px;" />
</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">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>概率
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写概率" v-model="detail.rate" style="width: 100px;" />
</div>
</div>
</template>
<template v-slot:total>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总数
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写总数" v-model="detail.total" style="width: 100px;" />
</div>
</div>
</template> <template v-slot:sort>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写排序" v-model="detail.sort" style="width: 100px;" />
</div>
</div>
</template>
<template v-slot:money>
@ -57,235 +67,236 @@
</div>
</div>
</template>
<template v-slot:has_total>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>剩余数量
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写剩余数量" v-model="detail.has_total" style="width: 100px;" />
</div>
</div>
</template>
<template v-slot:image_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
图像
</div>
<div class="xy-table-item-content">
<div v-if="detail.image_id_url" style="position: relative;">
<img :src="detail.image_id_url" class="avatar">
<Button class="img__delete" icon="md-close" shape="circle" size="small" type="error"
@click="detail.image_id_url = '',detail.image_id = ''"></Button>
</div>
<el-upload v-else :action="action" :before-upload="uploadBefore" :limit="1" :on-error="uploadFail"
:on-success="uploadSuccess" :show-file-list="true" accept="picture" class="avatar-uploader"
list-type="picture-card">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>
</template>
<template v-slot:activity_list_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>相关项目
</div>
<div class="xy-table-item-content">
<el-select clearable v-model="detail.activity_list_id">
<el-option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:status>
<div class="xy-table-item">
<div class="xy-table-item-label">状态
</div>
<div class="xy-table-item-content">
<el-select clearable v-model="detail.status">
<el-option :value="1" label="启用"></el-option>
<el-option :value="0" label="禁用"></el-option>
</el-select>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {
save,
show
} from "@/api/activity/drawPrize";
export default {
props: {
listActivity: Array
},
data() {
return {
isShow: false,
id: "",
type: "add",
detail: {
activity_list_id: "",
rate: 0,
name: "",
status: 1,
image_id: "",
total: 0,
has_total: 0,
</template>
<template v-slot:has_total>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>剩余数量
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写剩余数量" v-model="detail.has_total" style="width: 100px;" />
</div>
</div>
</template>
<template v-slot:image_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
图像
</div>
<div class="xy-table-item-content">
<div v-if="detail.image_id_url" style="position: relative;">
<img :src="detail.image_id_url" class="avatar">
<Button class="img__delete" icon="md-close" shape="circle" size="small" type="error"
@click="detail.image_id_url = '',detail.image_id = ''"></Button>
</div>
<el-upload v-else :action="action" :before-upload="uploadBefore" :limit="1" :on-error="uploadFail"
:on-success="uploadSuccess" :show-file-list="true" accept="picture" class="avatar-uploader"
list-type="picture-card">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>
</template>
<template v-slot:activity_list_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>相关项目
</div>
<div class="xy-table-item-content">
<el-select clearable v-model="detail.activity_list_id">
<el-option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:status>
<div class="xy-table-item">
<div class="xy-table-item-label">状态
</div>
<div class="xy-table-item-content">
<el-select clearable v-model="detail.status">
<el-option :value="1" label="启用"></el-option>
<el-option :value="0" label="禁用"></el-option>
</el-select>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {
save,
show
} from "@/api/activity/drawPrize";
export default {
props: {
listActivity: Array
},
data() {
return {
isShow: false,
id: "",
type: "add",
detail: {
activity_list_id: "",
rate: 0,
name: "",
apply: "",
status: 1,
image_id: "",
total: 0,
has_total: 0,
image_id_url: "",
sort:1,
money: 0,
},
action: process.env.VUE_APP_UPLOAD_API,
rules: {
name: [{
required: true,
message: "奖品名字必填写"
}],
activity_list_id: [{
required: true,
message: "项目必须选择"
}],
}
}
},
watch: {
isShow(newVal) {
if (newVal) {
if (this.type === 'editor') {
this.getDetail()
}
} else {
this.id = ''
sort:1,
money: 0,
},
action: process.env.VUE_APP_UPLOAD_API,
rules: {
name: [{
required: true,
message: "奖品名字必填写"
}],
activity_list_id: [{
required: true,
message: "项目必须选择"
}],
}
}
},
watch: {
isShow(newVal) {
if (newVal) {
if (this.type === 'editor') {
this.getDetail()
}
} else {
this.id = ''
this.type = '';
this.detail.image_id='';
this.detail.image_id_url='';
this.$refs['addActivity'].reset()
}
}
},
methods: {
//
uploadFail(err) {
console.log(err)
},
uploadSuccess(response) {
console.log(response)
this.detail.image_id = response.id
this.detail.image_id_url = response.url
},
uploadBefore(file) {
console.log(file)
if ((file.size / 1000) > 2024) {
this.$message({
type: 'warning',
message: '上传图片大小超过2M'
})
return false
}
},
async getDetail() {
let res = await show({
id: this.id
})
Object.assign(this.detail, res);
this.detail.activity_list_id = parseInt(res.activity_list_id)
this.$refs['addActivity'].reset()
}
}
},
methods: {
//
uploadFail(err) {
console.log(err)
},
uploadSuccess(response) {
console.log(response)
this.detail.image_id = response.id
this.detail.image_id_url = response.url
},
uploadBefore(file) {
console.log(file)
if ((file.size / 1000) > 2024) {
this.$message({
type: 'warning',
message: '上传图片大小超过2M'
})
return false
}
},
async getDetail() {
let res = await show({
id: this.id
})
Object.assign(this.detail, res);
this.detail.activity_list_id = parseInt(res.activity_list_id)
this.detail.image_id = res.image_id;
this.detail.image_id_url = res.image_file.url;
},
editor() {
save(this.detail).then(res => {
this.isShow = false
this.$Message.success("操作成功");
this.$emit('refresh')
})
},
},
computed: {
},
mounted() {
let that = this;
}
}
</script>
<style scoped lang="scss">
.contract-add-plan {
min-height: 30px;
border: 1px solid #dcdee2;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
padding: 0 8px;
&-no-plan {
height: 30px;
line-height: 30px;
color: #CDD0D5;
}
}
.xy-table-item-label {
width: 140px;
}
.xy-table-item-price {
position: relative;
&::after {
z-index: 1;
position: absolute;
right: 0;
top: 0;
content: '(元)'
}
::v-deep .el-input__clear {
position: relative;
right: 30px;
z-index: 2;
}
}
.xy-table-item-price-wan {
position: relative;
&::after {
position: absolute;
right: 0;
top: 0;
content: '(万元)'
}
::v-deep .el-input__clear {
position: relative;
right: 46px;
z-index: 2;
}
}
</style>
this.detail.image_id_url = res.image_file.url;
},
editor() {
save(this.detail).then(res => {
this.isShow = false
this.$Message.success("操作成功");
this.$emit('refresh')
})
},
},
computed: {
},
mounted() {
let that = this;
}
}
</script>
<style scoped lang="scss">
.contract-add-plan {
min-height: 30px;
border: 1px solid #dcdee2;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
padding: 0 8px;
&-no-plan {
height: 30px;
line-height: 30px;
color: #CDD0D5;
}
}
.xy-table-item-label {
width: 140px;
}
.xy-table-item-price {
position: relative;
&::after {
z-index: 1;
position: absolute;
right: 0;
top: 0;
content: '(元)'
}
::v-deep .el-input__clear {
position: relative;
right: 30px;
z-index: 2;
}
}
.xy-table-item-price-wan {
position: relative;
&::after {
position: absolute;
right: 0;
top: 0;
content: '(万元)'
}
::v-deep .el-input__clear {
position: relative;
right: 46px;
z-index: 2;
}
}
</style>

@ -1,172 +1,196 @@
<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="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>
</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 {
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;
}
}
</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;">
<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 {
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;
}
}
</script>
<style lang="scss" scoped>
.selects {
display: flex;
flex-wrap: wrap;
&>div {
margin-bottom: 6px;
}
}
</style>

@ -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>

Loading…
Cancel
Save