【黄啊码】小程序：九宫格抽奖如何实现？可控制抽奖率

//index.js
//获取应用实例
const app = getApp()

//计数器
var interval = null;

//值越大旋转时间越长  即旋转速度
var intime = 50;

Page({
  data: {
    color: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
    //9张奖品图片
    images: [],
    btnconfirm: '/images/dianjichoujiang.png',
    clickLuck:'clickLuck',
    luckPosition:2,
    prizeWeight:[],
    titles:[],
  },

  onLoad:function(){
    var that=this;
    wx.request({
        url: 'XXXXXXX', 
        method:'POST',
        header: { 
          'content-type': 'application/json' // 默认值
        },
        data:{
        },success(res){
          that.setData({prizeWeight:res.data.data.percent_list});//奖项权重数组，表征各奖项的中奖机会占总数的百分比。比如一等奖的中奖率是1%，二等奖的中奖率是5%
          that.setData({images:res.data.data.images_list});
          that.setData({titles:res.data.data.title_list});
          //例子：prizeWeight:({5,5,10,20,30,10,10,10})记住是按顺序的，所有的加起来等于100,images就是八张图片的地址，titles就是八个标题的内容
          
        }
    })
    
  },

  //点击抽奖按钮
  clickLuck:function(){
    var e = this;
    var weightSum = e.data.prizeWeight.reduce(function(prev, currVal){    //计算权重之和：1+5+20+74=100
        return prev + currVal;    //prev 是前一次累加后的数值，currVal 是本次待加的数值
    }, 0);
    console.log(weightSum);
    var random = Math.random()*weightSum;
    console.log(random);
    var concatWeightArr = e.data.prizeWeight.concat(random);    //将随机数加入权重数组
    console.log(concatWeightArr);
    var sortedWeightArr = concatWeightArr.sort(function(a, b){return a-b;});    //将包含随机数的新权重数组按从小到大（升序）排序
    console.log(sortedWeightArr);
    var randomIndex = sortedWeightArr.indexOf(random);    //索引随机数在新权重数组中的位置
    console.log(randomIndex);
    randomIndex = Math.min(randomIndex, e.data.images.length -1);    //权重随机数的下标不得超过奖项数组的长度-1，重新计算随机数在奖项数组中的索引位置
    console.log(randomIndex);
    e.setData({luckPosition:randomIndex});
    //设置按钮不可点击
    e.setData({
      btnconfirm:'/images/dianjichoujiangd.png',
      clickLuck:'',
    })
    //清空计时器
    clearInterval(interval);
    var index = 0;
    console.log(e.data.color[0]);
    //循环设置每一项的透明度
    interval = setInterval(function () {
      if (index > 7) {
        index = 0;
        e.data.color[7] = 0.5
      } else if (index != 0) {
        e.data.color[index - 1] = 0.5
      }
      e.data.color[index] = 1
      e.setData({
        color: e.data.color,
      })
      index++;
    }, intime);

    //模拟网络请求时间  设为两秒
    var stoptime = 2000;
    setTimeout(function () {
      e.stop(e.data.luckPosition);
    }, stoptime)

  },

  stop: function (which){
    var e = this;
    //清空计数器
    clearInterval(interval);
    //初始化当前位置
    var current = -1;
    var color = e.data.color;
    for (var i = 0; i < color.length; i++) {
      if (color[i] == 1) {
        current = i;
      }
    }
    //下标从1开始
    var index = current + 1;

    e.stopLuck(which, index, intime, 10);
  },


/**
 * which:中奖位置
 * index:当前位置
 * time：时间标记
 * splittime：每次增加的时间 值越大减速越快
 */
  stopLuck: function (which, index,time,splittime){
    var e = this;
    //值越大出现中奖结果后减速时间越长
    var color = e.data.color;
    setTimeout(function () {
      //重置前一个位置
      if (index > 7) {
        index = 0;
        color[7] = 0.5
      } else if (index != 0) {
        color[index - 1] = 0.5
      }
      //当前位置为选中状态
      color[index] = 1
      e.setData({
        color: color,
      })
          //如果旋转时间过短或者当前位置不等于中奖位置则递归执行
          //直到旋转至中奖位置
        if (time < 400 || index != which){
          //越来越慢
          splittime++;
          time += splittime;
          //当前位置+1
          index++;
          e.stopLuck(which, index, time, splittime);
        }else{
        //1秒后显示弹窗
          setTimeout(function () {
             wx.showModal({
               title: '提示',
               content: e.data.titles[which],
               showCancel: false,
               success: function (res) {
                 if (res.confirm) {
                   //设置按钮可以点击
                   e.setData({
                     btnconfirm: '/images/dianjichoujiang.png',
                     clickLuck: 'clickLuck',
                   })
                 }
               }
             })
              
          }, 1000);
        }
    }, time);
    console.log(time);
  }
})

<!--index.wxml-->
<view class="container">
  <view class='frame_view'>
<view class='frame_row'>
<image class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'></image>
<image class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'></image>
<image class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></image>
</view>

<view class='frame_row'>
<image class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'></image>
<image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image>
<image class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></image>
</view>

<view class='frame_row'>
<image class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'></image>
<image class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'></image>
<image class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></image>
</view>
</view>
</view>

/**index.wxss**/
.frame_view{
  bottom: 160rpx;
  left: 60rpx;
  right: 60rpx;
  width:590rpx;
  height:590rpx;
  padding: 20rpx;
  background: #792db3;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 30rpx;
}
.frame_row{
  width:580rpx;
  height:180rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
} 
.frame_item{
  width:180rpx;
  height:180rpx;
}