uniapp 九宫格抽奖

1. <template>
2.   <view class="container">
3.     <view class="navleft" @click="navback">
4.       <image src="@/static/cj/left.png" mode=""></image>
5.     </view>
6.     <view class="navtitle">抽奖</view>
7.     <view class="bg">
8.       <image src="https://szcc.test03.qcw800.com/uploads/images/20240708/kIKHgR1pGuYUwq0D9AhTXcl9ufcKmwsVuXn0lKUp.png" mode=""></image>
9.     </view>
10.     <view class="title">幸运大抽奖</view>
11.     <view class="cont">
12.       <view
13.         class="cont_item"
14.         :class="{ 'no-margin': index % 3 === 2, highlight: index === highlightIndex }"
15.         v-for="(item, index) in drawList"
16.         :key="index"
17.         @click="changeCont(item)"
18.       >
19.         <view class="cont_img" v-if="item.text !== '抽奖'">
20.           <image src="@/static/cj/jp.png" mode=""></image>
21.         </view>
22.         <view class="cont_cj" v-if="item.text == '抽奖'">
23.           {{ item.text }}
24.         </view>
25.         <view class="cont_txt" v-if="item.text !== '抽奖'">{{ item.title }}</view>
26.       </view>
27.     </view>
29.     <view class="sycj">
30.       <view class="sycj_txt">剩余抽奖次数：{{ luck }}</view>
31.     </view>
32.     <view class="foot">
33.       <view class="foot_title">
34.         <view class="foot_left"></view>
35.         <view class="foot_title">活动规则</view>
36.         <view class="foot_right"></view>
37.       </view>
38.       <view class="foot_txt">
39.         活动最终解释权归平台所有，活动最终解释权归平台所有，活动最终解释权归平台所有活动最终解释权归平台所有，活动最终解释权归平台所有，活动最终解释权归平台
40.       </view>
41.     </view>
42.     <view>
43.       <!-- 弹窗 -->
44.       <uni-popup ref="popup" background-color="#fff">
45.         <view class="popup-con" v-if="result.title !== '谢谢惠顾'">
46.           <view class="con_title">提示</view>
47.           <view class="con_text">恭喜您本次抽中{{ result.title }},是否需要快递邮寄？</view>
48.           <view class="title_btns">
49.             <view class="title_err" @click="popupClose">不需要</view>
50.             <view class="title_res" @click="goAddress">需要</view>
51.           </view>
52.         </view>
53.         <view class="popup-con" v-else>
54.           <view class="con_title">提示</view>
55.           <view class="con_text">您本次抽中谢谢惠顾,继续努力</view>
56.           <view class="conbut" @click="popupClose">确定</view>
57.           <!-- <view class="title_btns">
58.             <view class="title_err" @click="popupClose">不需要</view>
59.             <view class="title_res" @click="goAddress">需要</view>
60.           </view> -->
61.         </view>
62.       </uni-popup>
63.     </view>
64.   </view>
65. </template>
67. <script>
68. import { get, post } from '@/utils/request.js';
69. export default {
70.   data() {
71.     return {
72.       luck: '', //抽奖次数
73.       drawList: '', //抽奖列表
74.       isAnimating: false,
75.       currentIndex: null, // 用于追踪当前正在高亮的列表项的索引
76.       isLuckyDrawAnimating: false,
77.       winningItemId: null, // 存储从服务器返回的中奖ID
78.       highlightIndex: null, // 初始化 highlightIndex
79.       result: '' //中奖结果
80.     };
81.   },
82.   created() {
83.     this.getDrawList();
84.   },
85.   onShow() {
86.     this.getDrawNum();
87.   },
88.   // 方法部分
89.   methods: {
90.     async getDrawNum() {
91.       const res = await get('/api/user/luckDrawNum', { api_token: uni.getStorageSync('api_token') });
92.       console.log('抽奖次数', res.data.num);
93.       this.luck = res.data.num;
94.     },
95.     async getDrawList() {
96.       const res = await get('/api/public/luckDrawList');
97.       console.log(res);
98.       this.drawList = res.data;
99.       // 抽奖按钮配置
100.       const drawButton = {
101.         text: '抽奖',
102.         image: null
103.       };
104.       // 在第5项位置插入抽奖按钮
105.       if (this.drawList.length >= 5) {
106.         this.drawList.splice(4, 0, drawButton);
107.       } else {
108.         // 如果当前列表长度不足5项，可以考虑直接添加到末尾或不做任何操作
109.         this.drawList.push(drawButton);
110.       }
111.     },
112.     navback() {
113.       uni.navigateBack();
114.     },
115.     popupOpen() {
116.       this.$refs.popup.open();
117.     },
118.     popupClose() {
119.       this.$refs.popup.close();
120.       this.getDrawNum();
121.     },
122.     goAddress() {
123.       this.$refs.popup.close();
124.       this.getDrawNum();
125.       uni.navigateTo({
126.         url: '/pages/draw/address'
127.       });
128.     },
129.     changeCont(item) {
130.       if (item.text === '抽奖') {
131.         if (this.luck > 0) {
132.           this.luckyDraw();
133.         } else {
134.           uni.showToast({
135.             title: '没有抽奖次数了',
136.             icon: 'none',
137.             duration: 2000
138.           });
139.         }
140.       }
141.     },
142.     startLuckyDrawAnimation() {
143.       this.highlightIndex = 0; // 在这里重置 highlightIndex
144.       this.isLuckyDrawAnimating = true;
145.       this.cycleHighlight();
146.     },
147.     cycleHighlight() {
148.       if (this.isLuckyDrawAnimating && this.highlightIndex < this.drawList.length) {
149.         if (this.drawList[this.highlightIndex].text === '抽奖') {
150.           // 直接跳过抽奖按钮，不进行高亮
151.           this.highlightIndex++;
152.           // 使用立即执行的函数表达式确保在抽奖按钮跳过后，立即进行下一次高亮处理
153.           (() => {
154.             setTimeout(() => {
155.               this.cycleHighlight();
156.             }, 200);
157.           })();
158.         } else {
159.           // 应用高亮样式
160.           this.$nextTick(() => {
161.             // 更新highlightIndex之后再设置高亮，确保DOM更新完成
162.             setTimeout(() => {
163.               this.highlightIndex++;
164.               this.cycleHighlight();
165.             }, 200);
166.           });
167.         }
168.       } else {
169.         this.stopAtWinningItem();
170.       }
171.     },
172.     stopAtWinningItem() {
173.       if (this.winningItemId !== null) {
174.         this.highlightIndex = this.drawList.findIndex((item) => item.id === this.winningItemId);
175.         this.result = this.drawList.find((item) => item.id === this.winningItemId);
176.         console.log('执行', this.result);
177.         // 这里可以添加额外的中奖动画效果
178.         this.isLuckyDrawAnimating = false;
179.         //获取中奖的那一项数据
180.         this.popupOpen(); // 显示中奖弹窗
181.       }
182.     },
183.     luckyDraw() {
184.       this.startLuckyDrawAnimation();
185.       uni.request({
186.         url: 'https://szcc.test03.qcw800.com/api/user/LuckDraw',
187.         method: 'GET',
188.         data: { api_token: uni.getStorageSync('api_token') },
189.         success: (res) => {
190.           console.log(res); //{luck_id: "8", luck_draw_record_id: "4"} luck_draw_record_id是中奖id
191.           this.winningItemId = res.data.data.luck_id;
192.           // this.winningItemId = '4';
193.         }
194.       });
195.     }
196.   }
197. };
198. </script>
200. <style lang="scss" scoped>
201. .highlight {
202.   box-shadow: 0 0 10rpx 5rpx rgba(255, 255, 0, 0.8) !important;
203. }
204. ::v-deep .uni-popup__wrapper {
205.   width: 662rpx;
206.   height: 424rpx;
207.   background: #ffffff;
208.   border-radius: 16rpx;
209. }
210. .popup-con {
211.   .con_title {
212.     margin-top: 40rpx;
213.     font-size: 34rpx;
214.     font-family: PingFang SC, PingFang SC-Medium;
215.     font-weight: 500;
216.     text-align: center;
217.     color: #1d2129;
218.     letter-spacing: -0.44rpx;
219.   }
220.   .con_text {
221.     width: 540rpx;
222.     margin: 62rpx auto;
223.     font-size: 30rpx;
224.     font-family: PingFang SC, PingFang SC-Medium;
225.     font-weight: 500;
226.     text-align: center;
227.     color: #1b1b1b;
228.     line-height: 48rpx;
229.   }
230.   .conbut {
231.     margin: auto;
232.     width: 286rpx;
233.     height: 82rpx;
234.     background: linear-gradient(82deg, #d93624 13%, #f09072 80%);
235.     border-radius: 16rpx;
236.     text-align: center;
237.     line-height: 82rpx;
238.     color: #fff;
239.   }
240.   .title_btns {
241.     margin: auto;
242.     width: 602rpx;
243.     display: flex;
244.     justify-content: space-between;
245.     .title_err {
246.       width: 286rpx;
247.       height: 82rpx;
248.       background: #f6f7f9;
249.       border-radius: 16rpx;
250.       text-align: center;
251.       line-height: 82rpx;
252.       color: #666666;
253.     }
254.     .title_res {
255.       width: 286rpx;
256.       height: 82rpx;
257.       background: linear-gradient(82deg, #d93624 13%, #f09072 80%);
258.       border-radius: 16rpx;
259.       text-align: center;
260.       line-height: 82rpx;
261.       color: #ffffff;
262.     }
263.   }
264. }
265. .navleft {
266.   position: absolute;
267.   top: 108rpx;
268.   left: 24rpx;
269.   width: 48rpx;
270.   height: 48rpx;
271.   z-index: 2;
272.   image {
273.     width: 100%;
274.     height: 100%;
275.   }
276. }
277. .navtitle {
278.   z-index: 2;
279.   position: absolute;
280.   top: 108rpx;
281.   left: 342rpx;
282.   width: 68rpx;
283.   height: 48rpx;
284.   font-size: 34rpx;
285.   font-family: PingFang SC, PingFang SC-Medium;
286.   font-weight: 500;
287.   color: #ffffff;
288. }
289. .bg {
290.   position: relative;
291.   width: 750rpx;
292.   height: 1624rpx;
293.   image {
294.     width: 100%;
295.     height: 100%;
296.   }
297. }
298. .title {
299.   position: absolute;
300.   top: 194rpx;
301.   left: 126rpx;
302.   width: 496rpx;
303.   height: 140rpx;
304.   font-size: 90rpx;
305.   font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
306.   font-weight: 400;
307.   color: #fdf1b8;
308. }
309. .cont_cj {
310.   width: 148rpx;
311.   height: 148rpx;
312.   background: radial-gradient(#d94235, #e54f2c 55%, #eb7854);
313.   border-radius: 12rpx;
314.   box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(237, 102, 60, 0.56);
315.   font-size: 48rpx;
316.   font-family: PingFang SC, PingFang SC-Medium;
317.   font-weight: 500;
318.   text-align: center;
319.   color: #fdf1b8;
320.   line-height: 148rpx;
321.   margin-right: 30rpx;
322. }
324. .cont {
325.   position: absolute;
326.   top: 366rpx;
327.   left: 66rpx;
328.   background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/POqESSmKSQmWtm5XekLxwZu9zI0bXIGuIXoEbC8V.png) center;
329.   width: 504rpx;
330.   height: 500rpx;
331.   background-size: 100% 100%;
332.   padding: 60rpx;
333.   display: flex;
334.   flex-wrap: wrap;
336.   .cont_item {
337.     width: 148rpx;
338.     height: 148rpx;
339.     background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/yIVTR4jIGECShJpwQzOquyntD08ZgshWV2cPAOZK.png);
340.     background-size: 100% 100%;
341.     margin-right: 30rpx;
342.     &.no-margin {
343.       margin-right: 0;
344.     }
345.     .cont_img {
346.       width: 76rpx;
347.       height: 76rpx;
348.       margin: auto;
349.       image {
350.         margin-top: 24rpx;
351.         width: 100%;
352.         height: 100%;
353.       }
354.     }
355.     .cont_txt {
356.       margin-top: 24rpx;
357.       height: 32rpx;
358.       font-size: 22rpx;
359.       font-family: PingFang SC, PingFang SC-Medium;
360.       font-weight: 500;
361.       text-align: center;
362.       color: #fd9440;
363.     }
364.   }
365. }
366. .sycj {
367.   position: absolute;
368.   top: 1016rpx;
369.   left: 66rpx;
370.   width: 618rpx;
371.   height: 90rpx;
372.   background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/d3MRq1bYG9Uy7hdLFvMkk7nvfM7z4jPFj5p97W8E.png) center;
373.   background-size: 100% 100%;
374.   .sycj_txt {
375.     margin-left: 34rpx;
376.     font-size: 30rpx;
377.     font-family: PingFang SC, PingFang SC-Semibold;
378.     font-weight: 600;
379.     text-align: left;
380.     line-height: 90rpx;
381.     color: #ffffff;
382.   }
383. }
384. .foot {
385.   position: absolute;
386.   top: 1136rpx;
387.   left: 66rpx;
388.   background-color: #fff;
389.   border-radius: 12rpx;
390.   width: 572rpx;
391.   height: 410rpx;
392.   padding: 24rpx 22rpx 0 24rpx;
393.   .foot_title {
394.     display: flex;
395.     align-items: center;
396.     justify-content: center;
397.     .foot_left {
398.       width: 114rpx;
399.       height: 6rpx;
400.       background: linear-gradient(270deg, #eb592b, rgba(240, 144, 114, 0));
401.     }
402.     .foot_title {
403.       margin: 0 24rpx;
404.       width: 160rpx;
405.       height: 56rpx;
406.       font-size: 40rpx;
407.       font-family: PingFang SC, PingFang SC-Semibold;
408.       font-weight: 600;
409.       text-align: left;
410.       color: #ed581d;
411.     }
412.     .foot_right {
413.       width: 114rpx;
414.       height: 6rpx;
415.       background: linear-gradient(90deg, #eb592b, rgba(240, 144, 114, 0));
416.     }
417.   }
418.   .foot_txt {
419.     margin-top: 22rpx;
420.     width: 572rpx;
421.     height: 256rpx;
422.     font-size: 26rpx;
423.     font-family: PingFang SC, PingFang SC-Regular;
424.     font-weight: 400;
425.     text-align: left;
426.     color: #333333;
427.     line-height: 44rpx;
428.   }
429. }
430. </style>

复制代码

 

 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。