txyx_pc/src/pages/courseResourcesAll.vue

<template>
  <common-header />
  <div class="courseResources allPageWidthBg">
    <div class="likeBread">
      <div class="likeBread_left">{{ bigTitle }}</div>
      <div class="likeBread_right">
        <span>{{ bigTitle }}</span>-
        <span>查看更多</span>-
        <span>全部</span>
      </div>
    </div>
    <div class="widthBg">
      <div class="baseTop">
        <p>{{ bigTitle }}</p>
        <div class="searchValue">
          <input type="text" placeholder="搜索关键字" v-model="searchKey">
          <div class="searchBtn" @click="handleSearch">
            <img src="/kczy/searchIcon.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="common1280 keyFilter">
      <div class="bigTitle">年级</div>
      <div class="selectionFilter">
        <ul>
          <li v-for="(item, index) in filterData" :key="index" @click="gradeChoose(item, index)"><span
              :class="{ 'selectActive': num == index }">{{ item.grade_name }}</span></li>
        </ul>
      </div>
    </div>

    <div class="common1280 keyFilter">
      <div class="bigTitle">学科</div>
      <div class="selectionFilter">
        <ul>
          <li v-for="(item, index) in subjectList" :key="index" @click="subjectChoose(item, index)"><span
              :class="{ 'selectActive': subNum == index }">{{ item.subject_name }}</span></li>
        </ul>
      </div>
    </div>

    <!-- <div class="common1280 keyFilter">
      <div class="bigTitle">分册</div>
      <div class="selectionFilter">
        <ul>
          <li v-for="(item,index) in secFilterData" :key="index" @click="secChoose(item,index)"><span :class="{ 'selectActive':secNum==index }">{{item.name}}</span></li>
        </ul>
      </div>
    </div> -->
    <div class="common1280 keyFilter">
      <div class="bigTitle">分类</div>
      <div class="selectionFilter">
        <ul>
          <li v-for="(item, index) in secFilterData" :key="index" @click="secChoose(item, index)"><span
              :class="{ 'selectActive': secNum == index }">{{ item.kc_name }}</span></li>
        </ul>
      </div>
    </div>
    <div class="common1280 contentMain">
      <div class="allDetailCourse" v-if="courseDetail && courseDetail.length > 0">
        <div class="singlePart" v-for="(item, index) in courseDetail" :key="index" @click="toDetail(item, index)">
          <div class="courseCover"> <img :src="item.kk_img" alt=""></div>
          <p>{{ item.kk_name }}</p>
          <div class="evalStar">
            <img src="/kczy/stars.png" v-for="(item, index) in item.kk_star_num" :key="index">
          </div>
          <!-- positing -->
          <div class="dataShow">
            <div class="baseInfoPart">
              <img src="/kczy/cellectIcon.png" alt="">
              <span>{{ item.kk_fav_num }}</span>
            </div>
            <div class="baseInfoPart">
              <img src="/kczy/fingerIcon.png" alt="">
              <span>{{ item.kk_like_num }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="NOdata" v-else>
        <img src="../assets/kczy/noData4.png" alt="">
        <p class="NOdata_p">暂无数据~</p>
      </div>

    </div>
    <div class="common1280" style="position:relative;">
      <div class="paganationPage">
        <el-pagination background layout="prev, pager, next, ->" :total="totalRows" @current-change="handleChangePage" />
      </div>
    </div>
  </div>
  <common-footer />
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import CommonFooter from "@/components/CommonFooter/index.vue";
import { baseCourseList, defaultGrade, defaultSubject } from "./kczy/allApi.js";
import { user } from "@/store/user.js";
import request from '@/utils/request';
export default {
  name: 'courseResources',
  components: {
    CommonHeader,
    CommonFooter
  },
  data() {
    return {
      bigTitle: '基础课程',
      searchKey: '',
      num: 0,
      secNum: 0,
      filterData: [],
      secFilterData: [
        // {
        //   keyV: '',
        //   name:"全部"
        // },
        // {
        //   keyV: 1,
        //   name:"上册"
        // },
        // {
        //   keyV: 2,
        //   name:"下册"
        // }
      ],
      subjectList: [],
      courseDetail: [],
      page: 1,
      totalRows: '',
      prefixImg: 'https://tyyxopenapi.bozedu.top/',
      chooseGradeId: '',//选中的年级id
      chooseGradeName: '',
      chooseVolume: '',//选中的分册
      kcID: '',
      subNum: 0,
      chooseSubjectId: '',
      chooseSubjectName: '',

    }
  },
  async mounted() {
    this.kcID = this.$route.query.kcId;

    //获取上个页面的标识 判定是种课程（待串联）
    this.initGrade();
    this.initSubject();
    await this.initType();
    this.initData(this.page);
  },
  methods: {
    initType() {
      return request({
        url: '/kczy/cate/index',
        data: {
          kc_pid: this.kcID,
        }
      }).then(res => {
        if (res.code == "1") {
          this.secFilterData = res.data.page_data;
          this.chooseVolume = res.data.page_data?.[0]?.kc_id;
        }
      }).catch(error => {
        console.log(error);
      })
    },
    /**初始化年级*/
    initGrade() {
      let transObj = {
        token: user?.token,
      };
      return defaultGrade(transObj)
        .then(res => {
          if (res.code == "1") {
            this.filterData = res.data.page_data;
            let allSection = {
              area_id1: "0",
              area_id2: "0",
              area_id3: "0",
              area_id4: "0",
              create_dateline: "1662016924",
              create_user_id: "0",
              dept_id: "0",
              grade_id: "",
              grade_name: "全部",
              id: "30",
              isdelete: "0",
              modify_dateline: "0",
              modify_user_id: "0",
              sm_id: "0",
              user_id: "0",
            }
            this.filterData.unshift(allSection);
          }
        })
        .catch(error => { console.log(error) });
    },
    /**初始化学科*/
    initSubject() {
      let transObj = {
        token: user?.token,
      };
      return defaultSubject(transObj)
        .then(res => {
          if (res.code == "1") {
            this.subjectList = res.data.page_data;
            let allSection = {
              area_id1: "0",
              area_id2: "0",
              area_id3: "0",
              area_id4: "0",
              create_dateline: "0",
              create_user_id: "0",
              dept_id: "0",
              isdelete: "0",
              modify_dateline: "0",
              modify_user_id: "0",
              sm_id: "0",
              subject_id: "0",
              subject_name: "全部",
              subject_name_short: "全部",
              user_id: "0",
            };
            this.subjectList.unshift(allSection)
          }
        })
        .catch(error => { console.log(error) })
    },
    /**初始化数据*/
    initData(changePage) {
      //获取上级的标记
      let trans_kkId = this.$route.query.kkId;
      let trans_kcName = this.$route.query.kcName;
      this.kcID = this.$route.query.kcId;
      this.bigTitle = trans_kcName;
      let transObj = {
        token: user?.token,
        page: changePage,
        limit: 10,
        kc_cate_level_1: '',//一级目录的ID
        grade_id: this.chooseGradeId,
        subject_id: this.chooseSubjectId,//学科
        // team_id: this.chooseVolume,//分页 1:上册 2下册
        keyword: this.searchKey,
        kc_cate_level_1: this.kcID,//
        kk_shzt: '1',
        kc_cate_level_2: this.chooseVolume
      };
      return baseCourseList(transObj)
        .then(res => {
          if (res.code == "1") {
            this.courseDetail = res.data.page_data;
            this.totalRows = Number(res.data.total_rows);
          }
        })
        .catch(error => {
          console.log(error);
        })
    },
    //关键字搜索
    handleSearch() {
      this.initData(this.page);
    },
    //年级选择
    gradeChoose(item, index) {
      this.num = index;
      this.chooseGradeId = item.grade_id;
      this.chooseGradeName = item.grade_name;
      this.initData(this.page);
    },
    //学科选择
    subjectChoose(item, index) {
      this.subNum = index;
      this.chooseSubjectId = item.subject_id;
      this.chooseSubjectName = item.subject_name;
      this.initData(this.page);
    },
    //分册选择
    secChoose(item, index) {
      this.secNum = index;
      this.chooseVolume = item.kc_id;
      this.initData(this.page);
    },
    //移步详情页
    toDetail(row, index) {
      this.$router.push({ path: '/resourceChapter', query: { id: row.kk_id } })
    },
    //翻页
    handleChangePage(val) {
      this.page = val;
      this.initData(val);
    }

  },

}
</script>

<style scoped lang="scss">
@import "../styles/common_resource.scss";

.courseResources {
  width: 100%;

  .widthBg {
    width: 100%;
    height: 200px;
    background: url("../../src/assets/kczy/sourcebg2.png") no-repeat left top;
    background-size: 100% 100%;
  }

  .baseTop {
    width: 1280px;
    margin: 0 auto;

    p {
      font-size: 48px;
      font-weight: 600;
      text-align: center;
      color: #fff;
      padding-top: 35px;
    }

    .searchValue {
      width: 497px;
      height: 50px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid #00a3ff;
      border-radius: 8px;
      margin-top: 13px;
      overflow: hidden;
      position: relative;

      input {
        width: 100%;
        height: 100%;
        outline: 0;
        box-sizing: border-box;
        padding-left: 10px;
      }

      .searchBtn {
        width: 26px;
        height: 26px;
        background: #00a3ff;
        border-radius: 6px;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        vertical-align: middle;
        cursor: pointer;

        img {
          display: inline-block;
          text-align: center;
        }
      }
    }
  }

  .keyFilter {
    display: flex;
    height: 50px;
    line-height: 50px;
    margin: 5px auto;

    .bigTitle {
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      color: #000000;
      margin-right: 10px;
    }

    .selectionFilter {
      flex: 1;

      ul {
        display: flex;
        border-bottom: 1px dashed #e4e6e8;

        li {
          display: inline-block;
          font-size: 16px;
          font-weight: 400;
          text-align: center;
          color: #949494;
          margin-right: 4%;
          cursor: pointer;
        }
      }
    }

  }
}

.allDetailCourse {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;

  .singlePart {
    width: 19.2%;
    height: 234px;
    border-radius: 12px;
    box-shadow: 0px 10px 24px 0px rgba(153, 160, 168, 0.18);
    margin-right: 1%;
    margin-bottom: 30px;
    position: relative;
    cursor: pointer;

    .courseCover {
      height: 157px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    p {
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      color: #000000;
      box-sizing: border-box;
      padding: 0 6px;
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .evalStar {
      box-sizing: border-box;
      padding: 0 6px;
      margin-top: 5px;

      img {
        width: 18px;
        display: inline-block;
      }
    }

    .dataShow {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 13;
      width: 160px;
      height: 32px;
      background: rgba(0, 0, 0, 0.5);
      border-bottom-left-radius: 12px;
      border-top-right-radius: 12px;
      display: flex;

      .baseInfoPart {
        width: 50%;
        box-sizing: border-box;
        padding-left: 4px;

        img {
          display: inline-block;
          vertical-align: middle;
        }

        span {
          font-size: 14px;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          margin-left: 5px;
        }
      }
    }
  }

  .singlePart:nth-child(5n) {
    margin-right: 0 !important;
  }
}

.active {
  color: #000000 !important;
  font-weight: bold;
}

.selectActive {
  background: #DCF1FF;
  border-radius: 6px;
  color: #00a3ff !important;
  padding: 5px;
}

.paganationPage {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 11;

}

.contentMain {
  min-height: 500px;
}
</style>