139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<template>
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<span class="logo" @click="toHome" title="回到首页"></span>
|
||
</div>
|
||
<div class="header-right">
|
||
<span class="date">{{currentTime}}</span>
|
||
<span class="divide-line"> | </span>
|
||
<span class="user-img"></span>
|
||
<span class="user">您好，{{ $store.getters.userInfo.uName }}</span>
|
||
<div class="user-info-panel-setting" @click.prevent="userInfoVisible = !userInfoVisible">
|
||
<el-dropdown
|
||
trigger="click"
|
||
:visible="userInfoVisible"
|
||
@command="userInfoOpen"
|
||
>
|
||
<div class="iconfont" style="color: #fff;"><i class="el-icon-arrow-down"></i></div>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item name="logout" command="logout">{{$t('m.exit')}}</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters, mapMutations} from 'vuex'
|
||
export default {
|
||
name: 'useImg',
|
||
data () {
|
||
return {
|
||
// 当前系统时间
|
||
currentTime: '',
|
||
userInfoVisible: false
|
||
}
|
||
},
|
||
methods: {
|
||
toHome () {
|
||
this.$router.push('/home')
|
||
},
|
||
// 获取当前时间
|
||
getTime () {
|
||
this.currentTime = this.$dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
||
},
|
||
// 用户菜单栏点击
|
||
userInfoOpen (name) {
|
||
switch (name) {
|
||
case 'personal':
|
||
this.$router.push('/personal')
|
||
break
|
||
case 'logout':
|
||
this.$confirm('您确认要退出吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
confirmButtonClass: 'common-button-primary',
|
||
roundButton: true
|
||
}).then(() => {
|
||
this.userLoginOut()
|
||
}).catch(() => {})
|
||
break
|
||
}
|
||
},
|
||
// 用户退出登录
|
||
userLoginOut () {
|
||
this.$http.get('logout', {}, {
|
||
_this: this
|
||
}, res => {
|
||
this.$store.dispatch('logout')
|
||
this.$router.push('/sign_in')
|
||
}, e => {})
|
||
},
|
||
...mapMutations(['setProcess', 'setDynamicTotal'])
|
||
},
|
||
mounted () {
|
||
this.getTime()
|
||
},
|
||
computed: {
|
||
// 用户头像
|
||
userAvator () {
|
||
return this.$store.getters.userInfo.avator || require('@/assets/images/avator_default.png')
|
||
},
|
||
uName () {
|
||
return this.$store.getters.userInfo.uName
|
||
},
|
||
...mapGetters(['getDynamicTotal', 'getMenuList'])
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.header{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #fff;
|
||
.header-left{
|
||
text-align: left;
|
||
width: 50%;
|
||
.logo {
|
||
display: inline-block;
|
||
width: 160px;
|
||
height: 61px;
|
||
background: url("~@/assets/images/shangqi/home/logo2.png") no-repeat;
|
||
background-size: cover;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.header-right{
|
||
width: 49%;
|
||
text-align: right;
|
||
line-height: 61px;
|
||
height: 61px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.date{
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
}
|
||
.user-img{
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 21px;
|
||
background: url("~@/assets/images/shangqi/home/user-img.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-right: 15px;
|
||
}
|
||
.divide-line{
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
}
|
||
.user{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
</style>
|