You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
528 lines
15 KiB
528 lines
15 KiB
<template>
|
|
<div class="index wrapper_1200">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>抽奖转盘</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="luck_draw_Box">
|
|
<div class="luck_draw_Box_top">
|
|
<div class="left">
|
|
<div class="left_title">
|
|
<!-- <div>
|
|
<div class="left_title_lt"></div>
|
|
<div class="left_title_lb"></div>
|
|
</div>-->
|
|
本期奖品清单
|
|
</div>
|
|
<div class="left_prize" v-for="(item, index) in DrawGoodsList" :key="index">
|
|
{{ item.title }}：
|
|
<span>{{ item.description }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="center_Box">
|
|
<div class="LuckyWheelBg">
|
|
<LuckyWheel
|
|
class="LuckyWheel"
|
|
style="margin: auto"
|
|
ref="myLucky"
|
|
width="326px"
|
|
height="326px"
|
|
:prizes="prizes"
|
|
:blocks="blocks"
|
|
:buttons="buttons"
|
|
@start="startCallback"
|
|
@end="endCallback"
|
|
/>
|
|
</div>
|
|
|
|
<button class="center_btn" @click="lucky">立即抽奖</button>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right_title">抽奖规则</div>
|
|
<div class="right_ruler">
|
|
<p class="right_ruler_title">活动时间:</p>
|
|
<p class="right_ruler_time">开始时间:{{ drawData.start_time }}</p>
|
|
<p class="right_ruler_time">结束时间:{{ drawData.end_time }}</p>
|
|
</div>
|
|
|
|
<div class="right_ruler">
|
|
<p class="right_ruler_title">活动规则:</p>
|
|
<!-- <p>抽奖次数:{{ checkDrawNum }}次</p> -->
|
|
<p>{{ drawData.rule }}</p>
|
|
</div>
|
|
<!-- <div class="right_ruler">
|
|
<p class="right_ruler_title">3.规则内容</p>
|
|
<p>
|
|
内容内内容内内容内内容内内容内内容内内容内内容内内容内内容内内容内内容内
|
|
</p>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="luck_draw_Box_bottom">
|
|
<div class="luck_draw_Box_bottom_title">抽奖明细</div>
|
|
<div style="display: flex; flex-wrap: wrap">
|
|
<div class="detailed_card" v-for="(item, index) in luckDrawList" :key="index">
|
|
<div class="detailed_card_left">
|
|
<div class="detailed_card_left_tag">
|
|
<img :src="imgUrl + item.image" alt v-show="item.type" />
|
|
<img src="../../assets/images/thanks.png" alt v-show="!item.type" />
|
|
</div>
|
|
<div class="detailed_card_left_txt">
|
|
<div class="detailed_card_left_content">{{ item.title }}</div>
|
|
<div class="detailed_card_left_time">{{ item.create_time }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="detailed_card_right">
|
|
<!-- // 1普通商品 2优惠券 3积分 4余额 0未中奖 -->
|
|
<div v-show="item.type == 0">未中奖</div>
|
|
<div v-show="item.type == 1">普通商品</div>
|
|
<div v-show="item.type == 2">优惠券</div>
|
|
<div v-show="item.type == 3">积分</div>
|
|
<div v-show="item.type == 4">余额</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Page
|
|
ref="Page"
|
|
:total="Page.total"
|
|
:pageSize="Page.pageSize"
|
|
:currentPage="Page.currentPage"
|
|
:emptyShow="false"
|
|
@currentChange="currentChange"
|
|
/>
|
|
<el-dialog
|
|
:visible.sync="luckDrawDialog"
|
|
:title="luckDrawDialogTitle"
|
|
width="30%"
|
|
:show-close="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
>
|
|
<div style class="luckDrawDialog">
|
|
<img :src="luckDrawDialogImg" alt />
|
|
<p
|
|
style="text-align: center; margin-top: 40px; font-weight: 500; font-size: 18px"
|
|
>
|
|
<span v-show="luckDrawDialogType == 0"></span>
|
|
<span v-show="luckDrawDialogType == 1">请联系平台客服领取奖品</span>
|
|
<span v-show="luckDrawDialogType == 2">已放入您的优惠券，请前往查看</span>
|
|
<span v-show="luckDrawDialogType == 3">请到积分中心查看</span>
|
|
<span v-show="luckDrawDialogType == 4">已放入您的账户余额，请前往查看</span>
|
|
</p>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="luckDrawDialog = false">我知道了</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Setting from "~/setting";
|
|
import turntable from "../../assets/images/turntable.png";
|
|
import thanks from "../../assets/images/thanks.png";
|
|
import pointer from "../../assets/images/pointer.png";
|
|
export default {
|
|
auth: false,
|
|
data() {
|
|
return {
|
|
imgUrl: Setting.uplodBaseURL,
|
|
drawData: {},
|
|
// checkDrawNum: undefined,
|
|
luckDrawList: [],
|
|
luckDrawDialog: false,
|
|
/**抽奖参数**/
|
|
// 背景
|
|
blocks: [
|
|
// {
|
|
// padding: "0px",
|
|
// imgs: [
|
|
// {
|
|
// src: turntable,
|
|
// top: "0px",
|
|
// width: "300px",
|
|
// height: "300px",
|
|
// rotate: true,
|
|
// },
|
|
// ],
|
|
// },
|
|
],
|
|
// 奖品
|
|
prizes: [],
|
|
// 抽奖按钮
|
|
buttons: [
|
|
{
|
|
radius: "30%",
|
|
// background: "",
|
|
pointer: true,
|
|
fonts: [{ text: "", top: "-10px" }],
|
|
imgs: [
|
|
{
|
|
src: pointer,
|
|
top: "-65px",
|
|
right: "-15px",
|
|
width: "100px",
|
|
height: "110px",
|
|
rotate: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
// 奖品列表
|
|
DrawGoodsList: [],
|
|
luckDrawDialogTitle: "",
|
|
luckDrawDialogImg: "",
|
|
luckDrawDialogType: undefined,
|
|
Page: {
|
|
total: 0,
|
|
pageSize: 10,
|
|
currentPage: 0,
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getDrawData();
|
|
this.getLuckDrawList();
|
|
this.getLogList();
|
|
// this.getCheckDrawNum();
|
|
},
|
|
methods: {
|
|
// 抽奖活动基本信息
|
|
getDrawData() {
|
|
this.$axios.post(`/draw/getDrawInfo`).then((res) => {
|
|
this.drawData = res.data;
|
|
console.log(res.data);
|
|
});
|
|
},
|
|
// 奖品列表
|
|
getLuckDrawList() {
|
|
this.$axios.post(`/draw/getDrawGoodsList`).then((res) => {
|
|
this.DrawGoodsList = res.data;
|
|
let arr = [];
|
|
arr.push({
|
|
fonts: [{ text: "谢谢参与", fontColor: "#aaa", top: "65%" }],
|
|
id: 0,
|
|
type: 0,
|
|
background: "#f4f4f4",
|
|
imgs: [
|
|
{
|
|
src: thanks,
|
|
width: "40px",
|
|
height: "40px",
|
|
top: "25%",
|
|
},
|
|
],
|
|
});
|
|
res.data.forEach((v, i) => {
|
|
arr.push({
|
|
fonts: [
|
|
{
|
|
text: v.title,
|
|
fontColor: "#EA1714",
|
|
fontSize: "16px",
|
|
top: "65%",
|
|
},
|
|
],
|
|
id: v.id,
|
|
type: v.type,
|
|
background: (i + 1) % 2 == 0 ? "#ffedde" : "#ffc692",
|
|
imgs: [
|
|
{
|
|
src: this.imgUrl + v.image,
|
|
width: "40px",
|
|
height: "40px",
|
|
top: "25%",
|
|
},
|
|
],
|
|
});
|
|
});
|
|
console.log(arr);
|
|
//
|
|
this.prizes = arr;
|
|
});
|
|
},
|
|
// 获奖记录
|
|
getLogList() {
|
|
let obj = {
|
|
page: this.Page.currentPage,
|
|
page_size: this.Page.pageSize,
|
|
};
|
|
this.$axios
|
|
.post(`/draw/getLogList`, obj)
|
|
.then((res) => {
|
|
this.luckDrawList = res.data.list;
|
|
this.Page.total = res.data.count;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
// 剩余可抽奖次数
|
|
// getCheckDrawNum() {
|
|
// this.$axios.post(`/draw/checkdrawnum`).then((res) => {
|
|
// this.checkDrawNum = res.data.cam_draw_num;
|
|
// });
|
|
// },
|
|
|
|
lucky() {
|
|
this.startCallback();
|
|
},
|
|
// 点击抽奖按钮会触发star回调
|
|
startCallback() {
|
|
// 调用抽奖组件的play方法开始游戏
|
|
this.$refs.myLucky.play();
|
|
this.$axios.post("/draw/doDraw").then((res) => {
|
|
let index = this.prizes.findIndex((v) => {
|
|
return v.id == res.data.id;
|
|
});
|
|
this.$refs.myLucky.stop(index);
|
|
// this.getCheckDrawNum();
|
|
this.getLogList();
|
|
});
|
|
},
|
|
// 抽奖结束会触发end回调
|
|
endCallback(prize) {
|
|
this.luckDrawDialogTitle = prize.fonts[0].text;
|
|
this.luckDrawDialogType = prize.type;
|
|
this.luckDrawDialogImg = prize.imgs[0].src;
|
|
console.log(prize);
|
|
this.luckDrawDialog = true;
|
|
},
|
|
currentChange(e) {
|
|
this.Page.currentPage = e;
|
|
this.getLogList();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.index {
|
|
.crumbs {
|
|
margin: 20px 0;
|
|
}
|
|
.luck_draw_Box {
|
|
width: 1200px;
|
|
min-height: 760px;
|
|
//背景图 上半高度545px 下半215px
|
|
margin: 20px 0;
|
|
padding-top: 50px;
|
|
background: url("@/assets/images/luckdrawtop.png");
|
|
|
|
.luck_draw_Box_top {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 1200px;
|
|
height: 495px;
|
|
.left,
|
|
.right {
|
|
width: 208px;
|
|
max-height: 438px;
|
|
border-radius: 21px;
|
|
border: 5px solid #ff7636;
|
|
overflow: hidden;
|
|
}
|
|
.center_Box {
|
|
width: 408px;
|
|
height: 408px;
|
|
.LuckyWheelBg {
|
|
width: 375px;
|
|
height: 375px;
|
|
background: url("@/assets/images/turntable.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
.LuckyWheel {
|
|
position: absolute;
|
|
top: -5px;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.center_btn {
|
|
margin: 0 65px;
|
|
width: 275px;
|
|
height: 55px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
#feb35b 0%,
|
|
#ffc06b 16%,
|
|
#fec162 47%,
|
|
#ffed9a 100%
|
|
);
|
|
box-shadow: inset 0px -6px 11px 0px #fffdcc;
|
|
border-radius: 29px;
|
|
border: none;
|
|
color: #b82114;
|
|
font-weight: 800;
|
|
font-size: 26px;
|
|
span {
|
|
color: #b82114;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
.left {
|
|
.left_title {
|
|
width: 108px;
|
|
height: 25px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 25px;
|
|
margin: 10px auto;
|
|
font-weight: 600;
|
|
// .left_title_lt {
|
|
// width: 16px;
|
|
// height: 21px;
|
|
// background: linear-gradient(180deg, #ff7f7f 0%, #ff7636 100%);
|
|
// }
|
|
}
|
|
.left_prize {
|
|
width: 140px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 20px;
|
|
margin: 30px auto;
|
|
font-weight: 600;
|
|
// overflow: hidden;
|
|
// text-overflow: ellipsis;
|
|
// white-space: nowrap;
|
|
span {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
// overflow: auto;
|
|
.right_title {
|
|
width: 108px;
|
|
height: 25px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 25px;
|
|
margin: 10px auto;
|
|
font-weight: 600;
|
|
}
|
|
.right_ruler {
|
|
margin: 10px auto;
|
|
width: 180px;
|
|
p {
|
|
margin-bottom: 10px;
|
|
}
|
|
.right_ruler_title {
|
|
width: 180px;
|
|
min-height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 20px;
|
|
|
|
font-weight: 600;
|
|
}
|
|
.right_ruler_time {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.luck_draw_Box_bottom {
|
|
.luck_draw_Box_bottom_title {
|
|
width: 108px;
|
|
height: 20px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 20px;
|
|
margin-top: 30px;
|
|
margin-left: 75px;
|
|
font-weight: 600;
|
|
}
|
|
.detailed_card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 400px;
|
|
height: 70px;
|
|
margin-top: 10px;
|
|
margin-left: 70px;
|
|
.detailed_card_left {
|
|
display: flex;
|
|
.detailed_card_left_tag {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: linear-gradient(141deg, #ffac73 0%, #fe6e0b 100%);
|
|
border-radius: 50%;
|
|
margin: 5px;
|
|
img {
|
|
width: 26px;
|
|
height: 26px;
|
|
padding: 9px;
|
|
}
|
|
}
|
|
.detailed_card_left_txt {
|
|
padding: 10px;
|
|
.detailed_card_left_content {
|
|
width: 120px;
|
|
height: 24px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
line-height: 22px;
|
|
}
|
|
.detailed_card_left_time {
|
|
width: 119px;
|
|
height: 17px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 17px;
|
|
}
|
|
}
|
|
}
|
|
.detailed_card_right {
|
|
width: 120px;
|
|
height: 24px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 22px;
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.luckDrawDialog {
|
|
margin: 10px auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
img {
|
|
margin: 0 auto;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|