<template>
<div class="overall">
<div class="zp-box">
<div class="panzi" :style="{transition:'transform ' + time / 1000 + 's ease',transform:'rotate(' + rotate + 'deg)'}">
<div class="bck-box" :style="` transform: rotate(${-90+180/list.length}deg)`">
<div
class="bck"
v-for="(i,index) in list"
:key="index"
:style="`transform: rotate(${-index*360/list.length}deg) skew(${-90 + 360/list.length}deg);`"
></div>
</div>
<div
class="jiang"
:style="`transform: rotate(${-index*360/list.length}deg) translateY(-5.5rem);`"
v-for="(i,index) in list"
:key="index"
>
<span class="title">{{i.title}}</span>
<div class="img">
img{{index}}
<span class="title">{{i.title}}</span>
</div>
</div>
</div>
</div>
<div>
<button @click="onStart">start</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
winner: 2, //指定获奖下标 specified为true时生效
specified: false, //是否指定获奖结果，false时为随机
loading: false, //抽奖执行状态，防止用户多次点击
panziElement: null,
time: 5000, // 旋转时间
rotate:0,
pIndex:0, // 中奖物品的下标
rotNum:0, // 旋转圈数基数
list: [
{
title: '特等奖'
},
{
title: '一等奖'
},
{
title: '二等奖'
},
{
title: '三等奖'
},
{
title: '四等奖'
},
{
title: '五等奖'
},
{
title: '六等奖'
},
{
title: '七等奖'
},
{
title: '七等奖'
},
{
title: '七等奖'
},
{
title: '七等奖'
},
{
title: '七等奖'
}
]
}
},
mounted() {
//通过获取奖品个数，来改变css样式中每个奖品动画的旋转角度
// var(--nums) 实现css动画根据奖品个数，动态改变
let dataList = this.list||[];
dataList.forEach((item,index)=>{
let jiaodu = 360/dataList.length;
item.angle = jiaodu*index
});
this.list = dataList;
let root = document.querySelector(':root')
root.style.setProperty('--nums', this.list.length)
},
methods: {
onStart(){
this.startBtn(this.list[1].angle);
},
// 开始转动,通过奖项级别进行匹配:id
startBtn(val) {
const self = this;
// 拿到相应的角度调旋转接口
self.startrotate(val, () => {
self.fulfillHandle();
});
},
//开始旋转 angle角度 complete回调成功函数
startrotate(angle, complete) {
// 相应的角度 + 满圈 只是在原角度多转了几圈 360 * 6
this.rotate = 2160 * (this.rotNum + 1) - angle;
clearTimeout(this.timer);
// 设置5秒后停止旋转,处理接口返回的数据
this.timer = setTimeout(() => {
complete();
clearTimeout(this.timer);
this.rotNum++;
}, this.time);
},
//得奖后的处理
fulfillHandle() {
alert(123123)
},
}
}
</script>
<style lang="scss" scoped>
$zp_size: 18rem; //转盘尺寸
$btn_size: 7rem; //抽奖按钮尺寸
$time: 3s; //转动多少秒后停下的时间
.zp-box {
user-select: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: $zp_size;
height: $zp_size;
/* 盘子样式 */
.panzi {
overflow: hidden;
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
border: 10px solid #f74e4e;
box-sizing: border-box;
/* 每个奖项的样式 */
.jiang {
position: absolute;
.title {
font-weight: bold;
font-size: 18px;
color: #3b3b3b;
}
.img {
margin: 0.5rem auto;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
border: 2px dashed #f87373;
overflow: hidden;
color: white;
img {
height: 100%;
}
}
}
}
.bck-box {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
// background: blue;
border-radius: 50%;
/* 转盘扇形背景 */
.bck {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
top: -50%;
left: 50%;
transform-origin: 0% 100%;
// transform:skew(30deg);
}
/* 转盘背景色 */
.bck:nth-child(2n) {
background: #fffcb9;
}
.bck:nth-child(2n + 1) {
background: #f8a281;
box-shadow: 0 0 5px red;
}
}
}
</style>
