Vuejs实战案例-Vuejs实现九宫格水果机抽奖总结

35次阅读

共计 4715 个字符，预计需要花费 12 分钟才能阅读完成。

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

实现思路：

  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>
  <div class="main">
    <div class="squared"
         v-if="slotPrizes.length>0">
      <ul class="squared-warpper">
        <li class="squared-item"
            v-for="(item,index) in slotPrizes"
            v-bind:key="index">
          <img class="squared-item-btn"
               @click="parentEmitLottery()"
               v-if="index==4"
               src="//images.cnblogs.com/cnblogs_com/codeon/878827/t_startLottery.jpg">
          <div v-if="index!=4"
               class="squared-item-prise"
               :class="item.slotIndex==playIndex ?'on':''">
            <img :src="item.img">
          </div>
        </li>
      </ul>
    </div>
    <prize-pop :prize="lotteryResult"
               v-if="showPrize"
               @closeLotteryPop="showPrize=false" />
  </div>
</template>
<script>
import PrizePop from './common/prize-pop.vue'
export default {
  name: 'FruitMachine',
  data () {
    return {
      isStart: false,
      showPrize: false,
      count: 0, // 移动总次数
      prizeIndex: -1, // 中奖的奖品索引
      timeOut: 100, // 延迟执行时间
      endingTimeOut: 200, // 最后一圈延迟执行时间
      intervalCount: 4, // 循环轮播次数
      playIndex: 0 // 当前移动的索引
    }
  },
  components: {PrizePop},
  props: {
    prizes: {
      type: Array,
      required: false
    },
    lotteryResult: {
      type: Object,
      default: () => {}
    }
  },
  computed: {slotPrizes () {let prize = []
      var self = this
      console.log(self.prizes)
      if (self.prizes.length > 0) {prize.push({ ...self.prizes[0], slotIndex: 1 })
        prize.push({id: -1, slotIndex: 2, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png'})
        prize.push({...self.prizes[1], slotIndex: 3 })
        prize.push({id: -1, slotIndex: 8, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png'})
        prize.push({id: -1, slotIndex: -1, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png'})
        prize.push({id: -1, slotIndex: 4, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png'})
        prize.push({...self.prizes[3], slotIndex: 7 })
        prize.push({id: -1, slotIndex: 6, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png'})
        prize.push({...self.prizes[2], slotIndex: 5 })
      }
      return prize
    }
  },
  methods: {
    /**
     * 触发父页面调用抽奖
     */
    parentEmitLottery () {this.$emit('lottery')
    },
    /**
     * 开始抽奖
    */
    startLottery () {},
    /**
     * 获取中奖结果所在奖品列表中的索引，以确定抽奖动画最终落在哪个奖品
    */
    getPrizeIndex () {},
    /**
     * 执行抽奖动画
    */
    intervalPlay() {}
  },
  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>
    <FruitMachine v-bind:prizes="prizeList"
                  v-bind:lotteryResult="lotteryResult"
                  v-on:lottery="lottery" />
  </section>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import FruitMachine from '@/components/fruitMachine'
export default {data () {return {}
  },
  created () {
    var self = this
    self.getPrizeList()},
  components: {FruitMachine},
  computed: {
    ...mapGetters({
      prizeList: 'lottery/prizeList',
      lotteryResult: 'lottery/lotteryResult'
    })
  },
  methods: {
    ...mapActions({
      getPrizeList: 'lottery/getPrizeList',
      lottery: 'lottery/lottery'
    })
  }
}
</script>

以上就是九宫格水果机抽奖核心步骤的整体思路，欢迎讨论。

正文完
vue.js
发表至：无分类
2019-08-07
 0