微信小程序抽奖效果实现！！！

微信小程序作为移动互联网时代的代表之一，不仅深受用户欢迎，也成为了许多企业营销的利器。而其中的抽奖活动更是备受关注，不仅可以为企业带来流量和关注，也给用户带来了丰富的奖品和刺激的体验。本文将带您一步步实现微信小程序抽奖效果，让您可以轻松地在自己的小程序中添加这一功能。在本文中，我们将会依次介绍如何生成随机数、如何使用动画来实现转盘抽奖效果、以及如何使用云函数来处理抽奖结果，并给出完整的实现代码。让我们开始吧！

参考代码：传送门

WXML:

<!--pages/jsCase/draw3/index.wxml-->
<view class="con flex-column">
  <view class="draw_sc flex-row">
    <image src="../img/draw_icon.png" class="draw_icon" />
    <swiper class="swiper" vertical="true" autoplay="true" circular="true" interval="3000" display-multiple-items='1'>
      <block wx:for-index="idx" wx:for='{{2}}' wx:key="index">
        <swiper-item>
          <view>
            <text decode="{{true}}">恭喜用户&nbsp;&nbsp;&nbsp;</text>
            <text class="draw_text">178***5379</text>
            <text decode="{{true}}">&nbsp;&nbsp;抽中华为手机一台</text>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="box">
    <view class="b_box">
      <view class="flex-row j_b prize_box">
        <block wx:for="{{prize_list}}" wx:key="index">
          <!-- 抽奖 按钮-->
          <block wx:if="{{index == 4}}">
            <view class="prize_start prize_item">
              <image src="../img/start_btn.png" class="lott_btn" mode="aspectFill" bindtap="lottery"></image>
            </view>
          </block>
          <!-- 奖项 -->
          <view class="prize_item flex-column {{item.active?'ative':''}}">
            <view class="prize_img ">
              <image src="{{item.icon}}" mode="aspectFill" />
            </view>
            <text>{{item.name}}</text>
          </view>
        </block>
      </view>
    </view>
  </view>
  <view class="remainin_text">您还有<text>{{remian_num}}次</text>抽奖机会</view>
</view>

WXSS:

