一个热点可同时有多种类型的数据，用tab切换。

.gitignore

@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+.favorites.json

src/views/HomeMobile.vue

@@ -29,10 +29,32 @@
       >
     </div>
 
+    <div class="type-tabbar">
+      <button
+        :class="{active: activeType === 0}"
+        @click="activeType = 0"
+      >
+        <img
+          :src="require(`@/assets/images/hotspot-model-mobile-${activeType === 0 ? 'active' : 'normal'}.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button
+        :class="{active: activeType === 1}"
+        @click="activeType = 1"
+      >
+        <img
+          :src="require(`@/assets/images/hotspot-image-mobile-${activeType === 1 ? 'active' : 'normal'}.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </div>
+
     <div
-      v-if="isShowVideos"
-      v-show="!isShowShare"
-      class="swiper-wrapper-mine video-wrap"
+      v-if="hasModels && activeType === 0"
+      class="swiper-wrapper-mine model-wrap"
     >
       <div
         class="swiper-root"
@@ -40,29 +62,21 @@
         <div
           class="swiper-wrapper"
         >
-          <div
-            v-for="(item, index) in hotspotData.video"
+          <iframe
+            v-for="(item, index) in hotspotData.model"
             :key="index"
+            :src="$env.VUE_APP_CLI_MODE === 'local' ? `${$env.VUE_APP_RELIC_MODEL_PATH}?m=${item.split('m=')[1]}` : item"
+            frameborder="0"
             class="swiper-slide"
-          >
-            <video
-              ref="video"
-              :src="item.url"
-              controls
-              controlslist="nodownload"
-              disablePictureInPicture
-            />
-          </div>
+          />
         </div>
         <div class="swiper-pagination" />
-        <div class="swiper-button-prev" />
-        <div class="swiper-button-next" />
       </div>
     </div>
 
-    <div
-      v-if="isShowModels"
-      class="swiper-wrapper-mine model-wrap"
+    <!-- <div
+      v-if="hasVideos"
+      class="swiper-wrapper-mine video-wrap"
     >
       <div
         class="swiper-root"
@@ -70,21 +84,28 @@
         <div
           class="swiper-wrapper"
         >
-          <iframe
-            v-for="(item, index) in hotspotData.model"
+          <div
+            v-for="(item, index) in hotspotData.video"
             :key="index"
-            :src="$env.VUE_APP_CLI_MODE === 'local' ? `${$env.VUE_APP_RELIC_MODEL_PATH}?m=${item.split('m=')[1]}` : item"
-            frameborder="0"
             class="swiper-slide"
-          />
+          >
+            <video
+              ref="video"
+              :src="item.url"
+              controls
+              controlslist="nodownload"
+              disablePictureInPicture
+            />
+          </div>
         </div>
         <div class="swiper-pagination" />
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
       </div>
-    </div>
+    </div> -->
 
-    <div
+    <!-- <div
       v-if="isShowAudios"
-      v-show="!isShowShare"
       class="swiper-wrapper-mine audio-wrap"
     >
       <div
@@ -109,11 +130,10 @@
         </div>
         <div class="swiper-pagination" />
       </div>
-    </div>
+    </div> -->
 
     <div
-      v-if="isShowImages"
-      v-show="!isShowShare"
+      v-if="hasImages && activeType === 1"
       class="swiper-wrapper-mine image-wrap"
     >
       <div
