微信小程序實現大轉盤抽獎功能

功能需求背景

小程序中，需要一個轉盤抽獎的功能。后臺隨機生成獎品信息，完成抽獎過程。第一次如果抽獎不中，可以分享給好友，重新獲得一次抽獎機會。

業務歸屬

NHT周年慶典活動小程序抽獎 - 2021年5月10日

實現效果

具體代碼實現方法

#luckdraw_box { width: 531rpx; height: 531rpx; margin: 0 auto; position: relative; color: #FFFFFF; } #luckdraw_back { width: 100%; height: 100%; } #luckdraw_back image { display: block; width: 100%; height: 100%; transform-origin: center center; } #luckdraw_pointer { width: 174rpx; height: 228rpx; position: absolute; left: 178.5rpx; z-index: 999; top: 132.5rpx; } #luckdraw_pointer image { display: block; width: 100%; height: 100%; } page { background: #060606; background-image: url(https://wx-homelight.obs.cn-north-4.myhuaweicloud.com/nht20/lucky-page.jpg); background-size: 100%; background-repeat: no-repeat; } .xui-share-panel { position: fixed; bottom: 0; width: 100%; border-radius: 50%; height: 900rpx; z-index: 999; } .xui-share-friend { background-image: url(https://wx-homelight.obs.cn-north-4.myhuaweicloud.com/nht20/btn-share.png); background-size: 100%; background-repeat: no-repeat; height: 300rpx; width: 100%; background-color: transparent; } .xui-share-img { width: 100rpx; height: 60rpx; } .luckdraw-desc{ text-align: center; padding-bottom: 40rpx; color: #FFFFFF; margin-top: 180rpx; font-size: 36rpx; padding-left: 80rpx; padding-right: 80rpx; } .share-title{ color: #FFFFFF; font-size: 40rpx; padding-bottom: 20rpx; } .share-desc{ text-align: center; color: #FFFFFF; font-size: 32rpx; padding-bottom: 80rpx; } .luckdraw-img{ width: 100%; height: 120rpx; }

