邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

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