|
- <template>
- <div class="pages">
- <div class="logoBox">
- <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" />
- <div class="userInfo">
- <div class="nickName" @click="go('/myPage')">用户名</div>
- <div class="userModel">
- <!-- <img
- class="userImg"
- src="../../assets/img/user_black.png"
- @click="go('/myPage')"
- /> -->
- <!-- <img
- class="userImg"
- src="../../assets/img/loginOut.png"
- @click="loginOut()"
- /> -->
- <img
- class="userImg"
- src="../../assets/icon/icon-loginout.png"
- @click="loginOut()"
- />
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import Vue from "vue";
- import { mapState, mapActions } from "vuex";
- import { Toast, Dialog } from "vant";
- import { doLoginOut } from "../../api/login";
-
- Vue.use(Toast);
- export default {
- data() {
- return {};
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters,
- }),
- },
-
- methods: {
- ...mapActions(["setCharacters"]),
-
- go(url) {
- this.$router.push(url);
- },
- loginOut() {
- Dialog.confirm({
- title: "退出登录",
- message: "您确定要退出登录吗?",
- })
- .then(() => {
- this.goLoginOut();
- })
- .catch(() => {
- return;
- });
- },
- async goLoginOut() {
- try {
- const res = await doLoginOut();
- this.$router.push("/login");
- localStorage.removeItem("AccessToken");
- } catch (error) {
- console.log(error, "error");
- Toast.fail(error.message);
- }
- },
- },
- created() {},
- };
- </script>
-
- <style lang="scss" scoped>
- .pages {
- position: sticky;
- top: 0;
- background-color: #fff;
- z-index: 99;
- .logoBox {
- display: flex;
- justify-content: space-between;
- align-items: center;
- overflow: hidden;
- cursor: pointer;
- background-color: #fff;
- .logo {
- float: left;
- width: 140px;
- height: 40px;
- }
- .userInfo {
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: #000000;
- .nickName {
- position: relative;
- top: 1px;
- font-weight: 600;
- font-size: 13px;
- margin-right: 15px;
- margin-top: 3px;
- }
- .userModel {
- position: relative;
- top: 3px;
- margin-right: 10px;
- .userImg {
- width: 24px;
- height: 24px;
- margin-right: 2px;
- }
- }
- }
- }
- }
- </style>
|