文物详情页tabbar联动修改

src/views/culturalRelic/Detail.vue

@@ -147,30 +147,32 @@
           id="tabbar"
           :class="{ isFixed: isFixed }"
         >
+          <span v-for="(item, index) in tabbarData" :key="index">
             <span
-            v-if="CRDetail.intro"
-            @click="handleClickTabItem('intro')"
-            :class="['tab-item', currentTab == 'intro' ? 'active' : '']"
-            >文物简介</span
-          >
-          <span
-            v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
-            @click="handleClickTabItem('videos')"
-            :class="['tab-item', currentTab == 'videos' ? 'active' : '']"
-            >相关视频</span
-          >
-          <span
-            v-if="relateRelics"
-            @click="handleClickTabItem('relateRelics')"
-            :class="['tab-item', currentTab == 'relateRelics' ? 'active' : '']"
-            >相关文物</span
+              @click="handleClickTabItem(item)"
+              :class="[
+                'tab-item',
+                currentTab && currentTab.domId == item.domId ? 'active' : '',
+              ]"
+              v-html="item.name"
+              v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0"
             >
+            </span>
             <span
-            v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
-            @click="handleClickTabItem('literature')"
-            :class="['tab-item', currentTab == 'literature' ? 'active' : '']"
-            >相关文献</span
+              @click="handleClickTabItem(item)"
+              v-else-if="
+                item.domId == 'relateRelics' &&
+                relateRelics &&
+                relateRelics.length > 0
+              "
+              v-html="item.name"
+              :class="[
+                'tab-item',
+                currentTab && currentTab.domId == item.domId ? 'active' : '',
+              ]"
             >
+            </span>
+          </span>
         </div>
 
         <!-- 文物简介 -->
@@ -179,37 +181,26 @@
           v-if="CRDetail.intro"
           id="intro"
         >
-          <div class="intro-content">
           <div class="intro-title">
             <!-- <svg-icon icon-class="jianjie"></svg-icon> -->
-              <i class="el-icon-tickets" style="margin-right: 10px"></i>
+            <!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
             <span>文物简介</span>
           </div>
+          <div class="intro-content">
+            <div class="left-box">简介</div>
+
             <div class="intro-content-container" v-html="CRDetail.intro"></div>
           </div>
-          <!-- <div
-            class="intro-video wow animate__animated animate__fadeInRight"
-            v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
-          >
-            <el-carousel :interval="4000" type="card" indicator-position="none">
-              <el-carousel-item
-                v-for="item in CRDetail.videosVo"
-                :key="item.fileId"
-              >
-                <Video :url="$getFullUrl(item.url)" theme="blue" />
-              </el-carousel-item>
-            </el-carousel>
-          </div> -->
         </div>
 
         <!-- 文物视频 -->
         <div
           class="content-item display-detail_videos"
           v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
-          id="videos"
+          id="videosVo"
         >
           <div class="video-title">
-            <i class="el-icon-video-camera"></i>
+            <!-- <i class="el-icon-video-camera"></i> -->
             相关视频
           </div>
           <div class="video-names">
@@ -245,7 +236,7 @@
           id="relateRelics"
         >
           <div class="intro-title">
-            <i class="el-icon-menu" style="margin-right: 10px"></i>
+            <!-- <i class="el-icon-menu" style="margin-right: 10px"></i> -->
             <span>相关文物推荐</span>
           </div>
           <div class="recommend-type">
@@ -277,7 +268,7 @@
         <!-- 相关文献 -->
         <div
           class="content-item display-detail_lts"
-          id="literature"
+          id="literatureVo"
           v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
         >
           <!-- <div class="wrapper"> -->
@@ -363,7 +354,7 @@ import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
 import { previewFile } from "@/utils/index";
 import videoPlayer from "@/components/VideoPlayer";
 import SlideImage from "@/components/SlideImage";
