[Vue.js actual combat case] Vue.js realizes the big turntable lottery summary

Hello everyone! Let's first look at the overall effect of this case.

Implementing ideas:

  1. Vue component implements large turntable components, which can be nested into any page to be used.
  2. css3 transform controls the animation effect of the big turntable drawing process.
  3. The hook function watch is used in the lottery component to monitor the return of the lottery results, play the big turntable animation and give the user a winning hint.
  4. Win the lottery and serve the lottery components.

The steps are as follows:

  1. Construction of api prize configuration information and lottery interface, vuex global storage of prize configuration and winning results data information.
    api:
    export default {
      getPrizeList () {
        let prizeList = [
          {
            id: 1,
            name: 'Millet 8',
            img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/m8-140.png'
          },
          {
            id: 2,
            name: 'Mi TV',
            img: 'https://i1.mifile.cn/f/i/g/2015/TV4A-43QC.png'
          }, {
            id: 3,
            name: 'Millet Balancing Vehicle',
            img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140x140.jpg'
          }, {
            id: 4,
            name: 'Millet earphone',
            img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
          }
        ]
        return prizeList
      },
      lottery () {
        return {
          id: 4,
          name: 'Millet earphone',
          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. Write the lottery component, in order to ensure universality, the component is only responsible for playing the lottery results. Two data and one method are received as follows:
    Data 1: Preset Prize List Data (Rotary Prize Requirements)
    Data 2: Drawing results, playback of drawing animation and pop-up of winning results
    Method: Draw the lottery action, return the data of the result of the lottery as data 2, and transfer it to the component responsively.
    Perhaps the code idea is as follows (for reference only, not running)
    <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 // By default, rotate five times first
        }
      },
      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: 'Thanks for your participation.', slotIndex: 2 })
          prizeList.push({ ...self.prizes[1], slotIndex: 3 })
          prizeList.push({ name: 'Thanks for your participation.', slotIndex: 4 })
          prizeList.push({ ...self.prizes[2], slotIndex: 5 })
          prizeList.push({ name: 'Thanks for your participation.', slotIndex: 6 })
          prizeList.push({ ...self.prizes[3], slotIndex: 7 })
          prizeList.push({ name: 'Thanks for your participation.', slotIndex: 8 })
          console.log(prizeList)
          return prizeList
        }
      },
      methods: {
        /**
         * Execute Draw Animation
         */
        playWheel (index) {
          
        },
         /**
         * Get an index in the list of prizes where the winning results are to determine which prizes the winning animation will end up in.
        */
        getPrizeIndex (prizeId) {
        
        }
      },
      watch: {
    /**
         * Monitor the results of the lottery, and start executing the lottery animation as soon as the winning information is available.
         */
        lotteryResult (newVal, oldVal) {
          var self = this
          if (newVal.id && newVal.id > 0) {
            let index = self.getPrizeIndex(newVal.id)
            self.playWheel(index)
          }
        }
      }
    }
    </script>

     

  3. Pop up the winning result component, which is attached to the drawing component, and execute after the animation of the winning result in the next step.
    <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>Congratulations</h3>
            <p>
              <img :src="prize.img" alt>
            </p>
            <h4>Get
              <span></span>
              <span>{{prize.name}}</span>
            </h4>
            <div class="subject-pop-footer">
              <a href="javascript:;" class="november-btn1" @click="closeLotteryEmit">Got it</a>
            </div>
          </div>
        </div>
    </template>
    <script>
    export default {
      props: {
        prize: {
          type: Object,
          default: () => {
            return {
              id: 0
            }
          }
        }
      },
      methods: {
        closeLotteryEmit () {
          this.$emit('closeLotteryPop')
        }
      }
    }
    </script>

     

  4. The lottery component is used in the pages that need to be used. This page needs to prepare the preset list of prizes and the information of the winning results for the lottery component in advance, and provide a good method for the sub-component (the lottery component) to trigger, trigger the change of the lottery results, and then transmit the response to the lottery component.
    <template>
      <section>
        <div style="width:100%;text-align:center;margin:2rem 0;">You have a chance to draw a lottery. Good luck to you.~~~</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>


    The above is the overall idea of the core steps of the big turntable lottery. Welcome to discuss.

Complete Works of Vue.js Practical Game Draw Series

↓↓↓↓↓↓↓↓↓↓↓

[Vue.js actual combat case] Vue.js realizes the tiger-machine lottery summary

[Vue.js actual combat case] Vue.js realizes the summary of the Nine-palace fruit machine lottery game

[Vue.js actual combat case] Vue.js realizes the big turntable lottery summary

Tags: Javascript Vue css3

Posted on Tue, 08 Oct 2019 06:14:28 -0700 by adcripps