邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 

129 líneas
2.9 KiB

  1. <template>
  2. <div class="pages">
  3. <div class="logoBox">
  4. <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" />
  5. <div class="userInfo">
  6. <div class="nickName" v-if="!hasToken" @click="go('/login')">登录/注册</div>
  7. <div class="nickName" v-if="hasToken" @click="go('/myPage')">我的作品</div>
  8. <div class="userModel" v-if="hasToken">
  9. <!-- <img
  10. class="userImg"
  11. src="../../assets/img/user_black.png"
  12. @click="go('/myPage')"
  13. /> -->
  14. <!-- <img
  15. class="userImg"
  16. src="../../assets/img/loginOut.png"
  17. @click="loginOut()"
  18. /> -->
  19. <img class="userImg" src="../../assets/icon/icon-loginout.png" @click="loginOut()" />
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. import Vue from 'vue';
  27. import { mapState, mapActions } from 'vuex';
  28. import { Toast, Dialog } from 'vant';
  29. import { doLoginOut } from '../../api/login';
  30. Vue.use(Toast);
  31. export default {
  32. data() {
  33. return {
  34. hasToken: null
  35. };
  36. },
  37. computed: {
  38. ...mapState({
  39. characters: state => state.publicObj.characters
  40. })
  41. },
  42. methods: {
  43. ...mapActions(['setCharacters']),
  44. go(url) {
  45. this.$router.push(url);
  46. },
  47. loginOut() {
  48. Dialog.confirm({
  49. title: '退出登录',
  50. message: '您确定要退出登录吗?'
  51. })
  52. .then(() => {
  53. this.goLoginOut();
  54. })
  55. .catch(() => {
  56. return;
  57. });
  58. },
  59. async goLoginOut() {
  60. try {
  61. const res = await doLoginOut();
  62. // this.$router.push('/login');
  63. this.$router.push('/myPage');
  64. if (this.$route.name == 'myPage') {
  65. window.location.reload();
  66. }
  67. localStorage.removeItem('AccessToken');
  68. } catch (error) {
  69. console.log(error, 'error');
  70. Toast.fail(error.message);
  71. }
  72. }
  73. },
  74. created() {
  75. this.hasToken = localStorage.getItem('AccessToken');
  76. }
  77. };
  78. </script>
  79. <style lang="scss" scoped>
  80. .pages {
  81. position: sticky;
  82. top: 0;
  83. background-color: #fff;
  84. z-index: 99;
  85. .logoBox {
  86. display: flex;
  87. justify-content: space-between;
  88. align-items: center;
  89. overflow: hidden;
  90. cursor: pointer;
  91. background-color: #fff;
  92. .logo {
  93. float: left;
  94. width: 140px;
  95. height: 40px;
  96. }
  97. .userInfo {
  98. display: flex;
  99. justify-content: space-between;
  100. align-items: center;
  101. color: #000000;
  102. .nickName {
  103. position: relative;
  104. top: 1px;
  105. font-weight: 600;
  106. font-size: 13px;
  107. margin-right: 15px;
  108. margin-top: 3px;
  109. }
  110. .userModel {
  111. position: relative;
  112. top: 3px;
  113. margin-right: 10px;
  114. .userImg {
  115. width: 24px;
  116. height: 24px;
  117. margin-right: 2px;
  118. }
  119. }
  120. }
  121. }
  122. }
  123. </style>