GCLS_Page_LC/src/views/learn-center/index.vue

<template>
  <div class="lear_center" 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="COURSE"
            ><!-- 课程 -->{{ $t('Key215') }}</el-menu-item
          >
          <el-menu-item index="TEXTBOOK">{{ $t('Key44') }}</el-menu-item>
          <!-- <el-menu-item index="LEARNRESOURCE">学习资源</el-menu-item> -->
          <!-- <el-menu-item index="LIVE LESSON">LIVE LESSON</el-menu-item>
        <el-menu-item index="VIDEO COURSE">VIDEO COURSE</el-menu-item> -->
        </el-menu>
        <div class="seek" @keydown="keyDownSeekData">
          <el-input
            v-model="SeekName"
            style="width: 300px"
            :placeholder="$t('Key46')"
            maxlength="200"
          >
          </el-input>
          <img
            @click="gotoSeekResult"
            src="../../assets/learncenter/Group2149.png"
            alt=""
            :class="[language_type == 'AR' ? 'languageAR' : '']"
          />
        </div>
      </div>
    </div>
    <!-- 主要信息列表 -->
    <div class="main" v-loading="loading">
      <!-- 轮播图 -->
      <!-- <div class="carouSel">
        <el-carousel height="360px">
          <el-carousel-item v-for="(item, i) in ImageList" :key="i">
            <el-image lazy :src="item.picture_url" alt=""> </el-image>
          </el-carousel-item>
        </el-carousel>
      </div> -->
      <div class="ClassifyList" v-if="isData">
        <div id="COURSE">
          <Course :classList="courseList" />
        </div>
        <div id="TEXTBOOK">
          <Textbook :classList="TextbookList" />
        </div>
        <!-- <div id="LEARNRESOURCE">
          <Learnresource :classList="LearnResourceList" />
        </div> -->
        <!-- <div id="LIVE LESSON">
          <Live :classList="classList" />
        </div>
        <div id="VIDEO COURSE">
          <VideoCourse :classList="classList" />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Header from '@/components/Header'
import Course from '@/components/learnCenter/Course'
import Textbook from '@/components/learnCenter/Textbook'
import Learnresource from '@/components/learnCenter/Learnresource'
import Live from '@/components/learnCenter/Live'
import VideoCourse from '@/components/learnCenter/VideoCourse'
import Cookies from 'js-cookie'
import { cousrseAPI, TextbookAPI } from '@/api/api'
import { updateWordPack } from '@/utils/i18n'
export default {
  name: 'lear_center',
  components: {
    Header,
    Course,
    Textbook,
    Learnresource,
    Live,
    VideoCourse,
  },

  data() {
    return {
      isData: false,
      seekContent: '', //搜索内容
      activeIndex: 'COURSE', //默认展示精品课程
      navName: 'COURSE',
      buy: false,
      classList: [],
      disSeekShow: false,
      loading: false,
      ImageList: [
        {
          url: '../../assets/learncenter/Rectangle 1048.png',
          name: 'Rectangle 1048',
        },
        {
          url: '../../assets/learncenter/Rectangle 1049.png',
          name: 'Rectangle 1049',
        },
        {
          url: '../../assets/learncenter/Rectangle 1051.png',
          name: 'Rectangle 1051',
        },
        {
          url: '../../assets/learncenter/Rectangle 1052.png',
          name: 'Rectangle 1052',
        },
      ], //轮播图列表 测试
      courseList: null, //课程列表
      TextbookList: null, //教材列表
      LearnResourceList: null, //学习资源
      SeekName: '',
    }
  },
  computed: {
    ...mapGetters(['language_type']),
  },
  methods: {
    // 切换导航
    handleSelect(key, keyPath) {
      this.navName = key
      this.changeNav(key)
    },
    // 锚点定位
    changeNav(index) {
      let id = index
      let dom = document.getElementById(id)
      if (dom) {
        document.getElementById(id).scrollIntoView()
      }
    },
    // 搜索
    seekList() {
      this.disSeekShow = true
    },
    // 前往搜索结果
    gotoSeekResult(item) {
      // this.$router.push({ path: "/SeekResult", query: { item } });
      if (this.SeekName == '') {
        this.$message.warning('Please enter the contents')
        return
      } else {
        this.$router.push({
          path: '/learncenter/Seekresult',
          query: {
            keycode: this.SeekName,
          },
        })
      }
    },
    keyDownSeekData(e) {
      if (e.keyCode == 13) {
        this.gotoSeekResult()
      }
    },
  },
  async created() {
    this.loading = true
    // 获取课程列表  需要从中截取出4个作为轮播图
    cousrseAPI('page_query-PageQueryCourseList', {
      page_capacity: 8,
      cur_page: 1,
      finish_status: 53,
      release_status: 1,
    })
      .then((res) => {
        this.courseList = res.course_list
        this.courseList.forEach((item, index) => {
          item.teacherName = item.teacher_name_desc.replace(/;/g, " ");
        })
        this.ImageList = res.course_list.slice(0, 4)
      })
      .catch(() => {
        this.loading = false
      })
    // 获取教材列表
    TextbookAPI('book-book_manager-PageQueryBookList', {
      page_capacity: 10,
      cur_page: 1,
      publish_status: 1,
      is_control_publish_scope: 'true',
    })
      .then((res) => {
        this.TextbookList = res.book_list
        this.loading = false
      })
      .catch(() => {
        this.loading = false
      })
    await updateWordPack({
      word_key_list: [
        'Key8',
        'Key38',
        'Key39',
        'Key44',
        'Key46',
        'Key47',
        'Key147',
        'Key215',
        'Key323',
        'Key573',
      ],
    })
    this.isData = true
  },
}
</script>

<style lang="scss" scoped>
.lear_center {
  min-height: 100vh;
  background: #f6f6f6;
  .nav_title {
    background: #fff;

    .inner {
      width: 1200px;
      margin: 0 auto;
      height: 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-menu-item {
      font-size: 16px;
    }
    // 取消组件默认的样式
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
  }
  .carouSel {
    width: 1200px;
    height: 316px;
    margin: 0 auto;
    padding-top: 24px;
    .el-image {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
    // .el-carousel__item:nth-child(2n) {
    //   background-color: #99a9bf;
    // }
    // .el-carousel__item:nth-child(2n + 1) {
    //   background-color: #d3dce6;
    // }
  }
  .seek {
    position: relative;
    img {
      width: 24px;
      position: absolute;
      right: 19px;
      top: 7px;
      cursor: pointer;
      &.languageAR {
        left: 19px;
        right: auto;
      }
    }
  }
  .main {
    background: #f6f6f6;
    padding-bottom: 50px;
    .ClassifyList {
      // margin-top: 50px;
    }
  }
}
</style>
<style lang="scss">
.seek {
  .el-input__prefix {
    color: black;
  }
}
.nav_title {
  .el-menu--horizontal > .el-menu-item {
    height: 64px;
    line-height: 64px;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    font-weight: 600;
  }
}
</style>