小程序抽奖活动

活动效果图.png

/**
   * 页面的初始数据
   */
  data: {
    curPosition: 0,//当前转动到的位置
    count: 8,    // 总共有多少个位置
    myInterval: 0,    // 定时器
    speed: 300,//速度，速度值越大，则越慢 初始化为300
    max_speed: 40,   // 滚盘的最大速度
    times: 0,    // 转动次数
    cycle: 5,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: 0,   // 中奖位置
    runs_now: 0,//当前已跑步数
    last_index:0,//停下来的中奖位置
    toastHide: true,//弹层是否展示
    toastPrize: false,//是否弹出中奖弹框
    isGetPrize: true,//是否中奖
  },
//开始抽奖
  startGame: function(e) {
    let _this = this;

    _this.data.runs_now = 0;
    _this.data.speed = 40;
    wx.request({
      url: 'test.php', //仅为示例，并非真实的接口地址
      data: {
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        _this.setData({
          prize: parseInt(res.priceType.charAt(1)),
          lastNum: res.priceCount
         })
        _this.startRoll();
      }
    })
  },
  //开始抽奖动画
  startRoll: function () {
    let _this = this;
    _this.data.myInterval = setTimeout(function () { _this.startRoll(); }, _this.data.speed);
    const count_num = _this.data.count * _this.data.cycle + _this.data.prize + (_this.data.count - _this.data.last_index);
    _this.data.runs_now++;//已经跑步数加一
    _this.data.curPosition++;//当前的加一
    //上升期间
    if (_this.data.runs_no <= (count_num/3*2)){
      _this.data.speed -= 30;//加速
      if (_this.data.speed <= _this.data.max_speed) {
        _this.data.speed = _this.data.max_speed;//最高速度为40；
      }
    }
    //抽奖结束
    else if (_this.data.runs_now >= count_num) {
      console.log('cancel')
      clearTimeout(_this.data.myInterval);
      _this.data.click = true;
      _this.data.last_index = _this.data.curPosition;
      let timer = setTimeout(function () {
        let isGetPrize;
        if (_this.data.prize == 7) {
          isGetPrize = false
        } else {
          isGetPrize = true
        }
        _this.setData({
          toastHide: false,
          toastPrize: true,
          isGetPrize
        })
        clearTimeout(timer)
      }, 500)
    }
    //下降期间
    else if (count_num - _this.data.runs_now <= 10) {
      _this.data.speed += 20;
    }
    //缓冲区间
    else {
      _this.data.speed += 10;
      if (_this.data.speed >= 100) {
        _this.data.speed = 100;//最低速度为100；
      }
    }
    if (_this.data.curPosition > _this.data.count) {//判定！是否大于最大数
      _this.data.curPosition = 1;
    }
    _this.setData(_this.data);
    
  },