feat:更新

package.json

@@ -9,11 +9,14 @@
     "lint": "vue-cli-service lint --fix"
   },
   "dependencies": {
+    "-": "0.0.1",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "qs": "^6.10.1",
+    "swiper": "^5.4.5",
     "vant": "^2.12.26",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-luck-draw": "^3.4.6",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"

src/api/index.js

@@ -30,4 +30,16 @@ const saveLog = param => {
   return ajax.post(`${HOST}/saveLog`, stringify(param), "form");
 };
 
-export { queryPrizeInfo, queryTicketNum, queryTicketRule, doLottery, saveLog };
+// 抽奖中奖信息
+const queryPrizeMsg = param => {
+  return ajax.get(`${HOST}/queryPrizeMsg`, param);
+};
+
+export {
+  queryPrizeInfo,
+  queryTicketNum,
+  queryTicketRule,
+  doLottery,
+  saveLog,
+  queryPrizeMsg
+};

src/components/ballContent/notice.vue

@@ -1,16 +1,31 @@
 <template>
   <div class="notice" :class="modeClass">
-    <div class="notice-content" v-if="gifts.length > 0">
-      <label>{{ name }}</label>
-      <span>在{{ modeName }}获得了</span>
-      <label>{{ giftsText }}</label>
-    </div>
+    <swiper :options="swiperOption" class="notice-swiper">
+      <swiper-slide
+        class="notice-swiper-slide"
+        v-for="item in recordList"
+        :key="item.id"
+      >
+        <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 { Swiper, SwiperSlide } from "vue-awesome-swiper";
+
 export default {
   name: "Notice",
+  components: {
+    Swiper,
+    SwiperSlide
+  },
   props: {
     mode: {
       type: String,
@@ -19,12 +34,22 @@ export default {
     name: {
       type: String,
       default: ""
-    },
-    gifts: {
-      type: Array,
-      default: () => []
     }
   },
+  data() {
+    return {
+      recordList: [],
+      swiperOption: {
+        direction: "vertical",
+        autoplay: {
+          delay: 3000 // 5秒切换一次
+        },
+        // 设置轮播可循环
+        loop: true
+      },
+      interval: 0
+    };
+  },
   computed: {
     modeClass() {
       if (this.mode === "blue") return "notice-xy";
@@ -33,38 +58,61 @@ export default {
     modeName() {
       if (this.mode === "blue") return "幸运扭扭蛋";
       return "豪华扭扭蛋";
-    },
-    giftsText() {
-      const list = [];
-      for (let index = 0; index < this.gifts.length; index++) {
-        const element = this.gifts[index];
-        list.push(`${element.prizeName}x${element.prizeNum}`);
-      }
-      return list.join("、");
+    }
+  },
+  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="scss" scoped>
+@import "~swiper/css/swiper.css";
 .notice {
   width: 618px;
   height: 64px;
   background-repeat: no-repeat;
   background-size: cover;
   margin: 0 auto;
-  &-content {
-    margin: 0 30px;
-    text-align: center;
-    line-height: 64px;
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    & > label {
-      color: #ffe26c;
-    }
-    & > span {
-      color: #fff;
+  overflow: hidden;
+  &-swiper {
+    width: 100%;
+    height: 100%;
+    &-slide {
+      width: 100%;
+      height: 100%;
+      &-content {
+        margin: 0 30px;
+        text-align: center;
+        line-height: 64px;
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        & > label {
+          color: #ffe26c;
+        }
+        & > span {
+          color: #fff;
+        }
+      }
     }
   }
 }