|
- <template>
- <div class="pages">
- <div class="logoBox">
- <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" />
- <div class="userInfo">
- <div class="nickName" v-if="!hasToken" @click="go('/login')">登录/注册</div>
- <div class="nickName" v-if="hasToken" @click="go('/myPage')">我的作品</div>
- <div class="userModel" v-if="hasToken">
- <!-- <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 {
- hasToken: null
- };
- },
- 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');
- this.$router.push('/myPage');
- if (this.$route.name == 'myPage') {
- window.location.reload();
- }
- localStorage.removeItem('AccessToken');
- } catch (error) {
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- }
- },
- created() {
- this.hasToken = localStorage.getItem('AccessToken');
- }
- };
- </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>
|