精品课列表接口

src/api/phase2/index.js

@@ -47,6 +47,10 @@ const articlelist=function (type){
 const courselist=function (data){
   return ajax.post('/xboe/portal/index/courselist',data);
 }
+// 精品课信息列表
+const qualitylist=function (data){
+  return http.post(baseURL,'/quality/home/qualityItem',data);
+}
 /**
  * 首页新课程推荐列表
  */
@@ -61,5 +65,6 @@ export default {
   articlelist,
   courselist,
   newCases,
-  getRecommendList
+  getRecommendList,
+  qualitylist
 }

src/views/Index.vue

@@ -153,9 +153,15 @@
       </div>
     </div>
     <div class="xindex-content">
+      
+      <!-- 推荐课程 -->
       <div class="modules xcontent2">
-        <div class="xcontent2-main">
+        <!-- <div class="xcontent2-main"> -->
           <!--内容块-->
+        
+          <!-- </div> -->
+           <!-- 精品课模块 -->
+        <div class="xcontent2-main">
           <div class="modules-title xindex-main">
             <span class="modules-text" style="color: #3D86F4;">精品课</span>
             <span class="quyer-tag">
@@ -164,11 +170,69 @@
               <router-link to="/course">查看更多>></router-link>
             </span>
           </div>
-          </div>
-          </div>
-      <!-- 推荐课程 -->
-      <div class="modules xcontent2">
-        <div class="xcontent2-main">
+
+
+
+
+          <div
+              v-for="(course, eIndex) in exquisiteList"
+              :key="'cc' + eIndex"
+              class="xindex-course"
+              style="position: relative;margin-top: 30px;"
+            >
+              <div style="position: absolute; right: 25px; bottom: 72px">
+                <interactBar
+                  nodeWidth="20px"
+                  :courseExclusive="true"
+                  :type="1"
+                  :data="course"
+                  :comments="false"
+                  :praises="false"
+                  :shares="false"
+                  :views="false"
+                >
+                </interactBar>
+                <!-- <svg-icon style="font-size: 32px;margin-top: -5px;" icon-class="collectedCourse"></svg-icon> -->
+              </div>
+              <a @click="toCourseDetail(course)">
+                <div class="xindex-course-image">
+                  <course-image :course="course"></course-image>
+                  <span v-if="course.type == 20 || 10" class="course-type"
+                    >录播课</span
+                  >
+                </div>
+                <div
+                  style="width: 80%"
+                  :title="course.courseName"
+                  class="course-title portal-title-tow two-line-ellipsis"
+                >
+                  {{ course.courseName }}
+                </div>
+                <div class="course-author">
+                  <div class="course-author-left">
+                    {{ course.teacherName }}
+
+                    <span class="study-num"
+                      >{{ formatNum(course.studyNum) }}人学习</span
+                    >
+                  </div>
+                  <div style="display: flex">
+                    <div v-if="course.score">
+                      <span class="course-score-value" style="margin-left: 10px"
+                        >{{ toScore(course.courseScore) }}分</span
+                      >
+                    </div>
+                    <div v-else class="course-score-no">未评分</div>
+                  </div>
+                </div>
+              </a>
+            </div>
+
+
+
+
+
+
           <!--内容块-->
           <div class="modules-title xindex-main">
             <span class="modules-text">推荐课程</span>
@@ -1150,6 +1214,11 @@ export default {
         orderType: 2,
         list: [],
       },
+      qusisityList: {
+        num: 12,
+        orderType: 2,
+        list: [],
+      },
       // 推荐课程
       recommendedList:{
         list: [],
@@ -1177,6 +1246,7 @@ export default {
   },
   mounted() {
     this.getCourseData(1);
+    this.getEsqusiteList();
     this.getRecommendList();
     this.getPositive()
     this.getCaseData();
@@ -1240,6 +1310,10 @@ export default {
     courseComputedTwoList(){
       return this.courseList.list.slice(3)
     },
+    // 精品课展示
+    exquisiteList() { 
+      return this.qusisityList.list.slice(0,3)
+    },
   },
   methods: {
     getPositive() {
@@ -1485,6 +1559,16 @@ export default {
         }
       })
     },
+    //精品课展示
+    getEsqusiteList(){
+      let params = {
+        aid: this.userInfo.aid,
+      }
+      apiIndex.qualitylist(params).then((res) => { 
+        console.log(res,'jinpinsjfhhfjash--------------------------');
+        this.qusisityList.list = res.result;
+      })
+    },
     getCourseData(pageIndex) {
       this.isNext = false;
       let { orderType, num } = this.courseList;