vue加js实现大转盘抽奖活动

1.写大转盘的页面,这里是我的整个页面的代码

},
created() {
this.ais = localStorage.getItem(‘ais’)
},
computed: {
classOption() {
return {
step: 0.5 //数值越大速度滚动越快,更多参数参考官网参数配置
// limitMoveNum: 2,// 开始无缝滚动的数据量
};
}
},
methods:{
ruleBtn() {
this.show = true
this.ruleshow = true
this.prizeshow = false
this.blockshow = true
this.aisshow = false
this.giftshow = false
this.myaisshow = false
},
prizeBtn() {
this.show = true
this.blockshow = true
this.prizeshow = true
this.ruleshow = false
this.aisshow = false
this.giftshow = false
this.myaisshow = false
},
gogift() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … query:this.route.query
})
},
close() {
this.show = false
},
goBack() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … query:this.route.query
})
},
record() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … query:this.route.query
})
},
startRotation() {

    // 如果还不可以转动
    if (!this.canBeRotated()) {
      return false;
    }
    // 开始转动
    // 先上锁
    this.isLocking = true;
    // 设置在哪里停下,应该与后台交互,这里随机抽取0~5
    // const index = Math.floor(Math.random() * this.prizeData.length);
    const index = 3;
    // 成功后次数减少一次
    this.num--;
    this.prizeIndex = index;
    // 告诉子组件,开始转动了
    this.$refs.roundTurntable.rotate(index);
    
  },
  // 已经转动完转盘触发的函数
  endRotation() {
    // 提示中奖
    this.giftshow = true
    this.show = true
    this.ruleshow = false
    this.prizeshow = false
    this.blockshow = false
    this.myaisshow = false
    this.name = this.prizeData[this.prizeIndex].prizeName
    // alert(`恭喜您获奖啦,您的奖品是:${this.prizeData[this.prizeIndex].prizeName}`);
    // 解锁
    this.isLocking = false;
  },
  // 判断是否可以转动
  canBeRotated() {
    if (this.num <= 0) {
      // alert('已经木有次数了!');
      this.aisshow = true
      return false;
    }
    if (this.isLocking) {
      return false;
    }
    return true;
  },

},
}

roundTurntable.vue大转盘子组件

当前浏览器版本过低,请使用其他浏览器尝试

你可能感兴趣的:(js,vue)