测试数据自己动手组建
先上效果图(动画滚动，体现在代码定时器里)
//抽奖
runLottery() {
const that = this
const {
getLuckyBoxHomepage,
classData,
numType
} = this.data
let openOneRewardFiveData = this.data.openOneRewardFiveData
//关闭确认消耗积分弹框
this.setData({
isshowpop: false,
//试玩数据清空
openOneRewardFiveData: 【】
})
//启动定时器
var inteValTime = setInterval(() => {
var result = 【】
var clickNumber = that.data.clickNumber + 1
if (clickNumber > classData.length - 1) {
clickNumber = 0
}
result.push(classData【clickNumber】)
that.setData({
//商品滚动效果
openOneRewardData: result,
clickNumber
})
// console.log(clickNumber, "clickNumber")
// console.log(this.data.openOneRewardFiveData, "openOneRewardFiveData")
// console.log(this.data.animationStatus, "animationStatus")
}, 450);
//抽奖
this.setData({
openOneRewardFiveData: 【】
})
//可以先用测试数据查看效果
common.request(api, {
luckyBoxId: getLuckyBoxHomepage.id,
//开启1次还是5连抽
counts: numType == 'one' ? 1 : 5,
periods: getLuckyBoxHomepage.periods
}, 'POST').then(res => {
console.log("抽奖", res)
if (res.code == 'SUCCESS') {
if (numType == 'one') {
setTimeout(() => {
that.setData({
openOneRewardFiveData: res.data,
clickNumber: 0,
animationStatus: true,
//显示好的按钮
showBtnStatus: true
})
console.log("openOneRewardFiveData", this.data.openOneRewardFiveData)
clearInterval(inteValTime)
}, 3200)
} else {
var fiveTime = setInterval(() => {
var clickNumber_five = that.data.clickNumber_five
clickNumber_five++
//5连抽会隔0.4秒出现抽奖结果
if (clickNumber_five == 5) {
clearInterval(inteValTime)
clearInterval(fiveTime)
that.setData({
clickNumber_five: -1,
clickNumber: 0
})
return false
}
}, 450)
setTimeout(() => {
var fiveDataTime = setInterval(() => {
var clickNumber_five_data = that.data.clickNumber_five_data
clickNumber_five_data++
if (clickNumber_five_data == 5) {
clearInterval(fiveDataTime)
that.setData({
clickNumber_five_data: -1,
showBtnStatus: true,
})
return false
}
openOneRewardFiveData.push(res.data【clickNumber_five_data】)
that.setData({
openOneRewardFiveData,
animationStatus: true,
clickNumber_five_data,
})
if (openOneRewardFiveData.length == 5) {
this.setData({
showBtnStatus: true
})
}
}, 480)
}, 2300)
}
//开奖弹框
this.setData({
runLotteryStatus: !this.data.runLotteryStatus
})
} else {
//积分不足做处理
}
})
},
[/span>view class="protocol-win {
{runLotteryStatus? 'block' : 'none'}}" catchtouchmove="touchmove"
[/span>view class="protocol-content-runLottery"
[/span>view class="market_specialEffects"
[/span>view style="position: relative;top: 17.5%;"
[/span>view class="market_rewardDialog"
[/span>view wx:if="{
{!animationStatus}}" class="runLotteryTitle_five"
[/span>view wx:else class="runLotteryTitle_five"
[/span>view wx:if="{
{numType=='one'}}"
[/span>view wx:if="{
{animationStatus}}" class="{
{animationStatus?'animation':''}}"
[/span>view wx:for="{
{openOneRewardFiveData}}" wx:key="index"
[/span>view class="runLotteryFlex"
[/span>view wx:if="{ {item.level==0 && animationStatus}}"
style="background-image: url('');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"
[/span>image src="{ {item.image}}" />
[/span>view wx:else
[/span>image src="{ {item.image}}" />
[/span>view class="prizeTitle" wx:if="{
{item.commodityName}}"
[/span>view class="prizeTitle" wx:if="{
{item.prizeName}}"
[/span>view class="prizeTitle" wx:if="{
{item.integral>0}}"
[/span>view class="prizeMoney" wx:if="{
{item.price>0}}"
[/span>text style="font-size: 26rpx;"
//代码效果参考：http://www.lyjsj.net.cn/wx/art_23689.html
[/span>text style="font-size: 48rpx;"
[/span>view class="prizeMoney" wx:if="{
{item.integral>0}}"
[/span>text style="font-size: 26rpx;"
[/span>text style="font-size: 48rpx;"
[/span>view wx:else
[/span>view wx:for="{
{openOneRewardData}}" wx:key="index"
[/span>view class="runLotteryFlex"
[/span>view wx:if="{ {item.level==0 && animationStatus}}"
style="background-image: url('');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"
[/span>image src="{ {item.image}}" />
[/span>view wx:else
[/span>image src="{ {item.image}}" />
[/span>view class="prizeTitle"
[/span>view class="prizeMoney" wx:if="{
{item.price>0}}"
[/span>text style="font-size: 26rpx;"
[/span>text style="font-size: 48rpx;"
[/span>view class="prizeMoney" wx:if="{
{item.integral>0}}"
[/span>text style="font-size: 26rpx;"
[/span>text style="font-size: 48rpx;"
[/span>view wx:else
[/span>view wx:if="{
{animationStatus}}" class="{
{animationStatus?'animation':''}}"
[/span>view class="runLotteryFlex_five_flex_row"
[/span>view class="runLotteryFlex_five_flex" wx:for="{ {openOneRewardFiveData}}"
wx:key="index"
[/span>view class="runLotteryFlex_five"
[/span>view wx:if="{ {item.level==0 && animationStatus}}"
style="background-image: url('');background-size: 100% 100%;width: 100%;height: 100%;
