【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

大家好！先上图看看本次案例的整体效果。

实现思路：

Vue component实现大转盘组件，可以嵌套到任意要使用的页面。
css3 transform控制大转盘抽奖过程的动画效果。
抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示。
中奖结果弹窗，为抽奖组件服务。

实现步骤如下：

构建api奖品配置信息和抽奖接口，vuex全局存放奖品配置和中奖结果数据信息。
api：

export default {
  getPrizeList () {
    let prizeList = [
      {
        id: 1,
        name: '小米8',
        img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/m8-140.png'
      },
      {
        id: 2,
        name: '小米电视',
        img: 'https://i1.mifile.cn/f/i/g/2015/TV4A-43QC.png'
      }, {
        id: 3,
        name: '小米平衡车',
        img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140x140.jpg'
      }, {
        id: 4,
        name: '小米耳机',
        img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
      }
    ]
    return prizeList
  },
  lottery () {
    return {
      id: 4,
      name: '小米耳机',
      img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
    }
  }
}

store:

import lotteryApi from '../../api/lottery.api.js'

const state = {
  prizeList: [],
  lotteryResult: {}
}

const getters = {
  prizeList: state => state.prizeList,
  lotteryResult: state => state.lotteryResult
}

const mutations = {
  SetPrizeList (state, { prizeList }) {
    state.prizeList = prizeList
  },
  SetLotteryResult (state, { lotteryResult }) {
    state.lotteryResult = lotteryResult
  }
}

const actions = {
  getPrizeList ({ commit }) {
    let result = lotteryApi.getPrizeList()
    commit('SetPrizeList', { prizeList: result })
  },
  lottery ({ commit }) {
    let result = lotteryApi.lottery()
    commit('SetLotteryResult', { lotteryResult: result })
  }
}

export default {
  state,
  getters,
  mutations,
  actions,
  namespaced: true
}

编写抽奖组件，为保证通用性，组件只负责播放抽奖结果。接收两个数据和一个方法，如下：
数据一：预置的奖品列表数据（轮播奖品需要）
数据二：抽奖结果，播放抽奖动画和弹出中奖结果需要
方法：抽奖动作，返回的抽奖结果数据即为数据二，响应式传递给组件
大概代码思路如下（仅供参考，不可运行）

<template>
  <section>
    <div class="lucky-item">
      <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_backImage.jpg"
           alt>
      <div class="lucky-box">
        <img src="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_circle.jpg"
             alt>
        <ul id="wheel"
            class="wheel-list"
            :style="wheelStyle"
            :class="transition">
          <li v-for="(prize,index) in slotPrizes"
              :style="{transform: 'rotate('+index*45+'deg)'}"
              v-bind:key="index">
            <div class="fan-item"
                 style="transform: rotate(15deg) skewY(45deg);"></div>
            <div class="lucky-prize">
              <h3>{{prize.name}}</h3>
            </div>
          </li>
        </ul>
        <div class="wheel-btn"
             @click="$emit('lottery')">
          <a>
            <img src="//images.cnblogs.com/cnblogs_com/codeon/878827/o_go.jpg"
                 alt>
          </a>
        </div>
      </div>
      <prize-pop :prize="lotteryResult"
                 v-if="showPrize"
                 @closeLotteryPop="showPrize=false" />
    </div>
  </section>
</template>
<script>
import PrizePop from './common/prize-pop.vue'
export default {
  name: 'BigTurntable',
  data () {
    return {
      isStart: false,
      showPrize: false,
      wheelStyle: { 'transform': 'rotate(0deg)' },
      transition: 'transitionclear',
      playTurns: 5 // 默认先旋转5圈
    }
  },
  components: {
    PrizePop
  },
  props: {
    prizes: {
      type: Array,
      required: false
    },
    lotteryResult: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    slotPrizes () {
      var self = this
      console.log(self.prizes)
      let prizeList = []
      prizeList.push({ ...self.prizes[0], slotIndex: 1 })
      prizeList.push({ name: '谢谢参与', slotIndex: 2 })
      prizeList.push({ ...self.prizes[1], slotIndex: 3 })
      prizeList.push({ name: '谢谢参与', slotIndex: 4 })
      prizeList.push({ ...self.prizes[2], slotIndex: 5 })
      prizeList.push({ name: '谢谢参与', slotIndex: 6 })
      prizeList.push({ ...self.prizes[3], slotIndex: 7 })
      prizeList.push({ name: '谢谢参与', slotIndex: 8 })
      console.log(prizeList)
      return prizeList
    }
  },
  methods: {
    /**
     * 执行抽奖动画
     */
    playWheel (index) {
      
    },
     /**
     * 获取中奖结果所在奖品列表中的索引，以确定抽奖动画最终落在哪个奖品
    */
    getPrizeIndex (prizeId) {
    
    }
  },
  watch: {
/**
     * 监听抽奖结果，一旦有中奖信息就开始执行抽奖动画
     */
    lotteryResult (newVal, oldVal) {
      var self = this
      if (newVal.id && newVal.id > 0) {
        let index = self.getPrizeIndex(newVal.id)
        self.playWheel(index)
      }
    }
  }
}
</script>

弹出中奖结果组件，依附于抽奖组件，在上一步的执行抽奖结果动画结束后执行。

<template>
<div class="subject-pop" style="z-index: 10;" v-if="prize.id>0">
      <div class="subject-pop-mask"></div>
      <div class="subject-pop-box">
        <h3>恭喜您</h3>
        <p>
          <img :src="prize.img" alt>
        </p>
        <h4>获得
          <span></span>
          <span>{{prize.name}}</span>
        </h4>
        <div class="subject-pop-footer">
          <a href="javascript:;" class="november-btn1" @click="closeLotteryEmit">知道了</a>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  props: {
    prize: {
      type: Object,
      default: () => {
        return {
          id: 0
        }
      }
    }
  },
  methods: {
    closeLotteryEmit () {
      this.$emit('closeLotteryPop')
    }
  }
}
</script>

抽奖组件运用在需要使用的页面中，此页面需要为抽奖组件提前准备好预置奖品列表和中奖结果信息，并提供好抽奖方法供子组件（抽奖组件）触发，触发完更改抽奖结果响应式传入到抽奖组件中。

<template>
  <section>
    <div style="width:100%;text-align:center;margin:2rem 0;">您有一次抽奖机会，祝君好运~~~</div>
    <BigTurntable :prizes="prizeList"
                  :lotteryResult="lotteryResult"
                  @lottery="lottery" />
  </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import BigTurntable from '@/components/bigTurntable.vue'
export default {
  name: 'BigTurntableRun',
  created () {
    var self = this
    self.getPrizeList()
  },
  components: {
    BigTurntable
  },
  computed: {
    ...mapGetters({
      prizeList: 'lottery/prizeList',
      lotteryResult: 'lottery/lotteryResult'
    })
  },
  methods: {
    ...mapActions({
      getPrizeList: 'lottery/getPrizeList',
      lottery: 'lottery/lottery'
    })
  }
}
</script>