点击空白区域隐藏文章目录

src/views/bookShelf/articleDetail.vue

@@ -434,6 +434,7 @@
             background: bgColorList[activeIndex].contentInnerBg,
             borderColor: bgColorList[activeIndex].glossaryBg,
           }"
+          ref="mene"
         >
           <menu-right
             :colorObj="bgColorList[activeIndex]"
@@ -478,7 +479,11 @@
         <span id="copyDownUrl">{{ share_url }}</span>
       </div>
     </div>
-    <div class="catalog-box" v-if="menuFeature === 'list'">
+    <div
+      class="catalog-box"
+      v-if="menuFeature === 'list' && menuShow"
+      ref="catalog"
+    >
       <ul class="treeList">
         <li v-for="(item, index) in issueChnList" :key="index">
           <p class="parent-node">
@@ -1041,6 +1046,7 @@ export default {
       loading: false,
       menuType: "original",
       menuFeature: "", // 功能
+      menuShow: true, // 展示目录
       shareSrc: "", // 分享图片
       share_url: "", // 分享链接
       shareLoading: false,
@@ -1635,6 +1641,7 @@ export default {
         type === "cloud" ||
         type === "chart"
       ) {
+        this.menuShow = true;
         if (type === "share" || type === "cloud" || type === "print") {
           if (this.userMessage) {
             if (type === "cloud") {
@@ -1856,6 +1863,18 @@ export default {
     closePrint() {
       this.printFlag = false;
     },
+    handleClickOutside(event) {
+      const catalog = this.$refs.catalog;
+      const mene = this.$refs.mene;
+      if (
+        (catalog && catalog.contains(event.target)) ||
+        (mene && mene.contains(event.target))
+      ) {
+        this.menuShow = true;
+      } else {
+        this.menuShow = false;
+      }
+    },
   },
   created() {
     if (this.config) {
@@ -1880,11 +1899,13 @@ export default {
     this_.timer = setInterval(() => {
       this_.readLength++;
     }, 1000);
+    document.addEventListener("click", this.handleClickOutside);
   },
   beforeDestroy() {
     if (this.support) {
       this.handleReadArticle();
     }
+    document.removeEventListener("click", this.handleClickOutside);
   },
 };
 </script>
@@ -2188,7 +2209,7 @@ export default {
   }
 }
 .catalog-box {
-  right: calc((100% - 1000px) / 2);
+  right: 162px;
   left: auto;
   margin-left: auto;
   .treeList {

src/views/bookShelf/index.vue

@@ -17,7 +17,9 @@
         <svg-icon :icon-class="itemo.img" className="icon-img"></svg-icon>
         <span>{{ itemo.label }}</span>
         <b>{{
-          itemo.value === 3 ? itemo.number + orderPeruseNumber : itemo.number
+          itemo.value === -1 || itemo.value === 3
+            ? itemo.number + orderPeruseNumber
+            : itemo.number
         }}</b>
       </li>
     </ul>
@@ -271,6 +273,7 @@ export default {
       stopLoad: false,
       cancelToken: null,
       source: axios.CancelToken.source(),
+      loadFlag: true,
     };
   },
   //计算属性 类似于data概念
@@ -417,9 +420,11 @@ export default {
           this.loading = false;
           if (res.status === 1) {
             if (res.goods_list.length === 0 && res.cur_page === 0) {
-              this.BookList = [];
+              this.loadFlag = false;
+              this.handleOnlyPer();
               return;
             }
+            this.loadFlag = true;
             if (
               this.typeValue === -1 ||
               (this.typeValue === 10 &&
@@ -473,8 +478,26 @@ export default {
           }
         });
     },
+    handleOnlyPer() {
+      if (this.typeValue === -1 || this.typeValue === 3) {
+        getLogin(
+          "/ShopServer/Client/BookshelfQuery/GetMyValidPeriodList_Iread",
+          {}
+        ).then((ress) => {
+          if (ress.status === 1) {
+            this.orderPeruseNumber = ress.valid_period_list.length;
+            ress.valid_period_list.forEach((items) => {
+              items.type = 30;
+            });
+            this.BookList = ress.valid_period_list;
+          } else {
+            this.BookList = [];
+          }
+        });
+      }
+    },
     load() {
-      if (this.userMessage) {
+      if (this.userMessage && this.loadFlag) {
         if (
           this.pageNumber > 2 &&
           (this.typeValue === -1 ||