Vue，React ---【大转盘 & 九宫格】抽奖

因为项目需求完成一个大转盘抽奖，九宫格抽奖活动，所以推荐一个免费插件https://100px.net/

 

 1、首先安装插件

npm install vue-luck-draw

2、封装组件

<template>
  <div class="luckDraw">
    <div class="box">
      <LuckyWheel
        class="luck-draw"
        ref="LuckyWheel"
        width="412px"
        height="413px"
        :default-style="defaultStyle"
        :blocks="blocks"
        :prizes="prizes"
        :prizeIndex="prizeIndex"
        :activityStatus="activityStatus"
        :activityNumber="activityNumber"
        :buttons="buttons"
        @start="startCallBack"
        @end="endCallBack"
      />
      <img :src="require('~/assets/images/luckDraw/bg.png')" width="100%" />
    </div>
    <div class="bg-bottom">
      <img :src="require('~/assets/images/luckDraw/bg-bottom.png')" width="100%" />
    </div>
  </div>
</template>
<script>
// nuxt服务端渲染出现报错，判断是否在客户端才渲染
let LuckyWheel;
if (process.browser) {
  LuckyWheel = require('vue-luck-draw').LuckyWheel;
}
export default {
  name: "luckDrawTurntable",
  components: {
    LuckyWheel
  },
  props: ["dataList","prizeIndex","activityStatus","activityNumber"],
  data () {
    return {
      prizes: [],
      buttons: [{
        radius: '60px',
        fonts: [{ text: 'GO', top: '-30%', fontSize: '40px',fontColor: '#007B69',fontWeight: 'bold' }],
        imgs: [{ src: require('~/assets/images/luckDraw/button.png'), width: '102%', top: '-147%' }]
      }],
      blocks: [],
      defaultStyle: {
        fontColor: '#fff',
        fontSize: '16px',
      }
    }
  },
  mounted () {
    this.getPrizesList();
  },
  methods: {
    getPrizesList () {
      const prizes = []
      let data = this.dataList;
      // 不需要前端配置空白项
      // let newArry = new Array(8-data.length).fill({ awardName: 'Thank you', imgUrl: require('~/assets/images/brandAmbassador/excellent1.png'), id: 0});
      // for (let i = 0; i < newArry.length; i++) {
      //   data.splice(1 + 2 * i, 0, newArry[i]);
      // }
      // console.log(data);
      data.forEach((item, index) => {
        prizes.push({
          id: item.id,
          name: item.awardName,
          background: index % 2 === 0 ? '#fff' : '#6AD1C2',
          imgs:[{ src: item.bgUrl, height: '94px', top: '10%'}],
        })
      })
      this.prizes = prizes
    },
    startCallBack () {
      this.$emit('start-back');
      if(this.activityStatus === 101 && this.activityNumber !== 0){
        this.$refs.LuckyWheel.play()
        setTimeout(() => {
          console.log(this.prizeIndex)
          let index = this.prizes.findIndex( item => item.id == this.prizeIndex);
          this.$refs.LuckyWheel.stop(index)
        }, 2000)
      }
    },
    endCallBack (prize) {
      this.$emit('end-back',prize);
      // alert(`恭喜你获得${prize.name}`)
    },
  }
}
</script>
<style lang="scss">
.luckDraw{
  width: 640px;
  margin:0 auto;
  .box {
    position: relative;
    width: 640px;
    height: 630px;
    .luck-draw {
      margin-top: 0px;
      margin-left: -1px;
      width: 412px;
      height: 413px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      overflow: hidden;
      box-shadow:0 0 30px #0F785A inset;
      -webkit-box-shadow:0 0 30px #0F785A inset;
      -moz-box-shadow:0 0 30px #0F785A inset;
      -o-box-shadow:0 0 30px #0F785A inset;
      cursor: pointer;
    }
  }
  .bg-bottom{
    width: 640px;
    text-align: center;
    margin-top: -50px;
    img{
      width: 530px;
      height: 245px;
    }
  }
}
</style>