@@ -272,13 +292,14 @@ export default {
     return {
       hotspotData: {}, // 热点数据
 
-      // bgAudioUrl: "", //背景音频url
       isBgAudioMuted: true,
 
-      isShowImages: false,
-      isShowVideos: false,
-      isShowModels: false,
-      isShowAudios: false,
+      hasImages: false,
+      hasModels: false,
+      // isShowVideos: false,
+      // isShowAudios: false,
+
+      activeType: null, // 0: 模型, 1: 图片
 
       currentSlideIdx: 0,
       bgImg,
@@ -306,6 +327,64 @@ export default {
           this.$refs['bg-audio'].play() // or toggle静音？
         }
       }
+    },
+    activeType: {
+      handler(vNew) {
+        this.currentSlideIdx = 0
+        // init swiper
+        this.$nextTick(() => {
+          const that = this
+
+          new Swiper('.swiper-root', {
+            pagination: {
+              el: '.swiper-pagination',
+            },
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+
+            // on: {
+            //   // 自动播放
+            //   afterInit: function (e) {
+            //     if (that.hasVideos) {
+            //       that.$nextTick(() => {
+            //         that.$refs.video[0].play()
+            //       })
+            //     }
+            //     if (that.hasAudios) {
+            //       that.$nextTick(() => {
+            //         that.$refs.audio[0].play()
+            //       })
+            //     }
+            //   },
+            //   slideChange: function(e) {
+            //     that.currentSlideIdx = e.activeIndex
+
+            //     // 自动播放
+            //     if (that.hasVideos) {
+            //       for (let index = 0; index < that.$refs.video.length; index++) {
+            //         if (index !== that.currentSlideIdx) {
+            //           that.$refs.video[index].pause()
+            //         } else {
+            //           that.$refs.video[index].play()
+            //         }
+            //       }
+            //     }
+            //     if (that.hasAudios) {
+            //       for (let index = 0; index < that.$refs.audio.length; index++) {
+            //         if (index !== that.currentSlideIdx) {
+            //           that.$refs.audio[index].pause()
+            //         } else {
+            //           that.$refs.audio[index].play()
+            //         }
+            //       }
+            //     }
+            //   }
+            // }
+          })
+        })
+      }
     }
   },
   async mounted() {
@@ -315,57 +394,6 @@ export default {
       }
     }, 2000)
     await this.getData()
