VUE抽奖大转盘制作

人一闲就无聊 想做点小东西 以后需要的时候拎起来就用嘿嘿嘿 我做的转盘简单没啥难度，样式也是随便整整，里面的图片都是远程的

 

<template>
  <div class="turntable">
    <!-- 转盘组件 -->
    <div class="box">
      <div
        class="rotateBg"
        :style="{ transform: rotate_deg, transition: rotate_transition }"
      >
        <img v-bind:src="imgUrl" />
      </div>
      <!-- <div class="draw_btn" @click="startLottery()">
        抽奖
    </div> -->
      <img
        class="draw_btn"
        @click="startLottery()"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew13.photophoto.cn%2F20190309%2Fshouhuikatongzhuanpanzhizhenshiliangtumiankouyuansu-32461880_1.jpg&refer=http%3A%2F%2Fpicnew13.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637395950&t=9719a6c50b3ac3edce375da01305a956"
        alt=""
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2F20190924173006270.png%3Fx-oss-process%3Dimage%2Fwatermark%2Ctype_ZmFuZ3poZW5naGVpdGk%2Cshadow_10%2Ctext_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhbmR5X21p%2Csize_16%2Ccolor_FFFFFF%2Ct_70&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637378963&t=84d3d536bdcb8f6b7a858e403c6bde40",
      cat: 45, //总共8个扇形区域，每个区域约45度
      isAllowClick: true, //是否能够点击
      start_deg: 0, //初始旋转角度
      rotate_deg: 0, //将要旋转的角度
      rotate: 0, //实际偏移角度
      rotate_transition: "transform 3s ease-in-out", //初始化选中的过度属性控制
      times: null,
      priseId: 80,
    };
  },
  methods: {
     startLottery() {
      if (this.isAllowClick) {
        // this.rotaTime();
        // let req = await this.getPrise();
        // clearInterval(this.times);
        console.log("async this.start_deg", this.start_deg);
        this.rotating();
      }
    },
    getPrise() {
      // 获取奖品
      
    },
    rotating() {
      //   this.isAllowClick = false;
      let rand_circle = 5; //默认多旋转5圈
      let randomDeg = -170; //获取0到359之间的随机度数,可以指定度数对准某个产品如120度是30元,170度是20元现金
      let deg =
        this.start_deg +
        (360 * rand_circle + randomDeg) -
        (this.start_deg % 360); //将要旋转的度数
      this.start_deg = deg; //下一次旋转的开始度数
      this.rotate_deg = "rotate(" + deg + "deg)";
      this.rotate = deg % 360; //实际偏移的度数
      console.log("this.rotate", deg, this.rotate);
    },
    rotaTime() {
      let deg = 0;
      this.times = setInterval(() => {
        deg = deg + 60;
        this.rotate_deg = "rotate(" + deg + "deg)";
        this.start_deg = deg;
        console.log(" this.start_deg", this.start_deg);
      }, 100);
    },
  },
};
</script>
<style lang='scss' scoped>
.box {
  position: relative;
  width: 700px;
  margin: 0 auto;
}
.rotateBg {
  width: 100%;
  img {
    width: 100%;
  }
}

.draw_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 140px;
  width: 140px;
  // border-radius: 50%;
  text-align: center;
  line-height: 140px;
  font-size: 30px;
  // background-color: goldenrod;
}
</style>