up

SWKK/src/components/Rbottom.vue

@@ -82,17 +82,17 @@
           <div
             @click="cutGoods(index)"
             class="swiper-slide"
-            v-for="(item, index) in list[0].list"
+            v-for="(item, index) in list"
             :class="{ active: acList === index && playing }"
             :key="index"
           >
-            <img :src="item.enter.cover" alt="" />
-            <!-- <p>666</p> -->
+            <img :src="item.list[0].enter.cover" alt="" />
             <div
               class="plan"
               v-show="acList === index"
-              :style="{ width: progress + '%' }"
+              :style="{ width: progressPart + '%' }"
             ></div>
+            <p :class="{txtActive:acList === index && playing}">{{ item.name }}</p>
           </div>
           <div class="swiper-slide" style="pointer-events: none"></div>
         </div>
@@ -123,7 +123,7 @@ import Swiper from "./swiper.js";
 export default {
   name: "Rbottom",
   components: {},
-  props: ["acList", "progress", "playing"],
+  props: ["acList", "progressPart", "playing"],
   data() {
     //这里存放数据
     return {
@@ -431,7 +431,7 @@ export default {
     transition: height 0.5s;
     margin-top: 5px;
     width: 100%;
-    height: 150px;
+    height: 170px;
     background-color: #d8b275;
     padding: 15px 25px 0;
     .swiper-container {
@@ -456,6 +456,9 @@ export default {
           height: 4px;
           background-color: #930909;
         }
+        .txtActive{
+          color: #930909;
+        }
       }
       .active {
         img {

SWKK/src/views/Home.vue

@@ -29,9 +29,9 @@
       @cutKankan="cutKankan"
       @daoLanCut="daoLanCut"
       @stopPlay="stopPlay"
-      :acList="frameId"
-      :progress="progress"
+      :acList="partId"
       :playing="playing"
+      :progressPart="progressPart"
     />
 
     <!-- 左上名字和介绍 -->
@@ -65,10 +65,11 @@ export default {
       loding: true,
       title: true,
       numSta: 2,
-      // -------
+      // -------自动导览数据
       partId: 0,
       frameId: null,
       progress: 0,
+      progressPart: 0,
       disable: false,
       playing: false,
       sonInfo: null,
@@ -119,14 +120,15 @@ export default {
       if (this.disable) {
         return;
       }
-
-      this.frameId = index;
+      this.partId = index;
+      this.frameId = 0;
       this.disable = true;
       this.progress = 0;
+      this.progressPart = 0;
 
       let player = await this.kankan.TourManager.player;
       player.pause();
-      await player.selectFrame(index);
+      await player.selectPart(index);
       this.disable = false;
     },
 
@@ -181,8 +183,13 @@ export default {
         this.progress = 0;
         this.frameId = null;
         this.$refs.RbottomRef.leftCut(-1);
+        // 兼容最后一个画面没有进度的问题
+        this.progressPart = 100;
       });
 
+      let currPartId;
+      let currFrames;
+
       player.on("progress", ({ partId, frameId, progress }) => {
         // 不让自动漫游多次点击
         if (frameId === 0) {
@@ -194,6 +201,17 @@ export default {
         this.partId = partId;
         this.frameId = frameId;
         this.progress = Number(progress * 100).toFixed(5);
+        // 片段进度
+        if (this.tours.length == 1) {
+          this.progressPart = this.progress;
+        } else {
+          if (currPartId != partId) {
+            currPartId = partId;
+            currFrames = this.tours[partId].list.length;
+            this.progressPart = 0;
+          }
+          this.progressPart += progress / currFrames;
+        }
       });
     });
 
@@ -227,20 +245,22 @@ export default {
 
     // 导览数据
     kankan.TourManager.on("loaded", (tours) => {
+      // console.log("--------", tours);
+      this.tours = tours;
       this.$refs.RbottomRef.baseSw(tours);
     });
 
     // 全部热点数据
     kankan.store.on("tags", (tags) => {
       this.baseHotData = tags.tags.reverse();
-      let temp = [];
-      tags.tags.forEach((v) => {
-        let arrTitle = v.title.split("&");
-        // 显示在页面的热点图标
-        if (arrTitle[2]) {
-          temp.push(v);
-        }
-      });
+      // let temp = [];
+      // tags.tags.forEach((v) => {
+      //   let arrTitle = v.title.split("&");
+      //   // 显示在页面的热点图标
+      //   if (arrTitle[2]) {
+      //     temp.push(v);
+      //   }
+      // });
     });
 
     // 热点