先上图看看本次案例的整体效果。

实现思路:

Vue component实现大转盘组件,可以嵌套到任意要使用的页面。

css3 transform控制大转盘抽奖过程的动画效果。

抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示。

中奖结果弹窗,为抽奖组件服务。

实现步骤如下:

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

api:

exportdefault{getPrizeList(){letprizeList=[{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'}]returnprizeList},lottery(){return{id:4,name:'小米耳机',img:'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'}}}

store:

importlotteryApifrom'../../api/lottery.api.js'conststate={prizeList:[],lotteryResult:{}}constgetters={prizeList:state=>state.prizeList,lotteryResult:state=>state.lotteryResult}constmutations={SetPrizeList(state,{prizeList}){state.prizeList=prizeList},SetLotteryResult(state,{lotteryResult}){state.lotteryResult=lotteryResult}}constactions={getPrizeList({commit}){letresult=lotteryApi.getPrizeList()commit('SetPrizeList',{prizeList:result})},lottery({commit}){letresult=lotteryApi.lottery()commit('SetLotteryResult',{lotteryResult:result})}}exportdefault{state,getters,mutations,actions,namespaced:true}

编写抽奖组件,为保证通用性,组件只负责播放抽奖结果。接收两个数据和一个方法,如下:

数据一:预置的奖品列表数据(轮播奖品需要)

数据二:抽奖结果,播放抽奖动画和弹出中奖结果需要

方法:抽奖动作,返回的抽奖结果数据即为数据二,响应式传递给组件

大概代码思路如下(仅供参考,不可运行)

<template><section><pclass="lucky-item"><imgsrc="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_backImage.jpg"alt><pclass="lucky-box"><imgsrc="//www.cnblogs.com/images/cnblogs_com/codeon/878827/o_circle.jpg"alt><ulid="wheel"class="wheel-list"::class="transition"><liv-for="(prize,index)inslotPrizes":v-bind:key="index"><pclass="fan-item"></p><pclass="lucky-prize"><h4>{{prize.name}}</h4></p></li></ul><pclass="wheel-btn"@click="$emit('lottery')"><a><imgsrc="//images.cnblogs.com/cnblogs_com/codeon/878827/o_go.jpg"alt></a></p></p><prize-pop:prize="lotteryResult"v-if="showPrize"@closeLotteryPop="showPrize=false"/></p></section></template><script>importPrizePopfrom'./common/prize-pop.vue'exportdefault{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(){varself=thisconsole.log(self.prizes)letprizeList=[]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)returnprizeList}},methods:{/***执行抽奖动画*/playWheel(index){},/***获取中奖结果所在奖品列表中的索引,以确定抽奖动画最终落在哪个奖品*/getPrizeIndex(prizeId){}},watch:{/***监听抽奖结果,一旦有中奖信息就开始执行抽奖动画*/lotteryResult(newVal,oldVal){varself=thisif(newVal.id&&newVal.id>0){letindex=self.getPrizeIndex(newVal.id)self.playWheel(index)}}}}</script>

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

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

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

<template><section><p>您有一次抽奖机会,祝君好运~~~</p><BigTurntable:prizes="prizeList":lotteryResult="lotteryResult"@lottery="lottery"/></section></template><script>import{mapGetters,mapActions}from'vuex'importBigTurntablefrom'@/components/bigTurntable.vue'exportdefault{name:'BigTurntableRun',created(){varself=thisself.getPrizeList()},components:{BigTurntable},computed:{...mapGetters({prizeList:'lottery/prizeList',lotteryResult:'lottery/lotteryResult'})},methods:{...mapActions({getPrizeList:'lottery/getPrizeList',lottery:'lottery/lottery'})}}</script>