vue2 封装的一个抽奖组件

年底了，公司开始各种优惠券抽取活动，在 H5 页面实现一个点击抽奖活动，中奖是后端控制，根据接口返回的奖项来停止转动；

效果图

代码

1、父组件

<template>
  <div class="about">
    <luck-draw :awards="awards" :award="award" :speed.sync="speed" :diff="diff"></luck-draw>
  </div>
</template>
<script type="text/javascript">
	import luckDraw from './luckDraw'
	export default {
		components:{ luckDraw  },
		data() {
			return {
				awards: [
	        	// 名字与ID
	        	{ id: 1, name: '1' },
	        	{ id: 2, name: '2' },
	        	{ id: 3, name: '3' },
	        	{ id: 4, name: '4' },
	        	{ id: 5, name: '5' },
	        	{ id: 6, name: '6' },
	        	{ id: 7, name: '7' },
	        	{ id: 8, name: '8' },
	        	{ id: 9, name: '9' }
		      ],
		      //中奖项
		      award:{
		      	id:2
		      },
		      //跳动速度
		      speed:300,
		      //衰减值
		      diff:12
			}
		}
	}
</script>

2、子组件

<template>
  <div class="container">
	  <div class="rotary_table">
	    <div v-for="(item, index) in awards" :key="index" class="award">
	      {{item.name}}
	      <div class="mask" v-if="index == current"></div>
	    </div>
	  </div>
	  <p class="start-btn" @click="start">点击抽奖</p>
  </div>
</template>
<script>
export default {
  name: "luckDraw",
  props: {
  	awards: {
  		type: Array
  	},
  	award: {
  		type: Object
  	},
  	speed: {
  		type: Number,
  		default: 300
  	},
  	diff: {
  		type: Number,
  		default: 15
  	}
  },
  data() {
    return {
      speeds:200,
      current: 0, // 当前索引值
      time: 0, // 当前时间戳
      timer: null, // 定时器
    };
  },
  mounted(){
  	this.speeds = this.speed;
  },
  methods: {
    // 开始抽奖
    start() {
      // 开始抽奖
      this.move();
      this.time = Date.now();
    },
    // 开始转动
    move() {
      this.timer = setTimeout(() => {
        this.current++;
        if (this.current > this.awards.length-1) {
          this.current = 0;
        }
        // 若抽中的奖品id存在，则开始减速转动
        if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
          this.speeds += this.diff; // 转动减速
          // 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来
          if ((Date.now() - this.time) / 1000 > 3 && this.award.id == this.awards[this.current].id) {
            clearTimeout(this.timer);
            setTimeout(() => {
              //转盘结束之后可以调取父组件的方法，弹出获奖弹窗
              console.log(`恭喜中奖${this.award.id}元`);
            }, 0);
            return;
          }
        } else {
          // 若抽中的奖品不存在，则加速转动
          this.speeds -= this.diff;
        }
        this.move();
      }, this.speeds);
    }
  }
};
</script>
<style scoped>
.container{
	width: 100%;
	height: 100%;
}
.rotary_table{
	display: flex;
	flex-wrap: wrap;
}
.award{
	border: 1px solid #ccc;
	margin-bottom: 10px;
	margin-right: 2vw;
  position: relative;
  border-radius: 10px;
  width: 30vw;
	height: 49px;
	line-height: 49px;
	text-align: center;
}
.award:nth-of-type(3n){
	margin-right: 0;
}
.mask{
	width: 30vw;
	height: 49px;
	position: absolute;
	border-radius: 10px;
	top: 0;
	left: 0;
	background-color: #fff0bd;
	opacity: 0.6;
}
.start-btn {
	width: 100%;
	height: 49px;
	text-align: center;
}
</style>