shabi

src/components/HotspotDetail.vue

@@ -11,7 +11,7 @@
       >
     </button>
 
-    <h1>{{ typesToShow[currentTabIdx].list[currentSlideIdx].title }}</h1>
+    <h1>{{ titleForShow }}</h1>
 
     <button
       class="close"
@@ -25,40 +25,28 @@
     </button>
 
     <div
-      v-show="typesToShow[currentTabIdx].name === '图片'"
+      v-show="typesToShow[currentTabIdx] && typesToShow[currentTabIdx].name === '视频'"
       class="swiper-wrapper-mine"
     >
       <div
         class="swiper-root"
       >
         <div
-          v-viewer="{
-            button: true,
-            navbar: false,
-            title: false,
-            toolbar: false,
-            tooltip: false,
-            movable: true,
-            zoomable: true,
-            rotatable: true,
-            scalable: true,
-            transition: false,
-            fullscreen: false,
-            keyboard: true,
-            loop: false,
-          }"
           class="swiper-wrapper"
         >
-          <img
+          <video
             v-for="(item, index) in typesToShow[currentTabIdx].list"
             :key="index"
-            v-lazy="item.url"
+            :src="`https://4dkk.4dage.com/scene_edit_data/KJ-aigSkgvRWR/user/${item.url}`"
+            controls
+            controlslist="nodownload"
+            disablePictureInPicture
             class="swiper-slide"
-            alt=""
-            draggable="false"
-          >
+          />
         </div>
-        <!-- <div class="swiper-pagination" /> -->
+        <!-- <div class="
+            swiper-pagination"
+          /> -->
         <div class="swiper-pagination">
           <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesToShow[currentTabIdx].list.length }}</span>
         </div>
@@ -68,7 +56,7 @@
     </div>
 
     <div
-      v-show="typesToShow[currentTabIdx].name === '视频'"
+      v-show="typesToShow[currentTabIdx] && typesToShow[currentTabIdx].name === '模型'"
       class="swiper-wrapper-mine"
     >
       <div
@@ -77,14 +65,13 @@
         <div
           class="swiper-wrapper"
         >
-          <img
+          <iframe
             v-for="(item, index) in typesToShow[currentTabIdx].list"
             :key="index"
-            v-lazy="item.url"
+            :src="item.url"
+            frameborder="0"
             class="swiper-slide"
-            alt=""
-            draggable="false"
-          >
+          />
         </div>
         <!-- <div class="swiper-pagination" /> -->
         <div class="swiper-pagination">
@@ -95,8 +82,8 @@
       </div>
     </div>
 
-    <div
-      v-show="typesToShow[currentTabIdx].name === '模型'"
+    <!-- <div
+      v-show="typesToShow[currentTabIdx] && typesToShow[currentTabIdx].name === '音频'"
       class="swiper-wrapper-mine"
     >
       <div
@@ -105,38 +92,50 @@
         <div
           class="swiper-wrapper"
         >
-          <img
+          <audio
             v-for="(item, index) in typesToShow[currentTabIdx].list"
             :key="index"
-            v-lazy="item.url"
             class="swiper-slide"
-            alt=""
-            draggable="false"
-          >
+            :src="`https://4dkk.4dage.com/scene_edit_data/KJ-aigSkgvRWR/user/${item.url}`"
+          />
         </div>
-        <!-- <div class="swiper-pagination" /> -->
         <div class="swiper-pagination">
           <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesToShow[currentTabIdx].list.length }}</span>
         </div>
         <div class="swiper-button-prev" />
         <div class="swiper-button-next" />
       </div>
-    </div>
+    </div> -->
 
     <div
-      v-show="typesToShow[currentTabIdx].name === '音频'"
+      v-show="typesToShow[currentTabIdx] && typesToShow[currentTabIdx].name === '图片'"
       class="swiper-wrapper-mine"
     >
       <div
         class="swiper-root"
       >
         <div
+          v-viewer="{
+            button: true,
+            navbar: false,
+            title: false,
+            toolbar: false,
+            tooltip: false,
+            movable: true,
+            zoomable: true,
+            rotatable: true,
+            scalable: true,
+            transition: false,
+            fullscreen: false,
+            keyboard: true,
+            loop: false,
+          }"
           class="swiper-wrapper"
         >
           <img
             v-for="(item, index) in typesToShow[currentTabIdx].list"
             :key="index"
-            v-lazy="item.url"
+            v-lazy="`https://4dkk.4dage.com/scene_edit_data/KJ-aigSkgvRWR/user/${item.url}`"
             class="swiper-slide"
             alt=""
             draggable="false"
