运用vue实现大转盘

转盘抽奖，抽奖完成后弹出获奖信息，这个大转盘旋转，指针不旋转

// 这个就不多说了
<div class="rotateBg" :style="{transform:rotate_angle,transition:rotate_transition}">
     <img v-bind:src="imgUrl">
</div>

data() {
      return {
        imgUrl: require('./assets/logo.png'),
        cat: 45, //总共8个扇形区域，每个区域约45度
        isAllowClick: true, //是否能够点击
        start_rotating_deg: 0, //初始旋转角度
        rotate_deg: 0, //将要旋转的角度
        rotate: 0, //实际偏移角度
        rotate_transition: "transform 3s ease-in-out"//初始化选中的过度属性控制
      }
    }

    methods: {
      startLottery() {
        this.rotating();
      },
      rotating() {
        if (!this.isAllowClick) return;
        this.isAllowClick = false;
        var rand_circle = 5; //默认多旋转5圈
		var randomDeg = Math.floor(Math.random() * 360); //获取0到359之间的随机度数
		var deg = this.start_rotating_deg + rand_circle * 360 + randomDeg - this.start_rotating_deg % 360;//将要旋转的度数
		this.start_rotating_deg = deg; //下一次旋转的开始度数		
		this.rotate_deg = "rotate(" + deg + "deg)";		
		this.rotate = deg % 360; //实际偏移的度数
        var that = this;
        setTimeout(function () {
          that.isAllowClick = true;
          if (that.rotate <= that.cat * 1) {
            alert( '恭喜您，获得100SZFM');
          } else if (that.rotate <= that.cat * 2) {
            alert('恭喜您，获得20SZFM');
          } else if (that.rotate <= that.cat * 3) {
            alert('恭喜您，获得200SZFM');
          } else if (that.rotate <= that.cat * 4) {
            alert('恭喜您，获得10SZFM');
          } else if (that.rotate <= that.cat * 5) {
            alert('恭喜您，获得30SZFM');
          } else if (that.rotate <= that.cat * 6) {
            alert('恭喜您，获得5SZFM');
          } else if (that.rotate <= that.cat * 7) {
            alert('恭喜您，获得300SZFM');
          } else if (that.rotate <= that.cat * 8) {
            alert( '恭喜您，获得50SZFM');
          }
        }, 3500);
      }
    }

其它的css代码就不贴出来了