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

       實現思路：

1. Vue component實現老虎-機元件，可以巢狀到任意要使用的頁面。
2. css3 transform控制老虎-機抽獎過程的動畫效果。
3. 抽獎元件內使用鉤子函式watch監聽抽獎結果的返回情況播放老虎-機動畫並給使用者彈出中獎提示。
4. 中獎結果彈窗，為抽獎元件服務。

       實現步驟如下：

1.  構建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
   }

    

2. 編寫抽獎元件，為保證通用性，元件只負責播放抽獎結果。接收兩個資料和一個方法，如下：
   資料一：預置的獎品列表資料（輪播獎品需要）
   資料二：抽獎結果，播放抽獎動畫和彈出中獎結果需要
   方法：抽獎動作，返回的抽獎結果資料即為資料二，響應式傳遞給元件
   大概程式碼思路如下（僅供參考，不可執行）
   

   <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>

    

3. 彈出中獎結果元件，依附於抽獎元件，在上一步的執行抽獎結果動畫結束後執行。
   

   <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>

    

4. 抽獎元件運用在需要使用的頁面中，此頁面需要為抽獎元件提前準備好預置獎品列表和中獎結果資訊，並提供好抽獎方法供子元件（抽獎元件）觸發，觸發完更改抽獎結果響應式傳入到抽獎元件中。
   

   <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>

    

         以上就是老虎-機抽獎核心步驟的整體思路，歡迎討論。

         以上就是老虎-機抽獎核心步驟的整體思路，歡迎討論。

         以上就是老虎-機抽獎核心步驟的整體思路，歡迎討論。

 以上就是老虎-機抽獎核心步驟的整體思路，歡迎討論。

以上就是老虎-機抽獎核心步驟的整體思路，歡迎討論。