|
|
@@ -3,18 +3,19 @@
|
|
|
<div class="top">
|
|
|
<div class="title">CocoClass后台管理</div>
|
|
|
<div class="person">
|
|
|
- <div class="person_name">{{ userinfo ? userinfo.username : '' }}</div>
|
|
|
+ <div class="person_name">{{ userinfo ? userinfo.username : "" }}</div>
|
|
|
+ <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="container">
|
|
|
<div class="left">
|
|
|
<ul>
|
|
|
- <router-link class="menu_left" to="/user-list"
|
|
|
- ><i class="el-icon-s-custom"></i>账号列表</router-link
|
|
|
- >
|
|
|
- <router-link class="menu_left" to="/user-examine"
|
|
|
- ><i class="el-icon-edit"></i>账号审核</router-link
|
|
|
- >
|
|
|
+ <router-link class="menu_left" to="/user-list">
|
|
|
+ <i class="el-icon-s-custom"></i>账号列表
|
|
|
+ </router-link>
|
|
|
+ <router-link class="menu_left" to="/user-examine">
|
|
|
+ <i class="el-icon-edit"></i>账号审核
|
|
|
+ </router-link>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="table-container">
|
|
|
@@ -25,22 +26,46 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
+import { mapGetters, mapActions } from 'vuex';
|
|
|
+import { loginOut } from '@/api/user';
|
|
|
|
|
|
export default {
|
|
|
name: "HomeView",
|
|
|
computed: {
|
|
|
...mapGetters(['userinfo']),
|
|
|
},
|
|
|
- data() {
|
|
|
- return {};
|
|
|
+ methods: {
|
|
|
+ ...mapActions({
|
|
|
+ logout: 'user/logout'
|
|
|
+ }),
|
|
|
+ async handleLogout() {
|
|
|
+ this.$confirm('确定退出吗', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(async () => {
|
|
|
+ loginOut()
|
|
|
+ .then(async () => {
|
|
|
+ this.$message({
|
|
|
+ message: '退出成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ await this.logout();
|
|
|
+ this.$router.push('/login');
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ // 取消操作
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
.body {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -62,22 +87,24 @@ export default {
|
|
|
}
|
|
|
.person {
|
|
|
margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.person > .person_name {
|
|
|
font-size: 15px;
|
|
|
color: black;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
-.container{
|
|
|
+.container {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
height: calc(100% - 50px);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.table-container {
|
|
|
- width: calc(100% - 180px);
|
|
|
- overflow: hidden;
|
|
|
- height: 100%;
|
|
|
+ width: calc(100% - 180px);
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.left {
|
|
|
width: 180px;
|
|
|
@@ -92,7 +119,6 @@ export default {
|
|
|
width: 100%;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
-
|
|
|
.menu_left {
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
@@ -104,7 +130,6 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
-
|
|
|
.router-link-active {
|
|
|
background-color: #3d67bc;
|
|
|
color: rgb(255, 255, 255);
|
|
|
@@ -113,4 +138,4 @@ export default {
|
|
|
background-color: #3d67bc;
|
|
|
color: rgb(255, 255, 255);
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
SanHQin