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

<template>
  <div class="lear_center">
    <!-- 头部导航及搜索 -->
    <div class="nav">
      <!-- 登录导航 -->
      <Header />
      <div class="shade"></div>
    </div>
    <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">教学</el-menu-item>
          <el-menu-item index="TEXTBOOK">教材</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="请输入内容"
          >
          </el-input>
          <img
            @click="gotoSeekResult"
            src="../../assets/learncenter/Group2149.png"
            alt=""
          />
        </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">
        <div id="COURSE">
          <Course :classList="courseList" />
        </div>
        <div id="TEXTBOOK">
          <Textbook :classList="TextbookList" />
        </div>
        <!-- <div id="LIVE LESSON">
          <Live :classList="classList" />
        </div>
        <div id="VIDEO COURSE">
          <VideoCourse :classList="classList" />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Course from "@/components/learnCenter/Course";
import Textbook from "@/components/learnCenter/Textbook";
import Live from "@/components/learnCenter/Live";
import VideoCourse from "@/components/learnCenter/VideoCourse";
import Cookies from "js-cookie";
import { cousrseAPI, TextbookAPI } from "@/api/api";
export default {
  name: "lear_center",
  components: {
    Header,
    Course,
    Textbook,
    Live,
    VideoCourse,
  },

  data() {
    return {
      seekContent: "", //搜索内容
      activeIndex: "COURSE", //默认展示精品课程
      navName: "COURSE",
      buy: false,
      classList: [
        {
          name: "Boardofdireelordsadsadasdsadsadsadsadwqdwqfregdsfasfdsafewafeawfdsfewfewfdsasdfasfd",
          buy: false,
          price: "19.9",
        },
        {
          name: "Board of direelor",
          buy: "$ 298.00",
          price: "19.9",
        },
        {
          name: "Board of direelor",
          buy: false,
          price: "19.9",
        },
        {
          name: "Board of direelor",
          buy: "$ 298.00",
          price: "19.9",
        },
        {
          name: "Board of direelor",
          buy: false,
          price: "19.9",
        },
        {
          name: "Board of direelor",
          buy: false,
          price: "19.9",
        },
        {
          name: "Board of direelor",
          buy: "$ 298.00",
          price: "19.9",
        },
      ],
      dimSeekData: [
        {
          value: "dsadqwjkldjwklqjdlkcnx",
        },
        {
          value: "dsadqwjkldjwklqjdlkcnx",
        },
        {
          value: "dsadqwjkldjwklqjdlkcnx",
        },
      ],
      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, //教材列表
      SeekName: "",
    };
  },
  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();
      }
    },
    // 搜索
    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();
      }
    },
  },
  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.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;
      });
  },
};
</script>

<style lang="scss"  scoped>
.lear_center {
  min-height: 100vh;
  background: #f6f6f6;
  .nav {
    background: #ffffff;
    height: 64px;
    position: relative;
    .shade {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      color: #fff;
      font-weight: bold;
      font-size: 18px;
      justify-content: space-around;
      align-items: center;
      .el-menu-demo {
        background: rgba(0, 0, 0, 0);
        li:hover {
          background: none;
        }
        li {
          background: none;
        }
      }
    }
  }
  .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;
    }
  }
  .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>