/* pages/jsCase/draw2/index.wxss */
page {
  background: linear-gradient(to right, rgb(116, 180, 240), #3ea3ca, #69e9d8);
  padding-bottom: 40rpx;
}

.con {
  margin: 30rpx auto;
  width: 704rpx;
  border-radius: 30rpx;
  background: linear-gradient(0deg, rgb(59, 129, 194) 0%, #949b97 100%);
  box-shadow: 0px 14px 4px 0 #3845b3;
  box-sizing: border-box;
  padding: 20rpx;
}

.draw_sc {
  width: 637rpx;
  height: 69rpx;
  background: rgba(236, 215, 219, 0.53);
  border-radius: 34rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}

.draw_icon {
  width: 37rpx;
  height: 29rpx;
  margin-right: 25rpx;
}

.swiper {
  height: 100%;
  font-size: 28rpx;
  color: #fff;
  flex: 1;
  line-height: 69rpx;
}

.draw_text {
  color: #FFF000;
}

.box {
  width: 632rpx;
  box-shadow: -6px 8px 81px 0px rgb(255, 192, 203, .73), 0px 0px 24px 0px #FFFFFF inset;
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 9rpx;
  margin-bottom: 25rpx;
}

.b_box {
  width: 614rpx;
  border-radius: 30rpx;
  box-shadow: 0px 0px 10px 0px rgb(255, 192, 203, .53), 0px 0px 27px 0px #FFFFFF inset;
  box-sizing: border-box;
  padding: 19rpx 15rpx;
}


.prize_box {
  flex-wrap: wrap;
  position: relative;
  z-index: 99;
}

.prize_item {
  width: 186rpx;
  height: 156rpx;
  background: #F7FCFC;
  box-shadow: -6rpx 8rpx 16rpx 0px rgba(7, 53, 130, 0.11) inset;
  border-radius: 34rpx;
  margin-bottom: 14rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: rgb(221, 141, 154);
  box-sizing: border-box;
  padding-top: 10rpx;
}

.prize_start {
  padding-top: 0 !important;
}

.lott_btn {
  width: 100%;
  height: 100%;
}


.prize_img image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 5rpx;
}

.ative {
  position: relative;
  border: 2rpx solid transparent;
  box-shadow: none;
}

.ative::after {
  content: '';
  position: absolute;
  top: -8rpx;
  bottom: -8rpx;
  left: -8rpx;
  right: -8rpx;
  background: linear-gradient(0deg, #cc745a, #d81657);
  z-index: -1;
  border-radius: 34rpx;
}

.remainin_text {
  font-size: 30rpx;
  font-weight: bold;
  color: #FFFFFF;
}

.remainin_text text {
  color: #5dbda8;
}

.a {
  width: 186px;
  height: 156px;
  background: #EBB700;
  box-shadow: -6px 8px 16px 0px rgba(7, 53, 130, 0.11);
  border-radius: 34px;
  position: relative;
}

.a::after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 186px;
  height: 149px;
  background: #FFD02E;
  border: 4px solid;
  border-image: linear-gradient(177deg, #FFC500, #FFFFFF) 10 10;
  box-shadow: 0px 8px 29px 0px #FFFFFF;
  border-radius: 34px;
  z-index: 11;
}

JS:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    remian_num: 5, //剩余抽奖的次数
    prize_list: [],
    lock: false, //防止重复点击
    prizeListIndex: [0, 1, 2, 4, 7, 6, 5, 3], //抽奖顺序的索引
    prizeListIndex1: [0, 1, 2, 7, 3, 6, 5, 4], //奖品索引
    over: false, //是否加载完奖品数据
  },

  onShow: function () {
    this.getDraw();
  },
  getDraw() {
    var cacheData = wx.getStorageSync('draw_data'),
      prize_list = cacheData ? JSON.parse(cacheData) : {} //缓存数据，防止页面空白
    this.setData({
      prize_list,
    })
    this.getData()
  },
  getData() {
    var list = [{
        id: "001",
        icon: '../../../img/hongbao.png',
        name: '华为手机',
      },
      {
        id: "002",
        icon: '../../../img/hongbao.png',
        name: '谢谢惠顾',
      },
      {
        id: "003",
        icon: '../../../img/hongbao.png',
        name: '小米手环',
      },
      {
        id: "004",
        icon: '../../../img/hongbao.png',
        name: '一箱奶',
      },
      {
        id: "005",
        icon: '../../../img/hongbao.png',
        name: '华为手机',
      },
      {
        id: "006",
        icon: '../../../img/hongbao.png',
        name: 'ipad',

      },
      {
        id: "007",
        icon: '../../../img/hongbao.png',
        name: '蓝牙耳机',
      },
      {
        id: "008",
        icon: '../../../img/hongbao.png',
        name: '平板电脑',
      },
    ];
    setTimeout(() => {
      let prize_list = list;
      let pIndex = this.data.prizeListIndex1;
      for (let i in prize_list) {
        prize_list[i].active = false;
        prize_list[i].index = pIndex[i];
      }
      this.setData({
        prize_list,
        over: true
      })
      wx.setStorageSync('draw_data', JSON.stringify(prize_list))
    }, 500)
  },

  // 范围随机数
  randomRange(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
  },
  // 抽奖动画
  Timer: null,
  LotteryEnd: false, //抽奖结束
  nowRunIndex: 0, //ative样式的索引，
  luckChose(luckIndex) {
    return new Promise((resolve, reject) => {
      let that = this
      let maxTime = this.randomRange(2500, 4000) //抽奖的时间2.5s-4s之间
      let time_speed = 0.01; //速率
      if (this.nowRunIndex == 0) { //初始化从索引0开始显示抽奖激活的边框
        this.setData({
          'prize_list.[0].active': true
        })
      }

      function lotteryRun(time) {
        that.Timer = setTimeout(() => {
          let list = that.data.prize_list;
          ++that.nowRunIndex;
          that.nowRunIndex >= that.data.prizeListIndex.length ? that.nowRunIndex = 0 : '';
          let Pindex = that.data.prizeListIndex[that.nowRunIndex];
          list.map((item, index) => {
            item.active = Pindex == index;
          })
          that.setData({
            prize_list: list
          })
          if (that.LotteryEnd && luckIndex == that.nowRunIndex) {
            clearTimeout(that.Timer);
            that.LotteryEnd = false;
            that.setData({
              lock: false
            })
            resolve(list.filter(v => {
              return v.active
            }))
          } else {
            time_speed += 0.5;
            lotteryRun(time + (time_speed));
          }
        }, time);
      }

      lotteryRun(80);
      setTimeout(() => {
        this.LotteryEnd = true;
      }, maxTime);
    })
  },
  // 抽奖活动
  lottery() {
    if (!this.data.over) return
    // 防止重复点击
    if (this.data.lock) return
    this.setData({
      lock: true
    })
    let {
      prize_list
    } = this.data;
    if (this.data.remian_num.length <= 0 || this.data.prize_list.length === 0) return;
    setTimeout(() => {
      console.log('12312')
      let id = "007",
        currIndex = "";
      for (let i in prize_list) {
        if (id == prize_list[i].id) {
          currIndex = prize_list[i].index
        }
      }
      console.log(currIndex)
      this.luckChose(currIndex).then(res => {
        console.log(res)
        wx.showToast({
          title: '你抽中了' + res[0].name,
          icon: 'none'
        })
      })
    }, 500)
  },

})