微信小程序实现大转盘抽奖功能

功能需求背景

小程序中，需要一个转盘抽奖的功能。后台随机生成奖品信息，完成抽奖过程。第一次如果抽奖不中，可以分享给好友，重新获得一次抽奖机会。

业务归属

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小时内删除侵权内容。