【Vue.js实战案例】- Vue.js实现大转盘抽奖总结

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

? ? ? ?实现思路:

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

    ?

  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>
        <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实战之游戏抽奖系列全集

↓↓↓↓↓↓↓↓↓↓↓

【Vue.js实战案例】- Vue.js实现老虎-机抽奖总结

【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖游戏总结

【Vue.js实战案例】- Vue.js实现大转盘抽奖总结

转载请注明:九层楼 » 【Vue.js实战案例】- Vue.js实现大转盘抽奖总结

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址