seahorsesShop_miniapp/packageMemberIntegral/components/raffleWheel/raffleWheel.js

// components/raffleWheel/raffleWheel.js
//创建并返回内部 audio 上下文 innerAudioContext 对象
const start = wx.createInnerAudioContext();
const mid = wx.createInnerAudioContext();
const stop = wx.createInnerAudioContext();


var http = require('../../../utils/http.js')
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

  /**
   * 组件的属性列表
   * 用于组件自定义设置   组件的对外属性
   */
  properties: {
    myProperty: { // 属性名        myProperty2: String, 简化的定义方式
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性默认 初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
      }
    },

    size: {
      type: Number, // 转盘大小，传入宽度即可
      value: 600
    },
  },

  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染
   */
  data: {
    awardsConfig: {
      option: '', //转盘的标题名称
      awards: []
    },
    animationData: {}, // 转盘动画
    zhuanflg: false, // 转盘是否可以点击切换的标志位
    // fastTime: 7600,    // 转盘快速转动的时间
    fastTime: 3900, // 转盘快速转动的时间
    slowTime: 3900, // 转盘慢速转动的时间
    runDegs: 0, // 转盘旋转了多少圈
    timer: null, // 清除转盘的时间clearTimeout(timer)
    block1: 'block', // 控制显示或隐藏转盘中心的图片
    block2: 'none',
    block3: 'none',
    block4: 'none'
  },

  //组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setData
  created: function () {},

  // 组件生命周期函数，在组件实例进入页面节点树时执行
  attached: function () {
    this.getScoreLuckPrizes()
  },

  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    /*
     * 公有方法
     */
    //判断值是否为空
    isNull(str) {
      if (str == null || str == undefined || str == '') {
        return true;
      } else {
        return false;
      }
    },

    //初始化数据
    initAdards() {
      var that = this,
        awardsConfig = that.data.awardsConfig;
      var t = awardsConfig.awards.length; // 选项长度
      var e = 1 / t,
        i = 360 / t,
        r = i - 90;

      for (var g = 0; g < t; g++) {
        awardsConfig.awards[g].item2Deg = g * i + 90 - i / 2 + "deg";
        //当前下标 * 360/长度 + 90 - 360/长度/2
        awardsConfig.awards[g].afterDeg = r + "deg";
        awardsConfig.awards[g].opacity = '1';
      }

      that.setData({
        turnNum: e, // 页面的单位是turn
        awardsConfig: awardsConfig,
      })

      that._change(); //向父组件传出当前转盘的初始数据
    },

    //重置转盘
    reset() {
      var that = this,
        awardsConfig = that.data.awardsConfig;
      var animation = wx.createAnimation({
        duration: 1,
        timingFunction: "ease"
      });
      that.animation = animation;
      animation.rotate(0).step(), that.data.runDegs = 0;

      that.setData({
        animationData: animation.export(),
        block3: 'none',
        block4: 'block'
      })

      for (let x in awardsConfig.awards) {
        awardsConfig.awards[x].opacity = '1';
      }

      setTimeout(function () {
        that.setData({
          block1: 'block',
          block4: 'none',
          awardsConfig: awardsConfig,
        })
      }, 300)
    },

    //父组件需要切换当前转盘的选项
    //如果有需要切换不同转盘的选项时，可以调用这方法
    //data: 转盘的数据
    //flag: 当转盘在转动过程中如果你想停止的话，可以传个true值，默认可不传
    switchZhuanpan(data, flag) {
      this.setData({
        awardsConfig: data,
        block1: 'block',
        block1: 'none',
        block3: 'none',
        block4: 'none',
        zhuanflg: false,
      })
      this.initAdards();

      if (flag) {
        this.reset();
        clearTimeout(this.data.timer);
        start.stop();
        mid.stop();
        stop.stop();
      }
    },



    /*
     * 内部私有方法建议以下划线开头
     * triggerEvent 用于触发事件,过triggerEvent来给父组件传递信息的
     * 写法： this.triggerEvent('cancelEvent', { num: 1 })  // 可以将num通过参数的形式传递给父组件
     */

    // GO转盘开始转动
    _zhuan() {
      var that = this,
        awardsConfig = that.data.awardsConfig,
        runDegs = that.data.runDegs;
      //>>> 是无符号移位运算符
      var r = Math.random() * awardsConfig.awards.length >>> 0,
        runNum = 8;
      console.log('当前答案选项的下标=====', r);
      setTimeout(function () {
        //要转多少度deg
        runDegs = runDegs || 0, runDegs = runDegs + (360 - runDegs % 360) + (2160 - r * (360 / awardsConfig.awards.length));
        var animation = wx.createAnimation({
          duration: that.data.fastJuedin ? that.data.slowTime : that.data.fastTime,
          timingFunction: "ease"
        });
        that.animation = animation;

        //这动画执行的是差值
        //如果第一次写rotate（360） 那么第二次再写rotate（360）将不起效果
        animation.rotate(runDegs).step(), 0 == r && (runDegs = 0);
        that.setData({
          animationData: animation.export(),
          block1: 'none',
          block2: 'block',
          zhuanflg: true,
        })
        that._setatZhuan(true);
      }, 100);
      that.setData({
        timer: setTimeout(function () {
          that.setData({
            animationData: {},
            s_awards: awardsConfig.awards[r].prizeName, //最终选中的结果
            awardsConfig: awardsConfig,
            block2: 'none',
            block3: 'block',
            zhuanflg: false,
          })
          that._myAwards();
        }, that.data.fastJuedin ? that.data.slowTime : that.data.fastTime)
      })
    },

    //初始化数据时向外传的参
    _change() {
      this.triggerEvent('myData', this.data.awardsConfig); // 向父组件传出当前转盘的数组数据
    },

    //当前转盘的结果
    _myAwards() {
      this.triggerEvent('myAwards', this.data.s_awards)
    },

    //转盘开始转动或者结速转动后的要传的值
    _setatZhuan(e) {
      console.log(e)
      var params = {
        url: '/p/scoreLuck/raffle',
        method: 'GET',
        data: {
          addId: 0
        },
        callBack: res => {
          setTimeout(() => {
            if (res.stock) {
              wx.showModal({
                title: '运气爆棚!',
                showCancel: false,
                content: res.prizeName,
                success: () => {
                  this.reset()
                }
              })
            } else {
              wx.showModal({
                title: '谢谢参与',
                showCancel: false,
                content: '运气留给下次吧~',
                success: () => {
                  this.reset()
                }
              })
            }
          }, 2400)
        },
        errCallBack:(err)=>{
          console.log(err)
          wx.showModal({
            title: '错误',
            showCancel: false,
            content: '服务器开了点小差，待会儿再来吧~',
            success: () => {
              this.reset()
            }
          })
        }
      }
      http.request(params)
    },

    // 获取抽奖奖品列表
    getScoreLuckPrizes() {
      var params = {
        url: '/p/scoreLuck/getScoreLuckPrizes',
        method: 'GET',
        data: {
          consumeType: 1
        },
        callBack: res => {
          res.forEach((el, index) => {
            if (index % 2 === 0) {
              el['color'] = "#FEFAEA"
            } else {
              el['color'] = '#FFE358'
            }
          })
          this.setData({
            'awardsConfig.awards': res
          })
          this.initAdards();
        }
      }
      http.request(params)
    },
  }
})