微信小程序抽奖

雨点打透心脏的1/2处 2022-03-27 06:56 247阅读 0赞

废话不多说，直接上图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTgxNTAwMQ_size_16_color_FFFFFF_t_70]

1.wxml

<view class="canvas-list">
    				<view class="canvas-item" wx:for="{
       {awardsList}}" wx:key="unique">
    			  		<view class="canvas-item-text" style="-webkit-transform: rotate({
       {item.turn}});transform: rotate({
       {item.turn}})">{
       {item.award}}</view>
    				</view>
    			</view>
    		</view>
      
    		<view bindtap="playReward" class="canvas-btn {
       {btnDisabled}}">抽奖</view>		
    	</view>
    </view>

2.js

Page({ 
    
      //奖品配置
      awardsConfig: { 
        chance: true,
        awards: [
          {  'index': 0, 'name': '谢谢合作' },
          {  'index': 1, 'name': '电脑' },
          {  'index': 2, 'name': 'iPhoneX' },
          {  'index': 3, 'name': '电视机' },
          {  'index': 4, 'name': '冰箱' },
          {  'index': 5, 'name': '彩电' }
        ]
      },
    
      data: { 
        awardsList: { },
        animationData: { },
        btnDisabled: '',
      },
    
      onReady: function (e) { 
        this.drawAwardRoundel();
    
        //分享
        wx.showShareMenu({ 
          withShareTicket: true
        });
      },
    
      //画抽奖圆盘
      drawAwardRoundel: function () { 
        var awards = this.awardsConfig.awards;
        var awardsList = [];
        var turnNum = 1 / awards.length;  // 文字旋转 turn 值
    
        // 奖项列表
        for (var i = 0; i < awards.length; i++) { 
          awardsList.push({  turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awards[i].name });
        }
    
        this.setData({ 
          btnDisabled: this.awardsConfig.chance ? '' : 'disabled',
          awardsList: awardsList
        });
      },
    
      //发起抽奖
      playReward: function () { 
        //中奖index
        var awardIndex = Math.floor(Math.random()*6);
        console.log(awardIndex);
        var runNum = 8;//旋转8周
        var duration = 4000;//时长
    
        // 旋转角度
        this.runDeg = this.runDeg || 0;
        this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / 6))
        //创建动画
        var animationRun = wx.createAnimation({ 
          duration: duration,
          timingFunction: 'ease'
        })
        animationRun.rotate(this.runDeg).step();
        this.setData({ 
          animationData: animationRun.export(),
          btnDisabled: 'disabled'
        });
    
        // 中奖提示
        var awardsConfig = this.awardsConfig;
        setTimeout(function () { 
          wx.showModal({ 
            title: '恭喜',
            content: '获得' + (awardsConfig.awards[awardIndex].name),
            showCancel: false
          });
          this.setData({ 
            btnDisabled: ''    //是否重复抽取
          });
        }.bind(this), duration);
    
      },
    
      onShareAppMessage: function () { 
        var that = this;
        return util.doShare("大转盘抽奖", "pages/zp/zp", that);
      }
    
    })

3.WXSS

/* pages/zp/zp.wxss */
    page { 
      /* background: rgb(13, 255, 255); */
      background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547284738960&di=1ba875a76061b51922017354527fe545&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161227%2Fd4f67ef183f44d71ab50dd6c89976ff2_th.jpg");
    }
    
    /* 转盘 */
    .canvas-container { 
      margin: 0 auto;
      position: relative;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      box-shadow: 0 2px 3px #333, 0 0 2px #000;
    }
    .canvas-content { 
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      display: block;
      width: 300px;
      height: 300px;
      border-radius: inherit;
      background-clip: padding-box;
      background-color: #ffcb3f;
    }
    .canvas-element { 
      position: relative;
      z-index: 1;
      width: inherit;
      height: inherit;
      border-radius: 50%;
    }
    .canvas-list { 
      position: absolute;
      left: 0;
      top: 0;
      width: inherit;
      height: inherit;
      z-index: 9999;
    }
    .canvas-item { 
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      color: #e4370e;
      font-weight: bold;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
    }
    .canvas-item-text { 
      position: relative;
      display: block;
      padding-top: 20px;
      margin: 0 auto;
      text-align: center;
      -webkit-transform-origin: 50% 150px;
      transform-origin: 50% 150px;
    }
    
    /* 分隔线 */
    .canvas-line { 
      position: absolute;
      left: 0;
      top: 0;
      width: inherit;
      height: inherit;
      z-index: 99;
    }
    .canvas-litem { 
      position: absolute;
      left: 150px;
      top: 0;
      width: 1px;
      height: 150px;
      background-color: rgba(228, 55, 14, 0.4);
      overflow: hidden;
      -webkit-transform-origin: 50% 150px;
      transform-origin: 50% 150px;
    }
    
    /** * 抽奖按钮 */
    .canvas-btn { 
      position: absolute;
      left: 110px;
      top: 110px;
      z-index: 400;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      color: #f4e9cc;
      background-color: #e44025;
      line-height: 80px;
      text-align: center;
      font-size: 20px;
      text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
      text-decoration: none;
    }
    .canvas-btn::after { 
      position: absolute;
      display: block;
      content: ' ';
      left: 10px;
      top: -46px;
      width: 0;
      height: 0;
      overflow: hidden;
      border-width: 30px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #e44025;
    }
    .canvas-btn.disabled { 
      pointer-events: none;
      background: #b07a7b;
      color: #ccc;
    }
    .canvas-btn.disabled::after { 
      border-bottom-color: #b07a7b;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTgxNTAwMQ_size_16_color_FFFFFF_t_70]: /images/20220327/1455ca8b8d6e410fbc80e96bfdc31b48.png