推荐课程

src/containers/center/components/menu/index.vue

@@ -1,25 +1,24 @@
 <template>
   <div class="m-left-block fl lwh-sider" center-sider="">
-    <div class="user-block" style="width:150px;cursor:pointer" ng-click="$state.go('states.accountSetting')">
-      <img style="width:152px;height:152px"  
-        class="user-img" 
-        :src="user.headImg">
+    <div class="user-block" style="width:150px;cursor:pointer">
+      <img style="width:140px;height:160px"
+        class="user-img"
+        :onerror="errorImg"
+        :src="user.headImg||''">
       <p class="user-name" style="margin-top: 10px;margin-bottom: -8px">
         {{user.nickname}}
       </p>
     </div>
 
     <ul class="m-left-list">
-
-      <li class="ng-scope" v-for="(item, index) in menu" :key="index" 
-          :class="{'current':isActive(item.path)}">
+      <li v-for="(item, index) in menu" :key="index"  :class="{'current':item.active}">
 
         <a href="javascript:void(0)" style="text-decoration: none" @click="goState(item)"
-          class="ng-binding"><span class="p-ico2" :class="item.icon"></span>{{item.name}}</a>
+          class="ng-binding"><span class="p-ico2" :class="item.icon" ></span>{{item.name}}</a>
 
-        <div class="sub-list ng-scope" v-if="item.children">
-          <a v-for="subItem in item.children" :key="subItem.path"
-            @click="goSubState(subItem)" :class="{'current':isActive(subItem.path)}" href="javascript:void(0)"
+        <div class="sub-list ng-scope" v-if="item.children" >
+          <a v-for="subItem in item.children" :key="subItem.path" v-if="!subItem.hidden"
+            @click="goSubState(subItem)" :class="{'current':subItem.active}" href="javascript:void(0)"
             class="ng-binding ng-scope">{{subItem.name}}</a>
         </div>
       </li>
@@ -41,27 +40,43 @@
     data() {
       return {
         exportLoading: false,
-        menu:menu,
+        menu: [] ,
         listLoading: false,
         groups: [],
-        tableData: []
+        tableData: [],
+        errorImg: 'this.src="' + require('../../../../assets/images/default-photo_hash88f70f5253.jpg') + '"'
       };
     },
+    created(){
+      let path = this.$route.path;
+      this.menu = menu.map( v=>{
+        v.active= path.indexOf( v.path ) >-1
+        return v
+      })
+    },
     methods: {
+      allUnactive( path ){
+        for( let i in this.menu){
+          let item = this.menu[i]
+          if( item.path != path ){
+            item.active = false
+          }
+        }
+      },
       goState( item ){
-        if( item.children){
-          this.goSubState( item.children[0] );
+        if( item.children ){
+          item.active = !item.active;
+          if( item.active ){
+            this.allUnactive( item.path )
+          }
         }else{
           this.goSubState( item );
         }
       },
       goSubState(item){
         if(item.path == this.$route.path) return;
+        item.active = true;
         this.$router.push(item.path);
-      },
-      isActive( path ){
-        let rpath = this.$route.path;
-        return rpath.indexOf( path )> -1;
       }
     }
   }
@@ -70,3 +85,4 @@
 <style>
   @import url("./index.css");
 </style>
+

src/containers/center/components/menu/menu.js

@@ -20,14 +20,19 @@ const menu = [
      icon: 'ico-files'
    },
    {
-     path: '/center/market',
-     name: '继续教育',
-     icon: 'ico-item'
-   },
-   {
-     path: '/center/trainMarket',
-     name: '培训测试',
-     icon: 'ico-item'
+     path: '/center/markets',
+     name: '推荐课程',
+     icon: 'ico-course',
+     children: [
+       {
+         path: '/center/market',
+         name: '继续教育'
+       },
+       {
+         path: '/center/trainMarket',
+         name: '培训测试'
+       }
+     ]
    },
    {
      path: '/center/myOrder',