<template>
<div class="my">
<div class="main">
<!-- 转盘 -->
<img src="@images/my/1.png" style="width: 100%;height: 100%;" class="turntable" :style=" 'transform: rotate(' +deg+ 'deg); transition-duration: ' +time+'s ;' ">
<!-- 开始 -->
<img src="@images/my/2.png" class="start" @click="start">
</div>
<!-- 展示中奖信息 -->
<div v-show="modal" @click="closeModal">
<div v-if="showTitle">恭喜您获得</div>
<div>{{modalTxt}}</div>
</div>
</div>
</template>
<script>
export default {
//页面需要用到的数据
data() {
return {
showTitle: true,
modal: false, // 展示modal模块
modalTxt: '', // 奖品
time: 5, // 旋转所用时间
deg: 0, // 旋转角度
luck: false,
arr: [
{deg: 0,msg: '200金币',id: '1'},
{deg: 45,msg: '谢谢参与',id: '2'},
{deg: 90,msg: '500金币',id: '3'},
{deg: 135,msg: '谢谢参与',id: '4'},
{deg: 180,msg: '1000金币',id: '5'},
{deg: 225,msg: '谢谢参与',id: '6'},
{deg: 270,msg: '50金币',id: '7'},
{deg: 315,msg: '谢谢参与',id: '8'}
]
}
},
methods: {
//点击开始
start() {
if (this.luck) {
return
}
this.luck = true // 关锁
let index = 1; //中奖的索引位置,axios:接口请求获得中奖的数据信息
this.play(index)
},
//根据索引开始旋转
play(index) {
this.deg = 360 * 3 + this.arr[index].deg + 20
setTimeout(() => {
this.showRes(this.arr[index])
}, this.time * 1000);
},
// 展示结果
showRes(data) {
console.log(data); //获取的奖品数据
this.modal = true;
if (data.msg == '谢谢参与') {
//未中奖
this.showTitle = false;
this.modalTxt = data.msg;
} else {
//中奖
this.showTitle = true;
this.modalTxt = data.msg;
}
},
// 关闭后重新开始
closeModal() {
this.luck = false; //开锁
let s = this.time;
this.modal = false;
this.time = 0; //恢复旋转时间0
this.deg = 0; //恢复旋转角度0
setTimeout(() => {
this.time = s; //旋转所用时间5
}, 100)
}
}
}
</script>
<style scoped lang="less">
.my {
width: 100%;
height: 100vh;
background: pink;
.main {
position: relative;
width: 312px;
height: 312px;
margin: auto;
.turntable {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
transform: rotate(0deg);
z-index: 12;
transition-timing-function: ease;
transition-property: all;
}
.start {
width: 75px;
height: 114px;
position: absolute;
top: 90px;
right: 0;
left: 0;
margin: auto;
z-index: 99;
}
}
}
@keyframes rotateArc {
from {
transform: rotate(0deg);
}
to {
transform: rotate(3600deg);
}
}
</style>
vue幸运大转盘实现
猜你喜欢
转载自blog.csdn.net/qq_40745143/article/details/103808371
今日推荐
周排行