当前位置:   article > 正文

微信小程序抽奖功能_抽奖小程序代码

抽奖小程序代码

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

如图:

在这里插入图片描述

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

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>

  • 1
  • 2
  • 3
  • 4
  • 5

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


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>

  • 1
  • 2
  • 3
  • 4
  • 5

弹框提示:

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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


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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

弹框提示:

.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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91

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);
  },


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

弹框提示:

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

最终效果图:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/198919
推荐阅读
相关标签
  

闽ICP备14008679号