基于vue实现九宫格大转盘抽奖
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、基于vue实现九宫格大转盘抽奖二、使用步骤基于vue实现九宫格大转盘抽奖总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、基于vue实现九宫格大转盘抽奖
·
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
基于vue实现九宫格大转盘抽奖
提示：以下是本篇文章正文内容，下面案例可供参考
一、基于vue实现九宫格大转盘抽奖
示例：为活动而写的一小段代码。
二、使用步骤
1.基于vue实现九宫格大转盘抽奖
代码如下（示例）：
<template>
<div style="background: #2C9AFC;height: 100vh;width: 100vw;overflow: hidden;text-align: center;">
<div style="font-size: 22px;padding-top: 70px;color: #fff;">
<span>javascript 实现九宫格抽奖</span>
</div>
<!-- 抽奖 -->
<div class="gameBox">
<div class="bg1"></div>
<div class="bg2" v-show="lampShow"></div>
<div class="start" @click="move">
<!-- <p>（{{number_of_draws}}次）</p> -->
<span>开始抽奖</span>
</div>
<ul>
<li v-for="(item,i) in list" :key="i" :class="['item' + (i+1), {'active': index == i}]">
<div class="img1">
<img :src="item.image" alt />
</div>
<p>{{item.prize_name}}</p>
</li>
</ul>
</div>
<!-- 弹出信息 -->
<!-- <div>
<van-popup v-model="show" :style="{ height: '50%',width:'60%',}" style="border-radius: 9px;border:2px solid rgb(44,154,252);">
<div>
<div style="margin: auto;">
<span>恭喜中奖</span>
</div>
<div style="width: 80px;margin: auto;">
<img :src="prize_data.image" style="width: 100%;border-radius: 9px;border:2px solid rgb(44,154,252);"/>
</div>
<span>{{prize_data.id}}</span>
</div>
</van-popup>
</div> -->
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
list: [], //奖品列表
index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
count: 8, // 总共有多少个位置
times: 0, // 转动跑格子次数,
cycle: 60, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
speed: 200, // 初始转动速度
lampShow: false, //开始抽奖，灯光闪烁
timer: 0, // 转动定时器
lamp: 0, // 灯光定时器
prize: 0, // 中奖位置，接口返回
number_of_draws: 0, //限制每天抽奖次数，接口返回
prize_data: {
//中奖信息
id: Number, //奖品ID
name: "", //奖品名称
number: Number, //奖品数量
image: "", //奖品图片
type: Number // 奖品类型
},
show: false,//vant弹出层
};
},
mounted() {
//获取奖品列表
// this.axios.post("/api/luckdraw/prizeList").then(res => {
// if (res.status == 1) {
this.list = [
{
id: 1,
number: 1,
prize_name: "案例",
image:require('./img/222.png')
},
{
id: 2,
number: 2,
prize_name: "lele",
image:require('./img/222.png')
},
{
id: 3,
number: 3,
prize_name: "lele",
image:require('./img/222.png')
},
{
id: 4,
number: 4,
prize_name: "lele",
image:require('./img/222.png')
},
{
id: 5,
number: 5,
prize_name: "lele",
image:require('./img/222.png')
},
{
id: 6,
number: 6,
prize_name: "lele",
image:require('./img/222.png')
},
{
id: 7,
number: 7,
prize_name: "lele",
image:require('./img/222.png')
},
{
id: 8,
number: 8,
prize_name: "lele",
image:require('./img/222.png')
}
]; // 奖品列表数据
this.number_of_draws = 1; // 该用户剩余抽奖次数
// }
// });
},
methods: {
//点击开始抽奖
move() {
if (this.number_of_draws == 0) {
this.$toast("今日抽奖次数已用完,明天再来吧");
} else if (this.times != 0) {
this.$toast("正在抽奖中，请勿重复点击");
} else {
// this.axios.post(baseURL + "/api/luckdraw/doDraw").then(res => {
// if (res.status == 1) {
// this.number_of_draws--; //抽奖开始，次数-1
this.speed = 150; //每次抽奖速度初始化为200
this.prize_data = {
id: 1,
name: "案例",
number: 1,
image: require('./img/222.png'),
type: 1
}
this.prize = 5 - 1
// this.prize_data = res.data.yes; //已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
// this.prize = res.data.yes.id - 1; //中奖位置赋值，跑马灯最终停留位置，这里实际位置需要-1
this.startRoll(); //执行抽奖
this.lamp = setInterval(() => {
//灯光闪烁开启
this.lampShow = !this.lampShow;
}, 100);
// }
// });
}
},
// 开始转动
startRoll() {
this.times += 1; // 转动次数
this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
this.usePrize();
},
// 每一次转动
oneRoll() {
let index = this.index; // 当前转动到哪个位置
const count = 8; // 总共有多少个位置
index += 1;
if (index > count - 1) {
index = 0;
}
this.index = index;
},
usePrize() {
// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
if (this.times > this.cycle + 10 && this.prize === this.index) {
clearTimeout(this.timer); // 清除转动定时器
clearTimeout(this.lamp); // 清除灯光定时器
this.lampShow = false; // 白色灯隐藏
this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
if (this.prize_data.type == 0) {
console.log("未中奖，谢谢参与"); //未中奖提示弹出，
} else {
console.log("中奖啦"); //中奖弹出提示
this.show=true
}
} else {
if (this.times < this.cycle - 20) {
this.speed -= 4; // 加快转动速度
} else {
this.speed += 10; // 抽奖即将结束，放慢转动速度
}
this.timer = setTimeout(this.startRoll, this.speed); //开始转动
}
}
}
};
</script>
<style scoped lang="less">
.gameBox {
display: flex;
align-items: center;
justify-content: center;
width: 326px;
height: 326px;
margin: 150px auto 0;
border-radius: 8px;
// background: red no-repeat left top;
background-size: 326px 326px;
position: relative;
.bg1 {
position: absolute;
left: 13.5px;
top: 12px;
width: 300px;
height: 300px;
background: #2A9AFC;
background-size: 317px 317px;
border: 1vw solid #97D2FC;
border-radius: 9px;
}
.bg2 {
position: absolute;
left: 13.5px;
top: 12px;
width: 300px;
height: 300px;
background: #2A9AFC;
background-size: 317px 317px;
border: 1vw solid #97D2FC;
border-radius: 9px;
}
.start {
position: relative;
// padding-top: 70px;
width: 86px;
height: 86px;
background: #FD3A58;
background-size: 86px 86px;
border-radius: 9px;
text-align: center;
line-height: 86px;
p {
text-align: center;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
span {
text-align: center;
font-size: 16px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
}
ul {
li {
position: absolute;
width: 86px;
height: 86px;
background: rgba(255, 255, 255, 1);
border: 2px solid #97D2FC;
border-radius: 8px;
.img1 {
margin: 15px auto 3px;
width: 35px;
height: 35px;
margin: 0;
width: 83px;
img {
width: 100%;
height: auto;
border-radius: 7px;
}
}
p {
text-align: center;
font-size: 13px;
font-weight: 500;
color: rgba(153, 153, 153, 1);
color: #fff;
margin-top: 20px;
}
}
.item1 {
left: 25px;
top: 25px;
}
.item2 {
left: 120px;
top: 25px;
}
.item3 {
left: 215px;
top: 25px;
}
.item4 {
left: 215px;
top: 120px;
}
.item5 {
left: 215px;
top: 215px;
}
.item6 {
left: 120px;
top: 215px;
}
.item7 {
left: 25px;
top: 215px;
}
.item8 {
left: 25px;
top: 120px;
}
.active {
background: #97D2FC;
.img1 {
margin: 15px auto 3px;
width: 35px;
height: 35px;
margin: 0;
width: 83px;
opacity: 0.6;
img {
width: 100%;
height: auto;
}
}
}
}
}
</style>
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了基于vue实现九宫格大转盘抽奖
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献3条内容
所有评论(0)