css 转盘抽奖（兼容微信小程序）

<template>
  <div class="turntable" v-wechat-title="$route.meta.title">
    <!-- 转盘包裹 -->
    <div class="rotate">
      <!-- 转盘图片 -->
      <image class="dish" src="../../static/secondYear/dial.png" :style="{ width: w, height: h, transform: rotate_deg, transition: rotate_transition }" />
      <!-- 指针图片 -->
      <image class="pointer" src="../../static/secondYear/click.png" @click="start" :style="{ width: clickW, height: clickH }"/>
    </div>
    <div class="times">剩余抽奖次数 {{ LuckyClick }}</div>
  </div>
</template>

<script>
export default {
  name: "turntable",
  data() {
    return {
      LuckyClick: 3,
      circleList: [], //原点设置
      colorCircleFirst: "#FE4D32", //圆点颜色
      colorCircleSecond: "#fff", //圆点颜色

      cat: 45, //总共8个扇形区域，每个区域约45度
      isAllowClick: true, //是否能够点击
      rotate_deg: 0, //指针旋转的角度
      rotate_transition: "transform 3s ease-in-out", //初始化选中的过度属性控制
      w: "710rpx", // 转盘图片的宽
      h: "710rpx",  // 转盘图片的高
      clickW: '162rpx',
      clickH: '162rpx',
      winningIndex: 0, // 获奖的index
      lastDeg: 0, // 最后一次旋转的度数
      isFistClick: true, // 是否是第一次点击
    };
  },

  components: {
    // Calendar: Calendar
  },
  created() {
    // this.showcircleList();
  },

  watch: {},

  mounted() { },

  methods: {
    start() {
      if (this.LuckyClick == 0) {
        return uni.showToast({
          title: "您的抽奖次数已使用完毕，请稍后再试",
          icon: "none",
          duration: 2000
        });
      } else {
        this.rotating();
      }
    },

    rotating() {
      const that = this
      if (!this.isAllowClick) return;
      this.isAllowClick = false;
      this.rotate_transition = "transform 3s ease-in-out";
      this.LuckyClick--;
      var rand_circle = 5; //默认多旋转5圈
      // this.winningIndex = this.getAward(); //设置了概率的
      this.winningIndex = 8;

      console.log(this.winningIndex);
      const randomDeg = this.winningIndex * 45 - 20; //当前下标对应的角度    45是总共8个扇形区域，每个区域约45度
        let deg = 0
        if(this.isFistClick) {
          deg = rand_circle * 360 + randomDeg
        } else {
          deg = rand_circle * 360 + randomDeg + this.lastDeg
        }
        console.log(this.isFistClick, deg, '22222')
        this.rotate_deg = "rotate(" + deg + "deg)"
        this.isFistClick = false
        this.lastDeg = deg + Math.abs(360 - randomDeg)

      setTimeout(function () {
        that.isAllowClick = true;
        that.rotate_transition = "";

        if (this.winningIndex == 0) {
          console.log("恭喜您，IphoneX");
        } else if (this.winningIndex == 1) {
          console.log("恭喜您，获得10元现金");
        } else if (this.winningIndex == 2) {
          console.log("很遗憾，重在参与");
        } else if (this.winningIndex == 3) {
          console.log("恭喜您，获得30元现金");
        } else if (this.winningIndex == 4) {
          console.log("恭喜您，获得20元现金");
        } else if (this.winningIndex == 5) {
          console.log("恭喜您，获得50元现金");
        } else if (this.winningIndex == 6) {
          console.log("恭喜您，获得5元现金");
        } else if (this.winningIndex == 7) {
          console.log("恭喜您，获得100元现金");
        }
      }, 2000);
    },

    //设置概率
    getAward() {
      const winIndex = 2;
      return winIndex;
    }
  },

};
</script>

<style  scoped lang="scss">
.turntable {
  .rotate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .pointer {
      position: absolute;
      top: 44%;
      left: 49%;
      transform: translate(-45%, -50%);
    }
  }
  .times {
    font-size: 26rpx;
    color: #FFE3B4;
    position: absolute;
    bottom: 7rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}

</style>