improvement: 教师主页点击tab更改焦点

src/router/index.js

@@ -19,31 +19,31 @@ const routes = [{
 }, {
   path: '/teacher',
   name: 'teacher',
-  redirect: '/teacher/home',
+  redirect: '/teacher/teacher-home',
   component: () => import('../views/teacher/TeacherHomeView.vue'),
   children: [{
-    path: 'home',
+    path: 'teacher-home',
     name: 'teacher-home',
     component: () => import('../views/teacher/tabs/HomeTab.vue')
   }, {
-    path: 'search',
-    name: 'search',
+    path: 'teacher-search',
+    name: 'teacher-search',
     component: () => import('../views/teacher/tabs/SearchTab.vue')
   }, {
-    path: 'add',
-    name: 'add',
+    path: 'teacher-add',
+    name: 'teacher-add',
     component: () => import('../views/teacher/tabs/AddTab.vue')
   }, {
-    path: 'personal',
-    name: 'personal',
+    path: 'teacher-personal',
+    name: 'teacher-personal',
     component: () => import('../views/teacher/tabs/PersonalTab.vue')
   }, {
-    path: 'feedback',
-    name: 'feedback',
+    path: 'teacher-feedback',
+    name: 'teacher-feedback',
     component: () => import('../views/teacher/tabs/FeedbackTab.vue')
   }, {
-    path: 'info',
-    name: 'info',
+    path: 'teacher-info',
+    name: 'teacher-info',
     component: () => import('../views/teacher/tabs/InfoTab.vue')
   }]
 }]

src/store/modules/editor.js

@@ -38,7 +38,9 @@ export default {
         focusId: newItemId,
         offset: 0
       }
-      state.slideInfo = { ...payload }
+      state.slideInfo = {
+        ...payload
+      }
     },
     [ADD_ITEM_AFTER](state, payload) {
       const index = state.items.indexOf(state.items.filter(item => item.id === payload.id)[0])
@@ -128,17 +130,11 @@ export default {
       createSlide({
         courseId: payload.courseId,
         name: payload.name
-      }).then(res => {
-        console.log(res)
-      })
+      }).then(res => {})
     },
 
     [GET_SLIDE](state, payload) {
-      getSlide(payload.id).then(res => {
-        console.log(res)
-      }).catch(err => {
-        console.log(err)
-      })
+      getSlide(payload.id).then(res => {})
     }
   }
 }

src/views/teacher/TeacherHomeView.vue

@@ -3,24 +3,54 @@
     <div class="menu-container">
       <div class="tab-container">
         <div class="tab">
-          <router-link to="home">
-            <div class="icon home">&#xe68b;</div>
+          <router-link to="teacher-home">
+            <div
+              class="icon"
+              :class="currentRouteName === 'teacher-home' ? 'active' : ''"
+            >
+              &#xe68b;
+            </div>
           </router-link>
-          <router-link to="search">
-            <div class="icon search">&#xe6a2;</div>
+          <router-link to="teacher-search">
+            <div
+              class="icon"
+              :class="currentRouteName === 'teacher-search' ? 'active' : ''"
+            >
+              &#xe6a2;
+            </div>
           </router-link>
-          <router-link to="add">
-            <div class="icon add">&#xe71b;</div>
+          <router-link to="teacher-add">
+            <div
+              class="icon"
+              :class="currentRouteName === 'teacher-add' ? 'active' : ''"
+            >
+              &#xe71b;
+            </div>
           </router-link>
-          <router-link to="personal">
-            <div class="icon personal">&#xe790;</div>
+          <router-link to="teacher-personal">
+            <div
+              class="icon"
+              :class="currentRouteName === 'teacher-personal' ? 'active' : ''"
+            >
+              &#xe790;
+            </div>
           </router-link>
-          <router-link to="feedback">
-            <div class="icon feedback">&#xe68a;</div>
+          <router-link to="teacher-feedback">
+            <div
+              class="icon"
+              :class="currentRouteName === 'teacher-feedback' ? 'active' : ''"
+            >
+              &#xe68a;
+            </div>
           </router-link>
           <div class="line"></div>
-          <router-link to="info">
-            <div class="icon info">&#xe68e;</div>
+          <router-link to="teacher-info">
+            <div
+              class="icon"
+              :class="currentRouteName === 'teacher-info' ? 'active' : ''"
+            >
+              &#xe68e;
+            </div>
           </router-link>
         </div>
       </div>
@@ -38,6 +68,13 @@
 export default {
   data() {
     return {
+      currentRouteName: this.$route.name
+    }
+  },
+  methods: {},
+  watch: {
+    $route() {
+      this.currentRouteName = this.$route.name
     }
   }
 }
@@ -100,5 +137,8 @@ $icon-hover-color: rgb(146, 171, 221);
     font-size: 34px;
     color: $icon-normal-color;
   }
+  .active {
+    color: $icon-active-color;
+  }
 }
 </style>

src/views/teacher/tabs/AddTab.vue

@@ -52,7 +52,7 @@ export default {
 <style lang="scss" scoped>
 @import './tab-common.scss';
 $input-background-color: #ebf0f5;
-$submit-button-color: #5a7fa5;
+$submit-button-color: #5485e5;
 
 .title {
   margin-bottom: 32px;
@@ -81,7 +81,7 @@ $submit-button-color: #5a7fa5;
 .select-wrapper {
   width: 100%;
   height: 40px;
-  margin-bottom: 36 px;
+  margin-bottom: 36px;
 }
 
 select,

src/views/teacher/tabs/HomeTab.vue

@@ -9,29 +9,6 @@
       <slide-list-item-vue></slide-list-item-vue>
       <slide-list-item-vue></slide-list-item-vue>
       <slide-list-item-vue></slide-list-item-vue>
-      <!-- <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue>
-      <slide-list-item-vue></slide-list-item-vue> -->
     </section>
   </div>
 </template>