微信小程序作为移动互联网时代的代表之一,不仅深受用户欢迎,也成为了许多企业营销的利器。而其中的抽奖活动更是备受关注,不仅可以为企业带来流量和关注,也给用户带来了丰富的奖品和刺激的体验。本文将带您一步步实现微信小程序抽奖效果,让您可以轻松地在自己的小程序中添加这一功能。在本文中,我们将会依次介绍如何生成随机数、如何使用动画来实现转盘抽奖效果、以及如何使用云函数来处理抽奖结果,并给出完整的实现代码。让我们开始吧!
参考代码:传送门
WXML:
<!--pages/jsCase/draw3/index.wxml-->
<view class="con flex-column">
<view class="draw_sc flex-row">
<image src="../img/draw_icon.png" class="draw_icon" />
<swiper class="swiper" vertical="true" autoplay="true" circular="true" interval="3000" display-multiple-items='1'>
<block wx:for-index="idx" wx:for='{{2}}' wx:key="index">
<swiper-item>
<view>
<text decode="{{true}}">恭喜用户 </text>
<text class="draw_text">178***5379</text>
<text decode="{{true}}"> 抽中华为手机一台</text>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class="box">
<view class="b_box">
<view class="flex-row j_b prize_box">
<block wx:for="{{prize_list}}" wx:key="index">
<!-- 抽奖 按钮-->
<block wx:if="{{index == 4}}">
<view class="prize_start prize_item">
<image src="../img/start_btn.png" class="lott_btn" mode="aspectFill" bindtap="lottery"></image>
</view>
</block>
<!-- 奖项 -->
<view class="prize_item flex-column {{item.active?'ative':''}}">
<view class="prize_img ">
<image src="{{item.icon}}" mode="aspectFill" />
</view>
<text>{{item.name}}</text>
</view>
</block>
</view>
</view>
</view>
<view class="remainin_text">您还有<text>{{remian_num}}次</text>抽奖机会</view>
</view>
WXSS:
/* pages/jsCase/draw2/index.wxss */
page {
background: linear-gradient(to right, rgb(116, 180, 240), #3ea3ca, #69e9d8);
padding-bottom: 40rpx;
}
.con {
margin: 30rpx auto;
width: 704rpx;
border-radius: 30rpx;
background: linear-gradient(0deg, rgb(59, 129, 194) 0%, #949b97 100%);
box-shadow: 0px 14px 4px 0 #3845b3;
box-sizing: border-box;
padding: 20rpx;
}
.draw_sc {
width: 637rpx;
height: 69rpx;
background: rgba(236, 215, 219, 0.53);
border-radius: 34rpx;
padding: 0 30rpx;
box-sizing: border-box;
margin-bottom: 20rpx;
}
.draw_icon {
width: 37rpx;
height: 29rpx;
margin-right: 25rpx;
}
.swiper {
height: 100%;
font-size: 28rpx;
color: #fff;
flex: 1;
line-height: 69rpx;
}
.draw_text {
color: #FFF000;
}
.box {
width: 632rpx;
box-shadow: -6px 8px 81px 0px rgb(255, 192, 203, .73), 0px 0px 24px 0px #FFFFFF inset;
border-radius: 30rpx;
box-sizing: border-box;
padding: 9rpx;
margin-bottom: 25rpx;
}
.b_box {
width: 614rpx;
border-radius: 30rpx;
box-shadow: 0px 0px 10px 0px rgb(255, 192, 203, .53), 0px 0px 27px 0px #FFFFFF inset;
box-sizing: border-box;
padding: 19rpx 15rpx;
}
.prize_box {
flex-wrap: wrap;
position: relative;
z-index: 99;
}
.prize_item {
width: 186rpx;
height: 156rpx;
background: #F7FCFC;
box-shadow: -6rpx 8rpx 16rpx 0px rgba(7, 53, 130, 0.11) inset;
border-radius: 34rpx;
margin-bottom: 14rpx;
font-size: 24rpx;
font-weight: bold;
color: rgb(221, 141, 154);
box-sizing: border-box;
padding-top: 10rpx;
}
.prize_start {
padding-top: 0 !important;
}
.lott_btn {
width: 100%;
height: 100%;
}
.prize_img image {
width: 100rpx;
height: 100rpx;
border-radius: 5rpx;
}
.ative {
position: relative;
border: 2rpx solid transparent;
box-shadow: none;
}
.ative::after {
content: '';
position: absolute;
top: -8rpx;
bottom: -8rpx;
left: -8rpx;
right: -8rpx;
background: linear-gradient(0deg, #cc745a, #d81657);
z-index: -1;
border-radius: 34rpx;
}
.remainin_text {
font-size: 30rpx;
font-weight: bold;
color: #FFFFFF;
}
.remainin_text text {
color: #5dbda8;
}
.a {
width: 186px;
height: 156px;
background: #EBB700;
box-shadow: -6px 8px 16px 0px rgba(7, 53, 130, 0.11);
border-radius: 34px;
position: relative;
}
.a::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 186px;
height: 149px;
background: #FFD02E;
border: 4px solid;
border-image: linear-gradient(177deg, #FFC500, #FFFFFF) 10 10;
box-shadow: 0px 8px 29px 0px #FFFFFF;
border-radius: 34px;
z-index: 11;
}
JS:
Page({
/**
* 页面的初始数据
*/
data: {
remian_num: 5, //剩余抽奖的次数
prize_list: [],
lock: false, //防止重复点击
prizeListIndex: [0, 1, 2, 4, 7, 6, 5, 3], //抽奖顺序的索引
prizeListIndex1: [0, 1, 2, 7, 3, 6, 5, 4], //奖品索引
over: false, //是否加载完奖品数据
},
onShow: function () {
this.getDraw();
},
getDraw() {
var cacheData = wx.getStorageSync('draw_data'),
prize_list = cacheData ? JSON.parse(cacheData) : {} //缓存数据,防止页面空白
this.setData({
prize_list,
})
this.getData()
},
getData() {
var list = [{
id: "001",
icon: '../../../img/hongbao.png',
name: '华为手机',
},
{
id: "002",
icon: '../../../img/hongbao.png',
name: '谢谢惠顾',
},
{
id: "003",
icon: '../../../img/hongbao.png',
name: '小米手环',
},
{
id: "004",
icon: '../../../img/hongbao.png',
name: '一箱奶',
},
{
id: "005",
icon: '../../../img/hongbao.png',
name: '华为手机',
},
{
id: "006",
icon: '../../../img/hongbao.png',
name: 'ipad',
},
{
id: "007",
icon: '../../../img/hongbao.png',
name: '蓝牙耳机',
},
{
id: "008",
icon: '../../../img/hongbao.png',
name: '平板电脑',
},
];
setTimeout(() => {
let prize_list = list;
let pIndex = this.data.prizeListIndex1;
for (let i in prize_list) {
prize_list[i].active = false;
prize_list[i].index = pIndex[i];
}
this.setData({
prize_list,
over: true
})
wx.setStorageSync('draw_data', JSON.stringify(prize_list))
}, 500)
},
// 范围随机数
randomRange(lower, upper) {
return Math.floor(Math.random() * (upper - lower)) + lower;
},
// 抽奖动画
Timer: null,
LotteryEnd: false, //抽奖结束
nowRunIndex: 0, //ative样式的索引,
luckChose(luckIndex) {
return new Promise((resolve, reject) => {
let that = this
let maxTime = this.randomRange(2500, 4000) //抽奖的时间2.5s-4s之间
let time_speed = 0.01; //速率
if (this.nowRunIndex == 0) { //初始化从索引0开始显示抽奖激活的边框
this.setData({
'prize_list.[0].active': true
})
}
function lotteryRun(time) {
that.Timer = setTimeout(() => {
let list = that.data.prize_list;
++that.nowRunIndex;
that.nowRunIndex >= that.data.prizeListIndex.length ? that.nowRunIndex = 0 : '';
let Pindex = that.data.prizeListIndex[that.nowRunIndex];
list.map((item, index) => {
item.active = Pindex == index;
})
that.setData({
prize_list: list
})
if (that.LotteryEnd && luckIndex == that.nowRunIndex) {
clearTimeout(that.Timer);
that.LotteryEnd = false;
that.setData({
lock: false
})
resolve(list.filter(v => {
return v.active
}))
} else {
time_speed += 0.5;
lotteryRun(time + (time_speed));
}
}, time);
}
lotteryRun(80);
setTimeout(() => {
this.LotteryEnd = true;
}, maxTime);
})
},
// 抽奖活动
lottery() {
if (!this.data.over) return
// 防止重复点击
if (this.data.lock) return
this.setData({
lock: true
})
let {
prize_list
} = this.data;
if (this.data.remian_num.length <= 0 || this.data.prize_list.length === 0) return;
setTimeout(() => {
console.log('12312')
let id = "007",
currIndex = "";
for (let i in prize_list) {
if (id == prize_list[i].id) {
currIndex = prize_list[i].index
}
}
console.log(currIndex)
this.luckChose(currIndex).then(res => {
console.log(res)
wx.showToast({
title: '你抽中了' + res[0].name,
icon: 'none'
})
})
}, 500)
},
})