123 lines
2.5 KiB
Vue
123 lines
2.5 KiB
Vue
<template>
|
|
<div class="mine_page p0-100">
|
|
<div class="mine_l">
|
|
<router-link :to="item.path" v-for="(item, i) in list" :key="i">
|
|
<div
|
|
:class="i == index ? 'active' : ''"
|
|
@click="index = i"
|
|
style="position: relative;"
|
|
>
|
|
{{ item.name }}
|
|
<span
|
|
v-if="item.flag"
|
|
style="position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: red;
|
|
border-radius: 50%;
|
|
top: 15px;
|
|
margin-left: 10px;"
|
|
></span>
|
|
</div>
|
|
</router-link>
|
|
<div @click="logout">退出登录</div>
|
|
</div>
|
|
<div class="mine_r">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getMsgCount } from '@/api/home/news';
|
|
export default {
|
|
data() {
|
|
return {
|
|
index: 0,
|
|
list: [
|
|
{
|
|
path: '/mine/info',
|
|
name: '基本信息'
|
|
},
|
|
{
|
|
path: '/mine/account',
|
|
name: '账户安全'
|
|
},
|
|
{
|
|
path: '/mine/ollection',
|
|
name: '我的收藏'
|
|
},
|
|
{
|
|
path: '/mine/news',
|
|
name: '消息通知',
|
|
flag: null
|
|
}
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
$route(newVal, oldVal) {
|
|
if (newVal.path === '/mine/info') {
|
|
this.index = 0;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async logout() {
|
|
this.$confirm('确定退出账号吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
location.href = '/';
|
|
});
|
|
});
|
|
}
|
|
},
|
|
created() {
|
|
getMsgCount().then(({ data }) => {
|
|
this.list[3].flag = data;
|
|
});
|
|
let { path } = this.$route;
|
|
this.index = this.list.findIndex(item => {
|
|
return item.path == path;
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.mine_page {
|
|
display: flex;
|
|
.mine_l {
|
|
width: 310px;
|
|
max-height: 340px;
|
|
background-color: #f8f8f8;
|
|
margin-right: 10px;
|
|
border-radius: 6px;
|
|
padding: 20px 0;
|
|
div {
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
}
|
|
// div:hover {
|
|
// color: #fff;
|
|
// font-weight: bold;
|
|
// background-color: #3394ff;
|
|
// }
|
|
.active {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
background-color: #3394ff;
|
|
}
|
|
}
|
|
.mine_r {
|
|
flex: 1;
|
|
padding: 30px;
|
|
background-color: #f8f8f8;
|
|
}
|
|
}
|
|
</style>
|