From b15a997e95d715c41df3a76aecbf58ec1141ab53 Mon Sep 17 00:00:00 2001
From: qiyunfeng-create <1940665526@qq.com>
Date: 星期四, 21 八月 2025 18:37:17 +0800
Subject: [PATCH] 个人中心-接口测试
---
src/views/personalCenter/index.vue | 312 +++++++++++++++++++++------------------------------
1 files changed, 130 insertions(+), 182 deletions(-)
diff --git a/src/views/personalCenter/index.vue b/src/views/personalCenter/index.vue
index a9a52d8..243c6b4 100644
--- a/src/views/personalCenter/index.vue
+++ b/src/views/personalCenter/index.vue
@@ -1,196 +1,144 @@
<template>
- <div class="contentBox">
- <div class="aboutUs">
- <div class="title">浣滆�呬笌璇昏�呮湇鍔�</div>
- <div
- v-for="(item, index) in tabSelect"
- :key="index"
- :class="tabsSelected == index ? 'selected' : ''"
- @click="
- () => {
- tabsSelected = index;
- }
- "
- >
- {{ item.name }}
- <i class="el-icon-arrow-right" style="float: right"></i>
+ <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>
- <div class="detailArea">
- <div v-if="tabsSelected != 2 && tabsSelected != 3" class="title">
- {{
- tabSelect[tabsSelected].title
- ? tabSelect[tabsSelected].title
- : tabSelect[tabsSelected].name
- }}
- <span>{{ tabSelect[tabsSelected].englishName }}</span>
- </div>
- <BasicInformation v-if="tabsSelected == 0"></BasicInformation>
- <TeacherRegister v-if="tabsSelected == 1"></TeacherRegister>
- <MyCollection v-if="tabsSelected == 2"></MyCollection>
- <OrderList v-if="tabsSelected == 3"></OrderList>
- <SampleApplication v-if="tabsSelected == 4"></SampleApplication>
- <ElectronicSampleBook v-if="tabsSelected == 5"></ElectronicSampleBook>
- <PaperSampleBook v-if="tabsSelected == 6"></PaperSampleBook>
- <AddressManagement v-if="tabsSelected == 7"></AddressManagement>
- <DownloadApplication v-if="tabsSelected == 8"></DownloadApplication>
- <AuthorContribution v-if="tabsSelected == 9"></AuthorContribution>
- </div>
- </div>
+ </page>
</template>
-<script>
-import BasicInformation from "./components/basicInformation.vue";
-import MyCollection from "./components/myCollection.vue";
-import OrderList from "./components/orderList.vue";
-import SampleApplication from "./components/sampleApplication.vue";
-import ElectronicSampleBook from "./components/electronicSampleBook.vue";
-import PaperSampleBook from "./components/paperSampleBook.vue";
-import TeacherRegister from "./components/teacherRegister";
-import AddressManagement from "./components/addressManagement.vue";
-import DownloadApplication from "./components/downloadApplication.vue";
-import AuthorContribution from "./components/authorContribution.vue";
-export default {
- name: "home",
- components: {
- BasicInformation,
- MyCollection,
- OrderList,
- SampleApplication,
- ElectronicSampleBook,
- PaperSampleBook,
- TeacherRegister,
- AddressManagement,
- DownloadApplication,
- AuthorContribution
- },
- data() {
- return {
- tabsSelected: 0,
- tabSelect: [
- {
- name: "鍩虹淇℃伅",
- englishName: "BASIC INFORMATION"
- },
- {
- name: "鏁欏笀璁よ瘉",
- title: "璁よ瘉淇℃伅",
- englishName: "AUTHENTICATION INFORMATION"
- },
- {
- name: "鎴戠殑鏀惰棌",
- englishName: "MY COLLECTION"
- },
- {
- name: "璁㈠崟鍒楄〃",
- englishName: "MY COLLECTION"
- },
- {
- name: "鏍蜂功鐢宠",
- englishName: "SAMPLE APPLICATION"
- },
- {
- name: "鐢靛瓙鏍蜂功",
- englishName: "ELECTRONIC BOOKS"
- },
- {
- name: "绾歌川鏍蜂功",
- englishName: "PAPER COPIES"
- },
- {
- name: "鍦板潃绠＄悊",
- englishName: "ADDRESS MANAGEMENT"
- },
- {
- name: "涓嬭浇鐢宠",
- englishName: "DOWNLOAD THE APPLICATION"
- },
- {
- name: "浣滆�呮姇绋�",
- englishName: "THE AUTHOR CONTRIBUTIONS"
- }
- ]
- };
- },
- created() {
- if (this.$route.query.tabsSelected) {
- this.tabsSelected = this.$route.query.tabsSelected;
+
+<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 } from 'vue'
+const router = useRouter()
+const routerVal = router.currentRoute.value
+const path = ref(routerVal.path)
+const label = ref('')
+const listMenu: any = ref([])
+onBeforeRouteUpdate(async (to, from) => {
+ path.value = to.fullPath
+})
+onMounted(() => {
+ menu.forEach((item) => {
+ if ('/' + item.path === path.value) {
+ label.value = item.label
}
- // 鑾峰彇璁㈠崟
- if (localStorage.getItem("selectedTab")) {
- this.tabsSelected = JSON.parse(localStorage.getItem("selectedTab"));
- localStorage.removeItem("selectedTab");
- }
- },
- methods: {
- changeSelected(index) {
- this.tabsSelected = index;
- }
- }
-};
+ })
+ // const userCache: any = localStorage.getItem('jesk-userInfo')
+ // const userInfo = JSON.parse(userCache)
+ // if(!userInfo){
+ // router.push({
+ // path:'/'
+ // })
+ // return false;
+ // }
+ // if (userInfo.role == 'Teacher') {
+ // const data: any = menu.filter((item) => item.path != 'class')
+ // listMenu.value = data
+ // } else {
+ const data: any = menu.filter((item) => item.path != 'course')
+ listMenu.value = data
+ // }
+})
+const goRouter = (item: any) => {
+ // if (!localStorage.getItem('jsek-token') || localStorage.getItem('jsek-token') == null) {
+ // router.push({
+ // path: '/home',
+ // query: {
+ // showLogin: '1'
+ // }
+ // })
+ // } else {
+ label.value = item.label
+ router.push({ path: item.path })
+ // }
+}
</script>
<style lang="less" scoped>
-.contentBox {
+.breadcrumbBox {
display: flex;
- justify-content: space-between;
- padding-bottom: 100px;
- margin-top: 50px;
- .aboutUs {
- width: 377px;
- height: 833px;
- font-size: 16px;
- background-color: #fff;
- .selected {
- color: #00873c;
- i {
- color: #00873c;
+ 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;
+ }
}
- }
- .title {
- font-size: 18px;
- margin: 0;
- padding: 0;
- border-top: 2px solid #00873c;
- font-weight: 700;
- text-align: center;
- background: #d8f7e6;
- color: #00873c;
- line-height: 60px;
- border-bottom: 0;
- cursor: auto;
- }
- div {
- padding: 30px 0;
- margin: 0 30px;
- // border-bottom: 1px solid #ededed;
- cursor: pointer;
- }
- :last-child {
- border-bottom: 0;
+
+ .activeItem {
+ background: linear-gradient(90deg, #019e58 0%, #144941 100%);
+ background-size: 100% 100%;
+ color: #fff;
+ svg {
+ fill: #fff;
+ }
+ }
}
}
- .detailArea {
- width: 813px;
+
+ .rightContent {
+ flex: 1;
+ overflow: auto;
+ margin-left: 15px;
background-color: #fff;
- .title {
- font-size: 18px;
- font-weight: 700;
- letter-spacing: 1.8px;
- border-top: 2px solid #008e3f;
- line-height: 36px;
- padding-left: 40px;
- background: #d8f7e6;
- line-height: 60px;
- color: #00873c;
- .splitline {
- width: 1px;
- height: 24px;
- background-color: #008e3f;
- }
- span {
- font-size: 16px;
- font-weight: 500;
- }
- }
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1