I recently made a company activity project, the effect is shown in the picture. The creation record of this article is rough, but I just write down the code snippets first, and I will take time to optimize it later.
1. Page construction (create index.vue)
First of all, the page layout must be determined. The div with class start represents the start button in the middle, and the ul at the same level is the position of the nine prizes.
I use the relative positioning of the parent element and the absolute positioning of the li element . Position each element on the page (the solution that came to mind at the time, welcome to provide a layout method that does not require much trouble)
<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. Relevant CSS positioning
.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. Corresponding JS logic (idnex.js)
The winning position, whether you can participate in the lottery, and the number of times of the lottery are all implemented by calling the back-end interface . The corresponding js methods have been annotated accordingly.
The difficulty of this code development lies in the method of stopping the turntable (startRoll) after the winning position is obtained . There may be illogical codes in the middle, welcome to correct me.
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;
},
Put a website that has many integrated lottery cases found: Jiugongge lottery | [big turntable & Jiugongge & slot machine] lottery plug-in based on Js / TS / Vue / React / WeChat applet / uni-app / Taro
This sharing is over~ Let's encourage each other! ! !