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

<template>
  <div class="teacher_edu">
    <!-- 头部导航及搜索 -->
    <Header />

    <div>
      <HeaderOne :title="headerOneTitle" />
    </div>
    <!-- 课程列表 -->
    <div class="main" v-if="CourseList" v-loading="loading">
      <div>
        <component
          :is="getCurrentQuestionView"
          :classList="
            navName == 'COURSE' ? CourseList.course_list : CourseList.book_list
          "
          type="list"
        ></component>
      </div>
      <div class="paging" v-if="CourseList">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="prev, pager, next,total, sizes,jumper"
          :current-page="pageNum"
          :page-size="pageSize"
          :total="CourseList.total_count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Course from "@/components/learnCenter/Course";
import Textbook from "@/components/learnCenter/Textbook";

import { cousrseAPI, TextbookAPI } from "@/api/api";
import HeaderOne from "@/components/learnCenter/HeaderOne";
import { updateWordPack } from "@/utils/i18n";

export default {
  name: "teacher_edu",
  components: {
    Header,
    Course,
    Textbook,
    HeaderOne,
  },
  data() {
    return {
      seekContent: "", //搜索内容
      navName: null,
      CourseList: null,
      targetPage: 1,
      gotoPage: null,
      pageNum: 1,
      pageSize: 8,
      loading: false,
      headerOneTitle: "",
    };
  },
  computed: {
    getCurrentQuestionView() {
      switch (this.navName) {
        case "COURSE":
          return Course;
        case "TEXTBOOK":
          return Textbook;
        default:
          return null;
      }
    },
  },
  watch: {
    // gotoPage(newval, oldval) {
    //   if (newval > Math.ceil(CourseList.total / 20)) {
    //     return;
    //   } else if (newval != this.targetPage) {
    //     this.targetPage = newval;
    //     this.pageNum = newval;
    //     this.getData(newval * 1);
    //   }
    // },
  },
  methods: {
    // 切换导航
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.navName = key;
    },
    // 搜索
    seekList() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getData();
    },
    toPageChange() {
      this.gotoPage = this.gotoPage.replace(/[^\d]/g, ""); //使用空字符串去替换非数字的字符
      if (this.gotoPage > Math.ceil(this.CourseList.total_count / 8)) {
        return;
      } else if (this.gotoPage != this.targetPage) {
        this.targetPage = this.gotoPage * 1;
        this.pageNum = this.gotoPage * 1;
        this.getData();
      }
    },
    // 获取数据
    getData(val) {
      this.loading = true;
      if (this.navName == "COURSE") {
        // 获取课程列表
        cousrseAPI("page_query-PageQueryCourseList", {
          page_capacity: this.pageSize,
          cur_page: this.pageNum,
          finish_status: 53,
          release_status: 1,
        }).then((res) => {
          this.CourseList = res;
          this.loading = false;
        });
      }
      if (this.navName == "TEXTBOOK") {
        TextbookAPI("book-book_manager-PageQueryBookList", {
          page_capacity: this.pageSize + 2,
          cur_page: this.pageNum,
          publish_status: 1,
          is_control_publish_scope: "true",
        }).then((res) => {
          this.CourseList = res;
          this.loading = false;
        });
      }
    },
  },
  async created() {
    this.navName = this.$route.query.id;
    await updateWordPack({
      word_key_list: [
        "Key8",
        "Key38",
        "Key39",
        "Key573",
        "Key44",
        "Key46",
        "Key323",
        "Key215",
      ],
    });
    if (this.navName == "COURSE") {
      this.headerOneTitle = this.$t("Key215");
    }
    if (this.navName == "TEXTBOOK") {
      this.headerOneTitle = this.$t("Key44");
    }
    this.getData();
  },
};
</script>
<style lang="scss"  scoped>
.teacher_edu {
  min-height: 100vh;
  background: #f6f6f6;
  .main {
    min-height: 100%;
    padding-top: 52px;
    background: #f6f6f6;
    padding-bottom: 20px;
  }
  .paging {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    color: darkgrey;
    padding: 32px 0;
    .number {
      color: black;
    }
    span {
      margin-left: 10px;
    }
    .gotoPage {
      width: 40px;
      text-align: center;
    }
  }
}
</style>
<style lang="scss">
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #ff9900;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background: #fff;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  font-size: 18px;
  color: #2c2c2c;
}
.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  height: 32px;
  line-height: 32px;
}
</style>