```之前分享过一个html+css的抽奖转盘,可以去我主页里查看。```
这个是公司需求写在了vue项目里的一个抽奖,里面都是和后台接口的交互包括抽奖次数,中奖信息轮播,中奖奖品列表,还有兑奖信息,算的上是一个比较完善的抽奖活动了。这一套代码复制下去可以直接用,具体可以根据自己公司需求再进行调整,也可以改成9格的抽奖,有什么问题可以私聊问我。
{{prizeTxt}}
本次活动已结束
感谢参与
今日剩余次数{{num}}
报名展会得抽奖次数
APP下载打开得抽奖次数
我的奖品
{{item.option.title}}
中奖时间:{{item.created_at}}
目前还没有中奖哦,祝您好运!
活动说明
{{data.description}}
奖项设置
{{item.title}}
{{item.title2}}
{{item.total}}{{item.unit}}
领奖办法
{{data.desc}}
声明:本活动最终解释权归北京露营者科技有限公司所有
{{prizeData.option.title}}
中奖时间:{{prizeData.created_at}}
class="imgs">
class="imgs">
兑奖码
{{prizeData.code}}
温馨提示:
兑奖时请提前打开此二维码,
由工作人员扫码确认后,发放奖品。
此码仅可使用一次,
截图或转发代领兑奖均有可能导致此码失效,
建议中奖本人亲自到场兑换奖品。
{{awardsData.option.title}}
中奖样式是有css动效代码的我没有截图可以自己复制下去后自己看。
这个是兑奖弹层里面包含过期及已兑换状态,状态信息具体在代码里看,配合这个抽奖我们做了一个验证抽奖码的小程序,也可以用后台系统直接根据兑奖兑换。
import AwardService from '@/service/award.js'
export default {
data() {
return {
awards: [],
current: 0, // 当前索引值
speed: 300, // 时间->速度
diff: 15, // 基数
award: {}, // 抽中的奖品
awardsData: {},
time: 0, // 当前时间戳
timer: null, // 定时器,
isMask: false,
logins: false,
isWin: false,
isOut: false,
isPrize: false,
num: 0,
myprizeList: [],
searchData: {
lottery_id: this.$route.query.id,
is_app: 1
},
prizeTxt: '',
prizeData: {},
data: null
}
},
created() {
this.init()
this.getNum()
this.getPrizeList()
this.getPrizeTxt()
},
methods: {
// 获取活动信息
init() {
AwardService.getInfo(this.searchData).then(res => {
if (res.code === 1) {
this.awards = res.data.options
this.data = res.data
this.getAppToken()
}
})
},
// 获取可抽奖次数
getNum() {
AwardService.getNum(this.searchData).then(res => {
if (res.code === 1) {
this.num = res.data.left
}
})
},
// 获取中奖列表
getPrizeList() {
AwardService.getMyprize(this.searchData).then(res => {
if (res.code === 1) {
this.myprizeList = res.data.list
}
})
},
// 初始化顶部中奖信息轮播内容 这里我是和接口定好一次返回10条数据
getPrizeTxt() {
const query = {
size: 10,
...this.searchData
}
AwardService.getPrizeList(query).then(res => {
if (res.code === 1) {
res.data.list.forEach(item => {
this.prizeTxt += '恭喜“' + item.user.nickname +
'”抽中“' + item.option.title + '”'
})
}
})
},
start() {
// 开始抽奖
if (!this.isLoggedin) {
console.log('未登录')
} else {
// 判断用户是否已经登录 然后再判断是否有剩余抽奖次数
if (this.num > 0) {
this.getLottery() // 开始抽奖
this.isMask = true // 这里防止二次点击及为了美观的抽奖遮罩显示
this.time = Date.now()
this.speed = 200
this.diff = 12
} else {
this.isOut = true // 已经没有抽奖次数提示显示
}
}
},
// 我这里将再抽一次和关闭写在了一起,通过type判断 1 为再抽一次其他为直接关闭中奖弹层
closeMask(type) {
this.isWin = false
this.isOut = false
this.isPrize = false
if (type === 1) {
this.start()
}
},
// 兑奖信息弹层
openPrize(item) {
this.isPrize = true
this.prizeData = item
},
// 调接口获取奖品
getLottery() {
AwardService.start(this.searchData).then(res => {
if (res.code === 1) {
this.award.name = res.data.option.title
this.award.id = res.data.option.id
this.awardsData = res.data
this.num--
}
})
this.move()
},
// 开始转动
move() {
this.timer = setTimeout(() => {
this.current++
if (this.current > 11) {
this.current = 0
}
// 若抽中的奖品id存在,则开始减速转动
if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
this.speed += this.diff // 转动减速
// 若转动时间超过4秒,并且奖品id等于小格子的奖品id,则停下来
if ((Date.now() - this.time) / 1000 > 4 && this.award.id == this.awards[this.current].id) {
clearTimeout(this.timer)
const self = this
if (this.awardsData.is_prizes === 0) {
setTimeout(function() {
self.isOut = true
self.isMask = false
}, 1000)
} else {
this.getPrizeList()
setTimeout(function() {
self.isWin = true
self.isMask = false
}, 200)
}
return
}
} else {
// 若抽中的奖品不存在,则加速转动
this.speed -= this.diff
}
this.move()
}, this.speed)
}
}
}
样式代码我没有做注释
.apps {
width: 100%;
height: 100%;
background: url('https://img01.wanfangche.com/public/upload/202006/23/5ef1ac30f3a3a.png') no-repeat;
background-size: 100% auto;
min-height: 100%;
box-sizing: border-box;
display: flex;
max-width: 750px;
margin: 0 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.head-img {
width: 90%;
margin-left: 5%;
margin-top: 53px;
}
.notice {
width: calc(100% - 56px);
margin: 0 auto;
height: 30px;
background: rgba(245, 166, 35, 1);
border-radius: 15px;
font-size: 12px;
color: rgba(255, 255, 255, 1);
line-height: 30px;
box-sizing: border-box;
padding: 0 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
position: relative;
padding-left: 32px;
}
.notice .icon {
background: rgba(245, 166, 35, 1);
position: absolute;
width: 32px;
height: 20px;
left: 0;
top: 4px;
z-index: 3;
border-radius: 15px;
}
.notice .icon::after {
width: 20px;
height: 20px;
content: "";
background: url('https://img01.wanfangche.com/public/upload/202006/17/5ee9cb250a770.png') no-repeat;
background-size: 100% 100%;
position: absolute;
left: 10px;
top: 0;
}
.notice span {
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 1000%;
}
.first-marquee {
-webkit-animation: 40s first-marquee linear infinite normal;
animation: 40s first-marquee linear infinite normal;
padding-right: 70%;
}
@keyframes first-marquee {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* 向左移动 */
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
display: none;
}
}
.main_container {
width: 100%;
min-height: 100%;
font-size: 26px;
}
.main_container.prohibit {
width: 100%;
height: 100%;
overflow: hidden;
}
.main_container input::-webkit-input-placeholder {
color: #a4a5a6;
font-size: 26px;
}
.main_container .turntable_box {
margin: 0 auto;
width: 319px;
height: 319px;
background: linear-gradient(180deg, rgba(251, 73, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 1);
margin-top: 11px;
position: relative;
}
.main_container .turntable_box .no-text {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
left: 0;
top: 0;
z-index: 10;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 36px;
text-align: center;
}
.main_container .turntable_box #rotary_table {
width: 100%;
height: 100%;
position: relative;
margin-left: 0;
}
.main_container .turntable_box #rotary_table .award {
width: 70px;
height: 70px;
background: rgba(53, 53, 53, 1);
border-radius: 4px;
text-align: center;
position: absolute;
overflow: hidden;
box-sizing: border-box;
background: #fff;
}
.main_container .turntable_box #rotary_table .award img {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.main_container .turntable_box .addbox {
position: absolute;
list-style: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
left: 0;
top: 0;
z-index: 1;
border-radius: 14px;
opacity: 1;
}
.main_container .turntable_box #rotary_table .award.active {
z-index: 2;
}
.main_container .turntable_box #rotary_table .award.award0 {
top: 8px;
left: 8px;
}
.main_container .turntable_box #rotary_table .award.award1 {
top: 8px;
left: 86px;
}
.main_container .turntable_box #rotary_table .award.award2 {
top: 8px;
right: 86px;
}
.main_container .turntable_box #rotary_table .award.award3 {
top: 8px;
right: 8px;
}
.main_container .turntable_box #rotary_table .award.award11 {
top: 86px;
left: 8px;
}
.main_container .turntable_box #rotary_table .award.award4 {
top: 86px;
right: 8px;
}
.main_container .turntable_box #rotary_table .award.award10 {
top: 163px;
left: 8px;
}
.main_container .turntable_box #rotary_table .award.award5 {
top: 163px;
right: 8px;
}
.main_container .turntable_box #rotary_table .award.award9 {
bottom: 8px;
left: 8px;
}
.main_container .turntable_box #rotary_table .award.award8 {
bottom: 8px;
left: 86px;
}
.main_container .turntable_box #rotary_table .award.award7 {
bottom: 8px;
right: 86px;
}
.main_container .turntable_box #rotary_table .award.award6 {
bottom: 8px;
right: 8px;
}
.main_container .turntable_box #rotary_table .start-btn {
list-style: none;
position: absolute;
width: 127px;
height: 131px;
top: 91px;
left: 93px;
z-index: 0;
text-align: center;
background: url("https://img01.wanfangche.com/public/upload/202006/15/5ee7412310994.png") no-repeat center / 100%;
}
.num {
width: calc(100% - 56px);
margin: 0 auto;
height: 30px;
font-size: 12px;
color: rgba(0, 0, 0, 1);
background: rgba(255, 255, 255, 1);
border-radius: 15px;
margin-top: 14px;
padding-left: 30px;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
overflow-y: hidden;
}
.num .icon {
position: absolute;
background: url('https://img01.wanfangche.com/public/upload/202006/15/5ee74bdb40f1f.png') no-repeat;
background-size: 100% 100%;
width: 16px;
height: 16px;
left: 12px;
top: 4px;
}
.num b {
font-size: 16px;
font-family: Futura-Medium, Futura;
font-weight: 500;
padding-left: 7px;
flex: 1;
}
.num span i {
width: 146px;
height: 26px;
line-height: 26px;
display: block;
position: absolute;
font-style: normal;
}
.num span {
width: 146px;
height: 52px;
overflow-y: hidden;
border-radius: 13px;
float: right;
margin: 2px;
text-align: center;
line-height: 26px;
cursor: pointer;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(74, 74, 74, 1);
position: absolute;
right: 0;
top: 0;
}
@keyframes anim1 {
0% {
top: 0;
opacity: 1
}
45% {
top: 0;
opacity: 1
}
50% {
top: -100%;
opacity: 0
}
51% {
top: 100%;
opacity: 0
}
95% {
top: 100%;
opacity: 1
}
96% {
opacity: 1
}
100% {
top: 0;
opacity: 1
}
}
@keyframes anim2 {
0% {
top: 100%;
opacity: 0
}
45% {
top: 100%;
opacity: 0
}
50% {
top: 0;
opacity: 1
}
95% {
top: 0;
opacity: 1
}
100% {
top: -100%;
opacity: 0
}
}
.num span i:nth-child(1) {
animation: anim1 7s linear infinite;
}
.num span i:nth-child(2) {
top: 26px;
animation: anim2 7s linear infinite;
}
.notice-img {
width: 100%;
padding: 0 28px;
box-sizing: border-box;
margin-top: 8px;
}
.notice-img a {
width: 100%;
height: auto;
}
.notice-img img {
width: 100%;
}
.prize-list {
width: calc(100% - 56px);
margin: 0 auto;
background: rgba(215, 181, 125, 0.4);
border-radius: 10px;
height: auto;
box-sizing: border-box;
padding: 11px 22px 14px 22px;
}
.prize-min {
width: 100%;
height: auto;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 1px 0;
padding-left: 7px;
position: relative;
margin-bottom: 10px;
}
.prize-min .poster {
width: 50px;
height: 50px;
}
.prize-min .poster img {
width: 100%;
height: 100%;
}
.prize-min .prize-name {
flex: 1;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(74, 74, 74, 1);
line-height: 17px;
padding-left: 12px;
}
.prize-min .prize-name p:last-child {
font-size: 9px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(155, 155, 155, 1);
line-height: 13px;
margin-top: 1px;
}
.prize-min .prize-yes {
position: absolute;
width: 40px;
height: 40px;
right: 20px;
top: 5px;
}
.prize-title {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
width: 100%;
text-align: center;
margin-bottom: 12px;
}
.prize-min .icon {
position: absolute;
width: 12px;
height: 12px;
right: 11px;
background: url('https://img01.wanfangche.com/public/upload/202006/16/5ee859ea4d3cb.png') no-repeat;
background-size: 100% 100%;
}
.explain {
width: calc(100% - 56px);
margin: 0 auto;
margin-top: 39px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 17px;
box-sizing: border-box;
padding: 0 12px;
}
.explain-tit {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
margin-bottom: 12px;
}
.awards {
width: calc(100% - 56px);
margin: 0 auto;
box-sizing: border-box;
padding: 0 12px;
margin-top: 48px;
}
.awards-tit {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
margin-bottom: 6px;
}
.awards-min {
width: 100%;
height: auto;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.awards-min .left {
width: 42px;
height: 42px;
border-radius: 4px;
overflow: hidden;
}
.awards-min .middle {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 17px;
padding-left: 14px;
}
.awards-min .right {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 17px;
text-align: right;
flex: 1;
}
.statement {
width: 100%;
text-align: center;
margin: 65px 0 22px 0;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.mask {
position: fixed;
width: 100%;
height: 100%;
background: rgba(74, 74, 74, .8);
z-index: 12;
}
.mask-min {
position: fixed;
width: 200px;
height: 200px;
left: 0;
top: -173px;
right: 0;
bottom: 0;
margin: auto;
z-index: 13;
}
.bg {
-webkit-animation: haha1 3s linear infinite;
position: absolute;
left: -150px;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: -1;
width: 500px;
height: 500px;
}
.bg2 {
-webkit-animation: haha2 3s linear infinite;
position: absolute;
left: -250px;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: -1;
width: 700px;
height: 700px;
opacity: .8;
}
@-webkit-keyframes haha1 {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes haha2 {
0% {
-webkit-transform: rotate(360deg);
}
25% {
-webkit-transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(90deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
.mask-prize {
width: 100%;
text-align: center;
position: absolute;
top: 107px;
}
.mask-prize img {
width: 100px;
border-radius: 4px;
}
.mask-prize p {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 22px;
margin-top: 13px;
}
.mask-btn {
width: 160%;
text-align: center;
margin-top: 96px;
margin-left: -30%;
}
.mask-btn button {
width: 107px;
height: 35px;
background: rgba(208, 2, 27, 1);
border-radius: 18px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
margin: 0 5px;
border: none;
}
.mask-btn button.no {
background: rgba(234, 234, 234, 1);
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(155, 155, 155, 1);
}
.no-prize {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.prize-body {
width: 86vw;
position: fixed;
height: auto;
background: #fff;
left: 7vw;
top: 21vw;
z-index: 13;
padding: 19px;
box-sizing: border-box;
border-radius: 10px;
}
.prize-head {
width: 100%;
height: auto;
display: flex;
}
.prize-head .img {
width: 60px;
float: left;
}
.prize-head .title {
padding-top: 25px;
padding-left: 20px;
font-size: 9px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(155, 155, 155, 1);
line-height: 13px;
}
.prize-head div p:first-child {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(74, 74, 74, 1);
line-height: 22px;
}
.code-img {
width: 200px;
margin: 0 auto;
margin-top: 15px;
}
.code-txt {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(74, 74, 74, 1);
line-height: 17px;
margin-top: 14px;
width: 100%;
text-align: center;
}
.code-message {
font-size: 10px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(155, 155, 155, 1);
line-height: 14px;
margin-top: 25px;
width: 100%;
text-align: center;
}
.code-txt p:last-child {
font-size: 12px;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: rgba(74, 74, 74, 1);
line-height: 15px;
}
.code-close {
position: absolute;
width: 100%;
height: 30px;
bottom: -42px;
left: 0;
margin: 0 auto;
text-align: center;
}
.code-close i {
width: 30px;
height: 30px;
display: inline-block;
background: url('https://img01.wanfangche.com/public/upload/202006/17/5ee9ecff44ab8.png') no-repeat;
background-size: 100% 100%;
z-index: 6;
}
.code-hint {
left: 0px;
width: 100%;
text-align: center;
font-size: 10px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 14px;
position: absolute;
bottom: -150px;
}
.code-img.active {
position: relative;
}
.code-img.active::after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: "";
background: rgba(255, 255, 255, .8);
z-index: 2;
}
.code-img.active .imgs {
width: 90px;
height: 90px;
position: absolute;
z-index: 3;
right: 0;
top: 0;
}