<template>
|
<page>
|
<div class="contentBox">
|
<div class="breadcrumbBox">
|
<span>位置：</span>
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item>个人中心</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ label }}</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<el-divider />
|
<div class="personalPage clear">
|
<div class="leftList fl">
|
<ul class="menu">
|
<li
|
v-for="item in listMenu"
|
:key="item.key"
|
@click="goRouter(item)"
|
:class="`/${item.path}` === path ? 'activeItem hover' : 'menuItem hover'"
|
>
|
<span
|
:style="{
|
fill: `/${item.path}` === path ? '#fff' : '#000',
|
}"
|
v-html="item.icon"
|
>
|
</span>
|
<span>{{ item.label }}</span>
|
</li>
|
</ul>
|
</div>
|
<div class="rightContent">
|
<div>
|
<!-- 让主体做子路由的显示 -->
|
<router-view />
|
</div>
|
</div>
|
</div>
|
</div>
|
</page>
|
</template>
|
|
<script setup lang="ts">
|
import { ArrowRight } from "@element-plus/icons-vue";
|
import { menu } from "./config.ts";
|
import { useRouter, onBeforeRouteUpdate } from "vue-router";
|
import { ref, onMounted, inject } from "vue";
|
const router = useRouter();
|
const routerVal = router.currentRoute.value;
|
const path = ref(routerVal.path);
|
const label = ref("");
|
const listMenu: any = ref([]);
|
const MG: any = inject("MG");
|
const config: any = inject("config");
|
onBeforeRouteUpdate(async (to, from) => {
|
path.value = to.fullPath;
|
});
|
onMounted(() => {
|
menu.forEach((item) => {
|
if ("/" + item.path === path.value) {
|
label.value = item.label;
|
}
|
});
|
const userCache: any = localStorage.getItem(config.userInfoKey);
|
const userInfo = JSON.parse(userCache);
|
if (!userInfo) {
|
router.push({
|
path: "/",
|
});
|
return false;
|
}
|
if (userInfo.role == "Teacher") {
|
const data: any = menu.filter((item) => item.path != "myClass");
|
listMenu.value = data;
|
} else {
|
const data: any = menu.filter((item) => item.path != "myCourse");
|
listMenu.value = data;
|
}
|
});
|
const goRouter = (item: any) => {
|
if (
|
!localStorage.getItem(config.tokenKey) ||
|
localStorage.getItem(config.tokenKey) == null
|
) {
|
router.push({
|
path: "/home",
|
query: {
|
showLogin: "1",
|
},
|
});
|
} else {
|
label.value = item.label;
|
router.push({ path: item.path });
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.breadcrumbBox {
|
display: flex;
|
padding: 20px;
|
}
|
|
.personalPage {
|
padding: 20px 10px;
|
display: flex;
|
|
.leftList {
|
width: 275px;
|
border-radius: 10px 10px 10px 10px;
|
background: #e1ebe3;
|
height: max-content;
|
.menu {
|
li {
|
height: 50px;
|
padding: 10px 40px;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
border-bottom: 1px solid #ffffff;
|
|
img {
|
width: 19px;
|
height: 24px;
|
}
|
|
span {
|
margin-left: 10px;
|
}
|
}
|
|
.activeItem {
|
background: linear-gradient(90deg, #019e58 0%, #144941 100%);
|
background-size: 100% 100%;
|
color: #fff;
|
svg {
|
fill: #fff;
|
}
|
}
|
}
|
}
|
|
.rightContent {
|
flex: 1;
|
overflow: auto;
|
margin-left: 15px;
|
background-color: #fff;
|
}
|
}
|
</style>
|
