Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website

qiyunfeng-create

2 天以前 5f00696dfb25bc90034448ceb634ed1ef256681a

 src/views/personalCenter/index.vue

@@ -1,196 +1,149 @@
<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, 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;
    }
    // 获取订单
    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(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>
.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>
</style>