备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

微信小程序 | 一文总结全部营销抽奖功能

2022-11-24 192
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序 | 一文总结全部营销抽奖功能

一、引言

正值一年一度的1024程序员节，CSDN的活动也办的热火朝天，我也没有错过这个官方发福利的机会，辗转于各大直播间，参加了各种活动，但是发现最后我才是活动的小丑，两天下来十几场活动，一次都没中奖。仿佛自己就是中奖绝缘体。


不过意外发现，自己发布的动态竟被官方大佬翻了牌子🤪，荣幸至极！ 原来以为这种超神级别的大佬都是远在天边，也有可能是最近佛祖拜的多，最近才好运不断。十分感谢官方大佬的中级红包肯定，我们作为一线战斗人员，会好好呵护好自己的秀发，磨练自己的技术，不断为社区带来更优质的内容🥰🥰

825bf0482850453bb64b361c26525cb7.png

言归正传，针对中奖绝缘体这件事情，我实在是有感而发：现在的活动这么多，都是采用这种直播发福利的形式，对于观看直播的用户，每次到了抽奖环节，用户在启动了单身十八年的手速发出了抽奖指定的口令之后，剩下的命运就只能交给天意，然后主播在规定的时间结束后直接公布获奖名单。事实就会证明我是一个中奖绝缘体


整个过程，我们作为参与者没有任何的参与感，除了在主播侧可以看到抽奖的人数状况外，我就会有一种抽了个寂寞的感觉😝。


那有没有什么办法能让我没中奖还是让我很开心呢？？


我不禁想到了买福利彩票,我们明明知道中奖概率很低，但还是愿意赌那亿分之一的机会！可能从心底里觉得我们会是那个被上帝眷顾的人。


所以这个时候我们需要一些套路，各种提高自我感觉的抽奖功能就显得尤为重要！

微信截图_20221124130140.png


二、抽奖功能大合集

