菜单选中

src/layout/personal/navBar.vue

@@ -27,7 +27,7 @@
               <template v-else>
                 <span 
                   class="cursor-pointer menuList-first-title"
-                  :class="{'active-route' : route.path === val.path || route.path.includes(val.path)}" 
+                  :class="{'active-route': menuActive(val)}"
                   @click.stop="handleClick(val, true)">
                   {{ val.title }}
                 </span>
@@ -44,18 +44,17 @@
           <!-- 头像用户名 -->
           <div class="d-flex align-center color-333" v-if="getToken()">
             <span class="cursor-pointer mr-5 commonHover" @click="handleSwitch">我要招聘</span>
-            <span class="cursor-pointer commonHover" :class="{'active-route': routeActive === 6}" @click="router.push({ path: paths[6] })">
-              <span class="mr-3">
+            <span class="cursor-pointer commonHover" @click="router.push({ path: paths[6] })">
+              <span>
                 现金：{{ userAccount?.balance && userAccount?.balance > 0 ? (userAccount?.balance / 100.0).toFixed(2) : 0 }}
                 <span style="color: #00000000;">1</span>
                 积分：{{ userAccount?.point || 0 }}
               </span>
-              <span class="mr-3 ml-3"></span>
             </span>
 
             <v-menu open-on-hover>
               <template v-slot:activator="{ props }">
-                <div class="d-flex ml-3 align-center cursor-pointer" :class="{'active-route': routeActive === 5, 'vipBox': vip}" v-bind="props" @click="handleToPersonalCenter">
+                <div class="d-flex ml-8 align-center cursor-pointer" :class="{'active-route': route.path.includes('/recruit/personal/personalCenter'), 'vipBox': vip}" v-bind="props" @click="handleToPersonalCenter">
                   <div style="position: relative;">
                     <v-avatar class="avatar">
                       <v-img alt="" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" ></v-img>
@@ -66,7 +65,6 @@
                   </div>
                   <div class="ml-3 commonHover userName">
                     {{ baseInfo?.name || userInfo.phone }}
-                    <v-icon :color="routeActive === 5 ? '#008979' : '#333'" size="30">mdi-menu-down</v-icon>
                   </div>
                 </div>
               </template>
@@ -106,7 +104,7 @@
               </v-list-item>
             </v-list>
           </v-menu> -->
-          <div class="d-flex align-center" v-if="showBall">
+          <div class="d-flex align-center ml-3" v-if="showBall">
             <message-notification v-if="showBall" :path="paths[3]" class="commonHover2" :class="{'active-route': routeActive === 3}"></message-notification>
           </div>
         </div>
@@ -174,9 +172,8 @@ const paths = [ // 有选中样式-路由列表
 ]
 
 const navList = ref([
-  { title: '门墩儿招聘', path: '/recruit/personal/recommend' },
+  { title: '门墩儿招聘', path: '/recruit/personal/recommend', dealActive: true },
   { title: '门墩儿猎头', path: '/headhunting' },
-  // { title: '门墩儿商城', path: '/pointsExchange' },
   { title: '门墩儿商城', path: '/pointsExchange', isEdit: true },
   { title: '火苗儿校企' },
   { title: '了解门墩儿', path: '/about' }
@@ -200,6 +197,18 @@ const routeActive = computed(() => {
   return index
 })
 
+// 左侧菜单选中状态
+const position = [
+  '/recruit/personal/recommend',
+  '/recruit/personal/position',
+  '/recruit/personal/company',
+  '/recruit/personal/company/details',
+  '/recruit/personal/position/details'
+]
+const menuActive = computed(() => (val)=> {
+  return val.dealActive ? position.indexOf(route.path) !== -1 : (route.path === val.path || route.path.includes(val.path))
+})
+
 const vip = computed(() => {
   return new Date().getTime() < userStore.userInfo?.vipExpireDate
 })