帮助中心

components/help/left.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="help-list">
     <h2>帮助中心</h2>
-    <ul class="list-unstyled" style="margin-top: 10px;">
+    <!--<ul class="list-unstyled" style="margin-top: 10px;">
       <li v-for="nav01 in helps">
         <a :class="{'cur': nav01.isHide}" @click="toggleNav(nav01)"><span>{{nav01.item}}</span></a>
         <ul class="list-unstyled list-body" v-if="!nav01.isHide">
@@ -10,7 +10,8 @@
           </li>
         </ul>
       </li>
-    </ul>
+    </ul>-->
+    <el-tree :data="helps" :props="defaultProps" :highlight-current="true" default-expand-all @node-click="openList"></el-tree>
   </div>
 </template>
 <script>
@@ -18,7 +19,10 @@
     name: 'left',
     data () {
       return {
-        navShow: { 122: false }
+        defaultProps: {
+          children: 'children',
+          label: 'item'
+        }
       }
     },
     computed: {
@@ -27,13 +31,54 @@
       }
     },
     methods: {
-      toggleNav (nav) {
-        nav.isHide = !nav.isHide
+      openList (data) {
+        if (data.level !== 1) {
+          this.$router.push({ name: 'help-helpList-id', params: { id: data.id } })
+        }
       }
     }
   }
 </script>
 <style>
+   .el-tree{
+    border: none;
+     min-height: 300px;
+  }
+  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.el-tree-node:hover{
+    background: none !important;
+  }
+  .el-tree-node__content:hover{
+    background: none !important;
+  }
+  .el-tree-node__content:hover span{
+    color: #5078cb;
+  }
+  .el-pagination .el-pager li.active{
+    background-color: #5078cb;
+    border-color: #337ab7;
+  }
+  .el-tree-node__expand-icon{
+    font-family: "iconfont" !important;
+    font-size: 14px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    width: inherit;
+    height: inherit;
+    border: inherit;
+    font-weight: bold;
+    text-shadow: -1px 0px 0 #333;
+    margin-right: 3px !important;
+  }
+  .el-tree-node__content{
+    line-height: 30px;
+    height: 30px;
+  }
+  .el-tree-node__expand-icon.is-leaf{
+    visibility: hidden;
+  }
+  .el-tree-node__expand-icon:before{
+    content: "\E621";
+  }
   .help-list{
     width: 200px;
     background: #fff;

pages/help/helpDetail/_id.vue

@@ -40,7 +40,6 @@
       helpHeader
     },
     fetch ({ store, route }) {
-      console.log(route.params)
       return Promise.all([
         store.dispatch('loadHelpSnapsho', { parentId: 0 }),
         store.dispatch('loadHelpDetail', route.params)

pages/help/helpList/_id.vue

@@ -43,7 +43,6 @@
       helpHeader
     },
     fetch ({ store, route }) {
-      console.log(route.params)
       return Promise.all([
         store.dispatch('loadHelpSnapsho', { parentId: 0 }),
         store.dispatch('loadHelpList', { navId: route.params.id }),

store/index.js

@@ -207,7 +207,6 @@ export const actions = {
     return axios.get(`/api/help-service/${id}`, {params})
       .then(response => {
         commit('help/GET_TITLE_SUCCESS', response.data)
-        console.log('parent', response.data)
       }, err => {
         commit('help/GET_TITLE_FAILURE', err)
       })