vue.js 模拟九宫格抽奖效果

<template>
	<div class="box">
		<div class="draw-box">
			<div class="draw-item" v-for="(item,index) in 8" :key="index" :class="['draw'+index,{'active':index===idx}]">奖品{{index+1}}</div>
			<div class="draw-start" @click="start">开始</div>
		</div>
		<p v-if="show">恭喜你获得:{{prizesIdx+1}}号奖品</p>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				show:false,
				idx:0, //下标
				speed:200, //速度
				tiems:0, //次数
				cycle:30, //基本圈数
				prizesIdx:0 ,//中奖位置
				drawList:[], //奖品数组
			}
		},
		methods:{
			start(){
				if(this.speed===200){
					this.show=true
					this.move()
				}
			},
			move(){
				this.prizesIdx = Math.floor((Math.random() * 8))
				window.timer= setTimeout(()=>{
					this.idx++
					this.tiems++
					if(this.idx>7){
						this.idx=0
					}
					if(this.tiems>this.cycle){
						this.speed+=35
					}
					if(this.tiems>this.cycle+5 && this.prizesIdx==this.idx){
						clearTimeout(window.timer)
						this.idx = this.prizesIdx
						this.tiems=0
						this.speed=200
						setTimeout(()=>{
							alert('恭喜你获得'+(this.prizesIdx+1)+'号奖品')
						})
						return;
					}else{
						this.speed-=5
					}
					this.move()
				},this.speed)
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="less">
	.box{
		text-align: center;
	}
	.draw-box{
		width: 340px;
		height: 340px;
		margin: 50px auto;
		background-color: #cccc;
		position: relative;
		border-radius: 5px;
		.draw-start,.draw-item{
			position: absolute;
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			cursor: pointer;
			box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
			// transform: rotate(45deg);
			border-radius: 5px;
		}
		.draw-start{
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%); //rotate(45deg)
			background-color: #FF8050;
		}
		.draw-item{
			background-color: #7FFFD4;
			float: left;
			&.active{
				background-color: #B9860C;
			}
			&.draw0{
				left: 10px;
				top: 10px;
			}
			&.draw1{
				left: 120px;
				top: 10px;
			}
			&.draw2{
				left: 230px;
				top: 10px;
			}
			&.draw3{
				left: 230px;
				top: 120px;
				
			}
			&.draw4{
				left: 230px;
				top: 230px;
			}
			&.draw5{
				left: 120px;
				top: 230px;
			}
			&.draw6{
			
				left: 10px;
				top: 230px;
			}
			&.draw7{
				left: 10px;
				top: 120px;
				
			}
			
			
		}
	}
</style>