目前主流的抽奖功能都是以提升用户参与度为目的！所以有以下几种：九宫格抽奖、翻卡牌抽奖、刮刮乐抽奖、转盘抽奖、`贩卖机抽奖

微信截图_20221124130201.png

微信截图_20221124130208.png

微信截图_20221124130214.png

微信截图_20221124130222.png

微信截图_20221124130234.png


三、完整源码

3.1 九宫格抽奖

<template>
  <view class="container">
    <view class="tui-dot" :class="'tui-dot-'+(index+1)" v-for="(item,index) in circleList" :key="index"></view>
    <view class="tui-container-in">
      <view class="tui-content-out" :class="['tui-award-'+(index+1),index==indexSelect?'tui-awardSelect':'']" v-for="(item,index) in awardList"
       :key="index">
        <image class="tui-award-image" :src="item.img"></image>
      </view>
      <view class="tui-btn-start" :class="isRunning?'tui-ative':''" @click="start">开始</view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        circleList: 24, //圆点个数
        awardList: [{
          img: "/static/other/1.png",
          name: "酷表情"
        }, {
          img: "/static/other/2.png",
          name: "流鼻血表情"
        }, {
          img: "/static/other/3.png",
          name: "冷表情"
        }, {
          img: "/static/other/4.png",
          name: "色表情"
        }, {
          img: "/static/other/5.png",
          name: "吐表情"
        }, {
          img: "/static/other/6.png",
          name: "睡觉表情"
        }, {
          img: "/static/other/7.png",
          name: "哭表情"
        }, {
          img: "/static/other/8.png",
          name: "奋斗表情"
        }], //奖品
        indexSelect: 0, //抽中的奖品下标
        isRunning: false //抽奖状态
      }
    },
    methods: {
      //随机数
      random(u) {
        let rnd = Math.random() > 0.5 ? "2" : "1";
        u = u || 3;
        for (var i = 0; i < u; i++) {
          rnd += Math.floor(Math.random() * 10);
        }
        return Number(rnd);
      },
      //开始
      start() {
        if (this.isRunning) return
        this.isRunning = true;
        let indexSelect = 0;
        let i = 0;
        let randomNum = this.random(3);
        let timer = setInterval(() => {
          ++indexSelect;
          //这里用y=30*x+150函数做的处理.可根据自己的需求改变转盘速度
          indexSelect = indexSelect % 8;
          this.indexSelect = indexSelect;
          i += 40;
          if (i > randomNum) {
            //去除循环
            clearInterval(timer)
            timer = null;
            this.$util.tip("恭喜您，抽中了" + this.awardList[indexSelect].name)
            this.isRunning = false
          }
        }, (70 + i))
      }
    }
  }
</script>
<style lang="scss">
  page {
    background-color: $uni-bg-color;
  }
  .container {
    height: 600rpx;
    width: 650rpx;
    background-color: #fc4034;
    margin: 100rpx auto;
    border-radius: 40rpx;
    box-shadow: 0 10px 0 #d80014;
    position: relative;
  }
  .tui-container-in {
    width: 580rpx;
    height: 530rpx;
    background-color: #d80014;
    border-radius: 40rpx;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  /**小圆点 start*/
  .tui-dot {
    position: absolute;
    display: block;
    border-radius: 50%;
    height: 20rpx;
    width: 20rpx;
  }
  .tui-dot:nth-child(odd) {
    background: #fff;
    animation: 0.5s odd linear infinite;
  }
  .tui-dot:nth-child(even) {
    background: #fcf400;
    animation: 0.5s even linear infinite;
  }
  .tui-dot-1 {
    left: 15rpx;
    top: 15rpx;
  }
  .tui-dot-2 {
    left: 117.5rpx;
    top: 7.5rpx;
  }
  .tui-dot-3 {
    left: 220rpx;
    top: 7.5rpx;
  }
  .tui-dot-4 {
    left: 322.5rpx;
    top: 7.5rpx;
  }
  .tui-dot-5 {
    left: 425rpx;
    top: 7.5rpx;
  }
  .tui-dot-6 {
    left: 527.5rpx;
    top: 7.5rpx;
  }
  .tui-dot-7 {
    left: 620rpx;
    top: 15rpx;
  }
  .tui-dot-8 {
    left: 622rpx;
    top: 109rpx;
  }
  .tui-dot-9 {
    left: 622rpx;
    top: 203rpx;
  }
  .tui-dot-10 {
    left: 622rpx;
    top: 297rpx;
  }
  .tui-dot-11 {
    left: 622rpx;
    top: 391rpx;
  }
  .tui-dot-12 {
    left: 622rpx;
    top: 485rpx;
  }
  .tui-dot-13 {
    left: 620rpx;
    top: 565rpx;
  }
  .tui-dot-14 {
    left: 517.5rpx;
    top: 572rpx;
  }
  .tui-dot-15 {
    left: 415rpx;
    top: 572rpx;
  }
  .tui-dot-16 {
    left: 312.5rpx;
    top: 572rpx;
  }
  .tui-dot-17 {
    left: 210rpx;
    top: 572rpx;
  }
  .tui-dot-18 {
    left: 107.5rpx;
    top: 572rpx;
  }
  .tui-dot-19 {
    left: 15rpx;
    top: 565rpx;
  }
  .tui-dot-20 {
    left: 7.5rpx;
    top: 471rpx;
  }
  .tui-dot-21 {
    left: 7.5rpx;
    top: 377rpx;
  }
  .tui-dot-22 {
    left: 7.5rpx;
    top: 283rpx;
  }
  .tui-dot-23 {
    left: 7.5rpx;
    top: 189rpx;
  }
  .tui-dot-24 {
    left: 7.5rpx;
    top: 95rpx;
  }
  @-webkit-keyframes odd {
    0% {
      background: #fff;
    }
    100% {
      background: #fcf400;
    }
  }
  @keyframes odd {
    0% {
      background: #fff;
    }
    100% {
      background: #fcf400;
    }
  }
  @-webkit-keyframes even {
    0% {
      background: #fcf400;
    }
    100% {
      background: #fff;
    }
  }
  @keyframes even {
    0% {
      background: #fcf400;
    }
    100% {
      background: #fff;
    }
  }
  /**小圆点 end*/
  .tui-content-out {
    position: absolute;
    height: 150rpx;
    width: 168rpx;
    background-color: #fcecec;
    border-radius: 15rpx;
    box-shadow: 0 4px 0 #fcc8d0;
  }
  /* 580 530  */
  .tui-award-1 {
    left: 24rpx;
    top: 24rpx;
  }
  .tui-award-2 {
    left: 206rpx;
    top: 24rpx;
  }
  .tui-award-3 {
    left: 388rpx;
    top: 24rpx;
  }
  .tui-award-4 {
    left: 388rpx;
    top: 188rpx;
  }
  .tui-award-5 {
    left: 388rpx;
    top: 352rpx;
  }
  .tui-award-6 {
    left: 206rpx;
    top: 352rpx;
  }
  .tui-award-7 {
    left: 24rpx;
    top: 352rpx;
  }
  .tui-award-8 {
    left: 24rpx;
    top: 188rpx;
  }
  /**居中 加粗*/
  .tui-btn-start {
    position: absolute;
    top: 188rpx;
    left: 206rpx;
    border-radius: 15rpx;
    height: 150rpx;
    width: 168rpx;
    background-color: #fc4034;
    box-shadow: 0 4px 0 #fcc8d0;
    color: #fcf400;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 150rpx;
  }
  .tui-ative {
    opacity: 0.6 !important;
  }
  .tui-award-image {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50rpx;
    width: 50rpx;
  }
  .tui-awardSelect {
    background-color: #fcf400 !important;
    box-shadow: 0 4px 0 rgb(240, 208, 12) !important;
  }
</style>


3.2 翻卡牌抽奖

<template>
  <view>
    <view class="button" @click="again">重新翻牌</view>
    <view class="curin-index">
      <view style="background-image: url('/static/other/1.png');color: aquamarine;" @click="tamin(index)" v-for="(item,index) in 9" :key="index" class="currin" :class="[really == index+1?'animt':'', really != index+1 && surplus?'animt':'', really == ''?'cinton'+(index+1):'',really == index+1 && implement > 1?'selected':'un-selected']">
        {{really == index+1?flop:''}}{{really != index+1 && really != ''?biutin:''}}{{really == ''?'点击翻牌':''}}
      </view>
    </view>
    <view style="position: fixed;bottom: 100rpx;left: 250rpx;">
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        url: '',
        whether: false,
        flop: '点击翻牌',
        really: '',
        implement: 0,
        surplus: false,
        biutin: '点击翻牌',
      }
    },
    onLoad() {},
    methods: {
      again(e) {
        if (this.implement == 3 || this.implement == 0) {
          this.whether = false
          this.flop = '点击翻牌'
          this.really = ''
          this.implement = 0
          this.surplus = false
          this.biutin = '点击翻牌'
        } else {
          uni.showToast({
            title: '正在执行抽奖中...',
            icon: 'none',
            duration: 2000
          })
          return false
        }
      },
      tamin(index) {
        if (this.really == '') {
          this.whether = true
          this.really = index + 1
          this.implement = 1
          setTimeout(res => {
            this.flop = ''
          }, 500)
          setTimeout(res => {
            this.flop = 'iPhone12'
            this.surplus = true
            this.implement = 2
          }, 1200)
          setTimeout(res => {
            this.biutin = ''
          }, 1700)
          setTimeout(res => {
            this.biutin = '谢谢惠顾'
            this.implement = 3
          }, 2500)
        }
      }
    }
  }
</script>
<style lang="scss">
  .selected {
    // background-image: linear-gradient(45deg, #f43f3b, #ec008c);
    background-color: #f43f3b;
  }
  .un-selected {
    // background-image: linear-gradient(45deg, #39b54a, #8dc63f);
    background-color: #39b54a;
  }
  .button {
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #fadbd9;
    color: #e54d42;
    text-align: center;
    border-radius: 10rpx;
    margin: 30rpx 30%;
    float: left;
    position: relative;
  }
  .curin-index {
    width: 100%;
    float: left;
  }
  .currin {
    margin-left: 4%;
    margin-top: 50rpx;
    width: 28%;
    float: left;
    color: #fff;
    text-align: center;
    height: 200rpx;
    line-height: 200rpx;
    border-radius: 10rpx;
    position: relative;
  }
  .currin::before {
    content: "";
    display: block;
    background: inherit;
    filter: blur(10rpx);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 10rpx;
    left: 10rpx;
    z-index: -1;
    opacity: 0.4;
    transform-origin: 0 0;
    border-radius: inherit;
    transform: scale(1, 1);
  }
  .cinton1 {
    animation: cinton1 alternate linear 2 1s;
  }
  @keyframes cinton1 {
    from {
      top: 0;
      left: 0;
    }
    to {
      top: 230rpx;
      left: 230rpx;
    }
  }
  .cinton2 {
    animation: cinton2 alternate linear 2 1s;
  }
  @keyframes cinton2 {
    from {
      top: 0;
      left: 0;
    }
    to {
      top: 230rpx;
      left: 0rpx;
    }
  }
  .cinton3 {
    animation: cinton3 alternate linear 2 1s;
  }
  @keyframes cinton3 {
    from {
      top: 0;
      left: 0;
    }
    to {
      top: 230rpx;
      left: -230rpx;
    }
  }
  .cinton4 {
    animation: cinton4 alternate linear 2 1s;
  }
  @keyframes cinton4 {
    from {
      top: 0;
      left: 0;
    }
    to {
      top: 0rpx;
      left: 230rpx;
    }
  }
  .cinton6 {
    animation: cinton6 alternate linear 2 1s;
  }
  @keyframes cinton6 {
    from {
      top: 0;
      left: 0;
    }
    to {
      top: 0rpx;
      left: -230rpx;
    }
  }
  .cinton7 {
    animation: cinton7 alternate linear 2 1s;
  }
  @keyframes cinton7 {
    from {
      top: 0;
      left: 0;
    }
    to {
      top: -230rpx;
      left: 230rpx;
    }
  }
  .cinton8 {
    animation: cinton8 alternate linear 2 1s;
  }
  @keyframes cinton8 {
    from {
      top: 0;
      left: 0;
    }
    to {
      top: -230rpx;
      left: 0rpx;
    }
  }
  .cinton9 {
    animation: cinton9 alternate linear 2 1s;
  }
  @keyframes cinton9 {
    from {
      top: 0;
      left: 0;
    }
    to {
      top: -230rpx;
      left: -230rpx;
    }
  }
  .animt {
    animation: fanzhuan 1.2s;
  }
  @keyframes fanzhuan {
    0% {
      transform: perspective(150px) rotateY(0deg);
    }
    50% {
      transform: perspective(150px) rotateY(0deg);
    }
    100% {
      transform: perspective(150px) rotateY(179.9deg);
    }
  }
</style>


3.3 刮刮乐抽奖

<template>
  <view>
    <view class="scratch">
      <view class="box">
        <!-- 刮奖结果-->
        <view class="result">
          <text>iPhone12一台</text>
        </view>
        <!-- 刮奖canvas容器 -->
        <canvas class="canvas-box" canvas-id="canvas-id" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
      </view>
      <view class="tip">刮一刮</view>
    </view>
  </view>
</template>
<script>
  import scratch from '@/util/scratch.js'
  export default {
    data() {
      return {
        url: 'https://blog.csdn.net/qq_40101922/article/details/102463778',
        scratchWidth: 350, // 绘制刮奖范围宽
        scratchHeight: 150, // 绘制刮奖范围高
        scratchSize: 10, // 触手大小
        scratchScale: 0.30, // 需刮开百分比
      }
    },
    onLoad() {
      this.initCanvas();
    },
    methods: {
      initCanvas() {
        // 刮奖初始化信息必须在onReady后，不然h5不支持（小程序可在onLoad执行）
        new scratch(this, {
          canvasId: 'canvas-id',
          width: this.scratchWidth,
          height: this.scratchHeight,
          size: this.scratchSize,
          scale: this.scratchScale
        })
      }
    }
  }
</script>
<style lang="scss">
  .scratch {
    width: 600rpx;
    height: 300rpx;
    // background: url($baseImgUrl+"luck-draw-guajiang.png") no-repeat;
    background-size: contain;
    margin: 400rpx 75rpx;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    .box {
      width: 100%;
      height: 100%;
      background: #aaaa7f;
      border-radius: 10rpx;
      position: relative;
      overflow: hidden;
      .result {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50rpx;
        color: #FFFFFF;
      }
      .canvas-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
        overflow: hidden;
      }
    }
    .tip {
      position: fixed;
      text-align: center;
      top: 300rpx;
      left: 300rpx;
      width: 150rpx;
      font-size: 40rpx;
      font-weight: bold;
      z-index: 999;
    }
  }
</style>


3.4 贩卖机抽奖

<template>
  <view>
    <view class="box">
      <view class="qiang">
        <!-- 可以设置距离顶部的高 -->
      </view>
      <view class="conter">
        <view v-for="(i,index) in str" class="someBox">
          <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01DKEdXI1oLlqBDGxY2_%21%212212923455209-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669648345&t=51ee063b70b708bd88e93f664e7fd0f5"
           :class="{nainai:i.state}" id="yeye" @click="add(index)"></image>
          <view class="text" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01DKEdXI1oLlqBDGxY2_%21%212212923455209-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669648345&t=51ee063b70b708bd88e93f664e7fd0f5');">{{i.zhi}}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01DKEdXI1oLlqBDGxY2_%21%212212923455209-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669648345&t=51ee063b70b708bd88e93f664e7fd0f5',
        str: [{
            zhi: '抽纸',
            state: false
          },
          {
            zhi: '鼠标',
            state: false
          },
          {
            zhi: '茶具',
            state: false
          },
          {
            zhi: '牛肉干',
            state: false
          },
          {
            zhi: '电脑',
            state: false
          },
          {
            zhi: '手机',
            state: false
          },
          {
            zhi: '洗衣机',
            state: false
          },
          {
            zhi: '水杯',
            state: false
          },
          {
            zhi: '手环',
            state: false
          },
          {
            zhi: '帽子',
            state: false
          },
          {
            zhi: '热水壶',
            state: false
          },
          {
            zhi: '辣条',
            state: false
          },
        ]
      }
    },
    onLoad() {
    },
    methods: {
      add(index) {
        this.str[index].state = true;
      }
    }
  }
</script>
<style>
  .qiang {
    width: 100%;
    height: 275rpx;
  }
  .box {
    width: 100vw;
    margin: 0 auto;
    height: 1300rpx;
    background-color: pink;
    background: url('https://6e69-niew6-1302638010.tcb.qcloud.la/%E8%83%8C%E6%99%AF/%E5%94%AE%E5%8D%96%E6%9C%BA.jpg?sign=92e33f978e8bc7f5cd192b98a953620d&t=1611471153') no-repeat;
    background-size: 100% 100%;
  }
  .conter {
    width: 475rpx;
    height: 825rpx;
    margin-left: 80rpx;
    overflow: hidden;
  }
  .someBox {
    width: 157rpx;
    height: 206rpx;
    float: left;
    text-align: center;
    position: relative;
  }
  .someBox .text {
    width: 100rpx;
    height: 30rpx;
    color: #160000;
    font-weight: bold;
    margin: 0 auto;
    font-size: 22rpx;
    line-height: 30rpx;
    text-align: center;
    z-index: 666;
    position: absolute;
    left: 20rpx;
    bottom: 50rpx;
    z-index: 9;
  }
  .nainai {
    animation: ol 2s ease-in 0s;
    animation-fill-mode: forwards;
  }
  #yeye {
    width: 105rpx;
    height: 120rpx;
    position: absolute;
    top: 70rpx;
    left: 26rpx;
    z-index: 10;
  }
  @keyframes ol {
    0% {
      transform: scale(1) rotate(0deg);
    }
    5% {
      transform: scale(1.4) rotate(30deg);
    }
    10% {
      transform: scale(1.4) rotate(-30deg);
    }
    15% {
      transform: scale(1.4) rotate(30deg);
    }
    20% {
      transform: scale(1.4) rotate(-30deg);
    }
    25% {
      transform: scale(1.4) rotate(-45deg);
    }
    50% {
      transform: scale(1) rotate(-45deg);
      top: 70rpx;
    }
    100% {
      transform: scale(1) rotate(-45deg);
      top: 900rpx;
    }
  }
</style>


3.5 转盘抽奖

<template>
  <view class="container">
    <view class="header">
      <view class="header-title"> 点击转盘抽奖获得红包 </view>
    </view>
    <view class="main">
      <view class="canvas-container">
        <view :animation="animationData" class="canvas-content">
          <view class="canvas-line">
            <view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1" :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
          </view>
          <view class="canvas-list">
            <view class="canvas-item" v-for="(iteml,index2) in awardsList" :key="index2">
              <view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
                <text>{{iteml.award}}</text>
                <image class="canvas-item-text-img" src="/static/other/1.png"></image>
              </view>
            </view>
          </view>
        </view>
        <view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始 </view>
        <view class="canvas-btn-table">剩余{{chishu}}次</view>
      </view>
    </view>
    <view class="comm-content">
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        url:'https://www.baidu.com/link?url=Vudt-1kEqZqAXnDyaw67FKE6qdANdkWOVl8OS9VSbezcql181qVYSar7PUdMPrzzM45XZnI4xF1deeIFbXMfTa&wd=&eqid=db15fd820008c60f000000065fafac6f',
        awardsConfig: {
          chance: true,
          awards: [{
              index: 0,
              name: '10元红包',
              type: 0
            },
            {
              index: 1,
              name: '谢谢参与',
              type: 1
            },
            {
              index: 2,
              name: '50元红包',
              type: 0
            },
            {
              index: 3,
              name: '谢谢参与',
              type: 1
            },
            {
              index: 4,
              name: '100元话费',
              type: 0
            },
            {
              index: 5,
              name: '谢谢参与',
              type: 1
            },
            {
              index: 6,
              name: '20元红包',
              type: 0
            },
            {
              index: 7,
              name: '谢谢参与',
              type: 1
            }
          ]
        },
        awardsList: {},
        animationData: {},
        btnDisabled: '',
        chishu: 5
      };
    },
    onReady(e) {
      this.drawAwardRoundel()
    },
    methods: {
      //画抽奖圆盘  
      drawAwardRoundel: function() {
        var awards = this.awardsConfig.awards;
        var awardsList = [];
        var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  
        // 奖项列表  
        for (var i = 0; i < awards.length; i++) {
          awardsList.push({
            turn: i * turnNum + 'deg',
            lineTurn: i * turnNum + turnNum / 2 + 'deg',
            award: awards[i].name
          });
        }
        this.btnDisabled = this.awardsConfig.chance ? '' : 'disabled';
        this.awardsList = awardsList;
      },
      //发起抽奖  
      playReward: function() {
        if (this.chishu == 0) {
          uni.showToast({
            title: '抽奖次数已经用完',
            icon: 'none'
          })
          return
        }
        //中奖index  
        var awardsNum = this.awardsConfig.awards;
        var awardIndex = Math.round(Math.random() * (awardsNum.length - 1)); //随机数  
        var runNum = 8; //旋转8周  
        var duration = 4000; //时长  
        // 旋转角度  
        this.runDeg = this.runDeg || 0;
        this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length))
        //创建动画  
        var animationRun = uni.createAnimation({
          duration: duration,
          timingFunction: 'ease'
        })
        animationRun.rotate(this.runDeg).step();
        this.animationData = animationRun.export();
        this.btnDisabled = 'disabled';
        // 中奖提示  
        var awardsConfig = this.awardsConfig;
        var awardType = awardsConfig.awards[awardIndex].type;
        this.chishu = this.chishu - 1;
        if (awardType == 0) {
          setTimeout(function() {
            uni.showModal({
              title: '恭喜',
              content: '获得' + (awardsConfig.awards[awardIndex].name),
              showCancel: false
            });
            this.btnDisabled = '';
          }.bind(this), duration);
        } else {
          setTimeout(function() {
            uni.showModal({
              title: '很遗憾',
              content: '没中奖 ' + (awardsConfig.awards[awardIndex].name),
              showCancel: false
            });
            this.btnDisabled = '';
          }.bind(this), duration);
        }
      }
    }
  }
</script>
<style>
  page {
    background: #fff;
  }
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100upx;
  }
  /* 转盘 */
  .canvas-container {
    margin: 0 auto;
    position: relative;
    width: 600upx;
    height: 600upx;
    border-radius: 50%;
    box-shadow: 0 10upx 30upx #333, 0 0 10upx #000;
    border: 10rpx solid #A83FDB;
  }
  .canvas-content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    width: 600upx;
    height: 600upx;
    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 1upx 1upx rgba(255, 255, 255, 0.6);
  }
  .canvas-item-text {
    position: relative;
    display: block;
    padding-top: 20upx;
    margin: 0 auto;
    text-align: center;
    -webkit-transform-origin: 50% 300upx;
    transform-origin: 50% 300upx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .canvas-item-text text {
    font-size: 30upx;
  }
  .canvas-item-text-img {
    width: 60upx;
    height: 60upx;
    padding-top: 10upx;
  }
  /* 分隔线 */
  .canvas-line {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    z-index: 99;
  }
  .canvas-litem {
    position: absolute;
    left: 300upx;
    top: 0;
    width: 3upx;
    height: 300upx;
    background-color: rgba(228, 55, 14, 0.4);
    overflow: hidden;
    -webkit-transform-origin: 50% 300upx;
    transform-origin: 50% 300upx;
  }
  /**  
* 抽奖按钮  
*/
  .canvas-btn {
    position: absolute;
    left: 260upx;
    top: 260upx;
    z-index: 400;
    width: 80upx;
    height: 80upx;
    border-radius: 50%;
    color: #f4e9cc;
    background-color: #e44025;
    line-height: 80upx;
    text-align: center;
    font-size: 26upx;
    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: 12upx;
    top: -44upx;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 30upx;
    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;
  }
  .canvas-btn-table {
    color: #A83FDB;
    width: 120upx;
    text-align: center;
    position: absolute;
    left: 240upx;
    top: 360upx;
    font-size: 26upx;
    background-color: #FFFFFF;
    opacity: 0.9;
  }
</style>
文章标签：
程序员
小程序
关键词：
微信功能
微信小程序功能
小程序营销
营销功能
微信小程序抽奖
qasxfte752dni
目录
相关文章
小吴吴吴呀
|
15天前
|
小程序
微信小程序如何实现进入小程序自动连WiFi功能
微信小程序如何实现进入小程序自动连WiFi功能
小吴吴吴呀
26 0
低代码布道师
|
1月前
|
小程序 API
点餐小程序实战教程09-订单功能开发
点餐小程序实战教程09-订单功能开发
低代码布道师
42 0
低代码布道师
|
1月前
|
小程序 开发工具 数据库
零基础开发小程序第三课-列表功能开发
零基础开发小程序第三课-列表功能开发
低代码布道师
29 0
一个大长腿.
|
2月前
|
小程序 JavaScript
微信小程序图片预览功能？
微信小程序图片预览功能？
一个大长腿.
162 0
技术君
|
2月前
|
小程序 JavaScript Android开发
【经验分享】如何在支付宝小程序里玩转富文本功能
【经验分享】如何在支付宝小程序里玩转富文本功能
技术君
58 0
低代码布道师
|
1月前
|
存储 小程序 开发工具
零基础开发小程序第四课-查看功能开发
零基础开发小程序第四课-查看功能开发
低代码布道师
31 0
xiaohua616
|
4天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能（带参数和无参数）
uniapp 实现当前页面分享至微信好友或朋友圈功能（带参数和无参数）
xiaohua616
4 0
疯狂的猿
|
1月前
|
小程序 前端开发 API
快递平台独立版小程序源码|带cps推广营销流量主+前端
快递平台独立版小程序源码|带cps推广营销流量主+前端
疯狂的猿
51 7
快递平台独立版小程序源码|带cps推广营销流量主+前端
低代码布道师
|
1月前
|
小程序 算法 数据可视化
点餐小程序实战教程07-点餐功能开发
点餐小程序实战教程07-点餐功能开发
低代码布道师
29 0
低代码布道师
|
1月前
|
小程序
TDesign电商小程序模板解析02-首页功能
TDesign电商小程序模板解析02-首页功能
低代码布道师
30 0

热门文章

最新文章

  • 1
    微信网页授权之使用完整服务解决方案
  • 2
    【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
  • 3
    微信团队分享：来看看微信十年前的IM消息收发架构，你做到了吗
  • 4
    开学已经一个月了，老师把最近考试成绩发到了微信群里，我用 ChatGPT 简单分析一下
  • 5
    调用第三方接口微信登录接口
  • 6
    营销利器大揭秘：精选营销平台分享
  • 7
    设计 QQ、微信等第三方账号登陆
  • 8
    微信小程序如何刷新当前页面
  • 9
    深入解析微信小程序全栈开发流程
  • 10
    【微信小程序】之自定义三宫格一行展示row-grid（简单数据看板）
  • 1
    基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
    26
  • 2
    基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
    26
  • 3
    基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
    20
  • 4
    基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
    24
  • 5
    基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
    27
  • 6
    基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
    28
  • 7
    基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
    24
  • 8
    基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
    22
  • 9
    基于SpringBoot+Vue+uniapp微信小程序的医院核酸检测服务系统的详细设计和实现
    29
  • 10
    基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
    25

    • 相关课程

    更多
  • IoT小程序框架课程
  • 场景实践 - 机器学习PAI实现精细化营销
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定
  • 场景实践 - 搭建个性化推荐引擎系统

    • 相关电子书

    更多
  • 微信移动客户端-数据存储优化实践
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 搭建微信小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • 使用EDA架构部署在线外卖订单系统
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）