微信小程序之转盘抽奖

黑帽子X

已于 2023-12-04 15:47:14 修改

阅读量706

点赞数 12

分类专栏：小程序文章标签：微信小程序小程序

于 2023-12-04 15:45:07 首次发布

本文链接：https://blog.csdn.net/weixin_52872685/article/details/134784859

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

废话不多说，先演示：

首先，我们先设计一个数据表，比如：

表里存储了转盘奖品的编号、名称、金额、图片的地址以及奖品的使用条件

图片资源：

代码如下：

在js文件中的161行填写你的接口即可

wxml

<!-- 显示中奖信息 -->
<view class="zhonginfo" hidden="{{zhongboo}}">
  <view class="text5">{{ifWinning == true ? '恭喜你抽中了':''}}</view>
  <image class="img2" src="{{zhongimage}}" mode=""/>
  <view class="text6">{{zhongxin}}</view>
  <view class="an" bind:tap="zhongjiang">{{ifWinning == true ?'立即领取' : '再接再厉'}}</view>
</view>
<!-- 抽奖转盘区域 -->
  <view class="zhuanbox">
  <!-- 抽奖转盘 -->
  <view class="zhuan">
    <view class="lucky_draw_zp" bindtap="getLucky">
    <image class="lucky_draw_zp_btn" src="{{lightboo}}" mode="aspectFit">
      <image style="{{zpRotateDeg}}" class="lucky_draw_zp_img" src="/icon/zhuanpan~1.png" mode="aspectFit"></image>
    </image>
    <!-- 1 -->
    <view class="style1">
      <view class="tt1">{{bigwhellists[0].amount}}{{bigwhellists[0].prizetype}}</view>
      <image class="bao1" src="{{bigwhellists[0].prizeImg}}" mode=""/>
    </view>
    <!-- 2 -->
    <view class="style2">
      <view class="tt1">{{bigwhellists[1].amount}}{{bigwhellists[1].prizetype}}</view>
      <image class="bao1" src="{{bigwhellists[1].prizeImg}}" mode=""/>
    </view>
    <!-- 3 -->
    <view class="style3">
      <view class="tt1">{{bigwhellists[2].amount}}{{bigwhellists[2].prizetype}}</view>
      <image class="bao1" src="{{bigwhellists[2].prizeImg}}" mode=""/>
    </view>
    <!-- 4 -->
    <view class="style4">
      <view class="tt1">{{bigwhellists[3].amount}}{{bigwhellists[3].prizetype}}</view>
      <image class="bao1" src="{{bigwhellists[3].prizeImg}}" mode=""/>
    </view>
    <!-- 5 -->
    <view class="style5">
      <view class="tt1">{{bigwhellists[4].amount}}{{bigwhellists[4].prizetype}}</view>
      <image class="bao1" src="{{bigwhellists[4].prizeImg}}" mode=""/>
    </view>
    <!-- 6 -->
    <view class="style6">
      <view class="tt1">{{bigwhellists[5].amount}}{{bigwhellists[5].prizetype}}</view>
      <image class="bao1" src="{{bigwhellists[5].prizeImg}}" mode=""/>
    </view>
    </view>
  </view>
</view>

wxss

/* 中奖信息 */
.zhonginfo{
  top: 150rpx;
  left: 10%;
  position: fixed;
  z-index: 20;
  width: 80%;
  height: 800rpx;
  padding: 60rpx;
  box-sizing: border-box;
  border-radius: 40rpx;
  background-color: rgba(255, 172, 172, 0.6);
}
.text5{
  text-align: center;
  font-size: 46rpx;
  font-weight: 900;
  color: rgb(0, 0, 0);
}
.img2{
  margin-top: 20rpx;
  width: 80%;
  height: 400rpx;
  margin-left: 10%;
}
.text6{
  text-align: center;
  font-size: 72rpx;
  font-weight: 900;
  color: rgb(255, 0, 0);
}
.an{
  margin-top: 20rpx;
  width: 70%;
  margin-left: 15%;
  text-align: center;
  height: 80rpx;
  background-color: rgb(255, 184, 51);
  line-height: 80rpx;
  font-size: 42rpx;
  font-weight: 900;
  border-radius: 50rpx;
}

