大家好！先上圖看看本次案例的整體效果。
完整版實戰課程附源碼：【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="main"> <!-- 老虎-機 --> <div class="recreation"> <div class="recreation-list clearfix" v-if="slotPrizes.length>0"> <ul class="recreation-item" v-bind:style="{transform: 'translateY('+y1+'rem)'}"> <li class="recreation-prices" v-for="(item,index) in slotPrizes" v-bind:key="index"> <img v-bind:src="item.img" alt> </li> </ul> <ul class="recreation-item" v-bind:style="{transform: 'translateY('+y2+'rem)'}"> <li class="recreation-prices" v-for="(item,index) in slotPrizes" v-bind:key="index"> <img v-bind:src="item.img" alt> </li> </ul> <ul class="recreation-item" v-bind:style="{transform: 'translateY('+y3+'rem)'}"> <li class="recreation-prices" v-for="(item,index) in slotPrizes" v-bind:key="index"> <img v-bind:src="item.img" alt> </li> </ul> </div> <a href="javascript:;" @click="parentEmitLottery" class="btn-recreation" ></a> </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: 'SlotMachine', data () { return { } }, components: { PrizePop }, props: { prizeList: { type: Array, default: () => [] }, lotteryResult: { type: Object, default: () => {} } }, computed: { slotPrizes () { let prizes = [] if (this.prizeList.length > 0) { Object.assign(prizes, this.prizeList) prizes.push(this.prizeList[0]) } return prizes } }, methods: { /** * 觸發父頁面調用抽獎 */ parentEmitLottery () { this.$emit('lottery') }, /** * 開始抽獎 */ startLottery () { }, /** * 獲取中獎結果所在獎品列表中的索引，以確定抽獎動畫最終落在哪個獎品 */ getPrizeIndex () { }, /** * 執行抽獎動畫 */ startPlay (index1, index2, index3) { } }, watch: { /** * 監聽抽獎結果，一旦有中獎信息就開始執行抽獎動畫 */ lotteryResult (newVal, oldVal) { if (newVal.id && newVal.id > 0) { this.startLottery() } } } } </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> <slotMachine :prizeList="prizeList" :lotteryResult="lotteryResult" @lottery="lottery"/> </section> </template> <script> import { mapGetters, mapActions } from 'vuex' import slotMachine from '@/components/slotMachine' export default { created () { this.getPrizeList() }, components: { slotMachine }, computed: { ...mapGetters({ prizeList: 'lottery/prizeList', lotteryResult: 'lottery/lotteryResult' }) }, methods: { ...mapActions({ getPrizeList: 'lottery/getPrizeList', lottery: 'lottery/lottery' }) } } </script>
以上就是老虎-機抽獎核心步驟的整體思路，歡迎討論。
完整版實戰課程附源碼：【Vue.js游戲機實戰】- Vue.js實現老虎-機抽獎