社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
大家好!先上图看看本次案例的整体效果。
实现思路:
实现步骤如下:
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:;" 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>
以上就是大转盘抽奖核心步骤的整体思路,欢迎讨论。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!