测试数据自己动手组建
先上效果图(动画滚动,体现在代码定时器里)
//抽奖 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 { //积分不足做处理 } }) },
<!-- 开奖 --> <view class="protocol-win {{runLotteryStatus? 'block' : 'none'}}" catchtouchmove="touchmove"> <view class="protocol-content-runLottery"> <view class="market_specialEffects"> <view style="position: relative;top: 17.5%;"> <view class="market_rewardDialog"> <view wx:if="{{!animationStatus}}" class="runLotteryTitle_five">正在开盒中,请耐心等待...</view> <view wx:else class="runLotteryTitle_five">恭喜您,获得以下奖品</view> <!-- 开启一次弹框内容 --> <view wx:if="{{numType=='one'}}"> <view wx:if="{{animationStatus}}" class="{{animationStatus?'animation':''}}"> <view wx:for="{{openOneRewardFiveData}}" wx:key="index"> <view class="runLotteryFlex"> <!-- 0超级盒,2幸运盒,1惊喜盒,3人气盒 --> <view wx:if="{{item.level==0 && animationStatus}}" style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> <image src="{{item.image}}" /> </view> <view wx:else> <image src="{{item.image}}" /> </view> </view> <view class="prizeTitle" wx:if="{{item.commodityName}}">{{item.commodityName}} </view> <!-- 试玩 --> <view class="prizeTitle" wx:if="{{item.prizeName}}">{{item.prizeName}} </view> <view class="prizeTitle" wx:if="{{item.integral>0}}">获得{{item.integral}}积分</view> <view class="prizeMoney" wx:if="{{item.price>0}}"> <text style="font-size: 26rpx;">¥</text> <text style="font-size: 48rpx;">{{item.price||0}}</text> </view> <view class="prizeMoney" wx:if="{{item.integral>0}}"> <text style="font-size: 26rpx;">积分:</text> <text style="font-size: 48rpx;">{{item.integral}}</text> </view> </view> </view> <!-- 试玩 --> <view wx:else> <view wx:for="{{openOneRewardData}}" wx:key="index"> <view class="runLotteryFlex"> <view wx:if="{{item.level==0 && animationStatus}}" style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> <image src="{{item.image}}" /> </view> <view wx:else> <image src="{{item.image}}" /> </view> </view> <view class="prizeTitle">{{item.prizeName}}</view> <view class="prizeMoney" wx:if="{{item.price>0}}"> <text style="font-size: 26rpx;">¥</text> <text style="font-size: 48rpx;">{{item.price}}</text> </view> <view class="prizeMoney" wx:if="{{item.integral>0}}"> <text style="font-size: 26rpx;">积分:</text> <text style="font-size: 48rpx;">{{item.integral}}</text> </view> </view> </view> </view> <!-- 开启五次次弹框内容 --> <view wx:else> <view wx:if="{{animationStatus}}" class="{{animationStatus?'animation':''}}"> <view class="runLotteryFlex_five_flex_row"> <view class="runLotteryFlex_five_flex" wx:for="{{openOneRewardFiveData}}" wx:key="index"> <view class="runLotteryFlex_five"> <view wx:if="{{item.level==0 && animationStatus}}" style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> <image src="{{item.image}}" /> </view> <view wx:else> <image src="{{item.image}}" /> </view> </view> <view class="prizeTitle_five" wx:if="{{item.commodityName}}"> {{item.commodityName}}</view> <view class="prizeTitle_five" wx:if="{{item.integral>0}}">获得{{item.integral}}积分 </view> </view> </view> </view> <!-- 试玩 --> <view wx:else> <view wx:for="{{openOneRewardData}}" wx:key="index"> <view class="runLotteryFlex"> <view wx:if="{{animationStatus}}" style="background-image: url('https://cdn-hb.ben1.com.cn/weima/market/market_winningLogo.jpg');background-size: 100% 100%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> <image src="{{item.image}}" /> </view> <view wx:else> <image src="{{item.image}}" /> </view> </view> <view class="prizeTitle">{{item.prizeName}}</view> <view class="prizeMoney" wx:if="{{item.price>0}}"> <text style="font-size: 26rpx;">¥</text> <text style="font-size: 48rpx;">{{item.price}}</text> </view> <view class="prizeMoney" wx:if="{{item.integral>0}}"> <text style="font-size: 26rpx;">积分:</text> <text style="font-size: 48rpx;">{{item.integral}}</text> </view> </view> </view> </view> </view> <view wx:if="{{!playTrueStatus}}" class="hint">可在【我的物品里查看】</view> <view wx:else class="hint">试玩结果仅供参考!</view> <view wx:if="{{!playTrueStatus}}"> <view wx:if="{{numType=='one' && showBtnStatus}}" class="market_rewardResult_flex" catchtap="closeProtocol" data-type="runLottery" data-num="one"> 好 的 </view> <view wx:if="{{numType=='five' && showBtnStatus}}" class="market_rewardResult_flex" catchtap="closeProtocol" data-type="runLottery" data-num="five"> 好 的 </view> </view> <view wx:else> <view wx:if="{{demoStatus}}" class="market_rewardResult_flex" catchtap="closeProtocol" data-type="runLottery" data-num="one"> 赶紧来一把真的! </view> </view> </view> </view> </view> </view> <!-- 开奖 -->
.enroll { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 999; } .block { display: block; } .none { display: none; } .market_rewardDialog .runLotteryFlex { width: 334.41rpx; height: 334.41rpx; border-radius: 34rpx; background: rgba(255, 255, 255, 1); margin: 0 auto 42.56rpx; display: flex; align-items: center; justify-content: center; } .market_rewardDialog .runLotteryFlex_five { width: 160.47rpx; height: 160.47rpx; border-radius: 22rpx; background: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; } .market_rewardDialog .runLotteryFlex image { width: 226rpx; height: 272rpx; animation: anLoca 1s alternate infinite; border-radius: 8rpx; } /* 图标动画 */ .animation { /* animation: anLoca 1s; animation-iteration-count: 10000; animation-direction: alternate; */ /* Safari 和 Chrome */ /* transform: rotate(0deg) scale(0.5); */ animation: run 0.5s; animation-iteration-count: 1; animation-direction: alternate; /*动画只执行一次*/ -moz-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-fill-mode: forwards; /*让动画停留在最后一帧 */ -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; } @-webkit-keyframes run { from { transform: scale(0.1); } to { transform: scale(1); } /* 25% { transform: scale(0.8); transform: rotate(0deg); } */ /* 50% { transform: scale(0.8); transform: rotate(0deg); } 75% { transform: scale(1); transform: rotate(0deg); } */ } .market_rewardDialog .runLotteryFlex_five_flex_row { padding-left: 62.03rpx; display: flex; flex-wrap: wrap; } .market_rewardDialog .runLotteryFlex_five_flex { width: 169.47rpx; margin-right: 18.44rpx; } .market_rewardDialog .runLotteryFlex_five image { width: 116rpx; height: 139rpx; } .market_rewardDialog .prizeTitle { font-weight: Medium; font-size: 26rpx; color: #fff; padding-left: 84rpx; padding-right: 80rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; text-align: center; } .market_rewardDialog .prizeTitle_five { padding-top: 12.88rpx; margin-bottom: 25.66rpx; font-weight: Medium; font-size: 22.52rpx; color: #fff; padding-left: 10.97rpx; /* padding-right: 80rpx; */ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 这里是超出几行省略 */ overflow: hidden; } .market_rewardDialog .prizeMoney { color: #FFFFFF; text-align: center; padding-top: 20rpx; font-weight: bold; } .protocol-content-runLottery .hint { padding-top: 19rpx; margin-bottom: 45.03rpx; color: #FEBD6D; font-size: 20rpx; text-align: center; }