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

<template>
  <!-- 搜索结果 -->
  <div class="SeekResult" v-loading="loading" v-if="isData">
    <!-- 头部导航及搜索 -->
    <Header />
    <HeaderOne
      :changeKeycode="changeKeycode"
      :keycode="keycode"
      :title="$t('Key248')"
      :classilfyID="classilfyID"
    />
    <!-- <div class="top">
      <div class="title">SEARCH RESULT</div>
    </div> -->
    <div class="main">
      <!-- 搜索结果分类 -->
      <div class="classilfy">
        <div
          v-for="(item, i) in classilfyList"
          :key="i + item"
          @click="cutClassilfy(item, i)"
          :class="classilfyIndex == i ? 'sele' : ''"
        >
          {{ item }}
        </div>
      </div>
      <template v-if="dataList && dataList.total_count !== 0">
        <div class="class_list" v-if="dataList">
          <!-- 根据课程和教材进行分别传值 -->
          <component
            :is="getCurrentQuestionView"
            :classList="
              classilfyIndex == 0 ? dataList.course_list : dataList.book_list
            "
            type="list"
          ></component>
          <!-- <ClassicalCourse
          :classList="
            classilfyIndex == 0 ? dataList.course_list : dataList.book_list
          "
          type="1"
        /> -->
          <div class="paging">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="pageSizes"
              layout="prev, pager, next"
              :current-page="pageNum"
              :page-size="pageSize"
              :total="dataList.total_count"
            >
            </el-pagination>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="nomore">
          <img src="../../assets/learncenter/noSeekResult.png" alt="" />
          <p class="p1">
            <!-- 抱歉，我找不到相关的内容。 -->
            {{ $t('Key547') }}
          </p>
          <!-- <p class="p2">Try the following keywords</p> -->
          <!-- <div class="keywords">
          <span>live lesson</span>
          <span>live lesson</span>
          <span>live lesson</span>
        </div> -->
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { cousrseAPI, TextbookAPI } from '@/api/api'

