feat:更新

src/components/bottomView/lotteryBtn.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="lottery-btn" :class="modeClass"></div>
+  <div class="lottery-btn" :class="modeClass" @click="clickLottery"></div>
 </template>
 
 <script>
+import eventBus from "@/lib/eventBus";
 export default {
   name: "LotteryBtn",
   props: {
@@ -16,6 +17,11 @@ export default {
       if (this.mode === "blue") return "lottery-btn-xy";
       return "lottery-btn-hh";
     }
+  },
+  methods: {
+    clickLottery() {
+      eventBus.$emit("eventLottery");
+    }
   }
 };
 </script>

src/components/bottomView/main.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="bottom-view" :class="modeClass">
     <div class="bottom-view-top">
-      <balance-view :mode="mode"></balance-view>
+      <balance-view :mode="mode" :value="remainTicketNum"></balance-view>
       <lottery-btn :mode="mode"></lottery-btn>
     </div>
     <div class="bottom-view-bottom">
       <ticket-view
-        v-for="(item, key) in list"
+        v-for="(item, key) in ticketRuleList"
         :key="`ticket_view_${key}`"
         :label="item.label"
         :desc="item.desc"
         :active="active === key"
         :mode="mode"
+        @click.native="clickTicketView(item, key)"
       ></ticket-view>
     </div>
   </div>
@@ -21,6 +22,8 @@
 import balanceView from "./balanceView.vue";
 import lotteryBtn from "./lotteryBtn.vue";
 import ticketView from "./ticketView.vue";
+import { queryTicketNum, queryTicketRule } from "@/api";
+import { mapMutations, mapGetters } from "vuex";
 export default {
   name: "BottomView",
   components: {
@@ -35,32 +38,103 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(["remainTicketNum"]),
     modeClass() {
       if (this.mode === "blue") return "bottom-view-xy";
       return "bottom-view-hh";
+    },
+    uid() {
+      return this.$route.query.uid;
+    },
+    roomUid() {
+      return this.$route.query.roomUid;
+    },
+    drawType() {
+      if (this.mode === "blue") return "turntable1";
+      return "turntable2";
+    },
+    ticketRuleList() {
+      const list = [];
+      if (!this.ticketRule) return list;
+      for (let index = 0; index < this.ticketRuleConfig.length; index++) {
+        const element = this.ticketRuleConfig[index];
+        const val = this.ticketRule[element.ruleType];
+        list.push({
+          label: element.name,
+          desc: `${val}张鱼券`,
+          value: val,
+          ruleType: element.ruleType
+        });
+      }
+      return list;
+    }
+  },
+  watch: {
+    mode() {
+      this.active = 0;
+    },
+    active() {
+      this.SetRuleType(this.ticketRuleConfig[this.active].ruleType);
     }
   },
   data() {
     return {
       active: 0,
-      list: [
+      ticketRule: null,
+      ticketRuleConfig: [
         {
-          label: "1次",
-          desc: "1张鱼券",
-          value: 1
+          ruleType: "one",
+          name: "1次",
+          index: 0
         },
         {
-          label: "10次",
-          desc: "10张鱼券",
-          value: 1
+          ruleType: "ten",
+          name: "10次",
+          index: 1
         },
         {
-          label: "100次",
-          desc: "100张鱼券",
-          value: 1
+          ruleType: "hundred",
+          name: "100次",
+          index: 2
         }
       ]
     };
+  },
+  created() {
+    this.getQueryTicketNum();
+    this.getqueryTicketRule();
+  },
+  methods: {
+    ...mapMutations(["SetRuleType", "SetRemainTicketNum"]),
+    getQueryTicketNum() {
+      queryTicketNum({ uid: this.uid })
+        .then(res => {
+          const { code, data } = res;
+          if (code === 200) {
+            this.SetRemainTicketNum(data.num || 0);
+          }
+        })
+        .catch(() => {
+          this.$toast.fail("获取余额失败！");
+        });
+    },
+    getqueryTicketRule() {
+      queryTicketRule({ drawType: this.drawType })
+        .then(res => {
+          const { code, data } = res;
+          if (code === 200) {
+            this.ticketRule = data || null;
+          }
+        })
+        .catch(() => {
+          this.$toast.fail("获取规则次数失败！");
+        });
+    },
+    clickTicketView(item, index) {
+      console.log(item, index);
+      this.active = index;
+      // this.SetRuleType(item.ruleType);
+    }
   }
 };
 </script>