AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

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

一、引言

正值一年一度的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
目录
相关文章
上海龙兵兵数字科技有限公司成都分公司
|
19天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统，都有哪些功能？
在快节奏的现代生活中，家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题，如服务质量不稳定、价格不透明等，我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式，解决了私单、复购、推广和盈利四大痛点，全面提升了服务质量和用户体验，旨在成为家政行业的领导者。
上海龙兵兵数字科技有限公司成都分公司
34 1
chnjames
|
1月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器：简繁体切换功能完全指南
随着全球化的发展，支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能，以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数，开发者可以方便地实现语言切换，从而提升用户体验。文章中还附带了示例代码和效果图，帮助读者更好地理解和应用这一功能。
chnjames
85 0
微信小程序多语言切换神器：简繁体切换功能完全指南
bruce刘晓伟-18435
|
1月前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
bruce刘晓伟-18435
20 1
周一同学Zelina
|
2月前
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制，并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
周一同学Zelina
28 0
切西瓜法实现微信抢红包功能
阿里云云原生
|
2月前
|
人工智能 前端开发 JavaScript
MacTalk 测评通义灵码，实现“微信表情”小功能
墨问西东创始人池建强分享了团队使用通义灵码的经验。
阿里云云原生
88 6
小周sir
|
2月前
|
小程序 API 开发工具
使用python 实现微信签到提醒功能
【9月更文挑战第4天】使用python 实现微信签到提醒功能
小周sir
71 2
路边两盏灯
|
3月前
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
路边两盏灯
42 1
游客zi3qmblbcdexu
|
3月前
|
小程序 前端开发 开发者
微信小程序实现分享朋友圈功能
【8月更文挑战第21天】
游客zi3qmblbcdexu
117 1
疯狂的猿
|
5月前
自适应IT互联网营销企业网站pbootcms模板
一款蓝色自适应IT互联网营销企业网站pbootcms模板，该模板采用响应式设计，可自适应手机端，适合一切网络技术公司、互联网IT行业，源码下载，为您提供了便捷哦。
疯狂的猿
54 2
auqbllxiu
《实时数仓助力互联网实时决策、精准营销》电子版地址
《实时数仓》PDF
auqbllxiu
115 0
《实时数仓助力互联网实时决策、精准营销》电子版地址

热门文章

最新文章

  • 1
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 2
    iOS版微信新技能：可直接向PC端传文件
  • 3
    微信查询高考分数已支持20个城市
  • 4
    微信支付文章综合
  • 5
    微信公众平台可通过UnionID机制在多公众号间帐号互通
  • 6
    微信小视频微信卡包功能如约现身6.0版本
  • 7
    C# 企业微信消息推送对接
  • 8
    微信公众平台开发(102) 模板消息
  • 9
    微信消息回复C#
  • 10
    nginx反向代理与微信测试全攻略
  • 1
    EDM营销平台有哪些？Top5平台分析
    224
  • 2
    开源电子邮件营销平台 listmonk 使用教程
    236
  • 3
    聚类建模对智能助眠灯市场营销分析
    51
  • 4
    EDM营销应该如何制作使用？邮件营销方法
    136
  • 5
    邮件营销怎么做？如何编辑邮件营销模板
    130
  • 6
    8个邮件营销平台分析及对比
    172
  • 7
    5款最受欢迎的邮件营销系统有什么？
    133
  • 8
    电子邮件营销新风潮：五步高效撰写EDM文案
    126
  • 9
    【视频】结构方程模型SEM分析心理学营销数据路径图可视化|数据分享
    71
  • 10
    「我在淘天做技术」双11背后的营销技术体系
    212

    • 相关课程

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

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 快速搭建移动端可视化看板
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    阿里云OSS设置跨域访问