UserMenu.vue 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <div class="user-wrapper">
  3. <div class="content-box">
  4. <notice-icon class="action"/>
  5. <!-- <a href="https://pro.loacg.com/docs/getting-started" target="_blank">
  6. <span class="action">
  7. <a-icon type="question-circle-o"></a-icon>
  8. </span>
  9. </a> -->
  10. <!-- <notice-icon class="action"/> -->
  11. <a-dropdown>
  12. <span class="action ant-dropdown-link user-dropdown-menu">
  13. <!-- <a-avatar class="avatar" size="small" :src="avatar==''?defaultAvatar:avatar"/> -->
  14. <a-icon type="user" />
  15. <span style="margin: 0 5px;">{{ nickname }}</span>
  16. <a-icon type="down" />
  17. </span>
  18. <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
  19. <a-menu-item key="0">
  20. <router-link :to="{ name: 'changePwd' }">
  21. <a-icon type="user"/>
  22. <span>修改密码</span>
  23. </router-link>
  24. </a-menu-item>
  25. <!-- <a-menu-item key="1">
  26. <router-link :to="{ name: 'settings' }">
  27. <a-icon type="setting"/>
  28. <span>账户设置</span>
  29. </router-link>
  30. </a-menu-item>
  31. <a-menu-item key="2" disabled>
  32. <a-icon type="setting"/>
  33. <span>测试</span>
  34. </a-menu-item> -->
  35. <a-menu-divider/>
  36. <a-menu-item key="1">
  37. <a href="javascript:;" @click="handleLogout">
  38. <a-icon type="logout"/>
  39. <span>退出登录</span>
  40. </a>
  41. </a-menu-item>
  42. </a-menu>
  43. </a-dropdown>
  44. </div>
  45. </div>
  46. </template>
  47. <script>
  48. import NoticeIcon from '@/components/NoticeIcon'
  49. import { mapActions, mapGetters } from 'vuex'
  50. import defaultAvatar from '@/assets/avatar2.jpg'
  51. export default {
  52. name: 'UserMenu',
  53. components: {
  54. NoticeIcon
  55. },
  56. computed: {
  57. ...mapGetters(['nickname', 'avatar'])
  58. },
  59. data () {
  60. return {
  61. defaultAvatar: defaultAvatar
  62. }
  63. },
  64. methods: {
  65. ...mapActions(['Logout']),
  66. handleLogout () {
  67. this.$confirm({
  68. title: '提示',
  69. content: '真的要注销登录吗 ?',
  70. centered: true,
  71. onOk: () => {
  72. return this.Logout({}).then(() => {
  73. setTimeout(() => {
  74. // window.location.reload()
  75. this.$router.push({ path: '/user/login' })
  76. }, 16)
  77. }).catch(err => {
  78. this.$message.error({
  79. title: '错误',
  80. description: err.message
  81. })
  82. })
  83. },
  84. onCancel () {
  85. }
  86. })
  87. }
  88. }
  89. }
  90. </script>