@@ -181,61 +180,65 @@ export default {
     return {
       types: [
         {
+          key: 'video',
           name: '视频',
           icon: require('@/assets/images/swkk/video.png'),
           iconActive: require('@/assets/images/swkk/video_1.png'),
           list: [
-            {
-              title: 'title',
-              url: 'asdf',
-              desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
-            },
+            // {
+            //   title: 'title',
+            //   url: 'asdf',
+            //   desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
+            // },
           ]
         },
         {
+          key: 'link',
           name: '模型',
           icon: require('@/assets/images/swkk/model.png'),
           iconActive: require('@/assets/images/swkk/model_1.png'),
           list: [
-            {
-              title: 'title',
-              url: 'asdf',
-              desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
-            },
+            // {
+            //   title: 'title',
+            //   url: 'asdf',
+            //   desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
+            // },
           ]
         },
         {
+          key: 'audio',
           name: '音频',
           icon: require('@/assets/images/swkk/audio.png'),
           iconActive: require('@/assets/images/swkk/audio_1.png'),
           list: [
-            {
-              title: 'title',
-              url: require('@/assets/images/close.png'),
-              desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
-            },
-            {
-              title: 'title2',
-              url: require('@/assets/images/curvy-line.png'),
-              desc: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
-            },
+            // {
+            //   title: 'title',
+            //   url: require('@/assets/images/close.png'),
+            //   desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
+            // },
+            // {
+            //   title: 'title2',
+            //   url: require('@/assets/images/curvy-line.png'),
+            //   desc: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
+            // },
           ]
         },
         {
+          key: 'image',
           name: '图片',
           icon: require('@/assets/images/swkk/video.png'),
           iconActive: require('@/assets/images/swkk/video_1.png'),
           list: [
-            {
-              title: 'title',
-              url: require('@/assets/images/close.png'),
-              desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
-            },
-            {
-              title: 'title2',
-              url: require('@/assets/images/curvy-line.png'),
-              desc: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
-            },
+            // {
+            //   title: 'title',
+            //   url: require('@/assets/images/close.png'),
+            //   desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
+            // },
+            // {
+            //   title: 'title2',
+            //   url: require('@/assets/images/curvy-line.png'),
+            //   desc: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
+            // },
           ]
         },
       ],
@@ -245,6 +248,13 @@ export default {
     }
   },
   computed: {
+    titleForShow() {
+      try {
+        return this.typesToShow[this.currentTabIdx].list[this.currentSlideIdx].title
+      } catch (error) {
+        return ''
+      }
+    },
     typesToShow() {
       return this.types.filter((item) => {
         return item.list.length
@@ -252,6 +262,21 @@ export default {
     }
   },
   mounted() {
+    console.log('HotspotDetail mount!')
+    console.log(this.$route.params.hotspotList)
+    for (const hotspot of this.$route.params.hotspotList) {
+      const targetTypeItem = this.types.find((item) => {
+        return item.key === hotspot.type
+      })
+      for (const mediaItem of hotspot.media[hotspot.type]) {
+        targetTypeItem.list.push({
+          title: mediaItem.name || hotspot.content,
+          url: mediaItem.src,
+        })
+      }
+    }
+    console.log(this.types)
+
     this.$nextTick(() => {
       const that = this
       const swiper = new Swiper('.swiper-root', {

src/router/index.js

@@ -69,6 +69,7 @@ const routes = [
         // 从首页过来的，需要reload。此时location还没有变。
         let shabi = to.fullPath
         location.hash = shabi
+        alert('reload!!!')
         location.reload()
       } else {
         // 无论是从首页还是从不同楼层过来，导致reload。

src/views/SwkkView.vue

@@ -192,7 +192,6 @@ export default {
       mode: 2,
 
       baseHotData: null,
-      hotspotDetail: null,
     }
   },
   computed: {
@@ -356,31 +355,16 @@ export default {
           type: "image"
         }
 
+        let relatedHotspotList = []
         if (e.data.title.split("&")[1]) { // 如果是多个热点合并
-          let hotspotList = []
           this.baseHotData.forEach((item) => {
             if (item.title.split("&")[1] === e.data.title.split("&")[1]) {
-              hotspotList.push(item)
-              if (item.media && item.media.image && item.media.image.length > 1) {
-                item.media.image.forEach((p, pI) => {
-                  if (pI !== 0) hotspotList.push({ ...item, media: { image: [p] } })
-                })
-              }
+              relatedHotspotList.push(item)
             }
           })
-          let obj = {
-            image: [],
-            audio: [],
-            link: [],
-            video: [],
-          }
-          hotspotList.forEach((hotspot) => {
-            obj[hotspot.type].push(hotspot)
-          })
-          this.hotspotDetail = obj
-          console.log(this.hotspotDetail)
+          console.log(relatedHotspotList)
         } else { // 单个热点
-          this.hotspotDetail = { [e.data.type]: [e.data] }
+          relatedHotspotList.push(e.data)
         }
 
         // 聚焦当前点击的热点
@@ -388,7 +372,9 @@ export default {
 
         this.$router.push({
           name: 'HotspotDetail',
-          params: this.hotspotDetail,
+          params: {
+            hotspotList: relatedHotspotList,
+          },
         })
       })
     })