vue实现九宫格抽奖

结构模板

	<div class="nineSquare_wrap">
      <div class="nine-box">
        <template v-for="(nine,index) of nineConfig.nineSort">
          <template v-if="nine.prizeRank == -1">
            <div class="nineItem drawBtn" :key="index" @click="draw">
              <div class="prizeName">
                {{nine.prizeName}}
              </div>
            </div>
          </template>
          <template v-else>
            <div class="nineItem" :class="{mask: currentBtn == nine.position}" :key="index">
              <div class="prizeName">
                {{nine.prizeRank | getRankName}}
              </div>
            </div>
          </template>
        </template>
      </div>
      <div class="result" v-if="showResult">抽奖结果：{{winPrizeInfo.prizeName}}</div>
    </div>

js

	<script>
	import {nineConfig} from './js/nineSquare'
	export default {
	  name: 'nineSquare',
	  data () {
	    return {
	      nineConfig: nineConfig,
	      winPrizeInfo: {}, // 中奖信息
	      currentBtn: 0,
	      winPrizeId: '', // 中奖id
	      time: 50,
	      interval: null,
	      showResult: false
	    }
	  },
	  filters: {
	    getRankName (n) {
	      let rankName = ''
	      switch (parseInt(n)) {
	        case 0:
	          rankName = '谢谢参与'
	          break
	        case 1:
	          rankName = '一等奖'
	          break
	        case 2:
	          rankName = '二等奖'
	          break
	        case 3:
	          rankName = '三等奖'
	          break
	      }
	      return rankName
	    }
	  },
	  methods: {
	    draw () {
	      // 以接口获取中奖ID，
	      this.showResult = false
	      this.interval = null
	      this.time = 50
	      this.winPrizeInfo = {}
	      this.winPrizeId = Math.floor(Math.random() * 4)
	      // 从配置表中遍历中奖的id及其位置
	      let result = this.nineConfig.nineSort.filter((item) => {
	        if (item.prizeId === this.winPrizeId) {
	          return item
	        }
	      })
	      // 当有多个相同的奖品时选择随机的一个
	      let choose = Math.floor(Math.random() * result.length)
	      this.winPrizeInfo = result[choose]
	      this.startTurn()
	    },
	    startTurn () {
	      this.interval = setTimeout(() => {
	        this.currentBtn++
	        if (this.time > 200) {
	          this.time += 10
	        } else {
	          this.time += 5
	        }
	        if (this.currentBtn > 8) {
	          this.currentBtn = 1
	        }
	        if (this.time >= 300 && this.winPrizeInfo.position === this.currentBtn) {
	          clearTimeout(this.interval)
	          this.showResult = true
	        } else {
	          this.startTurn()
	        }
	      }, this.time)
	    }
	  }
	}
	</script>

css

	.nineSquare_wrap {
	  height: 100%;
	}
	.nine-box{
	  width: 400px;
	  height: 400px;
	  background-color: #cccccc;
	}
	.nineItem{
	  width: 32%;
	  height: 32%;
	  background-color: #fff;
	  float: left;
	  margin-left: 1%;
	  margin-top: 1%;
	  border-radius: 3%;
	  display: flex;
	}
	.prizeName{
	  margin: auto;
	}
	.drawBtn{
	  cursor: pointer;
	}
	.mask{
	  background-color: rgba(0,0,0,0.3);
	}

九宫格配置-nineConfig

export const nineConfig = {
  nineBgImg: '', // 九宫格整体背景
  gridBgimg: '', // 格子背景
  nineSort: [
    {
      prizeName: '奖品一', // 奖品名称
      prizeRank: '1', // 奖品等级
      prizeImg: '', // 奖品图片
      prizeId: 1, // 奖品id
      position: 1 // 格子位置，从左上角第一个顺时针转一圈
    },
    {
      prizeName: '奖品二1',
      prizeRank: '2',
      prizeImg: '',
      prizeId: 2,
      position: 2
    },
    {
      prizeName: '奖品三1',
      prizeRank: '3',
      prizeImg: '',
      prizeId: 3,
      position: 3
    },
    {
      prizeName: '谢谢参与',
      prizeRank: '0',
      prizeImg: '',
      prizeId: 0,
      position: 8
    },
    {
      prizeName: '点击抽奖',
      prizeRank: '-1',
      prizeImg: '',
      prizeId: '',
      position: 9
    },
    {
      prizeName: '奖品三2',
      prizeRank: '3',
      prizeImg: '',
      prizeId: 3,
      position: 4
    },
    {
      prizeName: '奖品三3',
      prizeRank: '3',
      prizeImg: '',
      prizeId: 3,
      position: 7
    },
    {
      prizeName: '谢谢参与',
      prizeRank: '0',
      prizeImg: '',
      prizeId: 0,
      position: 6
    },
    {
      prizeName: '奖品二2',
      prizeRank: '2',
      prizeImg: '',
      prizeId: 2,
      position: 5
    }
  ]
}