热点详情需求修改

.env.dev

@@ -5,6 +5,7 @@ VUE_APP_ORIGIN=${VUE_APP_PROTOCOL}yuhuatai.4dage.com
 VUE_APP_CDN_PATH=${VUE_APP_ORIGIN}/YHT/goodsData/
 VUE_APP_CDN_PATH_QJKK_SOME_DATA=${VUE_APP_ORIGIN}/YHT/Qjkk/local/WK1578926366500417536/someData.json
 VUE_APP_CDN_PATH_QJKK_DESC=${VUE_APP_ORIGIN}/YHT/Qjkk/data/
+VUE_APP_SWKK_PATH=${VUE_APP_ORIGIN}/YHT/Swkk/hotData/
 VUE_APP_MOBILE_URL=${VUE_APP_ORIGIN}/YHTM/index.html
 VUE_APP_PC_URL=${VUE_APP_ORIGIN}/YHT/index.html
 VUE_APP_PC_URL_ONLY_RELICS=${VUE_APP_ORIGIN}/YHT/index.html#/lookGoods

.env.test

@@ -5,6 +5,7 @@ VUE_APP_ORIGIN=${VUE_APP_PROTOCOL}yuhuatai.4dage.com
 VUE_APP_CDN_PATH=${VUE_APP_ORIGIN}/YHT/goodsData/
 VUE_APP_CDN_PATH_QJKK_SOME_DATA=${VUE_APP_ORIGIN}/YHT/Qjkk/local/WK1578926366500417536/someData.json
 VUE_APP_CDN_PATH_QJKK_DESC=${VUE_APP_ORIGIN}/YHT/Qjkk/data/
+VUE_APP_SWKK_PATH=${VUE_APP_ORIGIN}/YHT/Swkk/hotData/
 VUE_APP_MOBILE_URL=${VUE_APP_ORIGIN}/YHTM/index.html
 VUE_APP_PC_URL=${VUE_APP_ORIGIN}/YHT/index.html
 VUE_APP_PC_URL_ONLY_RELICS=${VUE_APP_ORIGIN}/YHT/index.html#/lookGoods

src/components/HotspotDetail.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="hotspot-detail">
+  <div
+    class="hotspot-detail"
+  >
     <button
       v-show="descForShow"
       class="desc"
@@ -26,7 +28,7 @@
     </button>
 
     <div
-      v-if="typesForShow[currentTabIdx].name === '视频'"
+      v-if="typesForShow[currentTabIdx].key === 'video'"
       class="swiper-wrapper-mine video-wrap"
     >
       <div
@@ -58,7 +60,7 @@
     </div>
 
     <div
-      v-if="typesForShow[currentTabIdx].name === '模型'"
+      v-if="typesForShow[currentTabIdx].key === 'link'"
       class="swiper-wrapper-mine model-wrap"
     >
       <div
@@ -84,7 +86,7 @@
     </div>
 
     <div
-      v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '音频'"
+      v-if="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].key === 'audio'"
       class="swiper-wrapper-mine audio-wrap"
     >
       <div
@@ -110,7 +112,7 @@
     </div>
 
     <div
-      v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '图片'"
+      v-if="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].key === 'image'"
       class="swiper-wrapper-mine image-wrap"
     >
       <div
@@ -137,7 +139,91 @@
           <img
             v-for="(item, index) in typesForShow[currentTabIdx].list"
             :key="index"
-            v-lazy="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
+            v-lazy="item.url"
+            class="swiper-slide"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div class="swiper-pagination">
+          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
+        </div>
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
+      </div>
+    </div>
+
+    <div
+      v-if="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].key === '2d'"
+      class="swiper-wrapper-mine d2-wrap"
+    >
+      <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 typesForShow[currentTabIdx].list"
+            :key="index"
+            v-lazy="item.url"
+            class="swiper-slide"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div class="swiper-pagination">
+          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
+        </div>
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
+      </div>
+    </div>
+
+    <div
+      v-if="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].key === 'article'"
+      class="swiper-wrapper-mine article-wrap"
+    >
+      <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 typesForShow[currentTabIdx].list"
+            :key="index"
+            v-lazy="item.url"
             class="swiper-slide"
             alt=""
             draggable="false"
@@ -161,6 +247,27 @@
         }"
         @click="currentTabIdx = index"
       >
+        <button
+          v-if="typeItem.key === 'image' && typesForShow[currentTabIdx].key === 'image'"
+          class="expand-list-btn"
+        >
+          <img
+            v-show="!isShowImgList"
+            class=""
+            src="@/assets/images/arrow-up.png"
+            alt=""
+            draggable="false"
+            @click="isShowImgList = true"
+          >
+          <img
+            v-show="isShowImgList"
+            class=""
+            src="@/assets/images/arrow-down.png"
+            alt=""
+            draggable="false"
+            @click="isShowImgList = false"
+          >
+        </button>
         <img
           :src="currentTabIdx !== index ? typeItem.icon : typeItem.iconActive"
           alt=""
