UserMenu.vue 2.5 KB

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