vue大转盘

模板

<template>
  <div class="containerTpl">
    <div id="wheelBox" :style="{ backgroundImage:'url(' + (data.style?data.style['backgroundImage']:'') + ')'}" >
      <ul id="wheelList">
        <li v-for="(item,index) in prizeData" :key="index" :style="{webkitTransform: 'rotate(' + -item.angle + 'deg)'}" >
          <img class="prizeimg" :src="item.url" />
          <div class="text">{{item.prizeName}}</div>
          <div class="line"  :style="{webkitTransform: 'rotateZ(' + lineRotateZ + 'deg)'}" >
            <img :src="data.style?data.style['lineImage']:''" />
          </div>
        </li>
      </ul>
      <img :src="data.style?data.style['buttonImage']:''" @click="startPlay" class="turnBtn"/>
    </div>
  </div>
</template>

JS

<script>
  export default {
    props: {
      data:{
        type: Object,
        default: function() {
          return {
            "style": {
              "backgroundImage" : "http://121.43.178.103:8888/o2o-fs/view/group1/M00/02/DC/CgoKC1-inCaAEGH2AAJ6BTrnVQ8174.png", //static/images/wheel/bg.png
              "lineImage" : "http://121.43.178.103:8888/o2o-fs/view/group1/M00/02/DC/CgoKC1-inDyAXTbRAAAEl5gcLzg859.jpg", //static/images/wheel/line.jpg
              "buttonImage" : "http://121.43.178.103:8888/o2o-fs/view/group1/M00/02/DC/CgoKC1-inE6AOewJAACAoI3zQtM360.png" //static/images/wheel/btn.png
            },
          }
        }
      },
      prizeData:{
        type: Array,
        default: function() {
          return [{
            id:'1',
            url:'http://121.43.178.103:8888/o2o-fs/view/group1/M00/02/83/CgoKC18OtrGAT_9tAAB8205ZFbc406.png',
            prizeName:'华为P40'
          },{
            id:'2',
            url:'http://121.43.178.103:8888/o2o-fs/view/group1/M00/02/83/CgoKC18Ov6SABe_ZAAB5jPwBptk761.png',
            prizeName:' QQ音乐绿钻'
          },{
            id:'3',
            url:'http://121.43.178.103:8888/o2o-fs/view/group1/M00/01/DC/CgoKC15g71CAA2RCAAGzXim6Xvs777.jpg',
            prizeName:' 小米（MI）背包男女炫彩户外休闲双肩包笔记本电脑包旅行包 小米炫彩小背包'
          },{
            id:'4',
            url:'https://img20.360buyimg.com/img/jfs/t1/125575/34/1673/126479/5ebf42d8E329c7b8d/cbb51a996ded2506.png',
            prizeName:' 华为 智选ALCIDAE 高清wifi家用安防监控全景夜视AI智能摄像头（1080P全高清+360°全景巡航+红外夜视'
          },{
            id:'5',
            url:'http://121.43.178.103:8888/o2o-fs/view/group1/M00/02/DB/CgoKC1-hR32AGs8TAAIuJa7eDkE744.png',
            prizeName:'九阳电饭煲'
          },{
            id:'6',
            url:'http://121.43.178.103:8888/o2o-fs/view/group1/M00/02/DB/CgoKC1-hRweAB18xAAHS40irxdU819.png',
            prizeName:'Apple iPhone 12（128g）'
          }]
        }
      }
    },
    data(){
      return {
        lineRotateZ:0,
        pIndex: 0, // 中奖物品的下标
        rotNum:  0, // 旋转圈数基数
        time: 5000, // 旋转时间
        timer: null, // 定时器
        oTurntable: '', // 旋转圆盘背景图
        type: 0, // 0 图片 1 汉字
      }
    },   
    created() {
      this.prizeData = this.autoRotate(this.prizeData)
      console.log(this.prizeData);
    },
    //渲染完了
    mounted() {
      this.oTurntable = document.querySelector('#wheelList');
      // 过度中属性用时5s
      this.oTurntable.style.webkitTransition = 'transform ' + this.time / 1000 + 's ease';
    },
    methods:{
      //自动生成角度添加到数组上
      autoRotate(arr) {
        if (arr.length) {
          let len = arr.length;
          let base = 360 / len;
          let line = base /2
          this.lineRotateZ = line
          arr.forEach((item, index) => {
            // 指的是某个奖品区域的中间 : base/2
            item.angle = 360 - (line + index * base);
          });
        }
        return arr;
      },
      // 点击开始,请求接口抽奖
      async startPlay(){
        let prize = {
          prizeName: "华为P40",
          id: 1
        }
        this.startBtn(prize)
      },
      // 开始转动,通过奖项级别进行匹配:id 
      async startBtn(val) {
        const self = this
        self.prizeData.forEach((i,d)=>{
          if(i.id == val.id){
            self.pIndex = d
          }
        })
        // 拿到相应的角度调旋转接口
        self.startrotate(self.prizeData[self.pIndex].angle, () => {
          self.fulfillHandle(self.prizeData[self.pIndex]);
        });
      },

      //开始旋转 angle角度  complete回调成功函数
      startrotate(angle, complete) {
        // 相应的角度 + 满圈 只是在原角度多转了几圈 360 * 6
        let rotate = 2160 * (this.rotNum + 1) + angle;
        this.oTurntable.style.webkitTransform = 'rotate(' + rotate + 'deg)';
        clearTimeout(this.timer);
        // 设置5秒后停止旋转,处理接口返回的数据
        this.timer = setTimeout(() => {
          complete();
          this.rotNum++;
        }, this.time);
      },
      //得奖后的处理
      fulfillHandle(prize) {
        console.log(prize)
        this.$emit('result',prize)
      },
    }
  }
</script>

样式

<style lang="less" scoped>
  @width:300px;
  @height:300px;
  #wheelBox {
    width: 350px;
    height: 350px;
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    .turnBtn {
      position: absolute;
      width: 1.3rem;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-59%);
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: 100% auto;
      z-index: 3;
    }
    ul {
      background-color:#EEEEEE;
      border-radius: 50%;
      position: absolute;
      width: @width;
      height:  @height;
      z-index: 1;
      background-repeat: no-repeat;
      background-size: 100% auto;
      li {
        position: absolute;
        box-sizing: border-box;
        text-align: center;
        // padding-top: 0.5rem;
        color: #7e250d;
        font-size: 0.3rem;
        top: 0pc;
        left: 0px;
        width: 100%;
        height: 100%;
        line-height: 20px;
        transform-origin: 50% 50%;
        .prizeimg {
          position: absolute;
          top: 0.7rem;
          left: 50%;
          transform: translateX(-50%);
          width: 18%;
        }
        .text{
          width: 110px;
          text-align: center;
          margin: 5px auto  0 auto;
          color: #333;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .line{
          position: absolute;
          top: 0;
          display: inline-block;
          background-color: #ffffff;
          width: 2px;
          overflow: hidden;
          height: @width/2px;
          transform-origin: 50% 100%;
          transform: rotateZ(0deg);
        }
      }
    }
  }
</style>