QYF-GitLab1
2 天以前 9cad6a832c786989be620573b09badccfe7e3b51
src/views/personalCenter/index.vue
New file
@@ -0,0 +1,154 @@
<template>
  <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 style="margin: 5px 0;" />
    <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>
</template>
<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { menu } from './config'
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>
.homePage {
  min-width: 1220px;
  min-height: calc(100vh - 61.8%);
  background-color: #fff;
  padding-bottom: 100px;
}
.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;
    background-image: url('@/assets/images/personalCenter/Account_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    .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>