import Header from '@/components/Header'
import HeaderOne from '@/components/learnCenter/HeaderOne'
import ClassicalCourse from '@/components/learnCenter/ClassicalCourse'
import Course from '@/components/learnCenter/Course'
import Textbook from '@/components/learnCenter/Textbook'
import { updateWordPack } from '@/utils/i18n'
export default {
  props: [],
  components: {
    Header,
    HeaderOne,
    ClassicalCourse,
    Course,
    Textbook,
  },
  data() {
    return {
      CourseList: null, //课程列表
      TextList: null, //教材列表
      dataList: null, //展示列表
      seekContent: '', //搜索内容
      gotoPage: '',
      keycode: '',
      pageNum: 1,
      pageSize: 8,
      targetPage: 1,
      loading: false,
      classilfyList: [],
      classilfyIndex: 0,
      classilfyID: null,
      isData: false,
      pageSizes: [8, 16, 32, 64],
      pageSizes1: [8, 16, 32, 64],
      pageSizes2: [10, 20, 30, 40],
    }
  },
  computed: {
    getCurrentQuestionView() {
      switch (this.classilfyIndex) {
        case 0:
          return Course
        case 1:
          return Textbook
        default:
          return null
      }
    },
  },
  watch: {
    classilfyIndex(newval, oldval) {
      if (newval != oldval) {
        if (newval == 0) {
          this.pageNum = 1
          this.pageSizes = this.pageSizes1
          this.getData('课程')
        } else if (newval == 1) {
          this.pageNum = 1
          this.pageSizes = this.pageSizes2
          this.getData('教材')
        }
      }
    },
  },
  methods: {
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      if (this.classilfyIndex == 0) {
        this.getData('课程')
      } else if (this.classilfyIndex == 1) {
        this.getData('教材')
      }
    },
    // 跳页
    handleCurrentChange(val) {
      this.pageNum = val
      if (this.classilfyIndex == 0) {
        this.getData('课程')
      } else if (this.classilfyIndex == 1) {
        this.getData('教材')
      }
    },
    // 切换分类
    cutClassilfy(item, i) {
      this.classilfyIndex = i
    },
    // 获取子组件传过来的keycode进行查询
    changeKeycode(val) {
      this.keycode = val
      if (this.classilfyIndex == 0) {
        this.getData('课程')
      } else if (this.classilfyIndex == 1) {
        this.getData('教材')
      }
    },
    // 输入目标页 并跳到目标页
    toPageChange() {
      this.gotoPage = this.gotoPage.replace(/[^\d]/g, '') //使用空字符串去替换非数字的字符
      if (this.gotoPage > Math.ceil(this.CourseList.total / 8)) {
        return
      } else if (this.gotoPage != this.targetPage) {
        this.targetPage = this.gotoPage * 1
        this.pageNum = this.gotoPage * 1
        if (this.classilfyIndex == 0) {
          this.getData('课程')
        } else if (this.classilfyIndex == 1) {
          this.getData('教材')
        }
      }
    },
    // 获取数据
    getData(val) {
      this.loading = true
      if (val == '课程') {
        // 获取课程列表
        cousrseAPI('page_query-PageQueryCourseList', {
          page_capacity: this.pageSize,
          cur_page: this.pageNum,
          finish_status: 53,
          release_status: 1,
          name: this.keycode,
        }).then((res) => {
          this.dataList = res
          this.dataList.course_list.forEach((item, index) => {
            let teacher_list = [
              {
                teacher_name: '张仪',
              },
              {
                teacher_name: '吴先文',
              },
              {
                teacher_name: '韦所所',
              },
              {
                teacher_name: '罗蒙',
              },
            ]
            item.teacherName = teacher_list
              .map(function(obj, index) {
                return obj.teacher_name
              })
              .join(' ')
          })
          this.CourseList = res
          this.loading = false
        })
      } else {
        TextbookAPI('book-book_manager-PageQueryBookList', {
          cur_page: this.pageNum,
          page_capacity: this.pageSize == 8 ? this.pageSize + 2 : this.pageSize,
          name: this.keycode,
          publish_status: 1,
          is_control_publish_scope: 'true',
        }).then((res) => {
          this.TextList = res
          if (val == '教材') {
            this.dataList = null
            this.dataList = this.TextList
            this.loading = false
          }
        })
      }
    },
  },
  async created() {
    this.keycode = this.$route.query.keycode
    this.classilfyID = this.$route.query.id
    // classilfyIndex
    // if (this.$route.query.id == "COURSE") {
    this.classilfyIndex = 0
    this.getData('课程')
    // } else {
    //   this.getData("教材");
    //   this.classilfyIndex = 1;
    // }
    await updateWordPack({
      word_key_list: [
        'Key8',
        'Key38',
        'Key39',
        'Key573',
        'Key44',
        'Key215',
        'Key248',
        'Key323',
        'Key547',
      ],
    })
    this.isData = true
    this.classilfyList = [this.$t('Key215'), this.$t('Key44')]
  },
}
</script>

<style lang="scss" scoped>
.SeekResult {
  min-height: 100vh;
  background: #f6f6f6;
  .top {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .title {
      margin-top: 36px;
      font-weight: bold;
      font-size: 30px;
    }
    .title2 {
      margin-top: 36px;

      font-weight: bold;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.5);
      span {
        color: black;
      }
    }
    .more {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.5);
      margin-right: 40px;
    }
  }
  .main {
    min-height: 568px;
    padding-top: 24px;
    background: #f6f6f6;
    padding-bottom: 20px;
    .classilfy {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      margin-top: 16px;
      margin-bottom: 16px;
      > div {
        min-width: 52px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 0 10px;
      }
      .sele {
        background: #ff9900;
        border-radius: 53px;
        color: white;
      }
    }
  }
  .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;
    }
  }
  .nomore {
    margin-top: 80px;
    text-align: center;
    .p1 {
      font-weight: 600;
      font-size: 32px;
      color: #2c2c2c;
      margin-top: 20px;
    }
    .p2 {
      font-size: 28px;
      color: #2c2c2c;
      margin-top: 20px;
    }
    .keywords {
      span {
        display: inline-block;
        // width: 129px;
        // height: 55px;
        padding: 16px;
        background: rgba(44, 44, 44, 0.1);
        border-radius: 31px;
        color: rgba(44, 44, 44, 0.5);
        font-size: 18px;
        // line-height: 55px;
        margin: 20px 20px 20px 20px;
        cursor: pointer;
      }
    }
  }
}
</style>