Skip to content

S
sensorConsult
Commit 1c9fa023 authored by zhanglw's avatar zhanglw
Browse files
Options

首页退出

parent 6c02c95d
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 16 deletions
src/assets/icons/svg/z_home.svg 0 → 100644
View file @ 1c9fa023
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687313313952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7881" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M975.7 33.9H48.3C20.6 33.9 2 53.4 2 82.6v731.2c0 29.3 18.5 48.8 46.3 48.8h927.3c27.8 0 46.3-19.5 46.3-48.8V82.6c0.1-29.3-18.4-48.7-46.2-48.7z m-17.4 765H65.8V97.6h892.5v701.3zM781.7 926.4H242.3c-29.5 0-49.1 12.8-49.1 31.9s19.6 31.9 49.1 31.9h539.3c29.5 0 49.1-12.8 49.1-31.9s-19.6-31.9-49-31.9z" p-id="7882"></path></svg>
\ No newline at end of file
src/assets/images/avatar.png
View replaced file @ 6c02c95d View file @ 1c9fa023
src/assets/images/avatar.png

1.82 KB | W: | H:

src/assets/images/avatar.png

1.85 KB | W: | H:

src/assets/images/avatar.png
src/assets/images/avatar.png
src/assets/images/avatar.png
src/assets/images/avatar.png
  • 2-up
  • Swipe
  • Onion skin
src/layout/components/Navbar.vue
View file @ 1c9fa023
...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device!=='mobile'">
<el-tooltip content="跳转到前台首页" effect="dark" placement="bottom">
<svg-icon icon-class="z_home" class="right-menu-item hover-effect img-svg" @click="goHome" />
</el-tooltip>
<el-tooltip content="全屏" effect="dark" placement="bottom"> <el-tooltip content="全屏" effect="dark" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
...@@ -77,6 +80,10 @@ export default { ...@@ -77,6 +80,10 @@ export default {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch('app/toggleSideBar')
}, },
goHome() {
window.open('/home')
location.reload()
},
open() { open() {
this.$confirm('确定注销并退出系统吗？', '提示', { this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
...@@ -158,5 +165,14 @@ export default { ...@@ -158,5 +165,14 @@ export default {
span{display:block;max-width:55px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;} span{display:block;max-width:55px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
} }
} }
.img-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 36px;
height: 36px;
vertical-align: 10px;
}
} }
</style> </style>
src/router/index.js
View file @ 1c9fa023
...@@ -18,8 +18,13 @@ router.beforeEach((to, from, next) => { ...@@ -18,8 +18,13 @@ router.beforeEach((to, from, next) => {
} }
NProgress.start() NProgress.start()
if (getToken()) { if (getToken()) {
// 已登录且要跳转的页面是登录页 if (to.path === '/') { // 根路由重定向到前台home页
if (to.path === '/login') { next('/home')
NProgress.done()
} else if (to.path === '/login') { // 已登录且要跳转的页面是登录页
next({ path: '/home' })
NProgress.done()
} else if (to.path === '/backlogin') { // 已登录且要跳转的页面是后台登录页
next({ path: '/backstage/dashboard' }) next({ path: '/backstage/dashboard' })
NProgress.done() NProgress.done()
} else { } else {
......
src/views/homepage/components/userLogin.vue
View file @ 1c9fa023
<template> <template>
<div class="user-login-box"> <div class="user-login-box">
<div v-if="!userObj" class="not-login" @click="login">注册/登录</div> <div v-if="!user.id" class="not-login" @click="login">注册/登录</div>
<el-dropdown v-else class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
<span>{{ user.username }}</span>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/home">
<el-dropdown-item>
个人中心
</el-dropdown-item>
</router-link>
<span style="display:block;" @click="open">
<el-dropdown-item divided>
退出登录
</el-dropdown-item>
</span>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
import Avatar from '@/assets/images/avatar.png'
export default { export default {
data() { data() {
return { return {
userObj: null, Avatar: Avatar
activatedMenu: null
} }
}, },
computed: {
...mapGetters([
'user',
'baseApi'
])
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
console.log(this.user)
}) })
}, },
methods: { methods: {
login(item) { login(item) {
this.$router.push({ path: item.url || '/login' })
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload()
})
},
open() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.logout()
})
} }
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.avatar-wrapper {
position: relative;
display: flex;
align-items: center;
padding-right: 15px;
color: #ffffff;
font-size: 15px;
&:before {
position: absolute;
right: 0;
height: auto;
width: 12px;
}
img {
height: 26px;
width: 26px;
border-radius: 4px;
margin-right: 4px;
border: 0;
}
span {
display: block;
max-width: 55px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: normal;
opacity: 0.8;
}
span:hover {
opacity: 1;
}
}
.user-login-box { .user-login-box {
padding: 1px 15px 1px; padding: 1px 15px 1px;
font-size: 20px; font-size: 20px;
...@@ -31,11 +106,13 @@ export default { ...@@ -31,11 +106,13 @@ export default {
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
line-height: 48px; line-height: 48px;
opacity: 0.6;
cursor:pointer; cursor:pointer;
user-select: none; user-select: none;
} }
.user-login-box:hover { .not-login {
opacity: 0.6;
}
.not-login:hover {
opacity: 0.85; opacity: 0.85;
} }
</style> </style>
src/views/homepage/components/userLoginV2.vue
View file @ 1c9fa023
<template> <template>
<div class="user-login-box"> <div class="user-login-box">
<div v-if="!userObj" class="not-login" @click="login">注册/登录</div> <div v-if="!user.id" class="not-login" @click="login">注册/登录</div>
<el-dropdown v-else class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
<span>{{ user.username }}</span>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/home">
<el-dropdown-item>
个人中心
</el-dropdown-item>
</router-link>
<span style="display:block;" @click="open">
<el-dropdown-item divided>
退出登录
</el-dropdown-item>
</span>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
import Avatar from '@/assets/images/avatar.png'
export default { export default {
data() { data() {
return { return {
userObj: null, Avatar: Avatar
activatedMenu: null
} }
}, },
computed: {
...mapGetters([
'user',
'baseApi'
])
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
console.log(this.user)
}) })
}, },
methods: { methods: {
login(item) { login(item) {
this.$router.push({ path: item.url || '/login' })
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload()
})
},
open() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.logout()
})
} }
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.avatar-wrapper {
position: relative;
display: flex;
align-items: center;
padding-right: 15px;
color: #000;
font-size: 15px;
&:before {
position: absolute;
right: 0;
height: auto;
width: 12px;
}
img {
height: 26px;
width: 26px;
border-radius: 4px;
margin-right: 4px;
border: 0;
}
span {
display: block;
max-width: 55px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: normal;
opacity: 0.8;
}
span:hover {
opacity: 1;
}
}
.user-login-box { .user-login-box {
padding: 1px 15px 1px; padding: 1px 15px 1px;
font-size: 20px; font-size: 20px;
...@@ -31,11 +106,13 @@ export default { ...@@ -31,11 +106,13 @@ export default {
font-weight: 400; font-weight: 400;
color: #000; color: #000;
line-height: 48px; line-height: 48px;
opacity: 0.6;
cursor:pointer; cursor:pointer;
user-select: none; user-select: none;
} }
.user-login-box:hover { .not-login {
opacity: 0.6;
}
.not-login:hover {
opacity: 0.85; opacity: 0.85;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment