Vue 九宫格抽奖实现

最近，我做了一个公司的活动项目，效果如图所示。这篇文章的创作记录很粗糙，但现在先写代码片段，以后我会花时间优化。

1.页面构建(创建)index.vue）

首先要确定页面布局，class为start的div代表中间的开始按钮，同级ul九奖位置。

我是采用父元素相对定位，li绝对定位元素。在页面上定位每一个元素(当时想到的方案，欢迎大佬提供不用麻烦的布局)

     
      
       
开始
       
抽奖
      
      
       
活动
       
结束
      
     
  
   
          
                         
{     
      {item.prize_name}}
    
    
   
  
 

2、相关CSS定位

.luck-cont {position: relative;width: 318px;height: 338px;background-color: #cb0e23;border-radius: 23px;} .grid-tips {font-size: 12px;font-weight: 400;color: #fde4b7;text-align: center;padding-top: 6px;} .luck-ul li {position: absolute;width: 96px;height: 96px;background: linear-gradient(135deg, #ffb5b4, #ffc3a5 100%);border-radius: 12px;} .luck-ul li.item1 {left: 9px;top: 32px;} .luck-ul li.item2 {left: 111px;top: 32px;} .luck-ul li.item3 {left: 213px;top: 32px;} .luck-ul li.item4 {left: 213px;top: 134px;} .luck-ul li.item5 {left: 213px;top: 236px;} .luck-ul li.item6 {left: 111px;top: 236px;} .luck-ul li.item7 {left: 9px;top: 236px;} .luck-ul li.item8 {left: 9px;top: 134px;} .luck-ul li.active .mask {position: absolute;width: 96px;height: 96px;background: rgba(255, 172, 24, 0.60);border-radius: 12px;top: -6px;left: 0px} .luck-ul li div {width: 84px;height: 84px;padding: 10px 0 0;margin: 6px auto;background: linear-gradient(135deg, #fff0e5, #ffdfc6 100%);border-radius: 12px;text-align: center;} .luck-ul li div img {display: block;margin: 0 auto;height: 45px;} .luck-ul li div p {color: #000;font-size: 10px;font-weight: 400;line-height: 20px} .start {position: absolute;left: 111px;top: 134px;width: 96px;height: 96px;background: #fac246;border-radius: 94px;} .start-content {width: 69px;height: 69px;background: #ff5f5a;border-radius: 84px;box-shadow: 0px 0px 15px 0px #cb0e23 inset;margin: 14px auto 0;color: #fff;font-weight: 400;font-size: 18px;text-align: center;padding-top: 8px;} .start-content p:first-child {line-height: 22px;margin-top: 4px;} .luck-active-content {padding: 0 15px 20px 24px; margin-top: 24px;}

3、相应JS逻辑（idnex.js）

中奖地点和是否可以参加抽奖，抽奖次数是通过调用后端界面来实现的。相应的js所有方法都添加了相应的注释。

代码开发的难点在于获胜后，停止转盘的方法（startRoll）方法。中间可能有不和逻辑代码，欢迎纠正。

data(){     return{         luckyNum: 2, // 抽奖次数      prizes: [], // 奖品列表      shareFlag: true, // 是否分享      showShareFlag: false, // 分享成功的弹层      currentIndex: -1, // 目前转向哪个位置，起点位置      count: 8, // 总共有多少个位置      timer: 0, // 定时器每次旋转      speed: 200, // 初始转速      times: 0, // 转动次数      cycle: 50, // 转动基本次数：进入抽奖环节前至少需要转动多少次？      prize: -1, // 中奖位置     } }  // 开始抽奖 start() {  let vm = this     this.getLuckDrawIndex() },  // 获胜 getLuckDrawIndex() {  let _this = this  // 返回中奖地点，剩余抽奖次数  startLuckDraw(this.params).then(res => {   if (res.code == 200) {    this.startRoll()    this.isLuckFlag = true       this.prizeInfo = res.content    this.prize = _this.getPrizeIndex(res.content)    this.quertSurplusCount()   } else if (res.code == 300) {    this.showPopFlag = true    this.isFollowFlag = false    this.followImageUrl = res.content    this.clearRoll()       return      } else {    this.startRoll()    this.prize = parseInt(Math.random() * 10, 0) > 5 ? 3 : 7    this.isLuckFlag = false    this.followTitps1 = res.message    this.quertSurplusCount()   }     }).catch(error => {   console.log(error)     }) },  startRoll() {  let vm = this  this.times  = 1 // 转动次数  this.oneRoll() // 转动过程中调用的每一种转动方法，这是第一次调用初始化  // 若当前转动次数符合要求 && 目前转到的位置是中奖位置  if (this.times > this.cycle   10 && this.prize === this.currentIndex) {   clearTimeout(this.timer) // 清除转动定时器，停止转动   this.prize = -1   this.times = 0   this.speed = 200   this.click = true;   var that = this;   setTimeout(res => {    if (that.isLuckFlag) {     that.showToast = true;     that.isReceive = false    } else {     that.showPopFlag = true     that.isFollowFlg = true
			}
		}, 500)
	} else {
		if (this.times < this.cycle) {
			this.speed -= 10 // 加快转动速度
		} else if (this.times === this.cycle) {
			if (this.prize > 7) {
				this.prize = 7
			}
		} else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.currentIndex === 7) || this
						.prize === this.currentIndex + 1)) {
			this.speed += 110
		} else {
			this.speed += 20
		}
		if (this.speed < 40) {
			this.speed = 40
		}
		this.timer = setTimeout(this.startRoll, this.speed)
	}
},

// 每一次转动
oneRoll() {
	let index = this.currentIndex // 当前转动到哪个位置
	const count = this.count // 总共有多少个位置
	index += 1
	if (index > count - 1) {
		index = 0
	}
	this.currentIndex = index
},

clearRoll() {
	clearTimeout(this.timer) // 清除转动定时器，停止转动
	this.prize = -1
	this.times = 0
	this.speed = 200
	this.click = true;
},

放一个发现的有好多集成抽奖案例的网站：九宫格抽奖 | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件

本次分享结束~共勉！！！