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

<template>
  <div class="teacher_edu" v-if="isData">
    <!-- 头部导航及搜索 -->
    <Header />
    <div class="nav_title">
      <div class="inner">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          text-color="#000"
          active-text-color="#FF9900"
        >
          <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
            type="text"
            name=""
            id=""
            :placeholder="$t('Key43')"
            v-model="SeekName"
            @change="SeekName = SeekName.trim()"
            maxlength="50"
          />
          <img
            @click="gotoSeekResult"
            src="../../assets/teacherdev/Group2149.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- 主要信息列表 -->
    <div class="main" v-loading="loading">
      <div id="TEXTBOOK" v-if="textBookList">
        <Textbook v-if="textBookList.data" :classList="textBookList.data" />
      </div>
      <div id="TEACHING" v-if="teachingList">
        <Teaching v-if="teachingList.data" :classList="teachingList.data" />
      </div>
      <div id="TOOLBOOK" v-if="toolBookList">
        <ToolBook v-if="toolBookList.data" :classList="toolBookList.data" />
      </div>
    </div>
  </div>
</template>

<script>
import Header 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 { materiallist } from "@/api/api";
import { updateWordPack } from "@/utils/i18n";

export default {
  name: "teacher_edu",
  components: {
    Header,

    Teaching,
    Textbook,
    ToolBook,
  },

  data() {
    return {
      activeIndex: "TEXTBOOK",
      navName: "CLASSICAL COURSE",
      SeekName: "",
      loading: false,
      dataList: null,
      textBookList: null, //book数据
      teachingList: null, // tea数据
      toolBookList: null, //工具书
      isData: false,
    };
  },
  computed: {},
  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.SeekName = this.SeekName.trim();
        this.$router.push({
          path: "/Viewmore",
          query: { keyWord: this.SeekName },
        });
      } else {
        this.$message.warning("请输入内容");
      }
    },
    keyDownSeekData(e) {
      if (e.keyCode == 13) {
        this.gotoSeekResult();
      }
    },
    // 获取数据
    getData() {
      this.loading = true;
      materiallist({
        pageNum: 1,
        pageSize: 10,
        tagList: ["TEXTBOOK"],
        keyWord: this.keyWord,
      })
        .then((res) => {
          this.textBookList = res.data;
        })
        .catch((res) => {
          this.loading = false;
        });
      materiallist({
        pageNum: 1,
        pageSize: 10,
        tagList: ["TEACHING"],
        keyWord: this.keyWord,
      })
        .then((res) => {
          this.teachingList = res.data;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
      materiallist({
        pageNum: 1,
        pageSize: 10,
        tagList: ["TOOLBOOK"],
        keyWord: this.keyWord,
      })
        .then((res) => {
          this.toolBookList = res.data;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
  },
  async created() {
    await updateWordPack({
      word_key_list: [
        "Key5",
        "Key8",
        "Key9",
        "Key39",
        "Key43",
        "Key47",
        "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();
  },
};
</script>
<style lang="scss" scoped>
.teacher_edu {
  min-height: 100vh;
  // background: #f6f6f6;
  .seek {
    width: 300px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    input {
      width: 90%;
      border: none;
      outline: none;
      margin-left: 5px;
    }
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
  .nav_title {
    background: #fff;
    .inner {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
    }

    .el-menu-item {
      font-size: 16px;
    }
    // 取消组件默认的样式
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
  }
  .main {
    min-height: 80vh;
    background: #f6f6f6;
    padding-bottom: 50px;
  }
}
</style>
<style lang="scss">
.seek {
  .el-input__prefix {
    color: black;
  }
  .el-input__inner {
    border: none;
    height: 38px;
    padding: 0;
  }
}
</style>