微信小程序抽奖功能

实现微信小程序旋转轮盘抽奖

如图：

点击抽奖转动转盘，最后指针知道那个奖项，就抽中那个奖项

wxml：

代码如下（示例）：

<view class="beijing">
  <image src="/image/bg_choujiang.png" mode="widthFix"></image>
</view>
<view class="cj_but"><button bindtap="getLucky" hover-class="none">点击抽奖</button></view>

该处使用的图片是本地图片。

---

wxml：

代码如下（示例）：

<view class="beijing">
  <image src="/image/bg_choujiang.png" mode="widthFix"></image>
</view>
<view class="cj_but"><button bindtap="getLucky" hover-class="none">点击抽奖</button></view>

弹框提示：

<view class="beijing">
  <image src="/image/bg_choujiang.png" mode="widthFix"></image>
</view>
<view class="cj_but"><button bindtap="getLucky" hover-class="none">点击抽奖</button></view>
<view class='modal-mask' bindtap='hideModal' catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
<view class="modal-dialog {{ !ifWinning && 'fail'}}" wx:if='{{showModal}}'>
  <view class="modal-content">
    <image class="dingbu" src="/image/zhongjiang.png" mode="widthFix"></image>
    <h4>{{ifWinning ? '恭喜你！中奖了': '谢谢参与！'}}</h4>
    <view wx:if="{{ifWinning}}" class="modal-cont">
      <image src="/image/shouji.jpg" mode="widthFix"></image>
      <p>恭喜你，抽到了价值**元的iphone一部。请前去<text>某某地址</text>领取</p>
    </view>
    <view wx:else class="modal-cont">
      <h5>期待再次与您相遇.</h5> 
    </view>
    <text class="iconfont icon-cuowu" bindtap='hideModal'></text>
  </view>
</view>

该处使用的图片是本地图片。

---

wxss：

代码如下（示例）：

.lucky_draw_zp {
  position: relative;
  margin-top: 40px;
}
.lucky_draw_zp_img{
  display: block;
  width: 80%;
  margin: 0 auto;
}
.lucky_draw_zp_btn {
  width: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -32px;
}
.beijing{
  width: 70%;
 margin: 0 auto;
 margin-top: -20px;
}
.beijing image{
  width: 100%;
}
.cj_but{
  padding: 30px;
}
.cj_but  button{
  width: 50% !important;
  font-size: 16px;
  color: #d6090d;
  font-weight: 500;
  background: #ffd97b;
  line-height: 30px;
}

弹框提示：

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.6;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 300px;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  margin-top: -187.5px;
  margin-left: -150px;
}
.fail{
  margin-top: -101px;
}
.modal-content{
  width: 100%;
  text-align: center;
  position: relative;
  padding-top: 22px;
}
.dingbu{
  position: absolute;
  top:0;
  left: 50%;
  display: block;
  width: 90%;
  margin: 0 auto;
  margin-left: -45%;
}

.modal-content h4 {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 42px;
  text-align: center;
  font-size: 20px;
  color: #fff;
}

.modal-cont {
  background: #fff;
  text-align: center;
  border-radius: 10px;
  padding-top: 70px;
  padding-bottom: 30px;
}

.modal-cont  image{
  display: block;
  width: 40%;
  border: 1px solid #e1e1e1;
  margin: 20px auto;
}
.modal-cont p{
  font-size: 15px;
  padding: 0 15px;
  color: #333333;
  line-height: 20px;
}
.modal-cont p text{
  color: #e5121a;
}
.modal-cont  h5{
  display: block;
  padding-top: 10px;
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

.modal-content .icon-cuowu{
  display: block;
  padding: 10px 0px;
  margin: 0 auto;
 font-size: 28px;
 color: #fff;
}

js：

代码如下（示例）：

  data: {
    zpData: {
      //转盘主图图片url
      zpImg: '/image/choujiang.png',

      equalParts: null, //一共多少等份
      oneAngle: null, //每一等份多少度

      // ******** 转盘奖品数据：后台获取数据 ********
      //注：根据转盘图片对应的值（转盘图片指针处顺时针向右数，起始1，奖品对应的格子数【第几等份上】）
      awardSetting: [
        '第1个格子对应内容',
        '第2个格子对应内容',
        '第3个格子对应内容',
        '第4个格子对应内容',
        '第5个格子对应内容',
        '第6个格子对应内容',
        '第7个格子对应内容',
        '第8个格子对应内容',
      ],
    },

    ifRoate: false, //转盘是否在转动（判断阻止多次点击）
    zpRotateDeg: '', //旋转角度

    // ******** 抽奖结果数据：后台获取数据 ********
    curKey: null, //抽奖结果 ： 取值范围 1 至 总格子数
    ifWinning: null, //是否中奖

    index: '',
    showModal: false,
    Height: '',
  },
    // 设置旋转动效
  setToRotate(degNum) {
    this.setData({
      zpRotateDeg: '-webkit-transform: rotate(' + degNum + 'deg);transform: rotate(' + degNum + 'deg);-webkit-transition: all 5s ease;transition: all 5s ease;',
    });
  },
  //根据 设置的 指针停止时指向的格子（中奖结果），设置其旋转角度区间
  setRotate(awardSettingNumber) { //awardSettingNumber  取值范围 1 至 总格子数
    setTimeout(() => {
      //转盘停止时 指针 指向的格子 最小角度
      let minAngle = 360 - awardSettingNumber * this.data.zpData.oneAngle + 5;
      //转盘停止时 指针 指向的格子 最大角度
      let maxAngle = 360 - (awardSettingNumber - 1) * this.data.zpData.oneAngle - 5;
      //旋转区间
      let newAngle = Math.floor(minAngle + Math.random() * (maxAngle - minAngle)) + 360 * 15;

      this.setToRotate(newAngle);

      setTimeout(() => {
        this.roateEnd(awardSettingNumber);
      }, 5150);
    }, 50);
  },
  //旋转结束执行
  roateEnd(awardSettingNumber) {
    console.log('当前指向格子数 -- ' + awardSettingNumber, this.data.curKey);
    console.log('当前指向格子数对应内容 -- ' + this.data.zpData.awardSetting[awardSettingNumber - 1], this.data.zpData.awardSetting[this.data.curKey - 1]);

    // 是否中奖

    this.setData({
      showModal: true,
    });
    if (this.data.ifWinning) {
      console.log('中奖');
    } else {
      console.log('未中奖');
    }

    setTimeout(() => {
      this.setData({
        ifRoate: false, //转盘是否在转动
      });
    }, 100);
  },

弹框提示：

  // 隐藏弹框
  hideModal: function () {
    this.setData({
      showModal: false
    });
  },

最终效果图：