| @@ -3,12 +3,19 @@ | |||||
| <div class="logoBox"> | <div class="logoBox"> | ||||
| <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | ||||
| <div class="userInfo"> | <div class="userInfo"> | ||||
| <div @click="go('/myPage')">用户名</div> | |||||
| <img | |||||
| class="userImg" | |||||
| src="../../assets/img/user center.png" | |||||
| @click="go('/myPage')" | |||||
| /> | |||||
| <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()" | |||||
| /> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -17,8 +24,8 @@ | |||||
| <script> | <script> | ||||
| import Vue from "vue"; | import Vue from "vue"; | ||||
| import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
| import { Toast } from "vant"; | |||||
| import baseUrl from "../../api/baseUrl"; | |||||
| import { Toast, Dialog } from "vant"; | |||||
| import { doLoginOut } from "../../api/login"; | |||||
| Vue.use(Toast); | Vue.use(Toast); | ||||
| export default { | export default { | ||||
| @@ -37,6 +44,27 @@ export default { | |||||
| go(url) { | go(url) { | ||||
| this.$router.push(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"); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| }, | }, | ||||
| created() {}, | created() {}, | ||||
| }; | }; | ||||
| @@ -60,14 +88,23 @@ export default { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| align-items: center; | align-items: center; | ||||
| color: #fff; | |||||
| .userImg { | |||||
| float: right; | |||||
| width: 30px; | |||||
| height: 30px; | |||||
| margin-top: 3px; | |||||
| color: #000000; | |||||
| .nickName { | |||||
| position: relative; | |||||
| top: 1px; | |||||
| font-weight: 600; | |||||
| font-size: 13px; | |||||
| margin-right: 15px; | |||||
| } | |||||
| .userModel { | |||||
| position: relative; | |||||
| top: 3px; | |||||
| margin-right: 10px; | margin-right: 10px; | ||||
| margin-left: 15px; | |||||
| .userImg { | |||||
| width: 30px; | |||||
| height: 30px; | |||||
| margin-right: 2px; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||