scocial-management-platform-frontend/src/views/main/main-navbar-user.vue

<template>
  <div class="navbar-user" @click="showUserFunc" v-click-outside="clickOutSide">
    <div class="nu-main">
      <div class="nu-l">
        <img v-if="useHeadPictureUrl" :src="useHeadPictureUrl">
        <i v-else class="smp-nav-icon-32 smp-ni32-userPic"></i>
      </div>
      <div class="nu-r">
        <div class="nu-t">{{department}}</div>
        <div class="nu-b">
          <div class="navbar-name">{{userName}}</div>
          <div class="navbar-open-btn">
            <i class="smp-nav-icon-10 smp-ni10-arrow" :class="{'on':isUserFuncOpen}"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="nu-list-wraper" v-show="isUserFuncOpen">
      <ul class="nulw-ul">
        <!-- <li class="nulw-li">
          <i class="smp-nav-icon-16 smp-ni16-person"></i>
          <span>个人信息</span>
        </li>
        <li class="nulw-li">
          <i class="smp-nav-icon-16 smp-ni16-pass"></i>
          <span>修改密码</span>
        </li> -->
        <li class="nulw-li" @click="logoutHandle">
          <i class="smp-nav-icon-16 smp-ni16-out"></i>
          <span>退出</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { clearLoginInfo } from '@/utils'
export default {
  data () {
    return {
      useHeadPictureUrl: '',
      isUserFuncOpen: false
    }
  },
  computed: {
    userName () {
      return this.$store.state.user.name
    },
    department () {
      return this.$store.state.user.organizations
    }
  },
  methods: {
    clickOutSide (e) {
      this.isUserFuncOpen = false
    },
    showUserFunc () {
      this.isUserFuncOpen = !this.isUserFuncOpen
    },
    logoutHandle () {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.post('/idaas/sso/logout').then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          clearLoginInfo()
          // console.log(this.$router)
          this.$router.replace({ name: 'login' }, (e) => {
            window.location.reload()
          })
        }).catch(() => {})
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss">
.navbar-user{

}
</style>