如何运行:

1、下载源码

2、打开终端cd到luckdraw这个目录下面

3、输入命令安装依赖:npm install

4、输入命令运行文件: yarn serve 或者 npm run serve

5、终端或者控制台或输出 一下链接 http://localhost:8080/ 运行成功

在浏览器可以看到实际效果

代码模版分为8格和12格

8格视频效果演示:

12格视频效果演示:

效果图展示:

文件目录:units目录封装了一些公用方法,网络请求,测试数据,统一接口

部分结构代码

<template>
<div class="lottery-box">
<div class="lottery">
<div class="lottery-item" v-if="count==8">
<div class="lottery-start">
<div class="box gray" v-if="isStart===0">
<p>活动未开始</p>
</div>
<div class="box" @click="startLottery" v-if="isStart===1">
<p>
<b>立即夺宝</b>
</p>
<span>{{score}}</span>
</div>
<div class="box gray" v-if="isStart===2">
<p>活动已过期</p>
</div>
</div>
<ul>
<li v-for="(item,i) in list" :class="i==index?'on':''" :key="i">
<div class="box">
<p>
<img :src="item.img" alt>
</p>
<p>{{item.name}}</p>
</div>
</li>
</ul>
</div>
<div class="lottery-item1" v-if="count==12">
<div class="lottery-start">
<div class="box gray" v-if="isStart===0">
<p>活动未开始</p>
</div>
<div class="box" @click="startLottery" v-if="isStart===1">
<p>
<b>立即夺宝</b>
</p>
<span>{{score}}</span>
</div>
<div class="box gray" v-if="isStart===2">
<p>活动已过期</p>
</div>
</div>
<ul>
<li v-for="(item,i) in list" :class="i==index?'on':''" :key="i">
<div class="box">
<p>
<img :src="item.img" alt>
</p>
<p>{{item.name}}{{item.count ? '*'+item.count : ''}}</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 奖励滚动轮播 -->
<div class="scroll">
<div class="scroll-bg">
<div class="jiangli">
<p>中奖名单</p>
</div>
<vue-seamless-scroll :data="listData" class="seamless-warp" :step="1">
<ul class="item">
<li class="item-list" v-for="(item,index) in listData" :key="index">
<span v-text="item.createTime"></span>
<span v-text="item.userPhone"></span>
<div>
<span v-text="item.lottery.name"></span>*
<span v-text="item.lottery.count"></span>
</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
<!-- 中奖弹窗 -->
<div class="mask" v-if="showToast"></div>
<div class="lottery-alert" v-if="showToast">
<h1>{{list[sort].id == 0 ? "很遗憾" : "恭喜您"}}</h1>
<p>
<img :src="list[sort].img" alt>
</p>
<h2>{{list[sort].id == 0 ? "" : "获得"}}{{list[sort].name}}{{list[sort].count ? '*'+list[sort].count : ''}}</h2>
<div class="btnsave" @click="showToast=false">确定</div>
</div>
</div>
</template>

部分业务代码:

getBasic() {
//获取抽奖列表信息
let that = this;

/* 测试数据 start*/
// let i = 0;
// if (this.$json.list12.length == 0) {
//   that.isStart = 0;
//   return;
// }
// for (let item of this.$json.list12) {
//   item.sort = i++;
// }
// that.count = this.$json.list12.length;
// that.list = this.$json.list12;
/* 测试数据 end*/

/**正式接口 */
this.$request(this.$api.list).then(function(response) {
let i = 0;
if (response.data.data.length == 0) {
that.isStart = 0;
return;
}
for (let item of response.data.data) {
item.sort = i++;
}
that.count = response.data.data.length;
that.list = response.data.data;
});
//获取中奖名单列表

/* 测试数据 start*/
// for (let item of this.$json.listEncrypted) {
//   item.createTime = that.timestampToTime(item.createTime);
// }
// that.listData = this.$json.listEncrypted;
/* 测试数据 end*/

/**正式接口 */
this.$request(
this.$api.listEncrypted,
"get",
"pageIndex=0&pageSize=50"
).then(function(response) {
for (let item of response.data.data.pageData) {
item.createTime = that.timestampToTime(item.createTime);
}
that.listData = response.data.data.pageData;
});

/* 测试数据 start*/
// that.score = this.$json.num.count;
/* 测试数据 end*/

/**正式接口 */
//获取抽奖次数
this.$request(this.$api.drawCount).then(function(response) {
that.score = response.data.data.count;
});
},
//时间戳为10位需*1000，时间戳为13位的话不需乘1000
timestampToTime(t) {
let date = new Date(t * 1000);
let Y = date.getFullYear() + "-";
let M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
let D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
let h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
let m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
let s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
},
startLottery() {
let that = this;
if (!this.click) {
return;
}
this.click = false;
/* 测试数据 start*/
// for (let item of that.list) {
//   if (item.id == this.$json.jiangli.id) {
//     that.sort = item.sort;
//     that.score--;
//   }
// }
// that.startRoll();
/* 测试数据 end*/

/**正式接口 */
this.$request(this.$api.draw).then(function(response) {
for (let item of that.list) {
if (item.id == response.data.data.id) {
that.sort = item.sort;
that.score--;
}
}
that.startRoll();
});
},