-
+import { isElementInViewport2 } from "@/utils/index";
 export default {
   components: {
     AudioPlayer,
@@ -386,8 +377,27 @@ export default {
       page: null,
       currentRcKey: "type",
       currentVideo: null,
-      currentTab: "intro",
+      currentTab: null,
       isFixed: false,
+      tabbarData: [
+        {
+          name: "文物简介",
+          domId: "intro",
+        },
+        {
+          name: "相关视频",
+          domId: "videosVo",
+        },
+
+        {
+          name: "相关文物",
+          domId: "relateRelics",
+        },
+        {
+          name: "相关文献",
+          domId: "literatureVo",
+        },
+      ],
       // tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
     };
   },
@@ -402,11 +412,21 @@ export default {
   async mounted() {
     let crId = this.$route.params.crId;
     this.loadDetail(crId);
-
+    setTimeout(() => {
       window.addEventListener("scroll", this.initHeight);
-    this.$nextTick(() => {
-      this.offsetTop = document.querySelector("#tabbar").offsetTop;
+      this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
+      this.tabbarData.map((item) => {
+        let dom = document.getElementById(item.domId);
+        if (dom) {
+          item.position = dom.offsetTop - 320; //100navbar 55tabbar
+        }
       });
+    }, 500);
+  },
+  beforeRouteLeave(to, form, next) {
+    // 离开路由移除滚动事件
+    window.removeEventListener("scroll", this.initHeight);
+    next();
   },
   methods: {
     async loadDetail(crId) {
@@ -543,10 +563,10 @@ export default {
     },
 
     handleClickTabItem(item) {
-      console.log(item);
       this.currentTab = item;
-      let el = document.getElementById(item);
-      el.scrollIntoView({ block: "center", behavior: "smooth" });
+      if (item.position) {
+        document.documentElement.scrollTop = item.position;
+      }
     },
 
     initHeight() {
@@ -554,7 +574,13 @@ export default {
         window.pageYOffset ||
         document.documentElement.scrollTop ||
         document.body.scrollTop;
-      this.isFixed = scrollTop > this.offsetTop  ? true : false;
+      this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
+      this.tabbarData.map((item) => {
+        let content = document.getElementById(item.domId);
+        if (content && isElementInViewport2(content)) {
+          this.currentTab = item;
+        }
+      });
     },
   },
 };
@@ -673,8 +699,10 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   font-size: 26px;
   font-weight: 400;
   color: #2069c4;
-  line-height: 90px;
-  font-family: SourceHanSerifCN-Bold;
+  font-family: "SourceHanSerifCN-Bold";
+  display: flex;
+  align-items: center;
+  margin-bottom: 32px;
   .svg-icon {
     margin-right: 10px;
     font-size: 36px;
@@ -722,6 +750,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
       justify-content: center;
       min-height: 200px;
       position: relative;
+      background-color: #fff;
       // margin: 36px 0 70px;
       /**基本信息 */
       .display-detail_basic_info {
@@ -933,18 +962,30 @@ $titleFontFamily: SourceHanSerifCN-Bold;
       }
       /**简介和视频 */
       .display-detail_intro {
-        // background-image: url("@/assets/imgs/display/normal/bg.png");
-        background-color: #fff;
-        background-size: 1%;
-        display: flex;
-        min-height: 200px;
+        padding: 40px;
+
         .intro-content {
-          padding: 20px 46px;
           line-height: 28px;
+          display: flex;
+        }
+        .left-box {
+          width: 60px;
+          background-color: $themeColor;
+          min-height: 200px;
+          color: #fff;
+          font-size: 28px;
+          writing-mode: vertical-rl;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          letter-spacing: 10px;
+          font-family: SourceHanSerifCN-Bold;
+        }
         .intro-content-container {
+          flex: 1;
           text-indent: 34px;
-            font-size: 18px;
-          }
+          padding: 16px 32px;
+          background-color: rgba($themeColor, 10%);
         }
       }
 
@@ -956,7 +997,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           display: flex;
           // justify-content: center;
           align-items: center;
-          font-size: 24px;
+          font-size: 26px;
           color: $themeColor;
           margin: 80px 0 40px;
           font-family: SourceHanSerifCN-Bold;