vue手写转盘抽奖

目前抽奖最常见的两种：九宫格抽奖 和 转盘抽奖，但转盘抽奖的大多是采用的是将做好的图放在页面上，如果需要变动奖池里面的奖品或数量，就会让设计师重新出一张图片。

分享我自己在自定义转盘抽奖的样式布局思路

<template>
  <div class="main">
    <Top massage="转盘抽奖" />
    <div class="lottery">
      <div
        class="lottery-wheel"
        :style="{
          '-webkit-transition': wheelTransition,
          '-webkit-transform': rotateAngle,
        }"
      >
        <ul class="prize-list">
          <li
            class="prize-item"
            v-for="(item, index) in prizeList"
            :key="index"
          >
            <img :src="item.prize_pic" alt />
          </li>
        </ul>
      </div>
      <div class="lotterydraw">
        <img
          @click="lotterydraw"
          src="https://rzlhhr.oss-cn-beijing.aliyuncs.com/20220622/45526aa2-8c45-4edf-8582-d807f33f070c.png"
          alt="抽奖按钮"
        />
      </div>
    </div>
    <!-- 中奖结果 -->
    <div class="lotteryname" v-if="lotteryshow">恭喜你中奖{{ lotteryname }}</div>
  </div>
</template>

<script>
import Top from "../../components/Top.vue";
export default {
  components: {
    Top,
  },
  data() {
    return {
      LuckyIndex: 0, // 回馈下标
      wheelStartRotateDegree: 0, // 转盘初始化角度
      wheelTransition: "transform  5s ease-in-out", // 初始化转盘
      rotateAngle: 0, // 转盘要转的角度
      rotating: false, //转盘完成在次开始判断
      prizeList: [
        {
          prize_pic:
            "https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/b946efd8-84a9-4132-9d9a-2e8519b83768.png",
          prize_key: "1",
        },
        {
          prize_pic:
            "https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/0c6b4386-62c7-4220-8b13-845c5172f038.png",
          prize_key: "2",
        },
        {
          prize_pic:
            "https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/1dcb8b1f-9fe3-4571-bf06-67f8fc686ed3.png",
          prize_key: "3",
        },
        {
          prize_pic:
            "https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/62b883ff-f414-4181-b509-15797e8940ec.png",
          prize_key: "4",
        },
        {
          prize_pic:
            "https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/0658113a-c36d-4c51-8cf7-b54bde999d68.png",
          prize_key: "5",
        },
        {
          prize_pic:
            "https://rzlhhr.oss-cn-beijing.aliyuncs.com/20240808/1d23e14e-2bd7-4db2-a4fe-eef27e24b102.png",
          prize_key: "6",
        },
      ], //转盘数据
      lotteryname: "", //中奖奖品名称
      lotteryshow: false,
    };
  },
  methods: {
    lotterydraw() {
      if (!this.rotating) {
        //这我设置的是15元,自己可以改参数，这里也可以调后端接口，中奖概率后端来配置，返回前端中奖结果，然后开始转盘动画
        let prize_key = "4"; //中奖标识
        this.lotteryname = "15元"; //中奖奖品名称
        // 转盘方法
        this.gameRotate(prize_key, this.prizeList);
      }
    },
    // 转盘逻辑
    gameRotate(prize_key, prizeList) {
      this.rotating = true;
      const len = prizeList.length;
      //这里循环判断转盘数据的prize_key和中奖的prize_key匹配
      for (let i = 0; i < len; i++) {
        if (prizeList[i].prize_key === prize_key) {
          this.LuckyIndex = i;
        }
      }
      const result = [360, 300, 240, 180, 120, 60];
      let FIXED_TIMES = 5;
      const addDegree = (FIXED_TIMES + 1) * 360;
      let rotateAngleNum =
        this.wheelStartRotateDegree +
        addDegree +
        result[this.LuckyIndex] -
        (this.wheelStartRotateDegree % 360);
      this.wheelStartRotateDegree = rotateAngleNum; // 转盘初始化角度
      this.rotateAngle = `rotate(${rotateAngleNum}deg)`; //转盘要转的角度
      setTimeout(() => {
        this.gameover();
      }, FIXED_TIMES * 1000 + 600); // 延时，保证转盘转完
    },
    // 转盘转完可再次转
    gameover() {
      this.rotating = false;
    //   中奖奖品
      this.lotteryshow = true;
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang='scss' scoped>
//转盘
.lottery {
  width: 100%;
  position: absolute;
  top: 15vw;
  z-index: 1;
}
.lottery-wheel {
  width: 95vw;
  height: 95vw;
  margin: auto;
  background: url(https://rzlhhr.oss-cn-beijing.aliyuncs.com/20220622/b6427910-e086-4df1-9537-8700108e2690.png)
    0 0 no-repeat;
  background-size: 95vw 95vw;
  .prize-list {
    position: relative;
    width: 100%;
    height: 100%;
    .prize-item {
      display: flex;
      align-items: center;
      flex-direction: column;
      img {
        width: 15vw;
        height: 15vw;
      }
    }
    // 奖品样式
    .prize-item:nth-child(1) {
      position: absolute;
      top: 18%;
      left: 42%;
      transform: rotate(0);
    }
    .prize-item:nth-child(2) {
      position: absolute;
      top: 31%;
      left: 62%;
      transform: rotate(60deg);
    }
    .prize-item:nth-child(3) {
      position: absolute;
      top: 55%;
      left: 63%;
      transform: rotate(120deg);
    }
    .prize-item:nth-child(4) {
      position: absolute;
      top: 64%;
      left: 42%;
      transform: rotate(180deg);
    }
    .prize-item:nth-child(5) {
      position: absolute;
      top: 55%;
      left: 21%;
      transform: rotate(240deg);
    }
    .prize-item:nth-child(6) {
      position: absolute;
      top: 31%;
      left: 22%;
      transform: rotate(300deg);
    }
  }
}
.lotterydraw {
  position: absolute;
  left: 50%;
  top: 48%;
  margin-top: -10vw;
  margin-left: -10vw;
  z-index: 5;
  img {
    width: 20vw;
  }
}
.lotteryname{
    position: absolute;
    top: 120vw;
    width: 100%;
    text-align: center;
}
</style>

整个转盘抽奖布局分为两部分：底部转盘背景图 和 奖品内容布局

转盘效果

 

转盘效果