部分css代码:

/* 渲染列表为8个数据的模版 */
.lottery .lottery-item {
height: 260px;
position: relative;
margin-top: 10px;
margin-left: 10px;
}
.lottery .lottery-item ul li {
width: 33.33333333%;
position: absolute;
padding-right: 6px;
}
.lottery .lottery-item ul li:nth-child(2) {
left: 33.33333333%;
}
.lottery .lottery-item ul li:nth-child(3) {
left: 66.66666666%;
}
.lottery .lottery-item ul li:nth-child(4) {
left: 66.66666666%;
top: 85px;
}
.lottery .lottery-item ul li:nth-child(5) {
left: 66.66666666%;
top: 170px;
}
.lottery .lottery-item ul li:nth-child(6) {
left: 33.33333333%;
top: 170px;
}
.lottery .lottery-item ul li:nth-child(7) {
left: 0;
top: 170px;
}
.lottery .lottery-item ul li:nth-child(8) {
left: 0;
top: 85px;
}
.lottery .lottery-item ul li .box {
height: 73px;
position: relative;
text-align: center;
overflow: hidden;
background: url(../assets/img/bg2.png) no-repeat center;
background-size: 100% 100%;
}
.lottery .lottery-item ul li .box img {
display: block;
height: 35px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 5px;
}
.lottery .lottery-item ul li .box p {
color: #871f0b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.lottery .lottery-item ul li.on .box {
background: url(../assets/img/bg1.png) no-repeat center;
background-size: 100% 100%;
}
.lottery .lottery-item ul li.on .box p {
color: #fff;
}
.lottery .lottery-item .lottery-start {
position: absolute;
left: 33.33333333%;
width: 33.33333333%;
top: 85px;
padding-right: 6px;
}
.lottery .lottery-item .lottery-start .box {
height: 73px;
font-size: 14px;
color: #fff;
cursor: pointer;
text-align: center;
overflow: hidden;
background: url(../assets/img/bg4.png) no-repeat center;
background-size: 100% 100%;
/* line-height: 73px; */
display: flex;
align-items: center;
justify-content: center;
}
.lottery .lottery-item .lottery-start .box span {
position: absolute;
top: -6px;
right: 3px;
background: #ff5836;
padding: 1px 13px;
border-radius: 6px;
}
.lottery .lottery-item .lottery-start .box p b {
font-size: 20px;
margin-bottom: 10px;
display: block;
color: #f53610;
}
.lottery .lottery-item .lottery-start .box:active {
opacity: 0.7;
}
.lottery .lottery-item .lottery-start .box.gray {
background: url(../assets/img/bg3.png) no-repeat center;
background-size: 100% 100%;
}
.lottery .lottery-item .lottery-start .box.gray p {
color: #708abf;
font-weight: 700;
}
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: fixed;
overflow: hidden;
z-index: 222;
top: 0;
left: 0;
}
.lottery-alert {
max-width: 80%;
text-align: center;
z-index: 10000;
border-radius: 10px;
background: #fff;
padding: 20px;
position: fixed;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.lottery-alert h1 {
font-size: 18px;
font-weight: 700;
color: #d92b2f;
}
.lottery-alert img {
display: block;
height: 120px;
margin: 0 auto;
}
.lottery-alert h2 {
font-weight: 400;
color: #d92b2f;
font-size: 15px;
padding-top: 15px;
}
.lottery-alert p {
color: #666;
font-size: 16px;
padding-top: 5px;
}
.lottery-alert .btnsave {
border-radius: 3px;
box-shadow: none;
height: 40px;
cursor: pointer;
line-height: 40px;
color: #fff;
margin-top: 12px;
background: linear-gradient(
180deg,
rgba(213, 60, 63, 1) 0%,
rgba(201, 20, 24, 1) 100%
);
font-size: 16px;
}