嘿嘿嘿嘿 马上就有新任务了 提前封装一个转盘抽奖组件

<template>
  <div class='container'>
        <div class="wheel">
            <!-- 背景图 -->
          <img class="bj-img" src="../assests/draw_swipebox.png" alt="">
          <div class="wheel-pan">
              <!-- wheel-bg 就是要转动的转盘 我的是直接一张大图 没有分开 要是分开一张张图就是下面的 prize-item和prize-icon-->
            <div class="wheel-bg" :class="{freeze: freeze}" :style="`transform: rotate(${wheelDeg}deg)`">
                <div class="prize-list">
                    <div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
                        <div class="prize-item" :style="`transform: rotate(${(360/ prizeList.length) * index}deg)`">
                            <!-- <div class="prize-name"></div> -->
                            <div class="prize-icon">
                              <!-- <span v-show="!item.icon">{{ item.name }}</span> -->
                              <!-- <img v-show="!item.name" :src="item.icon"> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //   指针 -->
            <div class="wheel-pointer" @click="onClickRotate"></div>
          </div>
        </div>
  </div>
</template>

<script type="text/ecmascript-6" scoped>
export default {
  name: 'index',
  data() {
    return {
      active: '',
      freeze: false,
      clickType: true,
      wheelDeg: 0,
      prizeNumber: 10,
      prizeListOrigin: [],
      prizeList: [
        {
          name: '大片点播劵',
          id:1
        },
        {
         name: 'VR眼镜',
          id:2
        },
        {
          name: '50元联通话费',
          id:3
        },
        {
           name: '1个月会员包',
          id:4
        },
         {
          name: '爱奇艺电视果',
          id:5
        },
         {
          name: '2个月会员包',
          id:6
        },
        //  {
        //   name: '50元联通话费',
        //   id:3
        // },
        //  {
        //   name: '50元联通话费',
        //   id:3
        // },
      ]
    };
  },
  methods: {
    post(){


    },
    onClickRotate() {
      const {wheelDeg, prizeList} = this;
      const random = Math.round(Math.random() * (prizeList.length)-1);
      this.wheelDeg = wheelDeg - wheelDeg % 360 + prizeList.length * 360 + (360 - 360 / prizeList.length * random)+20;
      console.log('prize',prizeList[random].name)
    }
  },
  watch: {
    prizeNumber() {
      this.freeze = true
      this.wheelDeg = 0



      setTimeout(() => {
        this.freeze = false
      }, 0)
    }
  },
  created(){
  
  }
}
</script>



<style  lang='scss' scoped>
.container{
   100%;
  background: #F7F7F7;
  position: relative;
    .banner-bj{
      display: block;
       100%;
    }
    .activity{
      position: absolute;
      top: 0;
      left: 0;
       100%;
      height: auto;
      }
      .title-img{
         5.64px;
        height: 2.04px;
        display: block;
        margin: .5px auto 0;
      }
      .wheel{
         600px;
        height: 650px;
        display:flex;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        position: relative;
        .bj-img{
          display: block;
           100%;
        }
        .wheel-pan{
          position: absolute;
           460px;
          height: 460px;
          left: 89px;
          top: 89px;
          overflow: hidden;
        }
      }
   




}
.wheel-pointer {
   120px;
  height: 140px;
  border-radius: 1000px;
  // background: yellow;
//   指针
  background-image: url("../assests/fast_draw.png");
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 60px;
  z-index: 8;
}
.wheel-bg {
   100%;
  height: 100%;
  border-radius: 1000px;
  overflow: hidden;
  transition: transform 3.5s ease;
//   
  background-image: url("../assests/draw_jp.png");
  background-size: 100% 100%;
}



.freeze {
  transition: none;
  // background: red;
}



.prize-list {
     100%;
    height: 100%;
    position: relative;
    text-align: center;
}



.prize-item-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
     2.7px;
    height: 2.7px;
}



.prize-item {
     100%;
    height: 100%;
    transform-origin: bottom;
}



.prize-name {
    padding: .2px 0;
}



.prize-icon {
  img{
     1px;
    height: 1px;
  }
  span{
    display: block;
     .3px;  
    margin: 0 auto;  
    line-height: .3px;
    font-size: .28px;
    color: #02464c;
    font-weight: bold;
    text-align: center;
  }
}
.activ{
   7px;
  display: block;
  margin: 0 auto;
  background: rgba(255, 150, 166, 0.5);
  padding: .4px .4px .4px .46px;
  position: relative;
  div{
    text-align: center;
    // background-image: url("../assets/images/title.png");
    background-size: 100% 100%;
     2.76px;
    height: .6px;
    margin: 0 auto;
    font-size: .4px;
    color: #f64a43;
    line-height: .6px;
    // font-weight: bold;
  }
  h2{
    font-size: .3px;
    color: #fff;
    line-height: .34px;
    font-weight: bold;
    margin-top: .45px;
  }
  P{
    font-size: .26px;
    color: #fff;
    line-height: .34px;
    margin-top: .1px;
  }
  .box{
     4.5px;
  }
  img{
     2.25px;
    height: 2.23px;
    position: absolute;
    bottom: -.6px;
    right: -.1px;
  }
}
</style>