Vue.js如何實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)

這篇文章主要介紹Vue.js如何實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

先上圖看看本次案例的整體效果。

       實(shí)現(xiàn)思路：

Vue component實(shí)現(xiàn)大轉(zhuǎn)盤組件，可以嵌套到任意要使用的頁(yè)面。

css3 transform控制大轉(zhuǎn)盤抽獎(jiǎng)過(guò)程的動(dòng)畫(huà)效果。

抽獎(jiǎng)組件內(nèi)使用鉤子函數(shù)watch監(jiān)聽(tīng)抽獎(jiǎng)結(jié)果的返回情況播放大轉(zhuǎn)盤動(dòng)畫(huà)并給用戶彈出中獎(jiǎng)提示。

中獎(jiǎng)結(jié)果彈窗，為抽獎(jiǎng)組件服務(wù)。

       實(shí)現(xiàn)步驟如下：

 構(gòu)建api獎(jiǎng)品配置信息和抽獎(jiǎng)接口，vuex全局存放獎(jiǎng)品配置和中獎(jiǎng)結(jié)果數(shù)據(jù)信息。

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: '小米耳機(jī)',
    img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
   }
  ]
  return prizeList
 },
 lottery () {
  return {
   id: 4,
   name: '小米耳機(jī)',
   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
}

編寫(xiě)抽獎(jiǎng)組件，為保證通用性，組件只負(fù)責(zé)播放抽獎(jiǎng)結(jié)果。接收兩個(gè)數(shù)據(jù)和一個(gè)方法，如下：

數(shù)據(jù)一：預(yù)置的獎(jiǎng)品列表數(shù)據(jù)（輪播獎(jiǎng)品需要）

數(shù)據(jù)二：抽獎(jiǎng)結(jié)果，播放抽獎(jiǎng)動(dòng)畫(huà)和彈出中獎(jiǎng)結(jié)果需要

方法：抽獎(jiǎng)動(dòng)作，返回的抽獎(jiǎng)結(jié)果數(shù)據(jù)即為數(shù)據(jù)二，響應(yīng)式傳遞給組件

大概代碼思路如下（僅供參考，不可運(yùn)行）

<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"
      :
      :class="transition">
     <li v-for="(prize,index) in slotPrizes"
       :
       v-bind:key="index">
      <div class="fan-item"
         ></div>
      <div class="lucky-prize">
       <h4>{{prize.name}}</h4>
      </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 // 默認(rèn)先旋轉(zhuǎn)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: {
  /**
   * 執(zhí)行抽獎(jiǎng)動(dòng)畫(huà)
   */
  playWheel (index) {
   
  },
   /**
   * 獲取中獎(jiǎng)結(jié)果所在獎(jiǎng)品列表中的索引，以確定抽獎(jiǎng)動(dòng)畫(huà)最終落在哪個(gè)獎(jiǎng)品
  */
  getPrizeIndex (prizeId) {
  
  }
 },
 watch: {
/**
   * 監(jiān)聽(tīng)抽獎(jiǎng)結(jié)果，一旦有中獎(jiǎng)信息就開(kāi)始執(zhí)行抽獎(jiǎng)動(dòng)畫(huà)
   */
  lotteryResult (newVal, oldVal) {
   var self = this
   if (newVal.id && newVal.id > 0) {
    let index = self.getPrizeIndex(newVal.id)
    self.playWheel(index)
   }
  }
 }
}
</script>

彈出中獎(jiǎng)結(jié)果組件，依附于抽獎(jiǎng)組件，在上一步的執(zhí)行抽獎(jiǎng)結(jié)果動(dòng)畫(huà)結(jié)束后執(zhí)行。

<template>
<div class="subject-pop"  v-if="prize.id>0">
   <div class="subject-pop-mask"></div>
   <div class="subject-pop-box">
    <h4>恭喜您</h4>
    <p>
     <img :src="prize.img" alt>
    </p>
    <h5>獲得
     <span></span>
     <span>{{prize.name}}</span>
    </h5>
    <div class="subject-pop-footer">
     <a href="javascript:;" rel="external nofollow" 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>

抽獎(jiǎng)組件運(yùn)用在需要使用的頁(yè)面中，此頁(yè)面需要為抽獎(jiǎng)組件提前準(zhǔn)備好預(yù)置獎(jiǎng)品列表和中獎(jiǎng)結(jié)果信息，并提供好抽獎(jiǎng)方法供子組件（抽獎(jiǎng)組件）觸發(fā)，觸發(fā)完更改抽獎(jiǎng)結(jié)果響應(yīng)式傳入到抽獎(jiǎng)組件中。

<template>
 <section>
  <div >您有一次抽獎(jiǎng)機(jī)會(huì)，祝君好運(yùn)~~~</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>

以上是“Vue.js如何實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！