From da19bb9e5ab77e0b99be86f927da11a62d6ac943 Mon Sep 17 00:00:00 2001
From: daihh <seastar@bjxask.com>
Date: Wed, 22 Jun 2022 16:54:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98=E8=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=9F=A5=E8=AF=A2=E4=B8=8D=E5=87=BA=E6=9D=A5?=
 =?UTF-8?q?=E7=9A=84=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/portal/course/Index.vue | 902 ++++++++++++++++--------------
 1 file changed, 473 insertions(+), 429 deletions(-)

diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index 564218e6..878f32ac 100644
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -194,26 +194,26 @@
   </div>
 </template>
 <script>
-import { mapGetters,mapActions } from 'vuex';
+import { mapGetters, mapActions } from "vuex";
 import portalHeader from "@/components/PortalHeader.vue";
 import portalFooter from "@/components/PortalFooter.vue";
 import portalFloatTools from "@/components/PortalFloatTools.vue";
-import authorInfo from '@/components/Portal/authorInfo.vue';
+import authorInfo from "@/components/Portal/authorInfo.vue";
 import courseItem from "@/components/Portal/course/courseItem.vue";
 import apiCoursePortal from "@/api/modules/coursePortal.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 apiTeacher from "@/api/modules/teacher.js";
+import apiUser from "@/api/system/user.js";
 import scene from "@/api/modules/scene.js";
 import interactBar from "@/components/Portal/interactBar.vue";
-import courseImage from "@/components/Course/courseImage.vue"
-import { courseType, getType,toScore } from "@/utils/tools.js";
+import courseImage from "@/components/Course/courseImage.vue";
+import { courseType, getType, toScore } from "@/utils/tools.js";
 import { deepClone, param } from "../../../utils";
 import apiSearchterm from "@/api/modules/searchterm.js";
