<div class="wrapper_circle">
<div class="circle_prize">
<div
v-for="(item, index) in prizeList9"
:key="index"
:class="prizeselected == index ? 'selected' : ''"
>
<div v-if="index !== 4">
<div class="img_box">
<img :src="item.icon" alt="" srcset="" />
</div>
<div class="prize_level">{{ item.name1 }}</div>
<div class="prize_name">{{ item.name2 }}</div>
</div>
<div
v-else
@click="doPrize"
:class="win_flag ? 'selected' : ''"
></div>
</div>
</div>
<!-- <img src="../assets/images/index_bg.png" alt="" /> -->
</div>
.wrapper_circle {
width: 100vw;
height: 127vw;
margin: 0 auto;
background: url("../assets/images/index_bg.png") no-repeat center;
background-size: 105% 100%;
padding: 10vw 9vw;
.circle_prize {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
& > div {
width: 27vw;
height: 27vw;
background: url("../assets/images/block1.png") no-repeat;
background-size: 100% 100%;
margin-bottom: 0.5vw;
}
& > div {
& > div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.img_box {
width: 10vw;
height: 10vw;
}
.prize_level {
color: #850000;
font-size: 14px;
font-weight: bold;
}
.prize_name {
color: #da5400;
font-size: 12px;
}
}
& > div.selected {
background: url("../assets/images/block2.png") no-repeat;
background-size: 100% 100%;
}
& > div:nth-child(5) {
& > div {
background: url("../assets/images/draw_btn.png") no-repeat;
background-size: 100% 100%;
}
.selected {
background: url("../assets/images/draw_btn2.jpg") no-repeat;
background-size: 100% 100%;
}
}
}
img {
width: 100%;
position: relative;
}
}
prizeList: [
{
img: "xxx",
prizeLevel: "三等奖",
prizeName: "0.18元现金红包",
},
{
img: "xxx",
prizeLevel: "一等奖",
prizeName: "5000元金元宝",
},
{
img: "xxxx",
prizeLevel: "幸运奖",
prizeName: "京东优惠券",
},
{
img: "xxx",
prizeLevel: "",
prizeName: "更多好礼",
},
{},
{
img: "xxx",
prizeLevel: "三等奖",
prizeName: "0.58元现金红包",
},
{
img: "xxxx",
prizeLevel: "幸运奖",
prizeName: "京东优惠券",
},
{
img: "xxxx",
prizeLevel: "三等奖",
prizeName: "1.18元现金红包",
},
{
img: "xxxx",
prizeLevel: "二等奖",
prizeName: "华为运动手环",
},
],
prizeselected: undefined,
/*
* 页面中奖项的实际数组下标
* 0 1 2
* 3 5
* 6 7 8
* 所以得出转圈的执行顺序数组为 ↓
*/
order_arr: [0, 1, 2, 5, 8, 7, 6, 3],
// 抽奖状态，是否转完了
isTurnOver: true,
/*
* 数组的长度就是最多所转的圈数，最后一圈会转到中奖后的位置
* 数组里面的数字表示从一个奖品跳到另一个奖品所需要的时间
* 数字越小速度越快
* 想要修改圈数和速度的，更改数组个数和大小即可
*/
num_interval_arr: [100, 90, 80, 100, 200],
prizeList9: [],
// 中奖信息
prizeInfo: {},
//1.第一步：先处理获取到的奖项数组，给下标为4的添加空对象
this.prizeList.splice(4, 0, {});
//2.第二步：在抽奖的时候把抽奖得到的对象保存下来，并将对应的id保存
this.prizeInfo = res.data.data;
let prize_id = _this.prizeInfo.prizeId;
_this.lottery(prize_id);
//3.第三步：处理对应的动画效果
// 转圈
lottery(prize_id) {
let num_interval_arr = this.num_interval_arr;
let order_arr = this.order_arr;
// 旋转的总次数
let sum_rotate = num_interval_arr.length;
// 每一圈所需要的时间
let interval = 0;
num_interval_arr.forEach((delay, index) => {
setTimeout(() => {
this.rotateCircle(delay, index + 1, sum_rotate, prize_id, order_arr);
}, interval);
//因为每一圈转完所用的时间是不一样的，所以要做一个叠加操作
interval += delay * 8;
});
},
/*
* 封装旋转一圈的动画函数，最后一圈可能不满一圈
* delay:表示一个奖品跳到另一个奖品所需要的时间
* index:表示执行到第几圈
* sum_rotate：表示旋转的总圈数
* prize_id：中奖后的id号
* order_arr_pre：表示旋转这一圈的执行顺序
*/
rotateCircle(delay, index, sum_rotate, prize_id, order_arr_pre) {
// console.log(index)
let _this = this;
// 执行顺序数组
let order_arr = [];
// 如果转到最后以前，把数组截取到奖品项的位置
if (index == sum_rotate) {
let prizeIndex = _this.prizeList9.findIndex(
(_) => _.prizeId == prize_id
);
let orderIndex = this.order_arr.findIndex((_) => _ == prizeIndex);
order_arr = order_arr_pre.slice(0, orderIndex + 1);
} else {
order_arr = order_arr_pre;
}
for (let i = 0; i < order_arr.length; i++) {
setTimeout(() => {
_this.prizeselected = _this.order_arr[i];
// 如果转到最后一圈且转完了，并且是非重置圈，把抽奖状态改为已经转完了
if (index === sum_rotate && i === order_arr.length - 1) {
_this.isTurnOver = true;
// _this.win_flag = false;
setTimeout(() => {
// 出现奖项的弹窗
_this.winShow();
}, 500);
}
}, delay * i);
}
},
// 出现中奖的弹窗，这里根据对应的项目处理对应的逻辑
winShow() {
// 红包奖
if (this.prizeInfo.prizeType == 0) {
this.winFlag = true;
} else if (this.prizeInfo.prizeType == 1) {
//虚拟奖券
// result: "5||http://www.baidu.com||凉茶310ml*12罐 礼盒装植物饮料||（满12元使用）"
if (this.prizeInfo.result) {
this.prizeInfo.prizeName1 = this.prizeInfo.result.split("||")[0]; //奖券金额
this.prizeInfo.prizeName2 = this.prizeInfo.result.split("||")[1]; //奖券链接
this.prizeInfo.prizeName3 = this.prizeInfo.result.split("||")[2]; //奖券名称
this.prizeInfo.prizeName4 = this.prizeInfo.result.split("||")[3]; //奖券副标题
this.prizeInfo.prizeName5 = this.prizeInfo.result.split("||")[4]; //钱的符号
this.prizeInfo.prizeName6 = this.prizeInfo.result.split("||")[5]; //是否自动跳转 0不自动 1自动
this.prizeInfo.prizeName7 = this.prizeInfo.result.split("||")[6]; //第三方跳转链接
if (
this.prizeInfo.result &&
this.prizeInfo.result.split("||")[6] != 0
) {
sessionStorage.setItem("isRedirected", "true");
sessionStorage.setItem("tzUrl", this.prizeInfo.prizeName7);
}
}
this.winFlag3 = true;
// 1的情况下2秒后关闭弹框 自动跳转到第三方
if (this.prizeInfo.prizeName6 == 1) {
setTimeout(() => {
this.winFlag3 = false;
window.location.href = this.prizeInfo.prizeName2.replace(
/\&/g,
"&"
);
}, 2000);
}
} else if (this.prizeInfo.prizeType == 2) {
// 实物奖项
this.winFlag4 = true;
}
},
image.png
