退出登录

src/api/common/index.js

@@ -8,4 +8,9 @@ export const sendSmsCode = (params) => {
 // 验证码登录
 export const smsLogin = (params) => {
   return http.post('/menduner/system/auth/sms-login', params)
+}
+
+// 退出登录
+export const logout = () => {
+  return http.post('/menduner/system/auth/logout')
 }

src/router/modules/remaining.js

@@ -8,6 +8,10 @@ const routeArray = [
 ]
 const items = routeArray[type]
 const remainingRouter = [
+  {
+    path: '',
+    redirect: '/home'
+  },
   {
     path: '/login',
     component: () => import('@/views/login/index'),

src/store/user.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { reactive } from 'vue'
 import { setToken, deleteToken } from '@/utils/auth'
 import { smsLogin } from '@/api/common/index'
+import { logout } from '@/api/common/index'
 
 export const userLocaleStore = defineStore('user',
   () => {
@@ -20,7 +21,8 @@ export const userLocaleStore = defineStore('user',
       })
     }
     // 退出登录
-    const userLogout = () => {
+    const userLogout = async () => {
+      await logout()
       deleteToken()
       userInfo = {}
       localStorage.removeItem('expiresTime')

src/styles/personal/navBar.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .header-login-btn {
   position: relative;
 }
@@ -146,153 +145,6 @@
   background: rgba(255, 255, 255, 0.2);
 }
 
-.user-nav .nav-resume-tools:hover .nav-resume-box {
-  display: block;
-}
-
-.user-nav .nav-resume-box {
-  display: none;
-  position: absolute;
-  top: 49px;
-  right: 0;
-  z-index: 1;
-  padding: 4px;
-  background: #ffffff;
-  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 8px;
-  border: 1px solid #ededed;
-}
-
-.user-nav .nav-resume-box ul {
-  overflow: hidden;
-}
-
-.user-nav .nav-resume-box li {
-  display: block;
-  float: left;
-  text-align: center;
-  width: 120px;
-  margin: 4px;
-  border-radius: 8px;
-}
-
-.user-nav .nav-resume-box li a {
-  border: 1px solid transparent;
-  transition: all 0.2s linear;
-  border-radius: 8px;
-}
-
-.user-nav .nav-resume-box li:hover a {
-  border: 1px solid transparent;
-  border: 1px solid rgba(0, 190, 189, 0.5);
-}
-
-.user-nav .nav-resume-box li:hover span {
-  color: #00a6a7;
-}
-
-.user-nav .header-resume-new + .nav-resume-box .resume-box-update {
-  display: block;
-}
-
-.user-nav .nav-resume-box .resume-box-update {
-  display: none;
-}
-
-.user-nav .nav-resume-box li.resume-box-boss {
-  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
-}
-
-.user-nav .nav-resume-box li.resume-box-geek {
-  background: linear-gradient(180deg, #ffe4c2 0%, rgba(255, 255, 255, 0) 100%);
-}
-
-.user-nav .nav-resume-box li.resume-box-geek a:before {
-  background-position: 0 -60px;
-}
-
-.user-nav .nav-resume-box li.resume-box-upload a:before {
-  background-position: 0 -120px;
-}
-
-.user-nav .nav-resume-box li.resume-box-update {
-  position: relative;
-  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
-}
-
-.user-nav .nav-resume-box li.resume-box-update:after {
-  content: "解析成功";
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  font-size: 12px;
-  background: rgba(0, 166, 167, 0.1);
-  display: inline-block;
-  padding: 2px 4px;
-  line-height: 16px;
-  background: #00bebd;
-  border-radius: 0px 8px 0px 8px;
-  color: #fff;
-}
-
-.user-nav .nav-resume-box li.resume-box-update a:before {
-  background-position: 0 -180px;
-}
-
-.user-nav .nav-resume-box li.resume-box-resume {
-  background: linear-gradient(180deg, #a6ffe7 0%, rgba(255, 255, 255, 0) 100%);
-}
-
-.user-nav .nav-resume-box li.resume-box-resume a:before {
-  background-position: 0 -240px;
-}
-
-.user-nav .nav-resume-box li.resume-box-upload {
-  background: linear-gradient(180deg, #a4e5ff 0%, rgba(255, 255, 255, 0) 100%);
-}
-
-.user-nav .nav-resume-box li a {
-  display: block;
-  padding: 20px 0 10px;
-}
-
-.user-nav .nav-resume-box li a:before {
-  content: " ";
-  display: block;
-  margin: 0 auto;
-  width: 60px;
-  height: 60px;
-  background: url(https://img.bosszhipin.com/static/file/2023/d1mkjebr121695198610640.png) 0 0/60px auto no-repeat;
-}
-
-.user-nav .nav-resume-box li span {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: #222222;
-  line-height: 20px;
-  margin-top: 12px;
-  transition: all 0.2s linear;
-}
-
-.user-nav .nav-resume-box li p {
-  font-size: 12px;
-  color: #999999;
-  line-height: 17px;
-  margin-top: 4px;
-}
-
-ader-img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-
-.v-btn {
-  text-transform: none;
-}
-
 .banner {
   z-index: var(--zIndex-nav) !important;
   color: #fff;

src/styles/personal/navBar.scss

@@ -126,129 +126,6 @@
   color: #fff;
   background: rgba(255, 255, 255, 0.2);
 }
-.user-nav .nav-resume-tools:hover .nav-resume-box {
-  display: block;
-}
-.user-nav .nav-resume-box {
-  display: none;
-  position: absolute;
-  top: 49px;
-  right: 0;
-  z-index: 1;
-  padding: 4px;
-  background: #ffffff;
-  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 8px;
-  border: 1px solid #ededed;
-}
-.user-nav .nav-resume-box ul {
-  overflow: hidden;
-}
-.user-nav .nav-resume-box li {
-  display: block;
-  float: left;
-  text-align: center;
-  width: 120px;
-  margin: 4px;
-  border-radius: 8px;
-}
-.user-nav .nav-resume-box li a {
-  border: 1px solid transparent;
-  transition: all 0.2s linear;
-  border-radius: 8px;
-}
-.user-nav .nav-resume-box li:hover a {
-  border: 1px solid transparent;
-  border: 1px solid rgba(0, 190, 189, 0.5);
-}
-.user-nav .nav-resume-box li:hover span {
-  color: #00a6a7;
-}
-.user-nav .header-resume-new + .nav-resume-box .resume-box-update {
-  display: block;
-}
-.user-nav .nav-resume-box .resume-box-update {
-  display: none;
-}
-.user-nav .nav-resume-box li.resume-box-boss {
-  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
-}
-.user-nav .nav-resume-box li.resume-box-geek {
-  background: linear-gradient(180deg, #ffe4c2 0%, rgba(255, 255, 255, 0) 100%);
-}
-.user-nav .nav-resume-box li.resume-box-geek a:before {
-  background-position: 0 -60px;
-}
-.user-nav .nav-resume-box li.resume-box-upload a:before {
-  background-position: 0 -120px;
-}
-.user-nav .nav-resume-box li.resume-box-update {
-  position: relative;
-  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
-}
-.user-nav .nav-resume-box li.resume-box-update:after {
-  content: "解析成功";
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  font-size: 12px;
-  background: rgba(0, 166, 167, 0.1);
-  display: inline-block;
-  padding: 2px 4px;
-  line-height: 16px;
-  background: #00bebd;
-  border-radius: 0px 8px 0px 8px;
-  color: #fff;
-}
-.user-nav .nav-resume-box li.resume-box-update a:before {
-  background-position: 0 -180px;
-}
-.user-nav .nav-resume-box li.resume-box-resume {
-  background: linear-gradient(180deg, #a6ffe7 0%, rgba(255, 255, 255, 0) 100%);
-}
-.user-nav .nav-resume-box li.resume-box-resume a:before {
-  background-position: 0 -240px;
-}
-.user-nav .nav-resume-box li.resume-box-upload {
-  background: linear-gradient(180deg, #a4e5ff 0%, rgba(255, 255, 255, 0) 100%);
-}
-.user-nav .nav-resume-box li a {
-  display: block;
-  padding: 20px 0 10px;
-}
-.user-nav .nav-resume-box li a:before {
-  content: " ";
-  display: block;
-  margin: 0 auto;
-  width: 60px;
-  height: 60px;
-  background: url(https://img.bosszhipin.com/static/file/2023/d1mkjebr121695198610640.png)
-    0 0 / 60px auto no-repeat;
-}
-.user-nav .nav-resume-box li span {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: #222222;
-  line-height: 20px;
-  margin-top: 12px;
-  transition: all 0.2s linear;
-}
-.user-nav .nav-resume-box li p {
-  font-size: 12px;
-  color: #999999;
-  line-height: 17px;
-  margin-top: 4px;
-}
-ader-img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-.v-btn {
-  text-transform: none;
-}
 .banner {
   z-index: var(--zIndex-nav) !important;
   color: #fff;
@@ -270,16 +147,6 @@ ader-img {
   max-width: 1184px;
   margin: 0 auto;
   align-items: center;
-  // &::before {
-  //   content: "";
-  //   height: 49px;
-  //   width: 726px;
-  //   position: absolute;
-  //   display: block;
-  //   left: 0 196px;
-  //   top: 0;
-  //   z-index: -1;
-  // }
 }
 .nav-logo {
   float: left;

src/views/Home/personal/components/navBar.vue

@@ -23,17 +23,16 @@
             </li>
           </ul>
         </div>
-        <div class="user-nav white--text">
-          <!-- <div class="btns">
+        <div class="user-nav white--text" v-if="!getToken()">
+          <div class="btns">
             <span class="nav-resume-tools">
               <a href="" class="link-sign-resume">我要找工作</a>
               <a href="" class="link-scan">我要招聘</a>
-              <div class="nav-resume-box"></div>
             </span>
-            <v-btn rounded color="#fff" size="small">登录</v-btn>
-          </div> -->
+            <v-btn rounded color="#fff" size="small" @click="handleLogin">登录/注册</v-btn>
+          </div>
         </div>
-        <div class="d-flex user-nav">
+        <div v-else class="d-flex user-nav">
           <span style="cursor: pointer;">消息</span>
           <v-menu open-on-hover>
             <template v-slot:activator="{ props }">
@@ -62,6 +61,8 @@
 
 <script setup>
 import { ref } from 'vue'
+import { getToken } from '@/utils/auth'
+import { userLocaleStore } from '@/store/user'
 defineOptions({ name: 'personal-navbar' })
 import Dialog from '@/components/CtDialog'
 import enterpriseRegister from '@/views/enterprise/components/register.vue'
@@ -90,12 +91,26 @@ const changeRole = () => {
   }
 }
 
+// 退出登录
+const userStore = userLocaleStore()
+const handleLogout = async () => {
+  try {
+    await userStore.userLogout()
+    router.push({ path: '/login' })
+  } catch (error) {
+    console.log(error, 'error')
+  }
+}
+
 const items = ref([
-  // { title: '个人中心', change: changeRole },
-  // { title: '消息通知', change: changeRole },
   { title: '切换为招聘者', change: changeRole },
-  { title: '退出登录', change: changeRole }
+  { title: '退出登录', change: handleLogout }
 ])
+
+const handleLogin = () => {
+  router.push({ path: '/login' })
+}
+
 </script>
 
 <style lang="scss" scoped>