98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="bobo-lottery">
|
|
<bobo-yq-view></bobo-yq-view>
|
|
<bobo-lottery-count></bobo-lottery-count>
|
|
<button class="bobo-lottery-button" @click="clickLottery"></button>
|
|
</div>
|
|
<lottery-prizes-dialog
|
|
v-model="show"
|
|
:list="lotteryPrizeItemList"
|
|
></lottery-prizes-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import boboYqView from "./boboYqView.vue";
|
|
import boboLotteryCount from "./boboLotteryCount.vue";
|
|
import lotteryPrizesDialog from "@/components/lotteryPrizesDialog";
|
|
import { mapGetters, mapMutations, mapActions } from "vuex";
|
|
export default {
|
|
name: "BoboLottery",
|
|
components: {
|
|
boboYqView,
|
|
boboLotteryCount,
|
|
lotteryPrizesDialog
|
|
},
|
|
data() {
|
|
return {
|
|
show: false
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
"canLottery",
|
|
"remainTicketNum",
|
|
"curTicketRuleValue",
|
|
"lotteryPrizeItemList"
|
|
])
|
|
},
|
|
methods: {
|
|
...mapMutations(["SetCanLottery"]),
|
|
...mapActions(["runLottery"]),
|
|
clickLottery() {
|
|
if (this.canLottery) {
|
|
this.SetCanLottery(false);
|
|
this.Lottery();
|
|
} else {
|
|
this.$toast.fail("您点太快了，本次抽奖还没结束哦！");
|
|
}
|
|
},
|
|
Lottery() {
|
|
if (
|
|
this.remainTicketNum === 0 ||
|
|
this.remainTicketNum < this.curTicketRuleValue
|
|
) {
|
|
this.$toast.fail("余额不足！");
|
|
this.SetCanLottery(true);
|
|
return;
|
|
}
|
|
|
|
this.runLottery()
|
|
.then(res => {
|
|
this.SetCanLottery(true);
|
|
const { code } = res;
|
|
if (code === 200) {
|
|
this.show = true;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.SetCanLottery(true);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.bobo-lottery {
|
|
margin-top: 212px;
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
&-button {
|
|
width: 320px;
|
|
height: 100px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
border: none;
|
|
background-color: transparent;
|
|
background-image: url(../../assets/images/bobo/but_cpp.png);
|
|
&:active {
|
|
background-image: url(../../assets/images/bobo/but_cpp_press.png);
|
|
}
|
|
}
|
|
}
|
|
</style>
|