108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<UniPopup ref="popup" type="center" @change="change">
|
|
<raffle-wheel ref="raffle" class="raffle" :prizeList="foods" :ringCount="ringCount" strKey="name"
|
|
@actionEnd="actionEnd" @actionStart="actionStart"></raffle-wheel>
|
|
</UniPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {setPrize} from '@/common/api.js';
|
|
import {callbackRequest,getStorage,alertTip} from '@/common/util.js';
|
|
import RaffleWheel from '@/components/raffle-wheel/raffle-wheel.vue'
|
|
import UniPopup from '@/components/uni-popup/uni-popup2.vue';
|
|
export default {
|
|
components: {
|
|
RaffleWheel,
|
|
UniPopup
|
|
},
|
|
data() {
|
|
return {
|
|
ringCount: 7.4,
|
|
isPrize:false,
|
|
foods:[],
|
|
id: '',
|
|
userId:getStorage('userInfo').id,
|
|
grade:0
|
|
}
|
|
},
|
|
onLoad(option){
|
|
this.foods = JSON.parse(decodeURIComponent(option.foods));
|
|
this.probability();
|
|
},
|
|
onReady() {
|
|
this.$refs.popup.open();
|
|
},
|
|
methods: {
|
|
actionStart:function(){
|
|
if(this.isPrize){
|
|
alertTip("你已抽奖");
|
|
return;
|
|
}
|
|
this.$refs.raffle.handleStartRotate(1);
|
|
},
|
|
actionEnd:function(e){
|
|
this.isPrize = true;
|
|
if(!this.id){
|
|
alertTip("很遗憾，您没有中奖！");
|
|
}else{
|
|
alertTip("恭喜您，您中了" + this.grade + "等奖!");
|
|
}
|
|
let params = {
|
|
"method":setPrize,
|
|
data:{
|
|
featureId:this.id,
|
|
userId:this.userId
|
|
}
|
|
}
|
|
callbackRequest(params)
|
|
.then(res => {
|
|
if(res.data.returnCode == 0){
|
|
this.isPrize = false;
|
|
alertTip("抽奖失败，请重新抽取！");
|
|
return;
|
|
}
|
|
})
|
|
},
|
|
change: function(e){
|
|
if(!e.show){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
},
|
|
probability: function(){
|
|
var p = this.random();
|
|
var prizeNo = Math.floor(p/10);
|
|
this.id = food[prizeNo].id;
|
|
this.id ? (this.grade = prizeNo) : (this.grade = 0);
|
|
|
|
var ring = this.random()/1000;
|
|
this.ringCount = 7.4 - 0.3 - 0.05 + ring;
|
|
},
|
|
random: function(){
|
|
return Math.floor(Math.random() * 100);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/static/css/common.scss';
|
|
.container{
|
|
min-height:100vh;
|
|
overflow:hidden;
|
|
background: #f8f8f8;
|
|
.raffle {
|
|
width: 600rpx;
|
|
height: 600rpx;
|
|
// background: #00C564;
|
|
// position: absolute;
|
|
// margin-left: 78rpx;
|
|
// margin-top: 300rpx;
|
|
|
|
}
|
|
}
|
|
</style>
|