功能需求背景

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

业务归属

NHT周年庆典活动小程序抽奖 - 2021年5月10日

实现效果

具体代码实现方法

页面部分

<view class="luckdraw-desc" hidden="{{isDoLucky}}">
  <image class="luckdraw-img" src="https://wx-homelight.obs.cn-north-4.myhuaweicloud.com/nht20/lucky-desc.png"></image>
</view>

<view id="luckdraw_box" hidden="{{isDoLucky}}">
  <view id="luckdraw_back">
    <image style='transform:rotate({{ change_angle}}deg)' mode="scaleToFill"
      src="https://wx-homelight.obs.cn-north-4.myhuaweicloud.com/nht20/lucky-bg.png"></image>
  </view>
  <view id="luckdraw_pointer" bindtap='luckDrawStart'>
    <image mode="scaleToFill" src="https://wx-homelight.obs.cn-north-4.myhuaweicloud.com/nht20/lucky-btn.png"></image>
  </view>
</view>

<!-- 分享按钮的展示，在大转盘未抽中的情况下出现 -->
<view class="xui-share-panel" hidden="{{isShare}}">
  <view class="share-desc">
    <view class="share-title">抱歉没有中奖</view>
    <view>分享给好友，可以再获得一次抽奖机会。</view>
  </view>
  <view>
    <button class="xui-share-friend" open-type="share"></button>
  </view>
</view>

样式部分

#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;
}

JS代码部分

// 上下文对象
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'
    };
  },
})