-import { Promise } from 'q';
+import { Promise } from "q";
 export default {
   name: "index",
   components: {
@@ -227,17 +227,17 @@ export default {
     interactBar
   },
   computed: {
-    ...mapGetters(['resOwnerMap','sysTypeMap','userInfo','identity']),
+    ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"])
   },
   data() {
     return {
-      couretitle:'',
+      couretitle: "",
       toScore,
-      noPageList: true,//判断接口是否还有数据
-      noDataList: true,//判断接口是否还有数据
-      moreState:1,// 1 加载更多 2 加载中 3无数据
-      columns:3,//列的数量
-      fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
+      noPageList: true, //判断接口是否还有数据
+      noDataList: true, //判断接口是否还有数据
+      moreState: 1, // 1 加载更多 2 加载中 3无数据
+      columns: 3, //列的数量
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
       // 查询信息
       types: {
         sysTypesSub: "",
@@ -245,11 +245,11 @@ export default {
         subTow: "",
         sysTypes: null,
         oneSubList: [],
-        towSubList: [],
+        towSubList: []
       },
       course: {
         orderField: "studys",
-        topOrder:true,
+        topOrder: true,
         orderAsc: false,
         pageIndex: 1, // 第几页
         pageSize: 9 //每页多少条
@@ -262,7 +262,7 @@ export default {
       searchbar: {
         top: false
       },
-      ankingList:[],
+      ankingList: [],
       scorelist: [],
       searchTags: [],
       queryExpand: true, // true更多，false收起
@@ -281,22 +281,22 @@ export default {
       listType: 1,
       courseList: [],
       searchRecords: [],
-      hotList:[],
-      totalPages:1,
+      hotList: [],
+      totalPages: 1
     };
   },
   mounted() {
-
-    let screenWidth=window.screen.width;
-    if(screenWidth<1280){
-      this.course.pageSize=9;
-      this.columns=3;
-    }else if(screenWidth<1600){
-      this.course.pageSize=12;
-      this.columns=4;
-    }else if(screenWidth>=1600){
-      this.course.pageSize=15;
-      this.columns=5;
+    let screenWidth = window.screen.availHeight;
+    //console.log("screenWidth", screenWidth);
+    if (screenWidth < 1280) {
+      this.course.pageSize = 9;
+      this.columns = 3;
+    } else if (screenWidth < 1600) {
+      this.course.pageSize = 12;
+      this.columns = 4;
+    } else if (screenWidth >= 1600) {
+      this.course.pageSize = 15;
+      this.columns = 5;
     }
     //var hasNum=12;
     //console.log(parseInt(hasNum/this.columns)*this.columns,'this.columns');
@@ -306,19 +306,15 @@ export default {
     let height = 200;
     let flag = true;
     let $this = this;
-    this.getAnkingData()
-    window.addEventListener(
-      "scroll",
-
-      this.handleScroll
-    );
-    if(this.$route.query !== {}) {
+    this.getAnkingData();
+    window.addEventListener("scroll",this.handleScroll);
+    if (this.$route.query !== {}) {
       this.course.keyword = this.$route.query.keyword;
     }
     this.getSceneData();
     this.getTypeData();
-    if(this.course.keyword != undefined) {
-      this.totalPages=4;
+    if (this.course.keyword != undefined) {
+      this.totalPages = 4;
     }
     this.search();
     this.searchterm();
@@ -327,45 +323,44 @@ export default {
     this.getHotList();
     //查询排行榜，页面打开只查询一次
   },
-  beforeDestroy(){
-    window.removeEventListener("scroll",this.handleScroll);
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
-
-   
-
-    jumUX(){
-     window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
+    jumUX() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
     },
     emitInput(val) {
-      this.course.keyword=val;
-      this.searchData()
+      this.course.keyword = val;
+      this.searchData();
     },
     handleScroll() {
-        let innerHeight = document.querySelector('#couser-list-content').clientHeight
-        let outerHeight = document.documentElement.clientHeight
-        let scrollTop = document.documentElement.scrollTop
-        if ((outerHeight + scrollTop + 350) >= innerHeight) {
-          if(this.moreState == 1 && this.course.pageIndex < 4) {
-              this.loadMore();
-          }
-        }
-        if(scrollTop > 630) {
-          document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -550px;width:242.5px";
-        } else {
-          document.querySelector('#fixd-box').style.cssText = "position: static";
+      let innerHeight = document.querySelector("#couser-list-content")
+        .clientHeight;
+      let outerHeight = document.documentElement.clientHeight;
+      let scrollTop = document.documentElement.scrollTop;
+      if (outerHeight + scrollTop + 350 >= innerHeight) {
+        if (this.moreState == 1 && this.course.pageIndex < 4) {
+          this.loadMore();
         }
+      }
+      if (scrollTop > 630) {
+        document.querySelector("#fixd-box").style.cssText =
+          "position: fixed;top: -550px;width:242.5px";
+      } else {
+        document.querySelector("#fixd-box").style.cssText = "position: static";
+      }
     },
-    toNeedCourse(){
+    toNeedCourse() {
       // 需要先切换标签
       //this.$store.dispatch('SetCurIdentity',2);
       //this.$router.push('/need/course?open=new');
       this.$refs.floatTools.toNeedCourse();
     },
-    searchData(){
-      this.course.pageIndex =1;
-      this.noPageList= true;//判断接口是否还有数据
-      this.noDataList= true;//判断接口是否还有数据
+    searchData() {
+      this.course.pageIndex = 1;
+      this.noPageList = true; //判断接口是否还有数据
+      this.noDataList = true; //判断接口是否还有数据
       this.courseList = [];
       this.totalPages = 4;
       this.search();
@@ -374,46 +369,50 @@ export default {
       this.$forceUpdate();
     },
     ...mapActions({
-      getResOwnerTree:'resOwner/getResOwnerTree',
-      loadResOwners:'resOwner/loadResOwners',
-      getSysTypeTree:'sysType/getSysTypeTree',
-      loadSysTypes:'sysType/loadSysTypes'
+      getResOwnerTree: "resOwner/getResOwnerTree",
+      loadResOwners: "resOwner/loadResOwners",
+      getSysTypeTree: "sysType/getSysTypeTree",
+      loadSysTypes: "sysType/loadSysTypes"
     }),
-    sysTypeName(code){
-      if(code==''){return '';}
+    sysTypeName(code) {
+      if (code == "") {
+        return "";
+      }
       return this.sysTypeMap.get(code);
     },
-    useHotword(item){
-      this.$set(this.course,'keyword',item.keyword)
+    useHotword(item) {
+      this.$set(this.course, "keyword", item.keyword);
       this.searchData();
     },
-    searchterm(){
-      apiSearchterm.list(5,1).then(res => {
-          if (res.status == 200) {
-            this.searchRecords = res.result;
-          }
-        });
+    searchterm() {
+      apiSearchterm.list(5, 1).then(res => {
+        if (res.status == 200) {
+          this.searchRecords = res.result;
+        }
+      });
     },
-    toCourseDetail(item){
-      if(isNaN(item.type)){
-        return `${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`;
+    toCourseDetail(item) {
+      if (isNaN(item.type)) {
+        return `${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${
+          item.type
+        }`;
         //此处使用window.open有问题
         //window.open(`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`);
       } else {
-       if(item.type==10){
-        return this.webBaseUrl+'/course/micro?id='+item.id;
-        }else if(item.type==20){
-        return this.webBaseUrl+'/course/detail?id='+item.id;
-       }
+        if (item.type == 10) {
+          return this.webBaseUrl + "/course/micro?id=" + item.id;
+        } else if (item.type == 20) {
+          return this.webBaseUrl + "/course/detail?id=" + item.id;
+        }
       }
 
-      return '';
+      return "";
     },
     orderChange(id) {
       this.course.orderField = id;
-      this.course.pageIndex =1;
-      this.noPageList= true;//判断接口是否还有数据
-      this.noDataList= true;//判断接口是否还有数据
+      this.course.pageIndex = 1;
+      this.noPageList = true; //判断接口是否还有数据
+      this.noDataList = true; //判断接口是否还有数据
       this.courseList = [];
       this.totalPages = 1;
       this.search();
@@ -431,7 +430,7 @@ export default {
           if (i === "sysType3") {
             this.types.subTow = "";
           }
-          if(i === 'type') {
+          if (i === "type") {
             this.category = "";
             this.categorySub = "";
           }
@@ -444,7 +443,7 @@ export default {
     // 分类
     changeType(num) {
       this.types.oneSubList = [];
-      this.types.subOne = '0';
+      this.types.subOne = "0";
       this.types.towSubList = [];
       let list = {};
       if (num !== 0) {
@@ -459,7 +458,7 @@ export default {
     },
     // 子级分类
     changeTypeSub(num) {
-      this.types.subTow = '0';
+      this.types.subTow = "0";
       let list = {};
       if (num !== 0) {
         apiType.list(1, num).then(res => {
@@ -485,7 +484,7 @@ export default {
     async getTypeData() {
       try {
         const { result, status } = await apiType.tree(1);
-        if (status === 200){
+        if (status === 200) {
           this.optionsList = result;
         }
       } catch (error) {
@@ -496,11 +495,11 @@ export default {
       this.course.pageIndex += 1;
       this.search();
     },
-   async search() {
-     let that = this;
-     if(this.course.keyword){
-      apiSearchterm.save({keyword:this.course.keyword,type:1});
-     }
+    async search() {
+      let that = this;
+      if (this.course.keyword) {
+        apiSearchterm.save({ keyword: this.course.keyword, type: 1 });
+      }
       this.isFind = true;
       if (this.category === 0) {
         this.course.type = null;
@@ -513,200 +512,244 @@ export default {
       } else {
         this.course.type = this.category;
       }
-      if(this.types.sysTypes == 0 || this.types.sysTypes == null) {
-       this.course.sysType1 = '';
-       this.course.sysType2 = '';
-       this.course.sysType3 = '';
+      if (this.types.sysTypes == 0 || this.types.sysTypes == null) {
+        this.course.sysType1 = "";
+        this.course.sysType2 = "";
+        this.course.sysType3 = "";
       } else {
-       this.course.sysType1 = this.types.sysTypes;
+        this.course.sysType1 = this.types.sysTypes;
       }
       this.course.sysType2 = this.types.subOne;
       this.course.sysType3 = this.types.subTow;
-      if(this.course.sysType2 == 0) {
-        this.course.sysType2 = '';
+      if (this.course.sysType2 == 0) {
+        this.course.sysType2 = "";
       }
-      if(this.course.sysType3 == 0) {
-        this.course.sysType3 = '';
+      if (this.course.sysType3 == 0) {
+        this.course.sysType3 = "";
       }
       this.course.device = 1;
       this.getTags();
       //从新课程库中取10条，从老库中取10条
-       let oldPageIndex = 0;
-       let oldCateName = '';
-       let oldParamsType = '';
-        if(this.course.sysType1){
+      let oldPageIndex = 0;
+      let oldCateName = "";
+      let oldParamsType = "";
+      if (this.course.sysType1) {
         //cateName
-        let courseSysType=this.course.sysType1;
+        let courseSysType = this.course.sysType1;
         let curName = this.optionsList.find(item => {
           return item.id === courseSysType;
         });
-        if(curName){
-          oldCateName=curName.name;
+        if (curName) {
+          oldCateName = curName.name;
         }
       }
-      if(this.category==20){
-        oldParamsType='online-course';
-      }else if(this.category==30){
-        oldParamsType='face-course';
-      }else if(this.category==40){
-        oldParamsType='project';
+      if (this.category == 20) {
+        oldParamsType = "online-course";
+      } else if (this.category == 30) {
+        oldParamsType = "face-course";
+      } else if (this.category == 40) {
+        oldParamsType = "project";
+      }
+      //if(oldParamsType == '' && oldCateName == '' && this.course.keyword == '') {
+      if (this.searchTags.length == 0) {
+        oldPageIndex = this.course.pageIndex - 3;
+      } else {
+        oldPageIndex = this.course.pageIndex;
       }
-       if(oldParamsType == '' && oldCateName == '' && this.course.keyword == '') {
-					oldPageIndex = this.course.pageIndex-3;
-				} else {
-					oldPageIndex = this.course.pageIndex;
-				}
 
-       let oldParams={type:oldParamsType,page:oldPageIndex,size:this.course.pageSize,keyword:this.course.keyword,sort:'new',cateName:oldCateName}
-      if(this.course.orderField == 'id') {//最新
-        oldParams.sort = 'new';
+      let oldParams = {
+        type: oldParamsType,
+        page: oldPageIndex,
+        size: this.course.pageSize,
+        keyword: this.course.keyword,
+        sort: "new",
+        cateName: oldCateName
+      };
+      if (this.course.orderField == "id") {
+        //最新
+        oldParams.sort = "new";
       }
-      if(this.course.orderField == 'studys') {//最热
-       oldParams.sort = 'hot';
+      if (this.course.orderField == "studys") {
+        //最热
+        oldParams.sort = "hot";
       }
       let data = [];
       let isTopList = [];
-      if(this.course.pageIndex > this.totalPages) {
-          this.noDataList = true;
-          oldParams.page=this.course.pageIndex-this.totalPages;
-      }else {
-        if(this.totalPages<3){
-          this.noDataList = false;
+
+      if (this.course.pageIndex > this.totalPages) {
+        //console.log(this.course.pageIndex, this.totalPages, "1");
+        this.noDataList = true;
+        if (this.searchTags.length == 0) {
+          oldParams.page = this.course.pageIndex - this.totalPages;
         }
-        if(this.totalPages == 1 && this.course.pageIndex ==1){
-          this.noDataList = true;
+      } else {
+        //console.log(this.course.pageIndex, this.totalPages, "2");
+        if (this.searchTags.length == 0) {
+          if (this.totalPages > 3) {
+            if (this.course.pageIndex <= 3) {
+              this.noDataList = false;
+            } else {
+              this.noDataList = true;
+            }
+          }
         }
+        // if(this.totalPages == 1 && this.course.pageIndex ==1){
+        //   this.noDataList = true;
+        // }
       }
-      if(this.course.type == 30 || this.course.type == 40) {
+      if (this.course.type == 30 || this.course.type == 40) {
         this.noPageList = false;
       }
-     // 隐藏loadMore
-     this.moreState = 2;
-     this.noDataList && await apiOldCourse.courseList(oldParams).then(oldRs=>{
-        if(oldRs.status==200 && oldRs.result.dataList.length > 0) {
+      //console.log(this.noDataList, this.totalPages, "this.noDataList");
+      // 隐藏loadMore
+      this.moreState = 2;
+      this.noDataList &&
+        (await apiOldCourse
+          .courseList(oldParams)
+          .then(oldRs => {
+            if (oldRs.status == 200 && oldRs.result.dataList.length > 0) {
               let list = that.filterConversion(oldRs.result.dataList);
-              list.name = list.name.replace(/<[^>]+>|&[^>]+;/g,"").trim();
+              //list.name = list.name.replace(/<[^>]+>|&[^>]+;/g,"").trim();
               data.push(...list);
               that.moreState = 1;
-        }else{
-          that.noDataList = false;
-        }
-      }).catch(err=>{
-        that.noDataList = false;
-      })
+            } else {
+              that.noDataList = false;
+            }
+          })
+          .catch(err => {
+            that.noDataList = false;
+          }));
 
-     this.noPageList && await apiCoursePortal
-        .pageList(this.course)
-        .then(res => {
-
-            if(res.status == 200 && res.result.list.length>0){
-              
+      this.noPageList &&
+        (await apiCoursePortal
+          .pageList(this.course)
+          .then(res => {
+            if (res.status == 200 && res.result.list.length > 0) {
               this.totalPages = res.result.totalPages;
-              let courseIds=[];
-              res.result.list.forEach(item=>{
-                item.name = this.$keywordActiveShow(item.name,this.course.keyword);
-               item.couretitle  =  this.$keywordActiveShow(item.name,this.course.keyword).replace(/<[^>]+>|&[^>]+;/g,"").trim();//去掉所有的html标签和&nbsp;之类的特殊符合
-                item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
+              let courseIds = [];
+              res.result.list.forEach(item => {
+                item.name = this.$keywordActiveShow(
+                  item.name,
+                  this.course.keyword
+                );
+                item.couretitle = this.$keywordActiveShow(
+                  item.name,
+                  this.course.keyword
+                )
+                  .replace(/<[^>]+>|&[^>]+;/g, "")
+                  .trim(); //去掉所有的html标签和&nbsp;之类的特殊符合
+                item.authorInfo = {
+                  aid: "",
+                  name: "",
+                  orgInfo: "",
+                  avatar: "",
+                  code: ""
+                };
                 courseIds.push(item.id);
-                if(item.isTop) {
+                if (item.isTop) {
                   isTopList.push(item);
                 } else {
                   data.push(item);
                 }
-              })
-              that.loadCouserTeacher(res.result.list,courseIds);
+              });
+              that.loadCouserTeacher(res.result.list, courseIds);
               // data.push(...res.result.list);
               that.moreState = 1;
-            }else{
+            } else {
               that.noPageList = false;
             }
-        }).catch(err=>{
-          that.noPageList = false;
-        })
-         if(this.course.orderField == 'id') {//最新
-         data.sort(this.pcompare("publishTime",false))
-        }
-        if(this.course.orderField == 'studys') {//最热
-        data.sort(this.pcompare("studys",false))
-        }
-        this.courseList.push(...isTopList,...data);
-        if(this.noDataList == false && this.noPageList == false){
-          this.moreState = 3;
-        }
+          })
+          .catch(err => {
+            that.noPageList = false;
+          }));
+      if (this.course.orderField == "id") {
+        //最新
+        data.sort(this.pcompare("publishTime", false));
+      }
+      if (this.course.orderField == "studys") {
+        //最热
+        data.sort(this.pcompare("studys", false));
+      }
+      this.courseList.push(...isTopList, ...data);
+      if (this.noDataList == false && this.noPageList == false) {
+        this.moreState = 3;
+      }
     },
-    pcompare(prop,rev) {
-     if(rev === undefined) {
-       rev = 1;
-     }else {
-       rev = rev?1:-1;
-     }
-     return function(obj1,obj2) {
-       let val1 = obj1[prop],val2 = obj2[prop];
-       return val1 < val2 ? rev*(-1):rev*1;
-     }
+    pcompare(prop, rev) {
+      if (rev === undefined) {
+        rev = 1;
+      } else {
+        rev = rev ? 1 : -1;
+      }
+      return function(obj1, obj2) {
+        let val1 = obj1[prop],
+          val2 = obj2[prop];
+        return val1 < val2 ? rev * -1 : rev * 1;
+      };
     },
     filterConversion(data) {
       let list = [];
-      data.forEach((item,index)=>{
+      data.forEach((item, index) => {
         list.push({
           coverImg: item.cover[0].url,
           name: item.title,
           type: item.type,
           id: item.id,
-          studys: Number(item.enrollSuccess),// Number(), //学习人数
+          studys: Number(item.enrollSuccess), // Number(), //学习人数
           score: item.score,
           publishTime: item.releaseDate,
-          authorInfo:{
-            avatar: '',
-            name: ''
+          authorInfo: {
+            avatar: "",
+            name: ""
           }
-        })
-      })
+        });
+      });
       return list;
     },
-    loadCouserTeacher(list,ids){
+    loadCouserTeacher(list, ids) {
       let that = this;
       // 先查课程关联教师iD
       apiCourse.getTeacherByCourseIDs(ids).then(cres => {
-        if(cres.status==200){
+        if (cres.status == 200) {
           let userIds = [];
-          list.forEach((item,index)=>{
-            cres.result.some(courseTeahcer=>{
-              if(courseTeahcer.courseId==item.id){
-                if(courseTeahcer.teacherIds){
+          list.forEach((item, index) => {
+            cres.result.some(courseTeahcer => {
+              if (courseTeahcer.courseId == item.id) {
+                if (courseTeahcer.teacherIds) {
                   userIds.push(courseTeahcer.teacherIds[0]);
-                  item.authorInfo.aid=courseTeahcer.teacherIds[0];
-                  item.authorInfo.name=courseTeahcer.names[0];
+                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
+                  item.authorInfo.name = courseTeahcer.names[0];
                 }
                 return true;
-              }else{
+              } else {
                 return false;
               }
-            })
+            });
           });
           //that.loadCourseAuthorInfo(list,userIds);
         }
-      })
+      });
     },
-    loadCourseAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
-      if(ids.length==0){
+    loadCourseAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
         return;
       }
-      const noReapetIds=[...new Set(ids)]
-      apiUser.getByIds(ids).then(res=>{
-        if(res.status==200){
-          list.forEach((item,index)=>{
-            res.result.some(author=>{
-              if(author.aid==item.authorInfo.aid){
-                item.authorInfo=author;
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(ids).then(res => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some(author => {
+              if (author.aid == item.authorInfo.aid) {
+                item.authorInfo = author;
                 return true;
-              }else{
+              } else {
                 return false;
               }
-            })
+            });
           });
-        }else{
-          console.log('加载课程信息失败:'+res.error);
+        } else {
+          console.log("加载课程信息失败:" + res.error);
           //this.$message.error(res.message);
         }
       });
@@ -731,20 +774,19 @@ export default {
             courseData[i] = courseType(courseData[i]);
           }
           if (i == "sysType1" || i == "sysType2" || i == "sysType3") {
-            if(courseData[i] !== '0') {
-                courseData[i] = this.sysTypeName(courseData[i]);
+            if (courseData[i] !== "0") {
+              courseData[i] = this.sysTypeName(courseData[i]);
             }
           }
           if (i == "type" && courseData[i] === 0) {
-            courseData[i] = '在线课'
-          };
-          if(courseData[i] !== '0') {
-             this.searchTags.push({
-            id: id,
-            name: courseData[i]
-          });
+            courseData[i] = "在线课";
+          }
+          if (courseData[i] !== "0") {
+            this.searchTags.push({
+              id: id,
+              name: courseData[i]
+            });
           }
-
         }
       }
     },
@@ -766,93 +808,95 @@ export default {
     chooseShow(type) {
       return this.type1.some(item => item == type);
     },
-    getAnkingData(){
-      apiCourse.ranking().then(res=>{
-        if(res.status==200){
-          this.ankingList=res.result
+    getAnkingData() {
+      apiCourse.ranking().then(res => {
+        if (res.status == 200) {
+          this.ankingList = res.result;
         }
-      })
+      });
     },
     getScoreList() {
-      apiCourse.scorelist(5).then(res=>{
-         if(res.status==200){
-          this.scorelist=res.result
+      apiCourse.scorelist(5).then(res => {
+        if (res.status == 200) {
+          this.scorelist = res.result;
         }
-      })
+      });
     },
-    getHotList(){
-      apiCourse.studyCounts(5).then(res=>{
-        if(res.status==200){
-          this.hotList=res.result
+    getHotList() {
+      apiCourse.studyCounts(5).then(res => {
+        if (res.status == 200) {
+          this.hotList = res.result;
         }
-      })
+      });
     },
-    jumpRouter(item){
-      console.log(item.type,'item.type');
+    jumpRouter(item) {
+      console.log(item.type, "item.type");
       // return console.log(id,type,"fihkj1")
-      if(item.type == 20) {//录播课
+      if (item.type == 20) {
+        //录播课
         //  window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
         this.$router.push(`/course/detail?id=${item.id}`);
       }
-      if(item.type == 10) {//微课
+      if (item.type == 10) {
+        //微课
         //  window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
         this.$router.push(`/course/micro?id=${item.id}`);
       }
     },
-    jumpRouter2(item){
+    jumpRouter2(item) {
       // console.log(item,"土豪包括九年")
-      let type=item.courseType;
-      let id=item.courseId;
+      let type = item.courseType;
+      let id = item.courseId;
 
       //console.log(item.type,type,'item.type');
       // return console.log(id,type,"fihkj1")
-      if(type == 20) {//录播课
+      if (type == 20) {
+        //录播课
         //  window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
         this.$router.push(`/course/detail?id=${id}`);
       }
-      if(type == 10) {//微课
+      if (type == 10) {
+        //微课
         //  window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
         this.$router.push(`/course/micro?id=${id}`);
       }
-
     }
   }
 };
 </script>
 
 <style scoped lang="scss">
-::v-deep .title-line-ellipsis{
+::v-deep .title-line-ellipsis {
   // width: 100%;
-   display: -webkit-box;
-   overflow: hidden;
-  text-overflow:ellipsis;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   box-sizing: border-box;
-  word-break:break-all;
+  word-break: break-all;
 }
-::v-deep .el-card__body{
+::v-deep .el-card__body {
   padding: 0;
 }
-::v-deep .bacolor:nth-child(odd){
+::v-deep .bacolor:nth-child(odd) {
   background-color: #fff;
   padding: 0 5px;
 }
-::v-deep .bacolor:nth-child(even){
+::v-deep .bacolor:nth-child(even) {
   background-color: #f6f6f6;
   padding: 0 5px;
-
 }
-.Uxtext{
+.Uxtext {
   font-weight: 450;
-  margin-top:5px;
-  margin-left:15px;
-  font-size:14px;
-  color:#3d3d3d;
+  margin-top: 5px;
+  margin-left: 15px;
+  font-size: 14px;
+  color: #3d3d3d;
   cursor: pointer;
   position: relative;
 }
-.uxicon{
+.uxicon {
   font-size: 10px;
   position: absolute;
   top: -14px;
@@ -868,23 +912,24 @@ export default {
 //     height: 20px;
 //   }
 // }
-::v-deep .el-radio-button__inner, .el-radio-group {
-     vertical-align: top;
+::v-deep .el-radio-button__inner,
+.el-radio-group {
+  vertical-align: top;
 }
-::v-deep .el-radio-button__inner{
+::v-deep .el-radio-button__inner {
   background: none;
 }
 ::v-deep .el-radio-button:first-child .el-radio-button__inner {
-    border-left: none;
+  border-left: none;
 
-    // border-radius: 4px 0 0 4px;
-    //box-shadow: none!important;
+  // border-radius: 4px 0 0 4px;
+  //box-shadow: none!important;
 }
 // .el-row{
 //   display: flex;
 //   flex-wrap: wrap;
 // }
-.item-title{
+.item-title {
   // margin-top: 10px;
   // margin-bottom: 5px;
   // margin-right: 10px;
@@ -895,155 +940,154 @@ export default {
   color: #333333;
   // line-height: 20px;
 }
-.item-line{
+.item-line {
   padding-left: 2px;
   height: 20px;
   background: #ddd;
 }
 .course-card {
-    // width: 290px;
-    margin-bottom: 15px;
+  // width: 290px;
+  margin-bottom: 15px;
+  position: relative;
+  ::v-deep .cor-praises {
+    position: absolute;
+    left: 0;
+    top: 0;
+    .interact-bar-btn {
+      .interact-bar-value {
+        display: none;
+      }
+    }
+  }
+  .cor-icon {
+    position: absolute;
+    left: 100px;
+    top: 54px;
+    border-radius: 50%;
+    background: rgba(88, 138, 252, 0.37);
+
+    .el-icon-caret-right {
+      font-size: 36px;
+      color: #588afc;
+    }
+  }
+  .course-image-box {
     position: relative;
-    ::v-deep .cor-praises {
-      position: absolute;
-      left: 0;
-      top: 0;
-      .interact-bar-btn{
-        .interact-bar-value{
-          display: none;
-        }
-      }
-    }
-    .cor-icon{
-      position: absolute;
-      left: 100px;
-      top:54px;
-      border-radius: 50%;
-      background: rgba(88, 138, 252,.37);
-
-      .el-icon-caret-right{
-        font-size: 36px;
-        color: #588AFC;
-      }
-    }
-    .course-image-box {
-      position: relative;
-      height:148px;
+    height: 148px;
+    width: 100%;
+    .course-image {
       width: 100%;
-      .course-image {
-        width: 100%;
-        height: 148px;
+      height: 148px;
+    }
+    .course-type {
+      position: absolute;
+      top: 5px;
+      right: 0px;
+      width: 90px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      background-color: #292828;
+      opacity: 0.4;
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+      color: #ffffff;
+    }
+    .course-type-title {
+      position: absolute;
+      top: 5px;
+      right: 0px;
+      width: 90px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #ffffff;
+    }
+    .course-flag {
+      height: 26px;
+      position: absolute;
+      top: 15px;
+      right: 0;
+    }
+    .course-tip {
+      width: 100%;
+      height: 26px;
+      position: absolute;
+      bottom: 0;
+      padding: 0 10px;
+      color: #fff;
+      font-size: 14px;
+      .course-study-count {
+        float: left;
       }
-      .course-type{
-        position: absolute;
-        top: 5px;
-        right: 0px;
-        width: 90px;
-        height: 30px;
-        line-height: 30px;
-        text-align: center;
-        background-color: #292828;
-        opacity: 0.4;
-        border-top-left-radius: 15px;
-        border-bottom-left-radius: 15px;
-        color: #FFFFFF;
-      }
-      .course-type-title{
-        position: absolute;
-        top: 5px;
-        right: 0px;
-        width: 90px;
-        height: 30px;
-        line-height: 30px;
-        text-align: center;
-        color: #FFFFFF;
-      }
-      .course-flag {
-        height: 26px;
-        position: absolute;
-        top: 15px;
-        right: 0;
-      }
-      .course-tip {
-        width: 100%;
-        height: 26px;
-        position: absolute;
-        bottom: 0;
-        padding: 0 10px;
-        color: #fff;
-        font-size: 14px;
-        .course-study-count {
-          float: left;
-        }
-        .course-time {
-          float: right;
-        }
+      .course-time {
+        float: right;
       }
     }
-    .course-title{
-      // height: 70px;
-      margin: 10px 0;
-      padding: 0px 15px;
-      font-size: 18px;
-      font-weight: 600;
-      color: #343434;
+  }
+  .course-title {
+    // height: 70px;
+    margin: 10px 0;
+    padding: 0px 15px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #343434;
+  }
+  .course-author {
+    margin: 5px 15px;
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    .course-author-left {
+      font-size: 12px;
+      line-height: 30px;
+      color: #666;
     }
-    .course-author{
-      margin: 5px 15px;
-      padding-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
-      .course-author-left{
-          font-size: 12px;
-          line-height: 30px;
-          color: #666;
-      }
-      // .course-author-right{
-      //   padding-top: 5px;
-      // }
-    }
-    .course-score{
-      padding: 5px 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 10px;
+    // .course-author-right{
+    //   padding-top: 5px;
+    // }
+  }
+  .course-score {
+    padding: 5px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
 
-      .course-score-star{
-        flex: 1;
-      }
-      .course-score-value{
-        color: #FFB30F;
-        font-family: "Arial";
-          // font-size: 30px;
-      }
-      .course-score-no{
-        font-size: 12px;
-        color: #FFB30F;
-      }
+    .course-score-star {
+      flex: 1;
     }
-
+    .course-score-value {
+      color: #ffb30f;
+      font-family: "Arial";
+      // font-size: 30px;
+    }
+    .course-score-no {
+      font-size: 12px;
+      color: #ffb30f;
+    }
+  }
 }
- .course-score-no{
-   text-align: right;
-        font-size: 12px;
-        color: #FFB30F;
-       line-height: 30px;
-      }
- .course-score-value{
-    font-size: 14px;
-        color: #FFB30F;
-        margin-left: 32px;
+.course-score-no {
+  text-align: right;
+  font-size: 12px;
+  color: #ffb30f;
   line-height: 30px;
-        font-family: "Arial";
-          // font-size: 30px;
-      }
-.study-num{
-         line-height: 30px;
-        font-size: 12px;
+}
+.course-score-value {
+  font-size: 14px;
+  color: #ffb30f;
+  margin-left: 32px;
+  line-height: 30px;
+  font-family: "Arial";
+  // font-size: 30px;
+}
+.study-num {
+  line-height: 30px;
+  font-size: 12px;
 
-        color: #8590A6;
-      }
+  color: #8590a6;
+}
 .btn-label {
 }
 .btn-label {
@@ -1103,14 +1147,14 @@ export default {
     text-align: center;
     padding: 10px 0;
     margin: 10px;
-    .pag-text{
+    .pag-text {
       border: 1px solid #292828;
       padding: 10px 20px;
       border-radius: 20px;
       background: #fff;
       cursor: pointer;
     }
-    .pag-text-msg{
+    .pag-text-msg {
       padding: 10px 20px;
       background: #fff;
     }
@@ -1118,22 +1162,22 @@ export default {
   .search-div {
     background: #fff;
     padding: 10px 25px;
-    ::v-deep .el-input{
+    ::v-deep .el-input {
       width: 420px;
       height: 38px;
       margin-bottom: 13px;
-      .el-input__inner{
+      .el-input__inner {
         height: 38px;
         border-radius: 0;
       }
-      .el-input-group__append{
+      .el-input-group__append {
         width: 44px;
         height: 38px;
         border: 0;
         padding: 0;
-        background:#3E7FFF;
+        background: #3e7fff;
         border-radius: 0;
-        .el-button{
+        .el-button {
           margin: 0;
           border: 0;
           width: 100%;
@@ -1142,7 +1186,7 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
-          .el-icon-search{
+          .el-icon-search {
             color: #fff;
             font-size: 22px;
           }
@@ -1313,18 +1357,18 @@ export default {
   }
 }
 .ranking-title {
-    line-height: 34px;
+  line-height: 34px;
+  font-size: 15px;
+  color: #333333;
+  .center-titlt {
     font-size: 15px;
     color: #333333;
-    .center-titlt{
-      font-size: 15px;
-      color: #333333;
-    }
-    .center{
-      text-align: right;
-    }
-    img{
-      margin-top: 5px;
-    }
   }
+  .center {
+    text-align: right;
+  }
+  img {
+    margin-top: 5px;
+  }
+}
 </style>