小程序九宫格抽奖

  1 //wxml 部分 
  2 
  3      
  4       
  5           
  6               
  7                     for="{{luckdrawProductRelModel}}" wx:for-index='index'>
  8                       for-item='item' class="{{amplification_index===index+1?'commodity active':' commodity'}}" wx:if="{{item.prizeNo == 1}}"> 
  9                         
 10                           
 11                             
 12                             {{item.prizeName}}
 13                            
 14                         
 15                       
 16 
 17 
 18                       for-item='item' class="{{amplification_index===index+1?'integral active':' integral'}}" wx:elif="{{item.prizeNo == 2}}">
 19                         
 20                           
 21                             {{item.prizeName}}元
 22                             平台优惠券
 23                           
 24                         
 25                       
 26 
 27 
 28                       for-item='item' class="{{amplification_index===index+1?'integral active':' integral'}}" wx:elif="{{item.prizeNo == 3}}">
 29                         
 30                           
 31                             {{item.stockNum}}
 32                             商城积分
 33                           
 34                         
 35                       
 36 
 37                       for-item='item' class="{{amplification_index===index+1?'not active':' not'}}" wx:elif="{{item.prizeNo == 4}}">
 38                         
 39                             {{item.prizeName}}
 40                         
 41                       
 42                     
 43                     点我抽奖
 44               
 45           
 46       
 47   
 48 
 49 
 50 
 51 //js部分
 52 var interval;
 53 Page({
 54 
 55   /**
 56    * 页面的初始数据
 57    */
 58   data: {
 59     last_index: 1,//上一回滚动的位置
 60     amplification_index: 1,//轮盘的当前滚动位置
 61     roll_flag: true,// 当前是否正在抽奖
 62     max_number: 10,//轮盘的全部数量
 63     speed: 300,//速度，速度值越大，则越慢 初始化为300
 64     finalindex: 0,//最终的奖励
 65     myInterval: "",//定时器
 66     max_speed: 40,//滚盘的最大速度
 67     minturns: 10,//最小的圈数为2
 68     runs_now: 0//当前已跑步数
 69   },
 70 
 71   /**
 72    * 生命周期函数--监听页面加载
 73    */
 74   onLoad: function (options) {
 75     let that = this;
 76    
 77   },
 78  //开始滚动
 79   startrolling: function () {
 80     let that = this;
 81    
 82     //初始化步数
 83     that.data.runs_now = 0;
 84     //当前可以点击的状态下
 85     if (that.data.roll_flag) {
 86       that.data.roll_flag = false;
 87       
 88       that.rolling();
 89     }
 90   },
 91   //滚动轮盘的动画效果
 92   rolling: function () {
 93     var that = this;
 94     this.data.myInterval = setTimeout(function () { that.rolling(); }, this.data.speed);
 95     this.data.runs_now++;//已经跑步数加一
 96     this.data.amplification_index++;//当前的加一
 97     //获取总步数，接口延迟问题，所以最后还是设置成1s以上
 98     var count_num = this.data.minturns * this.data.max_number + this.data.finalindex - this.data.last_index;
 99     //上升期间
100     if (this.data.runs_now <= (count_num / 3) * 2) {
101       this.data.speed -= 30;//加速
102       if (this.data.speed <= this.data.max_speed) {
103         this.data.speed = this.data.max_speed;//最高速度为40；
104       }
105     }
106     //抽奖结束
107     else if (this.data.runs_now >= count_num) {
108       //设置最后停留的位置
109       this.data.last_index = this.data.amplification_index;
110       //清除定时器，设置抽奖状态已经结束
111       clearInterval(this.data.myInterval);
112       //中奖提示
113       wx.showModal({
114         title: '提示',
115         content: that.data.prizeNoName,
116         showCancel:false,
117         success: function (res) {
118           if (res.confirm) {
119             //抽奖结束更新状态
120             openLuckdraw(that);
121           } 
122         }
123       })
124       
125       this.data.roll_flag = true;
126     }
127     //下降期间
128     else if (count_num - this.data.runs_now <= 10) {
129       this.data.speed += 20;
130     }
131     //缓冲区间
132     else {
133       this.data.speed += 10;
134       //console.log(this.data.speed)
135       if (this.data.speed >= 100) {
136         this.data.speed = 100;//最低速度为100；
137       }
138     }
139     if (this.data.amplification_index > this.data.max_number) {//判定！是否大于最大数
140       this.data.amplification_index = 1;
141     }
142     this.setData(this.data);
143   },
144 
145   171 
172 })
173 
174 //样式部分
175 .m-lttery {
176     width: 92%;
177     position: relative;
178     background: url(http://m.jomoo.com.cn/img/cj_bg.png) no-repeat;
179     background-size: 100% 100%;
180     height: 815rpx;
181     margin: 0 auto 0;
182 }
183 
184 
185 .m-myBox {
186     padding-top: 1px;
187     width: 88%;
188     margin: 0 auto;
189     position: relative;
190     top: 160rpx;
191     overflow: hidden;
192     background: #52203b;
193 }
194 
195 .lottery-mian{
196   overflow: hidden;
197   zoom: 1;
198   height: 620rpx;
199   position: relative
200 }
201 
202 .m-myBox .lottery-unit {
203     font-weight: bold;
204     font-size: 24rpx;
205     text-align: center;
206     /* float: left; */
207     width: 100%;
208     height: 155rpx;
209     background: url(http://m.jomoo.com.cn/img/cj.png) no-repeat;
210     background-size: 100% 100%;
211     color: #903833;
212     margin-top: -1px;
213 }
214 .m-myBox .active .lottery-unit {
215     background: #f24040;
216       color: #fff;
217        border-radius: 5px;
218     -webkit-border-radius: 5px;
219     -moz-border-radius: 5px;
220     -ms-border-radius: 5px;
221     -o-border-radius: 5px;
222 }
223 
224 .m-myBox .lottery-mian .itme{
225   float: left;
226   width: 33.33%;
227 }
228 
229 
230 .m-myBox .integral .lottery-unit .p{
231     line-height: 40rpx;
232     font-size: 36rpx;
233 }
234 .m-myBox .integral .lottery-unit .m_tit{
235     padding-left: 20rpx;
236     text-align: left;
237     padding-top: 40rpx;
238 }
239 /*谢谢惠顾*/
240 .m-myBox .not .lottery-unit{
241     line-height: 155rpx;
242     color: #ff783d;
243 }
244 
245 .m-myBox .commodity .lottery-unit .m_pic {
246     position: relative;
247     text-align: left;
248     padding-top:22rpx;
249 }
250 .m-myBox .commodity .lottery-unit .m_pic .tit{
251     width: 100rpx;
252     height: 100rpx;
253       overflow: hidden;
254       margin-top: 20rpx;
255     margin-left: 10rpx;
256     display: block;
257 }
258 .m-myBox .commodity .lottery-unit .m_pic .tit image{
259    width: 100rpx;
260     height: 100rpx;
261 }
262 .m-myBox .commodity .lottery-unit .m_pic .p{
263     position: absolute;
264     right: 20rpx;
265     text-align: right;
266     top: 28rpx;
267     width: 50%;
268     line-height: 40rpx;
269 }
270 
271 .m-myBox .active .lottery-unit{
272     background: #f24040;
273      color: #fff;
274      border-radius: 5px;
275     -webkit-border-radius: 5px;
276     -moz-border-radius: 5px;
277     -ms-border-radius: 5px;
278     -o-border-radius: 5px;
279 }
280 
281 .m-myBox .m_bt {
282     background: url(http://m.jomoo.com.cn/img/cj_but.png) no-repeat;
283     background-size: 100% 100%;
284     text-indent: -99999px;
285     width: 100%;
286     height: 310rpx;
287     line-height: 122rpx;
288     text-align: center;
289     color: #fff;
290     cursor: pointer;
291 }
292 
293 .m-myBox .m_bt.disabled{
294    background: url(http://m.jomoo.com.cn/img/cj_but_bt.png) no-repeat;
295    background-size: 100% 100%;
296   
297 }
298 
299 
300 .m-lttery .bgbox{
301     background: url(http://m.jomoo.com.cn/img/cjtx.png) no-repeat;
302     background-size: 100% 100%;
303     width: 100%;
304     height: 920rpx;
305     position: absolute;
306     top:-48rpx;
307     left: 0;
308     
309 }
310 
311 
312 
313 
314 
315 .m-myBox .lottery-unit{
316   width: 33.33%
317 }
318 .m-myBox .lottery-unit.li1{
319   position: absolute;
320   left:0px;
321   top:0;
322 }
323 .m-myBox .lottery-unit.li2{
324   position: absolute;
325   left:33.33%;
326   top:0;
327 }
328 .m-myBox .lottery-unit.li3{
329   position: absolute;
330   left:66.66%;
331   top:0;
332 }
333 
334 .m-myBox .lottery-unit.li10{
335   position: absolute;
336   left:0;
337   top:155rpx;
338 }
339 
340 .m-myBox .m_bt{
341   position: absolute;
342   top:155rpx;
343   left:33.33%;
344 }
345 
346 .m-myBox .lottery-unit.li4{
347   position: absolute;
348   left:66.66%;
349   top:155rpx;
350 }
351 .m-myBox .lottery-unit.li5{
352   position: absolute;
353   left:66.66%;
354   top:310rpx;
355 }
356 
357 .m-myBox .lottery-unit.li6{
358    position: absolute;
359   left:66.66%;
360   top:465rpx;
361 }
362 .m-myBox .lottery-unit.li7{
363    position: absolute;
364   left:33.33%;
365   top:465rpx;
366 }
367 
368 .m-myBox .lottery-unit.li8{
369   position: absolute;
370   left:0;
371   top:465rpx;
372 }
373 .m-myBox .lottery-unit.li9{
374   position: absolute;
375   left:0;
376   top:310rpx;
377 }

 

 

转载于:https://www.cnblogs.com/hu448763149/p/9521921.html