文章目录

src/components/Header.vue

@@ -200,7 +200,7 @@ export default {
   box-sizing: border-box;
   background: #383838;
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-  z-index: 999;
+  z-index: 10;
   padding: 0 24px;
   position: fixed;
   width: 100%;

src/views/bookShelf/articleDetail.vue

@@ -134,6 +134,18 @@
             <span id="copyDownUrl">{{share_url}}</span>
         </div>
     </div>
+    <div class="catalog-box" v-if="menuFeature==='list'">
+        <ul class="treeList">
+            <li v-for="(item,index) in issueChnList" :key="index">
+                <p class="parent-node"><span class="number">{{index+1}}</span><b class="title">{{item.chn_name}}</b></p>
+                <ul v-if="item.arts&&item.arts.length>0">
+                    <li :class="[items.canRead?'children-buy':'children-no','children']" v-for="(items,indexs) in item.arts" :key="indexs" @click="handleLink(items,items.canRead,index)">
+                        <p class="children-node"><span class="number">{{indexs+1}}</span><b class="title">{{items.art_title}}</b></p>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
   </div>
 </template>
 
@@ -688,6 +700,7 @@ export default {
         if(type==='-'){
             if(this.activeArticleIndex!==0){
                 if(!this.issueChnTanList[this.activeArticleIndex-1].canRead){
+                    this.$message.error('您没有阅读其他文章的相关权益')
                     return
                 }
                 this.activeArticleIndex --
@@ -705,6 +718,7 @@ export default {
         }else{
             if(this.activeArticleIndex!==this.issueChnTanList.length-1){
                 if(!this.issueChnTanList[this.activeArticleIndex+1].canRead){
+                    this.$message.error('您没有阅读其他文章的相关权益')
                     return
                 }
                 this.activeArticleIndex ++
@@ -722,6 +736,21 @@ export default {
         }
         location.reload()
     },
+    // 跳转
+    handleLink(item,flag){
+        if(!flag){
+            return
+        }
+        this.$router.replace({
+            path: "/articleDetail",
+            query: {
+                headerConfig: this.$route.query.headerConfig?this.$route.query.headerConfig:'',
+                id: item.id,
+                iss_id: this.$route.query.iss_id
+            },
+        })
+        location.reload()
+    },
     getArticleDetail(){
         this.loading = true
         let this_ = this;
@@ -949,7 +978,6 @@ export default {
     },
     // 创建分享
     handleCreateShare(){
-        
             this.shareLoading = true
             let MethodName = "/ShopServer/Client/ShareManager/CreateShareRecord";
             let data = {
@@ -1003,20 +1031,50 @@ export default {
                                 item.arts.forEach(items=>{
                                     if(items.id===this.$route.query.id){
                                         this.activeArticleIndex = articleindex
+                                        item.active = true
+                                        items.active = true
                                     }
                                     this.issueChnTanList.push({
                                         id: items.id,
                                         canRead: isBuy||index===0
                                     })
+                                    if(isBuy||index===0){
+                                        items.canRead = true
+                                    }else{
+                                        items.canRead = false
+                                    }
                                     articleindex ++
                                 })
-                                
                             })
+                            this.issueChnList = issueChnList
                         }
                     })
                     .catch(() => {
                         
                     }); 
+                }else{
+                    let isBuy = false
+                    issueChnList.forEach((item,index)=>{
+                        item.canRead = isBuy||index===0
+                        item.arts.forEach(items=>{
+                            if(items.id===this.$route.query.id){
+                                this.activeArticleIndex = articleindex
+                                item.active = true
+                                items.active = true
+                            }
+                            this.issueChnTanList.push({
+                                id: items.id,
+                                canRead: isBuy||index===0
+                            })
+                            if(isBuy||index===0){
+                                items.canRead = true
+                            }else{
+                                items.canRead = false
+                            }
+                            articleindex ++
+                        }) 
+                    })
+                    this.issueChnList = issueChnList
                 }
             }
         })
@@ -1097,6 +1155,8 @@ export default {
             right: calc((100% - 1000px)/2 - 196px);
             top: 144px;
             width: 176px;
+            max-height: 80%;
+            overflow: auto;
             background: #FFFFFF;
             border: 1px solid #E5E6EB;
             border-radius: 8px;
@@ -1273,15 +1333,17 @@ export default {
         cursor: initial;
     }
 }
-.share-box{
+.share-box,.catalog-box{
     padding: 24px;
     width: 428px;
-    height: 702px;
+    height: 90%;
+    overflow: auto;
+    max-height: 702px;
     position: fixed;
     top: 50%;
     left: 50%;
-    z-index: 999;
-    margin-top: -351px;
+    z-index: 9;
+    margin-top: -270px;
     margin-left: -214px;
     border-radius: 8px;
     border: 1px solid #D0D3D9;
@@ -1338,6 +1400,76 @@ export default {
         }
     }
 }
+.catalog-box{
+    right: calc((100% - 1000px)/2);
+    left: auto;
+    margin-left: auto;
+    .treeList{
+        .parent-node{
+            display: flex;
+            align-items: center;
+            margin-bottom: 16px;
+            .number{
+                width: 26px;
+                font-weight: 500;
+                font-size: 16px;
+                line-height: 24px;
+                color: #2F3742;
+            }
+            .title{
+                font-weight: 500;
+                font-size: 16px;
+                line-height: 24px;
+                color: #2F3742;
+            }
+        }
+        ul{
+            margin-bottom: 16px;
+            .children{
+                padding: 0 32px;
+                border-radius: 4px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                margin-bottom: 4px;
+                &-buy{
+                    .number,.title{
+                        color: #2F3742;
+                    }
+                }
+                &-no{
+                    .number,.title{
+                        color: #929CA8;
+                    }
+                }
+                &-buy:hover{
+                    background: #E5E6EB;
+                    cursor: pointer;
+                }
+                &-node{
+                    display: flex;
+                    width: 100%;
+                }
+                .number{
+                    width: 24px;
+                }
+                .title{
+                    flex: 1;
+                }
+                .number,.title{
+                    font-weight: 400;
+                    font-size: 16px;
+                    line-height: 24px;
+                }
+                .el-icon-lock{
+                    height: 16px;
+                    color: #929CA8;
+                }
+            }
+
+        }
+    }
+}
 </style>
 <style lang="scss">
 .article-fontsize{