实现效果为下面图片样子
lAHPD4d8p5ws18jNBobNAu4_750_1670.gif
因为代码太多，所以只说九宫格以及跑马灯的内容实现
整体的思路是，后台返回我们奖品的数组，数组中主要包括每个奖品的信息，其中有index,我们通过这个index我们来判断后台返回抽中的奖品与奖品列表对应上，然后通过一个current来和index对应，来显示抽中的是哪一个，通过speed来控制抽时转圈的速度。
首先说html代码结构，我们直接上代码
<!--
* @Description:
* @Author: @[lina]
* @Date: 2020-07-17 13:53:06
* @LastEditors: @[lina]
* @LastEditTime: 2020-07-21 16:33:17
-->
<div class="draw_box">
<!--drawPrizes是奖品数组，其中包含奖品下标、名称等信息-->
<div class="item" v-for="(draw,index) in drawPrizes" :class="['item'+index,{'active':index === current}]" :key="draw.prizeIndex">
<div class="img" v-if="draw.prizeImgUrl"><img :src="draw.prizeImgUrl"></div>
<div class="name">{{draw.title}}</div>
</div>
<div class="start" :class="{'active' : !isActive}" @click="start">
<div class="start_btn">立即抽奖</div>
<div class="start_num">今日剩余0次</div>
</div>
</div>
然后我们说这个css跑马灯的效果，这个图片需要注意，一定要是两种灯状态的两张图片
<!--
* @Description:
* @Author: @[lina]
* @Date: 2020-07-17 13:53:06
* @LastEditors: @[lina]
* @LastEditTime: 2020-07-21 16:33:17
-->
.draw_box{
position relative
width 656px
height 668px
background-repeat no-repeat
background-size 100% 100%
animation changeBg .5s ease infinite
}
@keyframes changeBg{
0%{background-image:url(../../assets/img/draw/sk1.png)}
100%{background-image:url(../../assets/img/draw/sk2.png)}
}
九宫格的布局就非常的简单了，通过postion:absolute和left、top去改变
中间开始按钮的不同状态（抽奖机会、无抽奖机会）
.start{
position absolute
width 184px
height 188px
background-image url('../../assets/img/draw/picked.png')
background-repeat no-repeat
background-position center center
background-size cover
display flex
flex-direction column
align-items center
justify-content flex-end
&.active{
background-image url('../../assets/img/draw/disable_picked.png')
.start_btn,.start_num{
opacity 0.4
}
}
.start_btn{
width 114px
line-height 53px
font-size 52px
color #fff
letter-spacing 3px
font-weight 500
}
.start_num{
font-size 20px
color #FCF1CE
font-weight 500
letter-spacing 1px
margin-bottom 14px
}
}
九宫格：
.item{
position absolute
width 184px
height 188px
background-image url('../../assets/img/draw/no_picked.png')
background-repeat no-repeat
background-position center center
background-size cover
display flex
flex-direction column
align-items center
justify-content center
&.active{
background-image url('../../assets/img/draw/picked.png')
.name{
color #fff
}
}
.img{
max-width 87px
max-height 67px
img{
width 100%
height 100%
}
}
.name{
color #83221D
}
}
.item0,.item1,.item2{
top 46px
}
.item4,.item5,.item6{
bottom 48px
}
.item3,.item7,.start{
top 238px
}
.item0,.item7,.item6{
left 48px
}
.item2,.item3,.item4{
right 48px
}
.item1,.item5,.start{
left 238px
}
}
然后是js代码，逻辑就是通过setTimeout来控制时间，通过current来判断是第几个奖品
<!--
* @Description:
* @Author: @[lina]
* @Date: 2020-07-17 13:53:06
* @LastEditors: @[lina]
* @LastEditTime: 2020-07-21 16:33:17
-->
start () {
// 每次抽完奖后，再次抽奖时，初始化
this.time = Date.now()
this.current = 0
this.speed = 200
this.biginDraw()
},
biginDraw () {
// 请求接口
setTimeout(() => {
this.drawPrize = {
title: '15元优惠券', // 奖品信息
prizeIndex: 6, // 奖品编号
prizeImgUrl: '@img/img/draw/card.png'
}
}, 2000)
this.move()
},
move () {
const _this = this
window.timeout = setTimeout(() => {
++_this.current
if (_this.current > 7) {
_this.current = 0
}
// 若抽中的奖品index存在，那么转圈圈的速度减慢
if (_this.drawPrize.prizeIndex && (Date.now() - _this.time) / 1000 > 2) {
_this.speed += _this.diff // 转动减速
if (_this.drawPrize.prizeIndex === _this.drawPrizes[_this.current].prizeIndex && (Date.now() - _this.time > 6)) {
clearTimeout(window.timeout)
setTimeout(() => {
// 输出抽奖结果
console.log(_this.drawPrize.title)
}, 0)
return false
}
} else {
// 若抽中奖品不存在，那么转圈圈的速度加速
_this.speed -= _this.diff
}
_this.move()
}, _this.speed)
}
}
