Vue 九宫格抽奖实现

最近做了一个公司的活动项目，效果如图。本篇文章创作记录粗糙，只是当下先记下代码片段，后期我会抽时间优化。

 1、页面搭建（创建index.vue）

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

我是采用父元素相对定位，li元素绝对定位。将每一个元素定位到页面上（当时一下想到的方案，欢迎有大佬提供不用怎么麻烦的布局方式）

<div class="luck-cont" v-if="loadingComplete">
    <div class="start" @click="start">
	    <div class="start-content" v-if="activeExistFlag">
		    <p>开始</p>
		    <p>抽奖</p>
	    </div>
	    <div class="start-content" v-else-if="!activeExistFlag && !notStartFlag">
		    <p>活动</p>
		    <p>结束</p>
	    </div>
    </div>
	<ul class="luck-ul">
		<li v-for="(item, index) in prizes" :key="index"
			:class="['item' + (index + 1), {'active': currentIndex == index}]">
	        <div>
	            <img :src="item.img_path" />
		        <p>{{item.prize_name}}</p>
			</div>
			<div class="mask" v-if="currentIndex == index"></div>
		</li>
	</ul>
</div>

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.isFollowFlag = 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 的【大转盘 & 九宫格 & 老虎机】抽奖插件

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