前言：写的一个微信小程序的抽奖活动页，以前不用后端实现每天次数的限制，但实际工作中肯定是由后端控制, 至于为什么会由我一个前端写呢？只能说人在屋檐下，人家让你干啥你就干啥就好了，也当做自己的一个知识积累吧，
大致的一个UI图
.wxml
<!--pkgA/pages/draw/draw.wxml-->
<view>
<view class="back" bindtap="back" style="top:{{ ($state.statusBarHeight * 2) + 10 }}rpx"></view>
<view class="backdrop">
<image style="width:100%;height:710rpx" src="https://img.xmxk513.com/wx_public/46439e98deff2e52.png"></image>
<view class="turntable">
<image style="width:648rpx;height:764rpx" src="https://img.xmxk513.com/wx_public/22021279db25ff7a.png"></image>
<view class="border">
<image style="width:620rpx;height:658rpx" src="https://img.xmxk513.com/wx_public/a6cd91d543b927d0.gif"></image>
</view>
<view class="box">
<view class="row1">
<view class="{{activeIndex === 0 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/a3973396f742e905.png">
</image>
</view>
<view class="{{activeIndex === 1 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/c9e5492279134b57.png">
</image>
</view>
<view class="{{activeIndex === 2 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/12cf2460eb847d78.png">
</image>
</view>
<view class="{{activeIndex === 3 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/80cbb5b103c84110.png">
</image>
</view>
</view>
<view class="row2">
<view class="cell1">
<view class="{{activeIndex === 11 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src=" https://img.xmxk513.com/wx_public/12cf2460eb847d78.png">
</image>
</view>
<view class="{{activeIndex === 10 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/c9e5492279134b57.png">
</image>
</view>
</view>
<view class="cell2">
<view bindtap="start">
<image style="width:228rpx;height:244rpx" src="https://img.xmxk513.com/wx_public/3544ec6cdac24393.png">
</image>
</view>
</view>
<view class="cell3">
<view class="{{activeIndex === 4 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/40b0e0e904013e75.png">
</image>
</view>
<view class="{{activeIndex === 5? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/c9e5492279134b57.png">
</image>
</view>
</view>
</view>
<view class="row3">
<view class="{{activeIndex === 9 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/a3973396f742e905.png">
</image>
</view>
<view class="{{activeIndex === 8 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/c9e5492279134b57.png">
</image>
</view>
<view class="{{activeIndex === 7 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/12cf2460eb847d78.png">
</image>
</view>
<view class="{{activeIndex === 6 ? 'active' : ''}}">
<image style="width:116rpx;height:124rpx" src="https://img.xmxk513.com/wx_public/80cbb5b103c84110.png">
</image>
</view>
</view>
</view>
</view>
<view class="num">剩余抽奖次数：<p>{{drawNum}}</p> 次</view>
</view>
</view>
.wxss
page{
background-color: #100147;
}
.back {
width: 60rpx;
height: 60rpx;
background-image: url(http://img.xmxk513.com/wx_weapp_lymall/29c6318283679899.png);
background-size: cover;
position: fixed;
left: 30rpx;
z-index: 20;
}
.backdrop{
width: 100%;
height: 1170rpx;
position: relative;
}
.turntable {
position: absolute;
top: 354rpx;
left: 52rpx;
}
.turntable .border {
position: absolute;
top: 14rpx;
left: 12rpx;
}
.turntable .box {
width: 530rpx;
height: 560rpx;
position: absolute;
top: 70rpx;
left: 60rpx;
/* background-color: red; */
display: flex;
flex-direction: column;
justify-content:space-evenly;
}
.box .row1{
display: flex;
justify-content: space-evenly;
}
.box .row2{
display: flex;
justify-content: space-evenly;
margin: 0 -8rpx;
}
.box .row2 .cell1{
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.box .row2 .cell2{
margin-top: 10rpx;
}
.box .row3{
display: flex;
justify-content: space-evenly;
}
.box .active{
animation: finger 0.5s linear infinite;
}
.num{
width: 468rpx;
height: 55rpx;
background-color:#7f052f;
border-radius: 6rpx;
color: #fff;
text-align: center;
line-height: 55rpx;
position: absolute;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
}
.num p{
font-size: 36rpx;
color: #ffa400;
}
.js
// pkgA/pages/draw/draw.js
let prize = ''; // 速度开始变化（变缓）的位置
let prizeId = ''; // 中奖位置
const cycle = 50; // 基本转动次数
let speed = 200; // 转动速度
let times = 0; // 转动次数
let timer = null; // 定时器ID
let click = false; // 是否正在抽奖
import util from '../../../utils/util';
const app = getApp();
let drawNum = wx.getStorageSync('drawNum') //缓存中获取次数
Page({
/**
* 页面的初始数据
*/
data: {
activeIndex: -1,
drawNum: wx.getStorageSync('drawNum') || 3, //可抽奖次数
isGetDailyDraw: true, //是否可抽奖
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
clearTimeout(timer);
this.getList()
this.dailyDraw()
},
/**
* @method 每日抽奖次数计算
*/
dailyDraw() {
let drawNum = wx.getStorageSync('drawNum'); // 当前抽奖次数
if (drawNum || drawNum === 0) {
let lastTimeStamp = wx.getStorageSync('getDailyDrawTime'); // 上次抽奖的时间戳
let nowTimeStamp = Math.round(new Date().getTime() / 1000); // 当前的时间戳
let tomorrowTimeStamp; // 明天的时间戳
let _date = new Date(lastTimeStamp * 1000);
_date.setHours(0);
_date.setMinutes(0);
_date.setSeconds(0);
// tomorrowTimeStamp = Math.round(_date.getTime() / 1000) + 86400;
tomorrowTimeStamp = 1669564800
if (nowTimeStamp > lastTimeStamp && nowTimeStamp < tomorrowTimeStamp) {
// 还在今天内
if (drawNum === 0) {
// 已抽满3次
this.setData({
drawNum: 0,
isGetDailyDraw: false
})
}
// 未满3次
// this.setData({
// drawNum
// });
}
if (nowTimeStamp > tomorrowTimeStamp) {
// 已经第二天了
// 重置领取次数和领取时间戳
wx.setStorageSync("drawNum", 3);
wx.setStorageSync("getDailyDrawTime", 0);
}
} else {
// 用户第一次进抽奖页面
wx.setStorageSync('drawNum', 3)
this.setData({
drawNum: 3
})
}
},
// 点击开始
start() {
if (this.data.drawNum === 0) {
this.setData({
isGetDailyDraw: false
})
return false
}
if (!this.data.isGetDailyDraw) return false;
let nowTime = parseInt(Math.round(new Date() / 1000)); // 当前时间
wx.setStorageSync('getDailyDrawTime', nowTime); // 纪录领取时间
let drawNum = wx.getStorageSync('drawNum'); // 领取次数
if (!click) {
if (drawNum) {
drawNum -= 1;
wx.setStorageSync('drawNum', drawNum);
if (drawNum == 0) {
this.setData({
drawNum: 0,
isGetDailyDraw: false
})
}
} else {
// 没有抽过 计算第一次
drawNum = 2;
wx.setStorageSync('drawNum', drawNum);
}
this.setData({
drawNum
});
}
// 如果正在抽奖则直接return
if (click) {
return false;
}
click = true;
speed = 100;
// 中奖的位置，应该从服务端取到
prizeId = Math.floor(Math.random() * 12);
console.log('中奖位置：', prizeId)
this.roll();
},
// 转动
roll() {
times += 1;
this.setData({
// 如果activeIndex是最后一个，则赋值0
activeIndex: this.data.activeIndex >= 11 ? 0 : this.data.activeIndex + 1
})
if (times > cycle + 10 && this.data.activeIndex === prizeId) {
// 最后滚动到中奖位置，停止滚动
clearTimeout(timer);
prize = -1;
times = 0;
click = false;
} else {
if (times < cycle) {
// 一开始速度增加（speed越小速度越快）
speed -= 20;
} else if (times === cycle) {
// 确定一个速度变化的位置，下一次滚动到此位置，速度明显变缓
prize = Math.random() * 12 | 0;
} else {
// 滚动次数大于基本滚动次数并且到达上面确定的位置时，速度明显变缓
if (times > cycle + 10 && ((prize === 0 && this.data.activeIndex === 11) || prize === this.data.activeIndex + 1)) {
speed += 90;
} else {
// 滚动次数大于基本滚动次数，速度逐渐变缓
speed += 30;
}
}
// 控制速度在30
if (speed < 30) {
speed = 30;
}
timer = setTimeout(this.roll, speed);
}
},
back() {
wx.navigateTo({
url: '/pages/my/withdrawRecord/index',
})
},
/**
* @method 获取商品列表
*/
getList() {
util.ajax('api/Taobao_Goods/getActivityRecommend', {
material_id: this.data.material_id,
page: this.data.page
})
.then(res => {
console.log(res);
this.setData({
goodsList: res
})
})
},
/**
* @method 跳转商品详情
*/
shopDetails(e) {
console.log(e);
let item = e.currentTarget.dataset.item
wx.navigateTo({
url: '/pages/shopDetails/shopDetails?item=' + encodeURIComponent(JSON.stringify(item))
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