-    this.$nextTick(() => {
-      const that = this
-      new Swiper('.swiper-root', {
-        pagination: {
-          el: '.swiper-pagination',
-        },
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
-
-        on: {
-          // 自动播放
-          afterInit: function (e) {
-            if (that.isShowVideos) {
-              that.$nextTick(() => {
-                that.$refs.video[0].play()
-              })
-            }
-            if (that.isShowAudios) {
-              that.$nextTick(() => {
-                that.$refs.audio[0].play()
-              })
-            }
-          },
-          slideChange: function(e) {
-            that.currentSlideIdx = e.activeIndex
-
-            // 自动播放
-            if (that.isShowVideos) {
-              for (let index = 0; index < that.$refs.video.length; index++) {
-                if (index !== that.currentSlideIdx) {
-                  that.$refs.video[index].pause()
-                } else {
-                  that.$refs.video[index].play()
-                }
-              }
-            }
-            if (that.isShowAudios) {
-              for (let index = 0; index < that.$refs.audio.length; index++) {
-                if (index !== that.currentSlideIdx) {
-                  that.$refs.audio[index].pause()
-                } else {
-                  that.$refs.audio[index].play()
-                }
-              }
-            }
-          }
-        }
-      })
-    })
   },
   methods: {
     changeSubStr(str) {
@@ -385,16 +413,24 @@ export default {
       // this.bgAudioUrl = this.hotspotData.backgroundMusic
 
       if (this.hotspotData.images && this.hotspotData.images.length) {
-        this.isShowImages = true
-      } else if (this.hotspotData.video && this.hotspotData.video.length) {
-        this.isShowVideos = true
-      } else if (this.hotspotData.model && this.hotspotData.model.length) {
-        this.isShowModels = true
+        this.hasImages = true
+      }
+      if (this.hotspotData.model && this.hotspotData.model.length) {
+        this.hasModels = true
       }
+      // if (this.hotspotData.video && this.hotspotData.video.length) {
+      //   this.isShowVideos = true
+      // }
       //  else if (this.hotspotData.backgroundMusic) {
       //   this.isShowAudios = true
       //   this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
       // }
+
+      if (this.hasModels) {
+        this.activeType = 0
+      } else if (this.hasImages) {
+        this.activeType = 1
+      }
     },
     onClickClose() {
       window.parent.document.getElementById('closepop').click()
@@ -452,7 +488,7 @@ export default {
 
   > .title-wrapper {
     position: absolute;
-    top: 62px;
+    top: 40px;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
@@ -479,7 +515,29 @@ export default {
       height: 9.5px;
     }
   }
-
+  > .type-tabbar {
+    position: absolute;
+    top: 90px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    z-index: 1;
+    > button {
+      width: 40px;
+      &.active {
+        width: 45px;
+      }
+      &:first-of-type {
+        margin-right: 10px;
+      }
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
   .swiper-wrapper-mine {
     position: absolute;
     top: 150px;

src/views/HomeWeb.vue

@@ -103,9 +103,31 @@
         </button> -->
       </menu>
 
-      <div
-        v-if="isShowVideos"
-        v-show="!isShowShare"
+      <div class="type-tabbar">
+        <button
+          :class="{inactive: activeType !== 0}"
+          @click="activeType = 0"
+        >
+          <img
+            :src="require(`@/assets/images/hotspot-model-pc-${activeType === 0 ? 'active' : 'normal'}.png`)"
+            alt=""
+            draggable="false"
+          >
+        </button>
+        <button
+          :class="{inactive: activeType !== 1}"
+          @click="activeType = 1"
+        >
+          <img
+            :src="require(`@/assets/images/hotspot-image-pc-${activeType === 1 ? 'active' : 'normal'}.png`)"
+            alt=""
+            draggable="false"
+          >
+        </button>
+      </div>
+
+      <!-- <div
+        v-if="hasVideos"
         class="swiper-wrapper-mine video-wrap"
       >
         <div
@@ -132,10 +154,10 @@
           <div class="swiper-button-prev" />
           <div class="swiper-button-next" />
         </div>
-      </div>
+      </div> -->
 
       <div
-        v-if="isShowModels"
+        v-if="hasModels && activeType === 0"
         class="swiper-wrapper-mine model-wrap"
       >
         <div
@@ -158,9 +180,8 @@
         </div>
       </div>
 
-      <div
-        v-if="isShowAudios"
-        v-show="!isShowShare"
+      <!-- <div
+        v-if="hasAudios"
         class="swiper-wrapper-mine audio-wrap"
       >
         <div
@@ -187,11 +208,10 @@
           <div class="swiper-button-prev" />
           <div class="swiper-button-next" />
         </div>
-      </div>
+      </div> -->
 
       <div
-        v-if="isShowImages"
-        v-show="!isShowShare"
+        v-if="hasImages && activeType === 1"
         class="swiper-wrapper-mine image-wrap"
       >
         <div
@@ -276,13 +296,14 @@ export default {
     return {
       hotspotData: {}, // 热点数据
 
-      // bgAudioUrl: "", //背景音频url
       isBgAudioMuted: true,
 
-      isShowImages: false,
-      isShowVideos: false,
-      isShowModels: false,
-      isShowAudios: false,
+      hasImages: false,
+      hasModels: false,
+      // hasVideos: false,
+      // hasAudios: false,
+
+      activeType: null, // 0: 模型, 1: 图片
 
       currentSlideIdx: 0,
       bgImg,
@@ -311,6 +332,64 @@ export default {
           this.$refs['bg-audio'].play() // or toggle静音？
         }
       }
+    },
+    activeType: {
+      handler(vNew) {
+        this.currentSlideIdx = 0
+        // init swiper
+        this.$nextTick(() => {
+          const that = this
+
+          new Swiper('.swiper-root', {
+            pagination: {
+              el: '.swiper-pagination',
+            },
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+
+            // on: {
+            //   // 自动播放
+            //   afterInit: function (e) {
+            //     if (that.hasVideos) {
+            //       that.$nextTick(() => {
+            //         that.$refs.video[0].play()
+            //       })
+            //     }
+            //     if (that.hasAudios) {
+            //       that.$nextTick(() => {
+            //         that.$refs.audio[0].play()
+            //       })
+            //     }
+            //   },
+            //   slideChange: function(e) {
+            //     that.currentSlideIdx = e.activeIndex
+
+            //     // 自动播放
+            //     if (that.hasVideos) {
+            //       for (let index = 0; index < that.$refs.video.length; index++) {
+            //         if (index !== that.currentSlideIdx) {
+            //           that.$refs.video[index].pause()
+            //         } else {
+            //           that.$refs.video[index].play()
+            //         }
+            //       }
+            //     }
+            //     if (that.hasAudios) {
+            //       for (let index = 0; index < that.$refs.audio.length; index++) {
+            //         if (index !== that.currentSlideIdx) {
+            //           that.$refs.audio[index].pause()
+            //         } else {
+            //           that.$refs.audio[index].play()
+            //         }
+            //       }
+            //     }
+            //   }
+            // }
+          })
+        })
+      }
     }
   },
   async mounted() {
@@ -319,59 +398,10 @@ export default {
         this.isBgAudioMuted = false
       }
     }, 2000)
-    await this.getData()
-    this.$nextTick(() => {
-      const that = this
-      new Swiper('.swiper-root', {
-        pagination: {
-          el: '.swiper-pagination',
-        },
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
 
-        on: {
-          // 自动播放
-          afterInit: function (e) {
-            if (that.isShowVideos) {
-              that.$nextTick(() => {
-                that.$refs.video[0].play()
-              })
-            }
-            if (that.isShowAudios) {
-              that.$nextTick(() => {
-                that.$refs.audio[0].play()
-              })
-            }
-          },
-          slideChange: function(e) {
-            that.currentSlideIdx = e.activeIndex
-
-            // 自动播放
-            if (that.isShowVideos) {
-              for (let index = 0; index < that.$refs.video.length; index++) {
-                if (index !== that.currentSlideIdx) {
-                  that.$refs.video[index].pause()
-                } else {
-                  that.$refs.video[index].play()
-                }
-              }
-            }
-            if (that.isShowAudios) {
-              for (let index = 0; index < that.$refs.audio.length; index++) {
-                if (index !== that.currentSlideIdx) {
-                  that.$refs.audio[index].pause()
-                } else {
-                  that.$refs.audio[index].play()
-                }
-              }
-            }
-          }
-        }
-      })
-    })
+    await this.getData()
 
+    // 热点详情弹窗尺寸适应窗口
     if (window.innerWidth < 1350 || window.innerHeight < 810) {
       const realWHRatio = window.innerWidth / window.innerHeight
       if (realWHRatio > 1350 / 810) {
@@ -411,16 +441,24 @@ export default {
       // this.bgAudioUrl = this.hotspotData.backgroundMusic
 
       if (this.hotspotData.images && this.hotspotData.images.length) {
-        this.isShowImages = true
-      } else if (this.hotspotData.video && this.hotspotData.video.length) {
-        this.isShowVideos = true
-      } else if (this.hotspotData.model && this.hotspotData.model.length) {
-        this.isShowModels = true
+        this.hasImages = true
+      }
+      if (this.hotspotData.model && this.hotspotData.model.length) {
+        this.hasModels = true
       }
+      // if (this.hotspotData.video && this.hotspotData.video.length) {
+      //   this.hasVideos = true
+      // }
       //  else if (this.hotspotData.backgroundMusic) {
-      //   this.isShowAudios = true
+      //   this.hasAudios = true
       //   this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
       // }
+
+      if (this.hasModels) {
+        this.activeType = 0
+      } else if (this.hasImages) {
+        this.activeType = 1
+      }
     },
     onClickClose() {
       window.parent.document.getElementById('closepop').click()
@@ -551,6 +589,27 @@ export default {
         // }
       }
     }
+    > .type-tabbar {
+      position: absolute;
+      top: 10%;
+      right: 580px;
+      width: 170px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      > button {
+        &:first-of-type.inactive {
+          margin-left: 22px;
+        }
+        &:last-of-type.inactive {
+          margin-right: 5px;
+        }
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
     .swiper-wrapper-mine {
       position: absolute;
       top: 50%;