<template>
<div>全部页面
<div>
<p v-if="prize != ''" id="prize">恭喜您抽中{
{prize}}!!!</p>
<div class="fankuan">
<div
v-for="(item,index) in list"
:key="index"
:class="[select == index && index != 8 ? 'prizeWin' : '', '']"
@click="luck(index)"
>
<img :src="item.img" alt="">
<!-- {
{item.name}} -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "whole",
data() {
return {
list: [
{
name: "手机",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091435-2.png",
},
{
name: "平板",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091731-3.png",
},
{
name: "电磁炉",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091943-5.png",
},
{
name: "洗衣机",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091823-4.png",
},
{
name: "衣柜",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091823-4.png",
},
{
name: "电脑",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091435-2.png",
},
{
name: "电视",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091731-3.png",
},
{
name: "冰箱",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091943-5.png",
},
{
name: "抽奖",
img:
"https://sucai.suoluomei.cn/sucai_zs/images/20200728091311-1.png",
},
],
status: true, //是否开始抽奖
select: -1, //页面对应抽奖下标
times: 3, //转到第几个奖品
time: 0, //当前的旋转次数
myVar: "",
prize: "", //奖品名称
num: 0, //圈速
};
},
created() {
},
activated() {
let that = this;
},
methods: {
luck(e) {
this.prize = "";
if (this.status == true) {
this.status = false;
this.myVar = setInterval(() => {
if (e == 8) {
this.time = this.time + 1;
this.select = this.select + 1;
console.log(this.num);
if (this.select == 8 && this.num != 3) {
this.select = 0;
this.num = this.num + 1;
this.time = 0;
}
if (this.num == 3) {
if (this.time == this.times) {
clearInterval(this.myVar);
this.status = true;
this.time = 0;
this.num = 0;
this.prize = this.list[this.select].name;
}
}
} else {
this.status = true;
}
}, 100);
} else {
this.$toast("抽奖中");
}
},
},
};
</script>
<style scoped lang="less">
#prize {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 200px;
display: block;
width: 640px;
height: 80px;
background-color: rgb(255, 255, 255);
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px 4px;
letter-spacing: 4px;
text-align: center;
line-height: 80px;
}
.fankuan {
width: 660px;
height: 660px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
}
.fankuan > div {
float: left;
width: 200px;
height: 200px;
margin: 10px;
color: white;
text-align: center;
line-height: 200px;
}
.fankuan div img {
width: 95%;
height: 95%;
padding: 2.5%;
border-radius: 20px;
}
.fankuan > div:nth-of-type(4) {
position: relative;
left: 440px;
}
.fankuan > div:nth-of-type(5) {
position: relative;
left: 220px;
top: 220px;
}
.fankuan > div:nth-of-type(6) {
position: relative;
left: -220px;
top: 220px;
}
.fankuan > div:nth-of-type(8) {
position: relative;
left: -220px;
top: -220px;
}
.fankuan > div:nth-of-type(9) {
cursor: pointer;
// background: rgb(255, 148, 61);
position: relative;
left: -220px;
top: -220px;
}
.prizeWin {
background: aqua !important;
border-radius: 20px;
}
</style>
Vue的九宫格抽奖
猜你喜欢
转载自blog.csdn.net/hql1024/article/details/107468659
今日推荐
周排行