Page({/** * 頁面的初始數據*/data: {awardsConfig: {},restaraunts: [], //大轉盤獎品信息},/** * 生命周期函數--監聽頁面加載*/onLoad: function (options) {var self = this;wx.getSystemInfo({//獲取系統信息成功，將系統窗口的寬高賦給頁面的寬高success: function (res) {self.width = res.windowWidthself.height = res.windowHeight}})self.data.awardsConfig = {chance: true,awards: self.data.restaraunts//存放獎項信息}self.tab();})},tab: function() {var self = this;// 繪制轉盤var awardsConfig = self.data.awardsConfig.awards,len = awardsConfig.length,rotateDeg = 360 / len / 2 + 90,html = [],turnNum = 1 / len // 文字旋轉 turn 值self.setData({btnDisabled: self.data.awardsConfig.chance ? '' : 'disabled'})var ctx = wx.createContext();for (var i = 0; i < len; i++) {var w = self.width; //頁面寬var r = w * 0.38; //圓半徑 0.35w// 保存當前狀態ctx.save();// 開始一條新路徑ctx.beginPath();// 位移到圓心，下面需要圍繞圓心旋轉// ctx.translate(150, 150);ctx.translate(w / 2 - 14, w / 2 - 18);// 從(0, 0)坐標開始定義一條新的子路徑ctx.moveTo(0, 0);// 旋轉弧度,需將角度轉換為弧度,使用 degrees * Math.PI/180 公式進行計算。ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);// 繪制圓弧ctx.arc(0, 0, r, 0, 2 * Math.PI / len, false);// 顏色間隔if (i % 2 == 0) {ctx.setFillStyle('#ffffff');} else {ctx.setFillStyle('#ffeab0');}// 填充扇形ctx.fill();// 繪制邊框ctx.setLineWidth(0.5);ctx.setStrokeStyle('#e4370e');ctx.stroke();// 恢復前一個狀態ctx.restore();// 獎項列表html.push({turn: (i + 1) * turnNum + 'turn',award: awardsConfig[i]});}self.setData({awardsList: html});wx.drawCanvas({canvasId: 'canvas',actions: ctx.getActions()})},inner: function(e) {const self = this;if (self.data.awardsConfig.chance) {self.data.awardsConfig.chance = false;//轉動時禁止再次觸發點擊事件var json = res.data;//后端自動分配獎項，并傳給前端獎項信息var item = parseInt(json.grade); //獲取從1到獎品數量之間的隨機數self.getLottery(item + 1, self.data.restaraunts[item]); //獎項位置 （+1 是為了轉動的時候計算角度），對應獎項}},getLottery: function(item, txt) {var self = thisvar awardsConfig = self.data.awardsConfig.awards,len = awardsConfig.length;var awardIndex = item;// 獲取獎品配置var awardsConfig = self.data.awardsConfigif (awardIndex < 2) awardsConfig.chance = false// 初始化 rotatevar animationInit = wx.createAnimation({duration: 1})this.animationInit = animationInit;animationInit.rotate(0).step()this.setData({animationData: animationInit.export(),btnDisabled: 'disabled'})// 旋轉抽獎 執行動畫效果setTimeout(function () {var animationRun = wx.createAnimation({duration: 4000,timingFunction: 'ease'})self.animationRun = animationRunanimationRun.rotate(0 - (360 * 8 - awardIndex * (360 / len))).step()self.setData({animationData: animationRun.export()})}, 100)// 記錄獎品var winAwards = wx.getStorageSync('winAwards') || {data: []}var textInfo = txt === "謝謝參與" ? txt : txt + '1個';winAwards.data.push(textInfo)wx.setStorageSync('winAwards', winAwards)var jh = parseInt(self.data.jh) - 1;// 中獎提示setTimeout(function () {if (txt === "謝謝參與") {wx.showModal({title: '很遺憾',content: '祝您好運',showCancel: false})} else {wx.showModal({title: '恭喜',content: '獲得' + txt,showCancel: false})}self.data.awardsConfig.chance = true;if (awardsConfig.chance) {self.setData({btnDisabled: ''})}}, 4100);},function(err) {console.log(err)console.log("err")//error})},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function() {// this.drawTurntable(this, new Date());},/*** 生命周期函數--監聽頁面顯示*/onShow: function() {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function() {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function() {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function() {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function() {},/*** 用戶點擊右上角分享*/onShareAppMessage: function() {}})