feat: 完成精品课程专区的内容

src/api/phase2/index.js

@@ -53,6 +53,14 @@ const courselist=function (data){
 const qualitylist=function (data){
   return httpAjax.post(baseURL,'/quality/home/qualityItem',data);
 }
+// 精品课分页查询
+export const qualityPageList=function (data){
+  return httpAjax.post(baseURL,'/quality/home/qualityPages',data);
+}
+// 课程精品课标记时间年份列表
+export const qualityCourseTimeMark=function (){
+  return httpAjax.post(baseURL,'/quality/manage/createYearList',{});
+}
 /**
  * 首页新课程推荐列表
  */
@@ -68,5 +76,6 @@ export default {
   courselist,
   newCases,
   getRecommendList,
-  qualitylist
+  qualitylist,
+  qualityPageList
 }

src/components/PortalHeader.vue

@@ -13,9 +13,9 @@
               </router-link>
             </div>
             <div class="top-nav" :style="{color:textColor}" :class="current == 'course' ? activeNav : ''">
-              <router-link to="/course">课程
+              <a @click="handleChangeCourse">课程
                 <div :class="current == 'course' ? 'nav-bottbor' : ''"></div>
-              </router-link>
+              </a>
             </div>
             <div class="top-nav" :style="{color:textColor}" :class="current == 'case' ? activeNav : ''">
               <router-link to="/case">案例
@@ -214,6 +214,12 @@ export default {
     //this.loadPopupConfig();
   },
   methods: {
+    handleChangeCourse() {
+      const paths = ["/course","/qualityCourse"]
+      // 如果是 课程 和 精品课程， 那么就不再重定向
+      const needReload = paths.findIndex(e=> e === this.$route.path) === -1
+      if (needReload) this.$router.push({path: paths[0]})
+    },
 
     setCurIdentity(iden){
         this.$store.dispatch('SetCurIdentity',iden);

src/views/portal/course/qualityCourse.vue

@@ -71,23 +71,32 @@
           <!-- 内容导航 -->
           <div class="topNav" v-if="!newData">
             <div class="search-div nav" style="height: 100px;flex: 1;">
-              <div @click="handleTypeAllClick(1)" class="option-item" :class="{ 'option-active': ctypeTagAll }">
-                <a>全部</a>
-                <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
-              </div>
               <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
-                :class="{ 'option-active': ctypeList[0].checked }">
+                   :class="{ 'option-active': ctypeList[0].checked }">
-                <a>内部专享</a>
+                <a>全部</a>
                 <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
               </div>
+
               <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
                 :class="{ 'option-active': ctypeList[1].checked }">
-                <a>外部精选</a>
+                <a>内部专享</a>
                 <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
               </div>
-              <div style="display: flex;justify-content: space-between;">
+              <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
-                <el-input placeholder="请输入关键字" v-model="keyword" @input="handleInput" clearable
+                :class="{ 'option-active': ctypeList[2].checked }">
-                  style="width: 300px;"></el-input>
+                <a>外部精选</a>
+                <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
+              </div>
+              <div style="display: flex;justify-content: space-between; align-items: center">
+                <span>请选择年份</span>
+                <el-select v-model="yearChosen" multiple>
+                  <el-option
+                    v-for="year in years"
+                    :key="year"
+                    :label="year"
+                    :value="year">
+                  </el-option>
+                </el-select>
             </div>
 
             </div>
@@ -111,13 +120,13 @@
           <div class="xcourse-list" style="background-color: #fff;border-radius: 8px;padding:0 25px;">
             <div class="order-div" v-if="!newData">
               <span class="quyer-tag">
-                <el-button type="text" class="order-class" @click="orderChange('studys')"
+                <el-button type="text" class="order-class" @click="orderChange('DEFAULT')"
                   :class="{ actice: course.orderField == 'studys' }">全部课程</el-button>
-                <el-button type="text" class="order-class" @click="orderChange('studys')"
+                <el-button type="text" class="order-class" @click="orderChange('HOT')"
                   :class="{ actice: course.orderField == 'studys1' }">最热</el-button>
-                <el-button type="text" class="order-class" @click="orderChange('publishTime')"
+                <el-button type="text" class="order-class" @click="orderChange('NEW')"
                   :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
-                <el-button type="text" class="order-class" @click="orderChange('score')"
+                <el-button type="text" class="order-class" @click="orderChange('GOOD')"
                   :class="{ actice: course.orderField == 'score' }">好评率</el-button>
               </span>
               <span class="order-count">
@@ -158,14 +167,14 @@
                         </el-tooltip>
                       </div>
                       <div class="course-info-user">
-                        <span class="course-info-studys">{{ formatNum(cinfo.studies) }}人学习</span>
+                        <span class="course-info-studys">{{ formatNum(cinfo.studyNum) }}人学习</span>
                       </div>
                       <div class="course-info-score">
                         <div style="display: flex;">
                           <interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false"
                             :praises="false" :shares="false" :views="false"></interactBar>
-                          <div v-if="cinfo.score">
+                          <div v-if="Number(cinfo.hasCollect)">
-                            <span class="course-score-value">{{ toScore(cinfo.score) }}分</span>
+                            <span class="course-score-value">{{ toScore(cinfo.courseScore) }}分</span>
                           </div>
                           <div v-else class="course-score-no">未评分</div>
                         </div>
@@ -207,7 +216,7 @@
                 <h5>暂无课程，请优先学习其它课程吧～</h5>
               </span>
               <div v-if="courseList.length > 0">
-                <pagination :size="course.pageSize" :total="count" :page="course.pageIndex"
+                <pagination :size="course.pageSize" :total="Number(count)" :page="course.pageIndex"
                   layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
               </div>
             </div>
@@ -271,14 +280,10 @@ import portalFooter from "@/components/PortalFooter.vue";
 import portalFloatTools from "@/components/PortalFloatTools.vue";
 import authorInfo from "@/components/Portal/authorInfo.vue";
 import courseItem from "@/components/Portal/course/courseItem.vue";
-import apiCoursePortal from "@/api/modules/coursePortal.js";
 import apiCourseStudy from "@/api/modules/courseStudy.js";
 import courseForm from "@/components/Course/courseForm.vue";
 import apiType from "@/api/modules/type.js";
 import apiCourse from "@/api/modules/coursePortal.js";
-import apiOldCourse from "@/api/boe/course.js";
-import apiTeacher from "@/api/modules/teacher.js";
-import apiUser from "@/api/system/user.js";
 import scene from "@/api/modules/scene.js";
 import apiUserbasic from "@/api/boe/userbasic.js";
 import interactBar from "@/components/Portal/interactBar.vue";
@@ -287,6 +292,7 @@ import { courseType, getType, toScore, formatDate, formatUserNumber, formatDateB
 import { deepClone, param } from "../../../utils";
 import apiSearchterm from "@/api/modules/searchterm.js";
 import apiPlace from "@/api/phase2/place.js"
+import {qualityCourseTimeMark, qualityPageList} from "@/api/phase2"
 export default {
   name: "index",
   components: {
@@ -387,6 +393,8 @@ export default {
   },
   data() {
     return {
+      yearChosen: [],
+      years: [],
       newData: false,//线上品牌系列隐藏
       navTitle: [],
       // 设置高亮
@@ -394,9 +402,9 @@ export default {
       count: 0,//分页总条条数
       showUClass: false,
       ctypeList: [
-        { type: 1, id: 20, name: '录播课', checked: false },
+        { type: 1, id: 0, name: '全部', checked: true },
-        { type: 1, id: 30, name: '线下课', checked: false },
+        { type: 1, id: 1, name: '内部专享', checked: false },
-        { type: 1, id: 40, name: '学习项目', checked: false },
+        { type: 1, id: 2, name: '外部精选', checked: false },
       ],
       id: '',
       oneList: [], //一级分类{type:11}
@@ -417,7 +425,7 @@ export default {
       fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
       // 查询信息
       course: {
-        orderField: "studys",
+        orderField: "DEFAULT",
         companyId: '',
         keyword: '',//关键词
         topOrder: true,
@@ -463,6 +471,11 @@ export default {
     })
   },
   mounted() {
+
+    qualityCourseTimeMark().then(response=>{
+      console.log(`qualityCourseTimeMark`, response)
+      this.years = response.data.result
+    })
     let screenWidth = window.screen.availWidth;
     // if (screenWidth < 1280) {
     //   this.course.pageSize = 9;
@@ -691,13 +704,12 @@ export default {
     },
     // 导航切换(录播课，线下课，学习项目)
     handleTypeClick(item, list) {
-      item.checked = !item.checked;
+      // item.checked = !item.checked;
       //使用上面一行是可以多选，使用下面是单选
-      // list.forEach(row=>{
+      list.forEach(row=>{
-      //   row.checked=false;
+        row.checked=false;
-      // })
+      })
-      // item.checked=true;
+      item.checked=true;
-
       this.searchData();
     },
     //三级分类
@@ -1105,7 +1117,7 @@ export default {
       return list;
     },
     // 查询
-    async search() {
+    async search () {
       //
       if (this.searching) {
         this.$message.warning("正在搜索中，请待搜索完成后再重新搜索");
@@ -1160,40 +1172,51 @@ export default {
       // 隐藏loadMore
       this.moreState = 2;
       this.course.userId = this.userInfo.aid
-      await apiCoursePortal.courseSearch(this.course).then(res => {
-        this.searching = false;
-        if (res.status == 200) {
-          this.totalPages = res.result.totalPages;
-          res.result.list.forEach(item => {
-            if (item.startTime != '') {
-              item.startTime = formatDateByFmt(new Date(item.startTime * 1000), 'yyyy-MM-dd hh:mm')
-              //let time = item.startTime.split('-');
-              //item.startTime = `${time[0]}年${time[1]}月${time[2]}日`
-            }
-            //教师转化
-            if (item.teacher) {
-              item.teacher = item.teacher.split(',').filter(itemValue => itemValue !== 'BOE教师').join(',');
-              // if (dotIdx > 0) {
-                // item.teacher = item.teacher.substring(0, dotIdx);
-              // }
-            }
-            if (item.teacher && item.teacher == 'BOE教师') {
-              item.teacher = '';
-            }
 
-            //转化标红显示
+      // 请求参数预处理
-            item.title = item.name;
+      const params = JSON.parse(JSON.stringify(this.course))
-            if (that.course.keyword) {
+      // 清除多余的参数
-              item.name = that.brightenKeyword(item.name, that.course.keyword);
+      const {pageIndex, orderField} = params
-              item.keywordsActive = that.brightenKeywords(item.keywordsList, that.course.keyword)
+      params.pageNum = pageIndex
-              console.log(item.keywordsActive);
+      params.orderByType = orderField
-            } else {
+      params.courseSource = this.ctypeList.findIndex(e=>e.checked)
-              item.name = item.name;
+      this.yearChosen.length && (params.years = this.yearChosen)
-            }
+      params.courseName = this.keyword
-          });
+
-console.log(res.result.list,'data')
+      await qualityPageList(params).then(res=>{
-          this.courseList = res?.result?.list ?? []
+        this.searching = false;
-          console.log(this.courseList);
+        console.log(res.status)
+        if (res.status === 200) {
+          this.totalPages = res.data.result.pages;
+          // res.result.list.forEach(item => {
+          //   if (item.startTime != '') {
+          //     item.startTime = formatDateByFmt(new Date(item.startTime * 1000), 'yyyy-MM-dd hh:mm')
+          //     //let time = item.startTime.split('-');
+          //     //item.startTime = `${time[0]}年${time[1]}月${time[2]}日`
+          //   }
+          //   //教师转化
+          //   if (item.teacher) {
+          //     item.teacher = item.teacher.split(',').filter(itemValue => itemValue !== 'BOE教师').join(',');
+          //     // if (dotIdx > 0) {
+          //     // item.teacher = item.teacher.substring(0, dotIdx);
+          //     // }
+          //   }
+          //   if (item.teacher && item.teacher == 'BOE教师') {
+          //     item.teacher = '';
+          //   }
+          //
+          //   //转化标红显示
+          //   item.title = item.name;
+          //   if (that.course.keyword) {
+          //     item.name = that.brightenKeyword(item.name, that.course.keyword);
+          //     item.keywordsActive = that.brightenKeywords(item.keywordsList, that.course.keyword)
+          //     console.log(item.keywordsActive);
+          //   } else {
+          //     item.name = item.name;
+          //   }
+          // });
+
+          this.courseList = res.data.result.records ?? []
           if (this.newData) {
             this.courseList = [
               {
@@ -1238,7 +1261,7 @@ console.log(res.result.list,'data')
               },
             ]
           }
-          this.count = res?.result?.count
+          this.count = res.data.result.total
           if (this.newData) {
             this.count = 1
           }
@@ -1338,6 +1361,11 @@ console.log(res.result.list,'data')
       //   this.$router.push(`/course/micro?id=${id}`);
       // }
     }
+  },
+  watch:{
+    yearChosen(){
+      this.searchData()
+    }
   }
 };
 </script>