feat：更新泡泡抽奖

src/components/ballContent/main.vue

@@ -2,7 +2,7 @@
   <div class="ball-content" :class="modeClass">
     <div class="ball-content-main">
       <div class="ball-content-main-notice">
-        <notice :drawType="drawType" :gifts="prizeItemList"></notice>
+        <notice :drawType="drawType" :gifts="lotteryPrizeItemList"></notice>
       </div>
       <div class="ball-content-main-grid">
         <lucky-grid-view></lucky-grid-view>
@@ -23,7 +23,7 @@ export default {
   },
   props: {},
   computed: {
-    ...mapGetters(["prizeItemList", "drawType"]),
+    ...mapGetters(["lotteryPrizeItemList", "drawType"]),
     modeClass() {
       if (this.drawType === "turntable1") return "ball-xy";
       return "ball-hh";

src/components/ballContent/notice.vue

@@ -1,55 +1,21 @@
 <template>
-  <div class="notice" :class="modeClass">
+  <swiper-notice :class="modeClass" :text="text"></swiper-notice>
-    <swiper :options="swiperOption" class="notice-swiper">
-      <swiper-slide
-        class="notice-swiper-slide"
-        v-for="(item, index) in recordList"
-        :key="`notice-swiper-slide-${item.id}-${index}`"
-      >
-        <div class="notice-swiper-slide-content">
-          <label>{{ item.nick }}</label>
-          <span>在{{ modeName }}获得了</span>
-          <label>{{ item.prizeName }}x{{ item.num }}</label>
-        </div>
-      </swiper-slide>
-    </swiper>
-  </div>
 </template>
 
 <script>
-import { queryPrizeMsg } from "@/api";
+import swiperNotice from "@/components/swiperNotice";
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
 
 export default {
   name: "Notice",
   components: {
-    Swiper,
+    swiperNotice
-    SwiperSlide
   },
   props: {
     drawType: {
       type: String,
       default: "turntable1"
-    },
-    name: {
-      type: String,
-      default: ""
     }
   },
-  data() {
-    return {
-      recordList: [],
-      swiperOption: {
-        direction: "vertical",
-        autoplay: {
-          delay: 3000 // 5秒切换一次
-        },
-        // 设置轮播可循环
-        loop: true
-      },
-      interval: 0
-    };
-  },
   computed: {
     modeClass() {
       if (this.drawType === "turntable1") return "notice-xy";
@@ -58,65 +24,15 @@ export default {
     modeName() {
       if (this.drawType === "turntable1") return "幸运扭扭蛋";
       return "豪华扭扭蛋";
-    }
+    },
-  },
+    text() {
-  created() {
+      return `在${this.modeName}获得了`;
-    this.getQueryPrizeMsg();
-  },
-  mounted() {
-    this.interval = setInterval(this.getQueryPrizeMsg, 120 * 1000);
-  },
-  destroyed() {
-    clearInterval(this.interval);
-  },
-  methods: {
-    getQueryPrizeMsg() {
-      queryPrizeMsg().then(res => {
-        const { code, data, msg } = res;
-        if (code === 200) {
-          this.recordList = data;
-        } else {
-          this.$toast.fail(msg);
-        }
-      });
     }
   }
 };
 </script>
 
 <style lang="less" scoped>
-@import "~swiper/css/swiper.css";
-.notice {
-  width: 618px;
-  height: 64px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  margin: 0 auto;
-  &-swiper {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    &-slide {
-      width: 100%;
-      height: 100%;
-      &-content {
-        margin: 0 30px;
-        text-align: center;
-        line-height: 64px;
-        white-space: nowrap;
-        overflow-x: auto;
-        overflow-y: hidden;
-        font-size: 24px;
-        & > label {
-          color: #ffe26c;
-        }
-        & > span {
-          color: #fff;
-        }
-      }
-    }
-  }
-}
 .notice-xy {
   background-image: url(../../assets/images/tz_bg.png);
 }

src/components/boboEnterBtn/main.vue

@@ -13,10 +13,6 @@ export default {
     position: {
       type: String,
       default: "left"
-    },
-    text: {
-      type: String,
-      default: ""
     }
   },
   computed: {

src/components/boboEnterView/main.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="bobo-enter-view">
     <div class="bobo-enter-view-row">
-      <bobo-enter-Btn class="bobo-enter-view-button" position="left"
+      <bobo-enter-Btn
+        class="bobo-enter-view-button"
+        position="left"
+        @click.native="clickEntryBtn('数据')"
         >数据</bobo-enter-Btn
       >
-      <bobo-enter-Btn class="bobo-enter-view-button" position="right"
+      <bobo-enter-Btn
+        class="bobo-enter-view-button"
+        position="right"
+        @click.native="clickEntryBtn('记录')"
         >记录</bobo-enter-Btn
       >
     </div>
     <div class="bobo-enter-view-row">
-      <bobo-enter-Btn class="bobo-enter-view-button" position="left"
+      <bobo-enter-Btn
+        class="bobo-enter-view-button"
+        position="left"
+        @click.native="clickEntryBtn('排行榜')"
         >排行榜</bobo-enter-Btn
       >
-      <bobo-enter-Btn class="bobo-enter-view-button" position="right"
+      <bobo-enter-Btn
+        class="bobo-enter-view-button"
+        position="right"
+        @click.native="clickEntryBtn('奖品')"
         >奖品</bobo-enter-Btn
       >
     </div>
@@ -25,6 +37,12 @@ export default {
   name: "BoboEnterView",
   components: {
     BoboEnterBtn
+  },
+  methods: {
+    clickEntryBtn(text) {
+      // console.log("clickEntryBtn", text);
+      this.$emit("clickEntryBtn", text);
+    }
   }
 };
 </script>

src/components/boboLottery/boboLotteryCount.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="bobo-lottery-count">
+    <button
+      class="count-button"
+      v-for="(item, index) in ticketRuleList"
+      :key="`count-button-${index}`"
+      :class="index === active ? 'count-button-active' : ''"
+      @click="clcikButton(index)"
+    >
+      {{ item.label }}
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from "vuex";
+export default {
+  name: "BoboLotteryCount",
+  data() {
+    return {
+      active: 0
+    };
+  },
+  computed: {
+    ...mapGetters(["ticketRuleList", "ticketRuleConfig"])
+  },
+  created() {
+    this.getqueryTicketRule("turntable1");
+  },
+  methods: {
+    ...mapMutations(["SetRuleType"]),
+    ...mapActions(["getqueryTicketRule"]),
+    clcikButton(index) {
+      this.active = index;
+      this.SetRuleType(this.ticketRuleConfig[this.active].ruleType);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.bobo-lottery-count {
+  margin-top: 30px;
+  margin-bottom: 40px;
+}
+.count-button {
+  width: 140px;
+  height: 64px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: none;
+  background-color: transparent;
+  background-image: url(../../assets/images/bobo/but_unchecked.png);
+  font-size: 24px;
+  color: #ffffff;
+  margin: 0 20px;
+  &-active {
+    font-size: 26px;
+    font-weight: bold;
+    background-image: url(../../assets/images/bobo/but_select.png);
+  }
+}
+</style>

src/components/boboLottery/boboYqView.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="bobo-yq-view">
-    <div class="bobo-yq-view-text"></div>
+    <div class="bobo-yq-view-text">
+      <label>次数：</label>
+      <span>{{ remainTicketNum }}</span>
+    </div>
     <div class="bobo-yq-view-btn">
       <button></button>
     </div>
@@ -8,8 +11,24 @@
 </template>
 
 <script>
+import { mapGetters, mapActions } from "vuex";
 export default {
-  name: "BoboYqView"
+  name: "BoboYqView",
+  props: {
+    uid: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  computed: {
+    ...mapGetters(["remainTicketNum"])
+  },
+  methods: {
+    ...mapActions(["getQueryTicketNum"])
+  },
+  created() {
+    this.getQueryTicketNum({ uid: this.uid });
+  }
 };
 </script>
 
@@ -18,15 +37,27 @@ export default {
   width: 346px;
   height: 59px;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: 100% 100%;
   background-image: url(../../assets/images/bobo/gmcx_bg.png);
   display: flex;
+  // align-items: center;
   &-text {
     flex: 1;
+    font-size: 22px;
+    line-height: 59px;
+    & > label {
+      color: #ffffff;
+      padding-left: 20px;
+    }
+    & > span {
+      color: #ffe26c;
+    }
   }
   &-btn {
     width: 46px;
     height: 46px;
+    padding-right: 10px;
+    padding-top: 6px;
     & > button {
       width: 46px;
       height: 46px;

src/components/boboLottery/index.js

@@ -0,0 +1,7 @@
+import BoboLottery from "./main";
+
+BoboLottery.install = function(Vue) {
+  Vue.component(BoboLottery.name, BoboLottery);
+};
+
+export default BoboLottery;

src/components/boboLottery/main.vue

@@ -1,11 +1,105 @@
 <template>
-  <div></div>
+  <div>
+    <div class="bobo-lottery">
+      <bobo-yq-view :uid="uid"></bobo-yq-view>
+      <bobo-lottery-count></bobo-lottery-count>
+      <button class="bobo-lottery-button" @touchend="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"
+  name: "BoboLottery",
+  components: {
+    boboYqView,
+    boboLotteryCount,
+    lotteryPrizesDialog
+  },
+  data() {
+    return {
+      show: false
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "canLottery",
+      "remainTicketNum",
+      "curTicketRuleValue",
+      "lotteryPrizeItemList"
+    ]),
+    uid() {
+      return this.$route.query.uid;
+    },
+    roomUid() {
+      return this.$route.query.roomUid;
+    }
+  },
+  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("余额不足！");
+        return;
+      }
+
+      this.runLottery({
+        uid: this.uid,
+        roomUid: this.roomUid
+      })
+        .then(res => {
+          this.SetCanLottery(true);
+          const { code } = res;
+          if (code === 200) {
+            this.show = true;
+          }
+        })
+        .catch(() => {
+          this.SetCanLottery(true);
+        });
+    }
+  }
 };
 </script>
 
-<style lang="less" scoped></style>
+<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>

src/components/bottomView/main.vue

@@ -25,8 +25,7 @@
 import balanceView from "./balanceView.vue";
 import lotteryBtn from "./lotteryBtn.vue";
 import ticketView from "./ticketView.vue";
-import { queryTicketNum, queryTicketRule } from "@/api";
+import { mapMutations, mapGetters, mapActions } from "vuex";
-import { mapMutations, mapGetters } from "vuex";
 export default {
   name: "BottomView",
   components: {
@@ -40,8 +39,18 @@ export default {
       default: "turntable1"
     }
   },
+  data() {
+    return {
+      active: 0
+    };
+  },
   computed: {
-    ...mapGetters(["remainTicketNum", "ticketRule"]),
+    ...mapGetters([
+      "remainTicketNum",
+      "ticketRule",
+      "ticketRuleList",
+      "ticketRuleConfig"
+    ]),
     modeClass() {
       if (this.drawType === "turntable1") return "bottom-view-xy";
       return "bottom-view-hh";
@@ -51,92 +60,26 @@ export default {
     },
     roomUid() {
       return this.$route.query.roomUid;
-    },
-    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: {
     drawType() {
       this.active = 0;
-      this.getqueryTicketRule();
+      this.getqueryTicketRule(this.drawType);
     },
     active() {
       this.SetRuleType(this.ticketRuleConfig[this.active].ruleType);
     }
   },
-  data() {
-    return {
-      active: 0,
-      ticketRuleConfig: [
-        {
-          ruleType: "one",
-          name: "1次",
-          index: 0
-        },
-        {
-          ruleType: "ten",
-          name: "10次",
-          index: 1
-        },
-        {
-          ruleType: "hundred",
-          name: "100次",
-          index: 2
-        }
-      ]
-    };
-  },
   created() {
-    this.getQueryTicketNum();
+    this.getQueryTicketNum({ uid: this.uid });
-    this.getqueryTicketRule();
+    this.getqueryTicketRule(this.drawType);
   },
   methods: {
-    ...mapMutations(["SetRuleType", "SetRemainTicketNum", "SetTicketRule"]),
+    ...mapMutations(["SetRuleType"]),
-    getQueryTicketNum() {
+    ...mapActions(["getqueryTicketRule", "getQueryTicketNum"]),
-      queryTicketNum({ uid: this.uid })
-        .then(res => {
-          const { code, data, msg } = res;
-          if (code === 200) {
-            this.SetRemainTicketNum(data.num || 0);
-          } else {
-            this.$toast.fail(msg);
-          }
-        })
-        .catch(() => {
-          this.$toast.fail("获取余额失败！");
-        });
-    },
-    getqueryTicketRule() {
-      queryTicketRule({ drawType: this.drawType })
-        .then(res => {
-          const { code, data, msg } = res;
-          if (code === 200) {
-            // this.ticketRule = data || null;
-            this.SetTicketRule(data || null);
-          } else {
-            this.$toast.fail(msg);
-          }
-        })
-        .catch(() => {
-          this.$toast.fail("获取规则次数失败！");
-        });
-    },
     clickTicketView(item, index) {
       this.active = index;
-      // this.SetRuleType(item.ruleType);
     }
   }
 };

src/components/lotteryPrizesDialog/index.js

@@ -0,0 +1,7 @@
+import LotteryPrizesDialog from "./main";
+
+LotteryPrizesDialog.install = function(Vue) {
+  Vue.component(LotteryPrizesDialog.name, LotteryPrizesDialog);
+};
+
+export default LotteryPrizesDialog;

src/components/lotteryPrizesDialog/main.vue

@@ -0,0 +1,85 @@
+<template>
+  <van-dialog
+    v-model="show"
+    confirmButtonColor="#9E98FF"
+    title="恭喜您获得奖品"
+    @close="closeDialog"
+  >
+    <div class="lucky-grid-prize">
+      <div
+        class="lucky-grid-prize-item"
+        v-for="item in list"
+        :key="`lucky_grid_prize_item_${item.prizeId}`"
+      >
+        <div class="lucky-grid-prize-item-img">
+          <img :src="item.prizeImgUrl" :alt="item.prizeName" />
+        </div>
+        <div class="lucky-grid-prize-item-name">
+          {{ item.prizeName }}x{{ item.prizeNum }}
+        </div>
+      </div>
+    </div>
+  </van-dialog>
+</template>
+
+<script>
+export default {
+  name: "LotteryPrizesDialog",
+  model: {
+    prop: "visible",
+    event: "change"
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false
+    };
+  },
+  watch: {
+    visible(val) {
+      if (val) this.show = true;
+    }
+  },
+  methods: {
+    closeDialog() {
+      this.show = false;
+      this.$emit("change", this.show);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.lucky-grid-prize {
+  display: flex;
+  // align-items: center;
+  justify-content: center;
+  padding: 30px;
+  &-item {
+    width: 150px;
+    &-img {
+      width: 80px;
+      height: 80px;
+      margin: 0 auto;
+      & > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    &-name {
+      text-align: center;
+      color: #666;
+      font-size: 24px;
+    }
+  }
+}
+</style>

src/components/luckyGridView/main.vue

@@ -13,38 +13,23 @@
       @end="endCallBack"
     />
 
-    <van-dialog
+    <lottery-prizes-dialog
       v-model="showDialog"
-      confirmButtonColor="#9E98FF"
+      :list="lotteryPrizeItemList"
-      title="恭喜您获得奖品"
+    ></lottery-prizes-dialog>
-    >
-      <div class="lucky-grid-prize">
-        <div
-          class="lucky-grid-prize-item"
-          v-for="item in prizeItemList"
-          :key="`lucky_grid_prize_item_${item.prizeId}`"
-        >
-          <div class="lucky-grid-prize-item-img">
-            <img :src="item.prizeImgUrl" :alt="item.prizeName" />
-          </div>
-          <div class="lucky-grid-prize-item-name">
-            {{ item.prizeName }}x{{ item.prizeNum }}
-          </div>
-        </div>
-      </div>
-    </van-dialog>
   </div>
 </template>
 
 <script>
 import { LuckyGrid } from "vue-luck-draw";
-import { doLottery, saveLog } from "@/api";
+import lotteryPrizesDialog from "@/components/lotteryPrizesDialog";
 import { mapMutations, mapGetters, mapActions } from "vuex";
 import eventBus from "@/lib/eventBus";
 export default {
   name: "LuckyGridView",
   components: {
-    LuckyGrid
+    LuckyGrid,
+    lotteryPrizesDialog
   },
   props: {},
   data() {
@@ -86,14 +71,22 @@ export default {
       ],
       opImages: require("@/assets/images/hig_p.png"),
       heightLineImages: require("@/assets/images/hig.png"),
+      defaultImage: require("@/assets/images/logo_tm.png"),
       showDialog: false,
-      lotteryData: null,
       timeout: false,
       request: false
     };
   },
   computed: {
-    ...mapGetters(["ruleType", "prizeIdList", "remainTicketNum", "drawType"]),
+    ...mapGetters([
+      "ruleType",
+      "prizeIdList",
+      "remainTicketNum",
+      "drawType",
+      "maxVauePrizeIndex",
+      "curTicketRuleValue",
+      "lotteryPrizeItemList"
+    ]),
     prizesImages() {
       if (this.drawType === "turntable1") return this.blueImages;
       return this.goldImages;
@@ -104,37 +97,6 @@ export default {
     roomUid() {
       return this.$route.query.roomUid;
     },
-    prizeItemList() {
-      if (!this.lotteryData) return null;
-      return this.lotteryData.prizeItemList;
-    },
-    prizeids() {
-      if (!this.lotteryData) return null;
-      return this.lotteryData.prizeIdList;
-    },
-    maxPrizeVaue() {
-      let list = [];
-      for (let index = 0; index < this.prizeItemList.length; index++) {
-        const element = this.prizeItemList[index];
-        list.push(element.platformValue);
-      }
-      let max = Math.max(...list);
-      return max;
-    },
-    maxVauePrizeId() {
-      let id = 0;
-      for (let index = 0; index < this.prizeItemList.length; index++) {
-        const element = this.prizeItemList[index];
-        if (this.maxPrizeVaue === element.platformValue) {
-          id = element.prizeId;
-          break;
-        }
-      }
-      return id;
-    },
-    maxVauePrizeIndex() {
-      return this.getPrizeIndex(this.maxVauePrizeId);
-    },
     runTime() {
       if (this.ruleType === "one") return 1000;
       if (this.ruleType === "ten") return 2000;
@@ -185,10 +147,10 @@ export default {
   methods: {
     ...mapMutations([
       "SetRemainTicketNum",
-      "SetCanLottery",
+      "SetCanLottery"
-      "SetPrizeItemList"
+      // "SetPrizeItemList"
     ]),
-    ...mapActions(["getQueryPrizeInfo"]),
+    ...mapActions(["getQueryPrizeInfo", "runLottery"]),
     queryPrizeInfo() {
       this.getQueryPrizeInfo().then(res => {
         const { code, data } = res;
@@ -209,44 +171,25 @@ export default {
       this.timeout = false;
       this.request = false;
       this.$refs.LuckDraw.play();
-      doLottery({
+
+      this.runLottery({
         uid: this.uid,
-        roomUid: this.roomUid,
+        roomUid: this.roomUid
-        drawType: this.drawType,
-        sendMessage: true,
-        deviceId: "abc",
-        ruleType: this.ruleType
       }).then(res => {
-        const { code, data, msg } = res;
+        const { code } = res;
         if (code === 200) {
           this.request = true;
-          this.lotteryData = data;
-          this.SetRemainTicketNum(data.remainTicketNum || 0);
           if (this.timeout && this.request)
             this.stopLuckDraw(this.maxVauePrizeIndex);
-          this.postSaveLog();
-        } else {
-          this.$toast.fail(msg);
         }
       });
 
-      // console.log("runTime", this.runTime);
-
       setTimeout(() => {
         this.timeout = true;
         if (this.timeout && this.request)
           this.stopLuckDraw(this.maxVauePrizeIndex);
       }, this.runTime);
     },
-    postSaveLog() {
-      saveLog({
-        uid: this.uid,
-        prizeids: JSON.stringify(this.prizeids),
-        prizeIndex: this.maxVauePrizeIndex,
-        createdTime: this.prizeItemList[0].createTime,
-        prizeIdList: JSON.stringify(this.prizeIdList)
-      });
-    },
     configPrizes(prizeInfo) {
       const prizes = [];
       this.luckyNum = 1;
@@ -259,7 +202,11 @@ export default {
           // fonts: [{ text: item.name, top: "70%" }],
           imgs: [
             { src: this.prizesImages[0], width: "100%", top: "8%" },
-            { src: prizeItem.prizeImgUrl, width: "70%", top: "20%" },
+            {
+              src: (prizeItem && prizeItem.prizeImgUrl) || this.defaultImage,
+              width: "70%",
+              top: "20%"
+            },
             {
               src: this.opImages,
               activeSrc: this.heightLineImages,
@@ -292,7 +239,7 @@ export default {
     endCallBack() {
       this.showDialog = true;
       this.SetCanLottery(true);
-      this.SetPrizeItemList(this.prizeItemList);
+      // this.SetPrizeItemList(this.prizeItemList);
     }
   }
 };
@@ -308,27 +255,4 @@ export default {
     height: 100%;
   }
 }
-.lucky-grid-prize {
-  display: flex;
-  // align-items: center;
-  justify-content: center;
-  padding: 30px;
-  &-item {
-    width: 150px;
-    &-img {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto;
-      & > img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    &-name {
-      text-align: center;
-      color: #666;
-      font-size: 24px;
-    }
-  }
-}
 </style>

src/components/swiperNotice/index.js

@@ -0,0 +1,7 @@
+import SwiperNotice from "./main";
+
+SwiperNotice.install = function(Vue) {
+  Vue.component(SwiperNotice.name, SwiperNotice);
+};
+
+export default SwiperNotice;

src/components/swiperNotice/main.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="notice">
+    <swiper :options="swiperOption" class="notice-swiper">
+      <swiper-slide
+        class="notice-swiper-slide"
+        v-for="(item, index) in recordList"
+        :key="`notice-swiper-slide-${item.id}-${index}`"
+      >
+        <div class="notice-swiper-slide-content">
+          <label>{{ item.nick }}</label>
+          <span>{{ text }}</span>
+          <label>{{ item.prizeName }}x{{ item.num }}</label>
+        </div>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+
+<script>
+import { queryPrizeMsg } from "@/api";
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+export default {
+  name: "SwiperNotice",
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  props: {
+    text: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      recordList: [],
+      swiperOption: {
+        direction: "vertical",
+        autoplay: {
+          delay: 3000 // 5秒切换一次
+        },
+        // 设置轮播可循环
+        loop: true
+      },
+      interval: 0
+    };
+  },
+
+  created() {
+    this.getQueryPrizeMsg();
+  },
+  mounted() {
+    this.interval = setInterval(this.getQueryPrizeMsg, 120 * 1000);
+  },
+  destroyed() {
+    clearInterval(this.interval);
+  },
+  methods: {
+    getQueryPrizeMsg() {
+      queryPrizeMsg().then(res => {
+        const { code, data, msg } = res;
+        if (code === 200) {
+          this.recordList = data;
+        } else {
+          this.$toast.fail(msg);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "~swiper/css/swiper.css";
+.notice {
+  width: 618px;
+  height: 64px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0 auto;
+  &-swiper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    &-slide {
+      width: 100%;
+      height: 100%;
+      &-content {
+        margin: 0 30px;
+        text-align: center;
+        line-height: 64px;
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        font-size: 24px;
+        & > label {
+          color: #ffe26c;
+        }
+        & > span {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

src/store/index.js

@@ -1,7 +1,13 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import { Toast } from "vant";
-import { queryPrizeInfo } from "@/api";
+import {
+  queryPrizeInfo,
+  queryTicketRule,
+  doLottery,
+  saveLog,
+  queryTicketNum
+} from "@/api";
 
 Vue.use(Vuex);
 
@@ -12,12 +18,30 @@ export default new Vuex.Store({
       turntable1: [],
       turntable2: []
     },
-    prizeItemList: [],
+    // prizeItemList: [],
     ruleType: "one",
     remainTicketNum: 0,
     ticketRule: null,
     canLottery: true,
-    lotteryRecordRateVo: {}
+    lotteryRecordRateVo: {},
+    ticketRuleConfig: [
+      {
+        ruleType: "one",
+        name: "1次",
+        index: 0
+      },
+      {
+        ruleType: "ten",
+        name: "10次",
+        index: 1
+      },
+      {
+        ruleType: "hundred",
+        name: "100次",
+        index: 2
+      }
+    ],
+    lotteryData: null
   },
   getters: {
     drawType: state => {
@@ -29,9 +53,9 @@ export default new Vuex.Store({
     curDrawTypePrizeInfo: state => {
       return state.prizeInfo[state.drawType];
     },
-    prizeItemList: state => {
+    // prizeItemList: state => {
-      return state.prizeItemList;
+    //   return state.prizeItemList;
-    },
+    // },
     prizeIdList: (state, getters) => {
       const { curDrawTypePrizeInfo } = getters;
       const list = [];
@@ -59,6 +83,74 @@ export default new Vuex.Store({
     },
     lotteryRecordRateVo: state => {
       return state.lotteryRecordRateVo;
+    },
+    ticketRuleConfig: state => {
+      return state.ticketRuleConfig;
+    },
+    ticketRuleList: (state, getters) => {
+      const list = [];
+      if (!getters.ticketRule) return list;
+      for (let index = 0; index < getters.ticketRuleConfig.length; index++) {
+        const element = getters.ticketRuleConfig[index];
+        const val = getters.ticketRule[element.ruleType];
+        list.push({
+          label: element.name,
+          desc: `${val}张鱼券`,
+          value: val,
+          ruleType: element.ruleType
+        });
+      }
+      return list;
+    },
+    lotteryData: state => {
+      return state.lotteryData;
+    },
+    lotteryPrizeItemList: (state, getters) => {
+      if (!getters.lotteryData) return null;
+      return getters.lotteryData.prizeItemList;
+    },
+    prizeids: (state, getters) => {
+      if (!getters.lotteryData) return null;
+      return getters.lotteryData.prizeIdList;
+    },
+    maxPrizeVaue: (state, getters) => {
+      let list = [];
+      for (
+        let index = 0;
+        index < getters.lotteryPrizeItemList.length;
+        index++
+      ) {
+        const element = getters.lotteryPrizeItemList[index];
+        list.push(element.platformValue);
+      }
+      let max = Math.max(...list);
+      return max;
+    },
+    maxVauePrizeId: (state, getters) => {
+      let id = 0;
+      for (
+        let index = 0;
+        index < getters.lotteryPrizeItemList.length;
+        index++
+      ) {
+        const element = getters.lotteryPrizeItemList[index];
+        if (getters.maxPrizeVaue === element.platformValue) {
+          id = element.prizeId;
+          break;
+        }
+      }
+      return id;
+    },
+    maxVauePrizeIndex: (state, getters) => {
+      let num = null;
+      for (let index = 0; index < getters.prizeIdList.length; index++) {
+        const element = getters.prizeIdList[index];
+        if (element === getters.maxVauePrizeId) {
+          num = index;
+          break;
+        }
+      }
+      return num;
     }
   },
   mutations: {
@@ -69,9 +161,9 @@ export default new Vuex.Store({
       const { drawType, list } = payload;
       state.prizeInfo[drawType || state.drawType] = list;
     },
-    SetPrizeItemList(state, payload) {
+    // SetPrizeItemList(state, payload) {
-      state.prizeItemList = payload;
+    //   state.prizeItemList = payload;
-    },
+    // },
     SetRuleType(state, payload) {
       state.ruleType = payload;
     },
@@ -86,6 +178,9 @@ export default new Vuex.Store({
     },
     SetLotteryRecordRateVo(state, payload) {
       state.lotteryRecordRateVo = payload;
+    },
+    SetLotteryData(state, payload) {
+      state.lotteryData = payload;
     }
   },
   actions: {
@@ -106,6 +201,70 @@ export default new Vuex.Store({
             reject(err);
           });
       });
+    },
+    getqueryTicketRule({ commit }, drawType) {
+      queryTicketRule({ drawType: drawType })
+        .then(res => {
+          const { code, data, msg } = res;
+          if (code === 200) {
+            commit("SetTicketRule", data || null);
+          } else {
+            Toast.fail(msg);
+          }
+        })
+        .catch(() => {
+          Toast.fail("获取规则次数失败！");
+        });
+    },
+    runLottery({ state, commit, dispatch }, option) {
+      return new Promise((resolve, reject) => {
+        doLottery({
+          uid: option.uid,
+          roomUid: option.roomUid,
+          drawType: state.drawType,
+          sendMessage: true,
+          deviceId: "abc",
+          ruleType: state.ruleType
+        })
+          .then(res => {
+            const { code, data, msg } = res;
+            if (code === 200) {
+              commit("SetRemainTicketNum", data.remainTicketNum || 0);
+              commit("SetLotteryData", data);
+              dispatch("postSaveLog", option);
+            } else {
+              Toast.fail(msg);
+            }
+            resolve(res);
+          })
+          .catch(err => {
+            Toast.fail("抽奖发生意外错误！");
+            reject(err);
+          });
+      });
+    },
+    postSaveLog({ getters }, option) {
+      saveLog({
+        uid: option.uid,
+        prizeids: JSON.stringify(getters.prizeids),
+        prizeIndex: getters.maxVauePrizeIndex,
+        createdTime: getters.lotteryPrizeItemList[0].createTime,
+        prizeIdList: JSON.stringify(getters.prizeIdList)
+      });
+    },
+    getQueryTicketNum({ commit }, option) {
+      queryTicketNum({ uid: option.uid })
+        .then(res => {
+          const { code, data, msg } = res;
+          if (code === 200) {
+            commit("SetRemainTicketNum", data.num || 0);
+          } else {
+            Toast.fail(msg);
+          }
+        })
+        .catch(() => {
+          Toast.fail("获取余额失败！");
+        });
     }
   },
   modules: {}

src/views/bobo.vue

@@ -1,17 +1,75 @@
 <template>
   <div class="bobo">
-    <bobo-enter-view class="bobo-enter"></bobo-enter-view>
+    <swiper-notice class="bobo-notice" :text="text"></swiper-notice>
+    <bobo-enter-view
+      class="bobo-enter"
+      @clickEntryBtn="clickEntryBtn"
+    ></bobo-enter-view>
+
+    <bobo-lottery></bobo-lottery>
 
     <button class="bobo-gz-button"></button>
+
+    <van-popup
+      v-model="show"
+      position="left"
+      :style="{ height: '100%', width: '100%' }"
+      :close-on-click-overlay="false"
+      close-icon="arrow-left"
+      closeable
+      close-icon-position="top-left"
+      get-container="#app"
+    >
+      <!-- <prizes-view></prizes-view> -->
+      <component :is="curComponentsName"></component>
+    </van-popup>
   </div>
 </template>
 
 <script>
 import boboEnterView from "@/components/boboEnterView";
+import boboLottery from "@/components/boboLottery";
+import swiperNotice from "@/components/swiperNotice";
 export default {
   name: "Bobo",
   components: {
-    boboEnterView
+    boboEnterView,
+    boboLottery,
+    swiperNotice,
+    prizesView: resolve => require(["./prizesView.vue"], resolve),
+    ruleView: resolve => require(["./ruleView.vue"], resolve),
+    recordView: resolve => require(["./recordView.vue"], resolve),
+    rankView: resolve => require(["./rankView.vue"], resolve),
+    dataView: resolve => require(["./dataView.vue"], resolve)
+  },
+  data() {
+    return {
+      text: "戳中了",
+      show: false,
+      curBtnText: "",
+      componentsName: {
+        规则: "rule-view",
+        奖品: "prizes-view",
+        排行榜: "rank-view",
+        记录: "record-view",
+        数据: "data-view"
+      }
+    };
+  },
+  computed: {
+    curComponentsName() {
+      return this.componentsName[this.curBtnText];
+    }
+  },
+  methods: {
+    clickEntryBtn(val) {
+      this.curBtnText = val;
+      this.show = true;
+    },
+    clickLeftTopButton() {
+      this.curBtnText = "数据";
+      this.show = true;
+    }
   }
 };
 </script>
@@ -25,8 +83,12 @@ export default {
   background-image: url(../assets/images/bobo/bobo_bg.png);
   background-repeat: no-repeat;
   background-size: 100%;
+  overflow: hidden;
+  &-notice {
+    margin-top: 100px;
+  }
   &-enter {
-    padding-top: 180px;
+    padding-top: 20px;
   }
   &-gz-button {
     width: 78px;