// 上下文對象 var that; //獲取應用實例 const app = getApp(); const { core, login } = app; const { ajax } = core; Page({ /** * 頁面的初始數據 */ data: { is_play: false, // 是否在運動中，避免重復啟動bug available_num: 0, // 可用抽獎的次數，可自定義設置或者接口返回 start_angle: 0, // 轉動開始時初始角度=0位置指向正上方，按順時針設置，可自定義設置 base_circle_num: 9, // 基本圈數，就是在轉到（最后一圈）結束圈之前必須轉夠幾圈 ，可自定義設置 low_circle_num: 5, // 在第幾圈開始進入減速圈（必須小于等于基本圈數），可自定義設置 add_angle: 10, // 追加角度，此值越大轉動越快，請保證360/add_angle=一個整數，比如1/2/3/4/5/6/8/9/10/12等 use_speed: 1, // 當前速度，與正常轉速值相等 nor_speed: 1, // 正常轉速，在減速圈之前的轉速，可自定義設置 low_speed: 10, // 減速轉速，在減速圈的轉速，可自定義設置 end_speed: 100, // 最后轉速，在結束圈的轉速，可自定義設置 random_angle: 0, // 中獎角度，也是隨機數，也是結束圈停止的角度，這個值采用系統隨機或者接口返回 change_angle: 0, // 變化角度計數，0開始，一圈360度，基本是6圈，那么到結束這個值=6*360+random_angle；同樣change_angle/360整除表示走過一整圈 result_val: "未中獎", // 存放獎項容器，可自定義設置 // 獎項區間 ，360度/獎項個數 ，一圈度數0-360，可自定義設置 Jack_pots: [], //是否展示抽獎大轉盤 isDoLucky: false, //是否展示下面的分享按鈕 isShare : true, }, //當前進入頁面人員的ID值 _myopenid: '', /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { that = this; // 檢查登錄狀態(獲取自己的openid) login.checkLogin((openid) => { this._myopenid = openid; }); }, /** * 啟動抽獎,首先向后臺服務端請求，得到獎品數據 */ luckDrawStart: function () { ajax.spost({ url: 'wx/award-random-angle', data: { openId: this._myopenid }, success(ret) { if(ret.gameOver){ core.modal('獎品已送完'); }else{ that.setData({ Jack_pots: ret.awardList, random_angle: ret.luckyAngle }); //開始執行抽獎的動作 this.doDrawStart(); } } }) }, //抽獎開始 doDrawStart:function(){ // 阻止運動中重復點擊 if (!that.data.is_play) { // 設置標識在運動中 that.setData({ is_play: true }); //重置轉盤數據 this.luckDrawReset(); // 運動函數 setTimeout(that.luckDrawChange, that.data.use_speed); }; }, /** * 轉盤運動 */ luckDrawChange: function () { // 繼續運動 if (that.data.change_angle >= that.data.base_circle_num * 360 + that.data.random_angle) { // 已經到達結束位置 // 提示中獎， that.getLuckDrawResult(); // 運動結束設置可用抽獎的次數和激活狀態設置可用 that.luckDrawEndset(); } else { // 運動 if (that.data.change_angle < that.data.low_circle_num * 360) { // 正常轉速 // console.log("正常轉速") that.data.use_speed = that.data.nor_speed } else if (that.data.change_angle >= that.data.low_circle_num * 360 && that.data.change_angle <= that.data.base_circle_num * 360) { // 減速圈 // console.log("減速圈") that.data.use_speed = that.data.low_speed } else if (that.data.change_angle > that.data.base_circle_num * 360) { // 結束圈 // console.log("結束圈") that.data.use_speed = that.data.end_speed } // 累加變化計數 that.setData({ change_angle: that.data.change_angle + that.data.add_angle >= that.data.base_circle_num * 360 + that.data.random_angle ? that.data.base_circle_num * 360 + that.data.random_angle : that.data.change_angle + that.data.add_angle }); setTimeout(that.luckDrawChange, that.data.use_speed); } }, /** * 重置參數 */ luckDrawReset: function () { // 轉動開始時首次點亮的位置，可自定義設置 that.setData({ start_angle: 0 }); // 當前速度，與正常轉速值相等 that.setData({ use_speed: that.data.nor_speed }); // 變化計數，0開始，必須實例有12個獎項，基本是6圈，那么到結束這個值=6*12+random_number；同樣change_num/12整除表示走過一整圈 that.setData({ change_angle: 0 }); }, /** * 獲取抽獎結果 */ getLuckDrawResult: function () { for (var j = 0; j < that.data.Jack_pots.length; j++) { if (that.data.random_angle >= that.data.Jack_pots[j].startAngle && that.data.random_angle <= that.data.Jack_pots[j].endAngle) { that.setData({ result_val: that.data.Jack_pots[j].name }); //沒有中獎的話，提示分享給好友，可以再獲得一次抽獎機會 if ('抱歉沒有中獎' == this.data.result_val) { that.setData({ isShare: false, isDoLucky : true }); } //跳轉到中獎頁面 else { wx.reLaunch({ url: '/pages/lucky-success/lucky-success?openId=' + this._myopenid, }) } break; }; }; }, /** * 更新狀態（運動結束設置可用抽獎的次數和激活狀態設置可用） */ luckDrawEndset: function () { // 是否在運動中，避免重復啟動bug that.setData({ is_play: false }) // 可用抽獎的次數，可自定義設置 that.setData({ available_num: that.data.available_num - 1 }); }, //分享鏈接給好友，一個好友，每天可以幫忙點亮一次 onShareAppMessage() { let path = core.view.path('index', { openid: { content: login.getOpenId() }, }); //點擊分享之后，則隱藏分享按鈕，展示大轉盤抽獎 that.setData({ isShare: true, isDoLucky : false }); return { title: '國際大使學院抽獎活動', path: path, imageUrl: 'https://wx-homelight.obs.cn-north-4.myhuaweicloud.com/nht20/face.jpg' }; }, })

小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。