1 //wxml 部分
2 <view class='m-lttery'>
3 <view class='bgbox'></view>
4 <view class="m-myBox">
5 <view id='lottery'>
6 <view class="lottery-mian">
7 <block wx:for="{{luckdrawProductRelModel}}" wx:for-index='index'>
8 <view wx:for-item='item' class="{{amplification_index===index+1?'commodity active':' commodity'}}" wx:if="{{item.prizeNo == 1}}"> <!--展示商品-->
9 <view class='lottery-unit li{{index + 1}}'>
10 <view class="m_pic">
11 <view class='tit'><image src="{{item.imgUrlPath}}"/></view>
12 <view class='p'>{{item.prizeName}}</view>
13 </view>
14 </view>
15 </view>
16
17
18 <view wx:for-item='item' class="{{amplification_index===index+1?'integral active':' integral'}}" wx:elif="{{item.prizeNo == 2}}"><!--平台优惠卷-->
19 <view class='lottery-unit li{{index + 1}}'>
20 <view class="m_tit m_mybox">
21 <view class='p'>{{item.prizeName}}元</view>
22 平台优惠券
23 </view>
24 </view>
25 </view>
26
27
28 <view wx:for-item='item' class="{{amplification_index===index+1?'integral active':' integral'}}" wx:elif="{{item.prizeNo == 3}}"><!--积分-->
29 <view class='lottery-unit li{{index + 1}}'>
30 <view class="m_tit m_mybox">
31 <view class='p'>{{item.stockNum}}</view>
32 商城积分
33 </view>
34 </view>
35 </view>
36
37 <view wx:for-item='item' class="{{amplification_index===index+1?'not active':' not'}}" wx:elif="{{item.prizeNo == 4}}"><!--谢谢惠顾-->
38 <view class='lottery-unit li{{index + 1}}'>
39 {{item.prizeName}}
40 </view>
41 </view>
42 </block>
43 <view class="{{activityState == 2?'m_bt lottery-unit':'m_bt lottery-unit disabled'}}" bindtap="{{activityState == 2?'luckdraw':''}}">点我抽奖</view>
44 </view>
45 </view>
46 </view>
47 </view>
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
扫一扫
944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
