微信小程序六宫格抽奖

用微信小程序做一个抽奖活动


一轮是6个红包，需要在第三轮听下转动，初始一个随机数在13-18之间随机来进行抽奖

//页面的渲染
<view class="container">
  <!-- 抽奖区域 -->
  <view class="box">
    <view class="list-content">
      <block wx:for="{{prizeList}}" wx:key="id">
        <view class="list">
          <view class="list_t">
          	//当转动开始后图片跟随当前的下标进行修改
            <image src="{{drawIndex==item.index?changeImg:listImg}}" mode="aspectFit"></image>
          </view>
          <view class="list_b">{{item.prizeName}}</view>
        </view>
      </block>
    </view>
  </view>
  <button bindtap="startDraw" style="background: #e66013;color: #fff;">抽奖</button>
  <!-- 奖品弹窗 -->
  <view class="award-display" wx:if="{{showModel}}" bindtap="closePopup">
    <view class="award-image">
      <image src="{{changeImg}}" mode="aspectFit"></image>
      <view class="luck-text" style="color: #fff;">{{awardName}}</view>
    </view>
  </view>
</view>

页面的js

// 获取应用实例
let timer; 
let drawIndex = 0; //抽奖过程下标

Component({
  /**
   * 组件的初始数据
   */
  data: {
    // 奖品参数信息
    prizeList: [
      { index: 1, prizeName: '谢谢参与' },
      { index: 2, prizeName: '积分 x20' },
      { index: 3, prizeName: '积分 x5' },
      { index: 6, prizeName: '谢谢参与' },
      { index: 5, prizeName: '商务笔记本' },
      { index: 4, prizeName: '积分 x2' }
    ],
    listImg:'https://img-blog.csdnimg.cn/9ec6866452694effb07ac91961cddd91.png',
    changeImg:'https://img-blog.csdnimg.cn/10c950ac1d6c498fa3ffb8353e4c914c.png',
    drawIndex: null, //抽奖过程
    random:null,    //随机数
    prizeName: null, //抽奖结果下标对应的奖品名称
    showModel: false,  // 是否显示奖品弹窗，默认false不显示
    awardName:'',  // 弹窗显示的奖品名
    time:0      
  },

  /**
   * 组件的方法列表
   */
  methods: {

    //抽奖操作
    startDraw() {
      var that =this;
      this.againBtn();
      this.data.drawIndex=0;
      this.data.time=0;
      clearInterval(timer);
      timer = setInterval(()=>{
        this.changePrize()
      }, 150);

      // 随机将品池
      var random = Math.floor(Math.random() *(5)+13); //在13-18之间取随机数，因为是6个一轮所以第三轮刚好出结果
      this.setData({
        random:random
      })
      setTimeout(() => {
        clearInterval(timer);
        timer = setInterval(() => {
          that.changePrize()
        }, 500);
      }, 1800)
    },

    //奖品切换
    changePrize() {
      drawIndex++;
      var time =this.data.time;
        time++;
      drawIndex = drawIndex > 6 ? 1 : drawIndex;
      this.setData({
        time:time,
        drawIndex: drawIndex
      });
      if (this.data.random == this.data.time) {
        clearInterval(timer);
        // 匹配抽到的数据
        var data= this.data.prizeList.filter(function(item){
          return item.index == drawIndex; 
        })
        this.setData({
          showModel: true,
          awardName: data[0].prizeName
        });
      }
    },

    //点击再抽一次按钮
    againBtn() {
      drawIndex = 0; //抽奖过程KEY
      this.setData({
        drawIndex: null, // 清空当前商品下标
        random:null,
        awardName: '' // 清空奖品的展示名称
      });
    },

    // 关闭弹窗
    closePopup(){
      this.setData({
        showModel: false
      })
    }
  }
})

抽奖的样式

.list{
  text-align: center;
  margin-bottom: 100rpx;
}
.list_t>image{
  width: 200rpx;
  height: 100rpx;
}
.list-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20rpx;
}
.award-display{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .7);
}
.award-image{
  text-align: center;
  color: #fff;
  margin: 100rpx auto;
}
.award-image>image{
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
}

一个简单的抽奖就完成了