.zhuanbox{
  width: 100%;
  height: 800rpx;
  position: relative;
  padding-top: 130rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.zhonglist{
  width: 80%;
  bottom: 120rpx;
  height: 50rpx;
  left: 10%;
  position:absolute;
  background-color: rgba(46, 46, 46, 0.5);
  border-radius: 10rpx;
}
.zhong{
  width: 100%;
  float: left;
  height: 50rpx;
  line-height: 50rpx;
  color: rgb(255, 255, 255);
  font-size: 26rpx;
  text-align: center;
}
/* 抽奖转盘样式 */
.lucky_draw_zp{ 
  width: 502rpx; 
  height: 502rpx; 
  margin: 0 auto; 
  position: relative;
}
.lucky_draw_zp_img , .lucky_draw_zp_btn{ 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0; top: 0;
}
.lucky_draw_zp_img{
  z-index: 18;
}
.style1{
  top: 50rpx;
  left: 190rpx;
  position:absolute;
  width: 120rpx;
  height: 120rpx;
  text-align: center;
}
.style2{
  top: 115rpx;
  left: 65rpx;
  position:absolute;
  width: 120rpx;
  height: 120rpx;
  text-align: center;
  transform: rotate(-60deg);
}
.style3{
  top: 255rpx;
  left: 65rpx;
  position:absolute;
  width: 120rpx;
  height: 120rpx;
  text-align: center;
  transform: rotate(-120deg);
}
.style4{
  top: 335rpx;
  left: 190rpx;
  position:absolute;
  width: 120rpx;
  height: 120rpx;
  text-align: center;
  transform: rotate(-180deg);
}
.style5{
  top: 260rpx;
  left: 320rpx;
  position:absolute;
  width: 120rpx;
  height: 120rpx;
  text-align: center;
  transform: rotate(-240deg);
}
.style6{
  top: 110rpx;
  left: 315rpx;
  position:absolute;
  width: 120rpx;
  height: 120rpx;
  text-align: center;
  transform: rotate(-300deg);
}
.tt1{
  width: 120%;
  font-size: 23rpx;
  text-align: center;
  color: rgb(0, 0, 0);
  margin-top: 10rpx;
  margin-left: -10%;
}
.bao1{
  width: 50%;
  height: 80rpx; 
  margin-top: 5rpx;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //声明列表进行存储信息
    bigwhellists:[],
    //用来存储图片的列表
    imagelists:[],
    //中奖信息，用来存储中奖后的信息
    zhongxin:'',
    //中奖信息，用来存储中奖后的图片
    zhongimage:'',
    // 存储奖品的使用条件
    zhongcondition:'',
    //转盘图片
    lightboo:"/icon/zhuanpan.png",
    // 中奖框显示
    zhongboo:true,
      zpData:{
          //总块数
          equalParts:6, 
          //每块所占度数
          oneAngle:60, 
      },
      //判断转盘是否还在转动
      ifRoate:false, 
      //旋转的角度
      zpRotateDeg:'', 
      //总块数
      curKey:6, 
      //是否中奖
      ifWinning:false, 
  },
  selectCity() {
    wx.navigateTo({
        url: `plugin://city-choice/city-choice?onHistory=${true}&onDarkMode=${this.data.isDark}&hotCitys=${this.data.hotCitys}`
    })
},
  // 转盘数据初始化
  setZpDefault(){
      let equalPartsNum = this.data.zpData.awardSetting.length;
      let oneAngleNum = 360 / equalPartsNum;
      let equalParts = 'zpData.equalParts';
      let oneAngle = 'zpData.oneAngle';
      this.setData({
          //总块数
          [equalParts] : equalPartsNum,
          // 每块对应的角度
          [oneAngle] : oneAngleNum,
      });
  },
  // 旋转效果
  setToRotate(degNum){
      this.setData({
          zpRotateDeg : '-webkit-transform: rotate(' + degNum + 'deg);transform: rotate(' + degNum + 'deg);-webkit-transition: all 5s ease;transition: all 5s ease;',
      });
  },
  //根据 设置的 指针停止时指向的格子（中奖结果），设置其旋转角度区间
  //awardSettingNumber  取值范围 1 至 总块数
  setRotate(awardSettingNumber){ 
      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);
          this.setData({
            lightboo:"/icon/zhuanpan.gif"
          })
          setTimeout(() => {
              this.roateEnd(awardSettingNumber);
              this.setData({
                lightboo:"/icon/zhuanpan.png",
                zhongboo:false
              })
          }, 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]);
      // 是否中奖，这里如果你的未中奖信息不是感谢参与，那么你可以进行修改
      if(this.data.zpData.awardSetting[awardSettingNumber - 1] != '感谢参与'){
          console.log('中奖');
          this.setData({
            ifWinning:true,
            zhongxin:this.data.zpData.awardSetting[awardSettingNumber -1],
            zhongimage:this.data.imagelists[awardSettingNumber - 1],
            zhongcondition:this.data.conditions[awardSettingNumber - 1]
          })
      }else{
          console.log('未中奖');
          this.setData({
            ifWinning:false,
            zhongxin:this.data.zpData.awardSetting[awardSettingNumber -1],
            zhongimage:this.data.imagelists[awardSettingNumber - 1]
          })
      }
      setTimeout(() => {
          this.setData({
            //判断转盘是否还在转动
              ifRoate : false, 
          });
      }, 100);
  },
  //点击抽奖
  getLucky(){
      if(this.data.ifRoate){
          return false;
      }  
      this.setData({
        //判断转盘是否还在转动
          ifRoate : true, 
          zpRotateDeg : ''
      });        
      // 获取抽奖结果
      var res = {
          status:1,
          //抽奖结果 ： 取值范围 1 到 总块数
          curKey:Math.floor(1 + Math.random() * this.data.zpData.equalParts), 
      }
          if(res.status == 1){
              this.setData({
                  curKey : res.curKey,
                  ifWinning : res.ifWinning
              }); 
              this.setRotate(this.data.curKey);
          }else{
              this.setData({
                //判断转盘是否还在转动
                  ifRoate : false, 
              });
              wx.showModal({
                  title: '提示',
                  showCancel:false,
                  content: res.info,
              })
          }
  },
  // 点击立即领取后执行的方法
  zhongjiang(){
    // 点击领取后将中奖框隐藏，你也可以在此做其它操作
    this.setData({
      zhongboo:true
    })
  },
  /**
   * 生命周期函数--监听页面加载
   * 并通过接口获取转盘数据
   */
  onLoad: function (options) {
    let zpImg = 'zpData.zpImg';
    let awardSetting = 'zpData.awardSetting';
    var that = this
    wx.request({
      //写你的对应接口
      url: '',
      method:"",
      success(e){
        var list = e.data.data
        that.setData({
          bigwhellists:list,
          [awardSetting]:[
            //给列表赋值
              list[0].amount+list[0].prizetype,
              list[1].amount+list[1].prizetype,
              list[2].amount+list[2].prizetype,
              list[3].amount+list[3].prizetype,
              list[4].amount+list[4].prizetype,
              list[5].amount+list[5].prizetype,
          ],
          // 给图片赋值
          imagelists:[
            list[0].prizeImg,
            list[1].prizeImg,
            list[2].prizeImg,
            list[3].prizeImg,
            list[4].prizeImg,
            list[5].prizeImg
          ],
          //奖品对应的使用条件
          conditions:[
            list[0].condition,
            list[1].condition,
            list[2].condition,
            list[3].condition,
            list[4].condition,
            list[5].condition
          ]
        });
      that.setZpDefault();
     },
     fail(){
       console.log("获取转盘数据失败")
     }
   })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})