大家好!先上圖看看本次案例的整體效果。
實現思路:
- Vue component實現老虎-機組件,可以嵌套到任意要使用的頁面。
- css3 transform控制老虎-機抽獎過程的動畫效果。
- 抽獎組件內使用鉤子函數watch監聽抽獎結果的返回情況播放老虎-機動畫並給用戶彈出中獎提示。
- 中獎結果彈窗,爲抽獎組件服務。
實現步驟如下:
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>
以上就是老虎機抽獎核心步驟的整體思路,歡迎討論。