121 lines
2.6 KiB
Vue
121 lines
2.6 KiB
Vue
<template>
|
|
<div class="bottom-view" :class="modeClass">
|
|
<div class="bottom-view-top">
|
|
<balance-view
|
|
:drawType="drawType"
|
|
:value="remainTicketNum"
|
|
:goldNum="goldNum"
|
|
></balance-view>
|
|
<lottery-btn :drawType="drawType"></lottery-btn>
|
|
</div>
|
|
<div class="bottom-view-bottom">
|
|
<ticket-view
|
|
v-for="(item, key) in ticketRuleList"
|
|
:key="`ticket_view_${key}`"
|
|
:label="item.label"
|
|
:desc="item.desc"
|
|
:active="active === key"
|
|
:drawType="drawType"
|
|
@click.native="clickTicketView(item, key)"
|
|
></ticket-view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import balanceView from "./balanceView.vue";
|
|
import lotteryBtn from "./lotteryBtn.vue";
|
|
import ticketView from "./ticketView.vue";
|
|
import { mapMutations, mapGetters, mapActions } from "vuex";
|
|
export default {
|
|
name: "BottomView",
|
|
components: {
|
|
balanceView,
|
|
lotteryBtn,
|
|
ticketView
|
|
},
|
|
props: {
|
|
drawType: {
|
|
type: String,
|
|
default: "turntable1"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
active: 0
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
"remainTicketNum",
|
|
"goldNum",
|
|
"ticketRule",
|
|
"ticketRuleList",
|
|
"ticketRuleConfig"
|
|
]),
|
|
modeClass() {
|
|
if (this.drawType === "turntable1") return "bottom-view-xy";
|
|
return "bottom-view-hh";
|
|
},
|
|
uid() {
|
|
return this.$route.query.uid;
|
|
},
|
|
roomUid() {
|
|
return this.$route.query.roomUid;
|
|
}
|
|
},
|
|
watch: {
|
|
drawType() {
|
|
this.active = 0;
|
|
this.getqueryTicketRule(this.drawType);
|
|
},
|
|
active() {
|
|
this.SetRuleType(this.ticketRuleConfig[this.active].ruleType);
|
|
}
|
|
},
|
|
created() {
|
|
this.getQueryTicketNum();
|
|
this.getqueryTicketRule(this.drawType);
|
|
},
|
|
methods: {
|
|
...mapMutations(["SetRuleType"]),
|
|
...mapActions(["getqueryTicketRule", "getQueryTicketNum"]),
|
|
clickTicketView(item, index) {
|
|
this.active = index;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.bottom-view {
|
|
width: 694px;
|
|
height: 300px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
margin: 0 auto;
|
|
&-top {
|
|
display: flex;
|
|
width: 635px;
|
|
height: 115px;
|
|
margin: 0 auto;
|
|
padding-top: 18px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
&-bottom {
|
|
padding-top: 20px;
|
|
padding-left: 242px;
|
|
padding-right: 34px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.bottom-view-xy {
|
|
background-image: url(../../assets/images/bottom_bg.png);
|
|
}
|
|
.bottom-view-hh {
|
|
background-image: url(../../assets/images/bottom_bg_g.png);
|
|
}
|
|
</style>
|