Vue.js实现大转盘抽奖总结及实现思路

更新时间：2020-09-17 01:48:01 作者：startmvc

大家好！先上图看看本次案例的整体效果。实现思路：Vuecom

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

实现思路：

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="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"
 :style="wheelStyle"
 :class="transition">
 <li v-for="(prize,index) in slotPrizes"
 :style="{transform: 'rotate('+index*45+'deg)'}"
 v-bind:key="index">
 <div class="fan-item"
 style="transform: rotate(15deg) skewY(45deg);"></div>
 <div class="lucky-prize">
 <h3>{{prize.name}}</h3>
 </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 // 默认先旋转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: {
 /**
 * 执行抽奖动画
 */
 playWheel (index) {
 
 },
 /**
 * 获取中奖结果所在奖品列表中的索引，以确定抽奖动画最终落在哪个奖品
 */
 getPrizeIndex (prizeId) {
 
 }
 },
 watch: {
/**
 * 监听抽奖结果，一旦有中奖信息就开始执行抽奖动画
 */
 lotteryResult (newVal, oldVal) {
 var self = this
 if (newVal.id && newVal.id > 0) {
 let index = self.getPrizeIndex(newVal.id)
 self.playWheel(index)
 }
 }
 }
}
</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:;" 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>

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


<template>
 <section>
 <div style="width:100%;text-align:center;margin:2rem 0;">您有一次抽奖机会，祝君好运~~~</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实现大转盘抽奖总结及实现思路,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！