GCLS_Page_TC/src/views/teacher-dev/index.vue

<template>
  <div v-if="isData" class="teacher_edu">
    <!-- 头部导航及搜索 -->
    <HeaderPage />
    <div class="nav_title">
      <div class="inner">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          text-color="#000"
          active-text-color="#FF9900"
          @select="handleSelect"
        >
          <!-- <el-menu-item index="TEACHINGTOOL"> 教研工具</el-menu-item> -->
          <el-menu-item index="TEXTBOOK"> <!-- 教辅资料 -->{{ $t('Key554') }} </el-menu-item>
          <el-menu-item index="TEACHING"> <!-- 教研资料 -->{{ $t('Key214') }} </el-menu-item>
          <el-menu-item index="TOOLBOOK"> <!-- 工具书 -->{{ $t('Key555') }} </el-menu-item>
        </el-menu>
        <div class="seek" @keyup="keyDownSeekData">
          <!-- 搜索课程 -->
          <el-input
            id=""
            v-model="SeekName"
            type="text"
            name=""
            :placeholder="$t('Key131')"
            maxlength="50"
            @change="SeekName = SeekName.trim()"
          />
          <img src="../../assets/teacherdev/Group2149.png" alt="" @click="gotoSeekResult" />
        </div>
      </div>
    </div>
    <!-- 主要信息列表 -->
    <div v-loading="loading" class="main">
      <div id="TEACHINGTOOL">
        <TeachingTool v-if="textAnalyseShow" />
      </div>
      <div v-if="textBookList" id="TEXTBOOK">
        <Textbook v-if="textBookList.material_list" :class-list="textBookList.material_list" />
      </div>
      <div v-if="teachingList" id="TEACHING">
        <Teaching v-if="teachingList.material_list" :class-list="teachingList.material_list" />
      </div>
      <div v-if="toolBookList" id="TOOLBOOK">
        <ToolBook v-if="toolBookList.material_list" :class-list="toolBookList.material_list" />
      </div>
    </div>
  </div>
</template>

<script>
import HeaderPage from '@/components/Header';

import Textbook from '@/components/teacher-dev/Textbook';
import Teaching from '@/components/teacher-dev/Teaching';
import ToolBook from '@/components/teacher-dev/ToolBook';
import TeachingTool from '@/components/teacher-dev/TeachingTool';

import { materiallistAll } from '@/api/api';
import { updateWordPack } from '@/utils/i18n';

export default {
  name: 'TeacherEdu',
  components: {
    HeaderPage,
    Teaching,
    Textbook,
    ToolBook,
    TeachingTool,
  },

  data() {
    return {
      activeIndex: 'TEXTBOOK',
      navName: 'CLASSICAL COURSE',
      SeekName: '',
      loading: false,
      dataList: null,
      textBookList: null, // book数据
      teachingList: null, // tea数据
      toolBookList: null, // 工具书
      isData: false,
      textAnalyseShow: true,
    };
  },
  computed: {},
  async created() {
    console.log('2024.01.11');
    // 如果是edu.blcup.com环境下就隐藏文本分析入口
    if (document.domain === 'edu.blcup.com') {
      this.textAnalyseShow = false;
    }
    await updateWordPack({
      word_key_list: ['Key5', 'Key8', 'Key9', 'Key39', 'Key47', 'Key131', 'Key214', 'Key214', 'Key554', 'Key555'],
    });
    this.isData = true;
    // 需要根据身份信息来判断是进入首页还是录入
    // if (token) {
    //   if (JSON.parse(token).popedom_code_list.indexOf(2000006) != -1) {
    //     this.$router.push("/teacherdevEntering");
    //   } else {
    //     this.$router.push({ path: "/" });
    //   }
    // }
    // this.loading = true;
    // // 验证登录拿到JSESSIONID放到cookies中后面的接口用来验证用户身份
    // VerifyLogin()
    //   .then((res) => {
    //     if (res.data?.JSESSSIONID) {
    //       Cookies.set("JSESSIONID", res.data.JSESSSIONID);
    //
    //     }
    //   })
    //   .catch((res) => {
    //     this.loading = false;
    //   });
  },
  mounted() {
    this.getData();
    window.addEventListener('scroll', () => {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 滚动条滚动的距离
      let node = document.getElementsByClassName('nav_title')[0];
      if (node && node.classList) {
        if (scrollTop > 120) {
          node.classList.add('xiding_nav');
        } else {
          node.classList.remove('xiding_nav');
        }
      }
    });
  },
  methods: {
    // 切换导航
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.navName = key;
      this.changeNav(key);
    },
    // 锚点定位
    changeNav(index) {
      let id = index;
      let dom = document.getElementById(id);
      if (dom) {
        document.getElementById(id).scrollIntoView();
      }
    },
    // 前往搜索结果
    gotoSeekResult() {
      if (this.SeekName === '') {
        this.$message.warning('请输入内容');
      } else {
        this.SeekName = this.SeekName.trim();
        this.$router.push({
          path: '/Viewmore',
          query: { keyWord: this.SeekName },
        });
      }
    },
    keyDownSeekData(e) {
      if (e.keyCode === 13) {
        this.gotoSeekResult();
      }
    },
    // 获取数据
    getData() {
      this.loading = true;
      materiallistAll({
        cur_page: 1,
        page_capacity: 10,
        tag: 'TEXTBOOK',
        name: this.keyWord,
      })
        .then((res) => {
          this.textBookList = res;
        })
        .finally(() => {
          this.loading = false;
        });
      materiallistAll({
        cur_page: 1,
        page_capacity: 10,
        tag: 'TEACHING',
        name: this.keyWord,
      })
        .then((res) => {
          this.teachingList = res;
        })
        .finally(() => {
          this.loading = false;
        });
      materiallistAll({
        cur_page: 1,
        page_capacity: 10,
        tag: 'TOOLBOOK',
        name: this.keyWord,
      })
        .then((res) => {
          this.toolBookList = res;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.teacher_edu {
  min-height: 100vh;

  // background: #f6f6f6;
  .seek {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    height: 40px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;

    input {
      width: 90%;
      margin-left: 5px;
      border: none;
      outline: none;
    }

    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }

  .nav_title {
    width: 100%;
    background: #fff;

    .inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 1200px;
      margin: 0 auto;
    }

    .el-menu-item {
      font-size: 16px;
    }

    // 取消组件默认的样式
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
  }

  .xiding_nav {
    position: fixed;
    top: 0;
    z-index: 999;
  }

  .main {
    min-height: 80vh;
    padding-bottom: 50px;
    background: #f6f6f6;
  }
}
</style>
<style lang="scss">
.seek {
  .el-input__prefix {
    color: black;
  }

  .el-input__inner {
    height: 38px;
    padding: 0;
    border: none;
  }
}

.nav_title {
  .el-menu--horizontal > .el-menu-item {
    height: 64px;
    line-height: 64px;
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    font-weight: bold !important;
  }
}
</style>