@@ -176,6 +283,15 @@
       :desc="descForShow"
       @close="isShowDesc = false"
     />
+
+    <HotspotDetailImgList
+      v-show="isShowImgList"
+      class="img-list"
+      :img-list="types[3].list"
+      :active-index="currentSlideIdx"
+      @close="isShowImgList = false"
+      @selectItem="onSelectImageItem"
+    />
   </div>
 </template>
 
@@ -184,11 +300,14 @@ import Swiper from 'swiper/swiper-bundle.esm.js'
 import 'swiper/swiper-bundle.css'
 import Audio from "@/components/Audio.vue"
 import MyDesc from "@/components/HotspotDetailDesc.vue"
+import { hotData as hotspotDataListFromLocal } from "@/assets/data/swkkHotspotData.js"
+import HotspotDetailImgList from "@/components/HotspotDetailImgList"
 
 export default {
   components: {
     Audio,
     MyDesc,
+    HotspotDetailImgList,
   },
   props: {
     hotspotList: {
@@ -198,6 +317,10 @@ export default {
     sceneCode: {
       type: String,
       required: true,
+    },
+    id: {
+      type: String,
+      required: true
     }
   },
   data() {
@@ -205,6 +328,8 @@ export default {
       currentTabIdx: 0,
       currentSlideIdx: 0,
       isShowDesc: false,
+      isShowImgList: false,
+      swiper: null,
     }
   },
   computed: {
@@ -260,31 +385,68 @@ export default {
           icon: require('@/assets/images/swkk/pic.png'),
           iconActive: require('@/assets/images/swkk/pic_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: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
-            // },
+          ]
+        },
+        {
+          key: '2d',
+          name: '二维',
+          icon: require('@/assets/images/swkk/pic.png'),
+          iconActive: require('@/assets/images/swkk/pic_1.png'),
+          list: [
+          ]
+        },
+        {
+          key: 'article',
+          name: '文章',
+          icon: require('@/assets/images/swkk/pic.png'),
+          iconActive: require('@/assets/images/swkk/pic_1.png'),
+          list: [
           ]
         },
       ]
       for (const hotspot of this.hotspotList) {
-        const targetTypeItem = ret.find((item) => {
-          return item.key === hotspot.type
-        })
-        for (const mediaItem of hotspot.media[hotspot.type]) {
-          targetTypeItem.list.push({
-            title: /* hotspot.content || */hotspot.title.split('&')[0],
-            url: mediaItem.src,
-            desc: hotspot.content,
+        if (hotspot.type === 'audio' || hotspot.type === 'video' || hotspot.type === 'link') {
+          const targetTypeItem = ret.find((item) => {
+            return item.key === hotspot.type
           })
+
+          for (const mediaItem of hotspot.media[hotspot.type]) {
+            targetTypeItem.list.push({
+              title: /* hotspot.content || */hotspot.title.split('&')[0],
+              url: mediaItem.src,
+              desc: hotspot.content,
+            })
+          }
         }
       }
+
+      const hotspotDataFromLocal = hotspotDataListFromLocal.find((item) => {
+        return item.hotId === this.id
+      })
+      if (hotspotDataFromLocal) {
+        for (const imgItem of hotspotDataFromLocal.img || []) {
+          ret[3].list.push({
+            title: imgItem.name,
+            url: `${process.env.VUE_APP_SWKK_PATH}${this.id}/img/${imgItem.id}`,
+            desc: imgItem.content,
+          })
+        }
+        for (const item2d of hotspotDataFromLocal['2d'] || []) {
+          ret[4].list.push({
+            title: item2d.name,
+            url: `${process.env.VUE_APP_SWKK_PATH}${this.id}/2d/${item2d.id}`,
+            desc: item2d.content,
+          })
+        }
+        for (const articleItem of hotspotDataFromLocal.article || []) {
+          ret[5].list.push({
+            title: articleItem.name,
+            url: `${process.env.VUE_APP_SWKK_PATH}${this.id}/article/${articleItem.id}`,
+            desc: articleItem.content,
+          })
+        }
+      }
+      console.log(ret)
       return ret
     },
     titleForShow() {
@@ -313,7 +475,7 @@ export default {
         this.currentSlideIdx = 0
         this.$nextTick(() => {
           const that = this
-          const swiper = new Swiper('.swiper-root', {
+          this.swiper = new Swiper('.swiper-root', {
             // If we need pagination
             // pagination: {
             //   el: '.swiper-pagination',
@@ -376,7 +538,11 @@ export default {
     ...globalMapMutations([
       'mustMute',
       'cancelMustMute',
-    ])
+    ]),
+    onSelectImageItem(index) {
+      this.isShowImgList = false
+      this.swiper.slideTo(index, 500)
+    }
   }
 }
 </script>
@@ -532,7 +698,7 @@ export default {
       }
     }
   }
-  .swiper-wrapper-mine.image-wrap {
+  .swiper-wrapper-mine.image-wrap, .swiper-wrapper-mine.d2-wrap, .swiper-wrapper-mine.article-wrap {
     .swiper-root {
       .swiper-wrapper {
         > img {
@@ -551,9 +717,21 @@ export default {
     justify-content: center;
     > button {
       margin-right: 2.08rem;
+      position: relative;
       &:last-child {
         margin-right: initial;
       }
+      > button.expand-list-btn {
+        position: absolute;
+        left: 50%;
+        top: -3.5rem;
+        transform: translateX(-50%);
+        width: 3.5rem;
+        padding: 0.5rem;
+        > img {
+          width: 100%;
+        }
+      }
       > img {
         width: 5rem;
         height: 5rem;

src/components/HotspotDetailDesc.vue

@@ -54,8 +54,8 @@ export default {
   height: 100%;
   background: rgba(255, 251, 245, 0.95);
   z-index: 10;
-  ::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-  ::-webkit-scrollbar-thumb { background: #cea763; }
+  ::-webkit-scrollbar { width: 0.67rem; height: 0.67rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+  ::-webkit-scrollbar-thumb { background: #D8B275; border-radius: 0.67rem; }
   ::-webkit-scrollbar-button { display: none; }
   ::-webkit-scrollbar-track { background: transparent; }
   // 横竖滚动条轨道交汇处

src/components/HotspotDetailImgList.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="hotspot-detail-img-list-wrap">
+    <article
+      class="hotspot-detail-img-list"
+    >
+      <button
+        class="close-btn"
+        @click="$emit('close')"
+      >
+        <img
+          src="@/assets/images/close.png"
+          alt="关闭"
+          draggable="false"
+        >
+      </button>
+      <ul>
+        <li
+          v-for="(item, index) in imgList"
+          :key="index"
+          :class="{
+            active: activeIndex === index,
+          }"
+          @click="$emit('selectItem', index)"
+        >
+          {{ item.title }}
+        </li>
+      </ul>
+    </article>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    imgList: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    activeIndex: {
+      type: Number,
+      default: 0,
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-detail-img-list-wrap {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 251, 245, 0.95);
+  z-index: 10;
+  ::-webkit-scrollbar { width: 0.67rem; height: 0.67rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+  ::-webkit-scrollbar-thumb { background: #D8B275; border-radius: 0.67rem; }
+  ::-webkit-scrollbar-button { display: none; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  // 横竖滚动条轨道交汇处
+  ::-webkit-scrollbar-corner { background: transparent; }
+  // 有必要给resizer设置border_radius吗？
+  ::-webkit-scrollbar-resizer { background: transparent; }
+  .hotspot-detail-img-list {
+    position: absolute;
+    left: 4.7rem;
+    right: 4.7rem;
+    top: 9.75rem;
+    bottom: 14rem;
+    background: #930909;
+    border-top: solid 0.78rem #CEA763;
+    border-bottom: solid 0.78rem #CEA763;
+    padding: 2.92rem 0.79rem 2.92rem 1.21rem;
+    display: flex;
+    flex-direction: column;
+    .close-btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 6.25rem;
+      height: 6.25rem;
+      transform: translate(50%, -50%);
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    > ul {
+      height: 100%;
+      overflow: auto;
+      padding-right: 1.5rem;
+      > li {
+        display: block;
+        font-size: 1.67rem;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 4.17rem;
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+        &.active {
+          color: #D8B275;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/HotspotList.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="hotspot-list">
+  <div
+    class="hotspot-list"
+  >
     <div class="top-bar">
       <button
         class="back"

src/views/SwkkView.vue

@@ -192,6 +192,7 @@
 
     <HotspotDetail
       v-if="isShowDetail"
+      :id="activeHotspotId"
       class="hotspot-detail"
       :style="{
         zIndex: $globalConfig.zIndex.swkkHotspotDetail.self
@@ -252,6 +253,7 @@ export default {
       baseHotData: null,
       isShowDetail: false,
       isShowHotspotList: false,
+      activeHotspotId: '',
     }
   },
   computed: {
@@ -412,7 +414,7 @@ export default {
 
     // 全部热点数据
     kankan.store.on("tags", (tags) => {
-      this.baseHotData = tags.tags
+      this.baseHotData = tags.tags.reverse()
       console.log('baseHotData: ', this.baseHotData)
     })
 
@@ -580,6 +582,7 @@ export default {
       this.tagView && this.tagView.focus(hotspot.sid)
 
       this.isShowDetail = true
+      this.activeHotspotId = hotspot.sid
     }
   },
 }