// components/raffleWheel/raffleWheel.js //创建并返回内部 audio 上下文 innerAudioContext 对象 const start = wx.createInnerAudioContext(); const mid = wx.createInnerAudioContext(); const stop = wx.createInnerAudioContext(); var http = require('../../../utils/http.js') Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 * 用于组件自定义设置 组件的对外属性 */ properties: { myProperty: { // 属性名 myProperty2: String, 简化的定义方式 type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value: '', // 属性默认 初始值(可选),如果未指定则会根据类型选择一个 observer: function (newVal, oldVal, changedPath) { // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange' // 通常 newVal 就是新设置的数据, oldVal 是旧数据 } }, size: { type: Number, // 转盘大小,传入宽度即可 value: 600 }, }, /** * 私有数据,组件的初始数据 * 可用于模版渲染 */ data: { awardsConfig: { option: '', //转盘的标题名称 awards: [] }, animationData: {}, // 转盘动画 zhuanflg: false, // 转盘是否可以点击切换的标志位 // fastTime: 7600, // 转盘快速转动的时间 fastTime: 3900, // 转盘快速转动的时间 slowTime: 3900, // 转盘慢速转动的时间 runDegs: 0, // 转盘旋转了多少圈 timer: null, // 清除转盘的时间clearTimeout(timer) block1: 'block', // 控制显示或隐藏转盘中心的图片 block2: 'none', block3: 'none', block4: 'none' }, //组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用 setData created: function () {}, // 组件生命周期函数,在组件实例进入页面节点树时执行 attached: function () { this.getScoreLuckPrizes() }, /** * 组件的方法列表 * 更新属性和数据的方法与更新页面数据的方法类似 */ methods: { /* * 公有方法 */ //判断值是否为空 isNull(str) { if (str == null || str == undefined || str == '') { return true; } else { return false; } }, //初始化数据 initAdards() { var that = this, awardsConfig = that.data.awardsConfig; var t = awardsConfig.awards.length; // 选项长度 var e = 1 / t, i = 360 / t, r = i - 90; for (var g = 0; g < t; g++) { awardsConfig.awards[g].item2Deg = g * i + 90 - i / 2 + "deg"; //当前下标 * 360/长度 + 90 - 360/长度/2 awardsConfig.awards[g].afterDeg = r + "deg"; awardsConfig.awards[g].opacity = '1'; } that.setData({ turnNum: e, // 页面的单位是turn awardsConfig: awardsConfig, }) that._change(); //向父组件传出当前转盘的初始数据 }, //重置转盘 reset() { var that = this, awardsConfig = that.data.awardsConfig; var animation = wx.createAnimation({ duration: 1, timingFunction: "ease" }); that.animation = animation; animation.rotate(0).step(), that.data.runDegs = 0; that.setData({ animationData: animation.export(), block3: 'none', block4: 'block' }) for (let x in awardsConfig.awards) { awardsConfig.awards[x].opacity = '1'; } setTimeout(function () { that.setData({ block1: 'block', block4: 'none', awardsConfig: awardsConfig, }) }, 300) }, //父组件需要切换当前转盘的选项 //如果有需要切换不同转盘的选项时,可以调用这方法 //data: 转盘的数据 //flag: 当转盘在转动过程中如果你想停止的话,可以传个true值,默认可不传 switchZhuanpan(data, flag) { this.setData({ awardsConfig: data, block1: 'block', block1: 'none', block3: 'none', block4: 'none', zhuanflg: false, }) this.initAdards(); if (flag) { this.reset(); clearTimeout(this.data.timer); start.stop(); mid.stop(); stop.stop(); } }, /* * 内部私有方法建议以下划线开头 * triggerEvent 用于触发事件,过triggerEvent来给父组件传递信息的 * 写法: this.triggerEvent('cancelEvent', { num: 1 }) // 可以将num通过参数的形式传递给父组件 */ // GO转盘开始转动 _zhuan() { var that = this, awardsConfig = that.data.awardsConfig, runDegs = that.data.runDegs; //>>> 是无符号移位运算符 var r = Math.random() * awardsConfig.awards.length >>> 0, runNum = 8; console.log('当前答案选项的下标=====', r); setTimeout(function () { //要转多少度deg runDegs = runDegs || 0, runDegs = runDegs + (360 - runDegs % 360) + (2160 - r * (360 / awardsConfig.awards.length)); var animation = wx.createAnimation({ duration: that.data.fastJuedin ? that.data.slowTime : that.data.fastTime, timingFunction: "ease" }); that.animation = animation; //这动画执行的是差值 //如果第一次写rotate(360) 那么第二次再写rotate(360)将不起效果 animation.rotate(runDegs).step(), 0 == r && (runDegs = 0); that.setData({ animationData: animation.export(), block1: 'none', block2: 'block', zhuanflg: true, }) that._setatZhuan(true); }, 100); that.setData({ timer: setTimeout(function () { that.setData({ animationData: {}, s_awards: awardsConfig.awards[r].prizeName, //最终选中的结果 awardsConfig: awardsConfig, block2: 'none', block3: 'block', zhuanflg: false, }) that._myAwards(); }, that.data.fastJuedin ? that.data.slowTime : that.data.fastTime) }) }, //初始化数据时向外传的参 _change() { this.triggerEvent('myData', this.data.awardsConfig); // 向父组件传出当前转盘的数组数据 }, //当前转盘的结果 _myAwards() { this.triggerEvent('myAwards', this.data.s_awards) }, //转盘开始转动或者结速转动后的要传的值 _setatZhuan(e) { console.log(e) var params = { url: '/p/scoreLuck/raffle', method: 'GET', data: { addId: 0 }, callBack: res => { setTimeout(() => { if (res.stock) { wx.showModal({ title: '运气爆棚!', showCancel: false, content: res.prizeName, success: () => { this.reset() } }) } else { wx.showModal({ title: '谢谢参与', showCancel: false, content: '运气留给下次吧~', success: () => { this.reset() } }) } }, 2400) }, errCallBack:(err)=>{ console.log(err) wx.showModal({ title: '错误', showCancel: false, content: '服务器开了点小差,待会儿再来吧~', success: () => { this.reset() } }) } } http.request(params) }, // 获取抽奖奖品列表 getScoreLuckPrizes() { var params = { url: '/p/scoreLuck/getScoreLuckPrizes', method: 'GET', data: { consumeType: 1 }, callBack: res => { res.forEach((el, index) => { if (index % 2 === 0) { el['color'] = "#FEFAEA" } else { el['color'] = '#FFE358' } }) this.setData({ 'awardsConfig.awards': res }) this.initAdards(); } } http.request(params) }, } })