add: 课程资源 - 详情页接口对接

src/api/bLesson/courseResources.js

@@ -9,6 +9,15 @@ export function selectCourseList(query) {
   })
 }
 
+// 分页查询课程列表
+export function queryBLessonsByPagination(query) {
+  return request({
+    url: '/blesson/queryBLessonByPagination',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询三个推荐课程
 export function recommendLesson(query) {
   return request({
@@ -28,3 +37,6 @@ export function queryOne(businessId) {
     }
   })
 }
+
+// 收藏课程
+// 取消收藏课程

src/api/cmsLecturer/index.js

+import request from '@/utils/request'
+
+// 查询课程讲师信息
+export function cmsLecturerDetail(businessId) {
+  return request({
+    url: `/cmslecturer/detail/${businessId}`,
+    method: 'get'
+  })
+}

src/views/courseResources/courseMall/index.vue

@@ -121,14 +121,11 @@
           </div>
         </div>
         <div class="paging-box">
-          <pagination
-            :total="100"
-            :background="false"
+          <el-pagination
+            background
             layout="prev, pager, next"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="loadData"
-          />
+            :total="1000">
+          </el-pagination>
         </div>
       </div>
     </div>
@@ -138,7 +135,7 @@
 <script>
 import HomeSearch from '@/views/homePage/components/searchHome/index'
 import NavList from '@/views/homePage/components/NavList/index'
-import page from "@/mixins/page";
+import {queryBLessonsByPagination, queryOne} from "@/api/bLesson/courseResources";
 
 export default {
   name: 'Index',
@@ -146,7 +143,6 @@ export default {
     HomeSearch,
     NavList
   },
-  mixins: [page],
   data() {
     return {
       backTop: require('@/assets/image/top.png'),
@@ -162,7 +158,9 @@ export default {
         // 分页
         pageNum: 1,
         // 每页记录条数
-        pageSize: 16
+        pageSize: 16,
+        // 总数
+        total: null
       },
       // 初始化查询条件页签位置
       queryActiveName: 'first',
@@ -379,6 +377,7 @@ export default {
   },
   created() {
     this.handleToTop() // 一进入页面自动滚动到最顶部
+    this.getCourseByPagination()
   },
   methods: {
     /** 一进入页面自动滚动到最顶部*/
@@ -404,6 +403,15 @@ export default {
       // 重置全部页签查询条件
       this.queryParams.type = undefined
     },
+    // 分页查询课程列表
+    getCourseByPagination() {
+      queryBLessonsByPagination(this.queryParams).then(res => {
+        if (res.code === 200) {
+          // TODO: please clear this log
+          console.log(`res`, res)
+        }
+      })
+    },
     // 跳转到课程详情
     toCourseDetails(param) {
       this.$router.push({

src/views/courseResources/index.vue

@@ -72,7 +72,14 @@
             <i class="el-icon-d-arrow-right"/>
           </div>
         </div>
-        <div class="box-bottom">
+        <div v-if="!enterpriseCourseList || enterpriseCourseList.length === 0" class="empty-box">
+          <el-image
+            class="img"
+            :src="require('@/assets/image/zanwushuju.png')"
+            fit="cover"
+          />
+        </div>
+        <div v-if="enterpriseCourseList.length > 0" class="box-bottom">
           <div
             v-for="course in enterpriseCourseList"
             :key="course.id"
@@ -87,8 +94,8 @@
                   fit="cover"
                 />
               </div>
-              <div :class="'status status-' + (course.lessonIsPay === '1' ? 'purchased' : 'unPurchased')">
-                {{ course.lessonIsPay === '1' ? '已购' : '未购' }}
+              <div :class="'status status-' + (course.lessonIsPay === 1 ? 'purchased' : 'unPurchased')">
+                {{ course.lessonIsPay === 1 ? '已购' : '未购' }}
               </div>
             </div>
             <div class="card-bottom">
@@ -122,7 +129,14 @@
             <i class="el-icon-d-arrow-right"/>
           </div>
         </div>
-        <div class="box-bottom">
+        <div v-if="!collegeCourseList || collegeCourseList.length === 0" class="empty-box">
+          <el-image
+            class="img"
+            :src="require('@/assets/image/zanwushuju.png')"
+            fit="cover"
+          />
+        </div>
+        <div v-if="collegeCourseList.length > 0" class="box-bottom">
           <div
             v-for="course in collegeCourseList"
             :key="course.id"
@@ -137,8 +151,8 @@
                   fit="cover"
                 />
               </div>
-              <div :class="'status status-' + (course.lessonIsPay === '1' ? 'purchased' : 'unPurchased')">
-                {{ course.lessonIsPay === '1' ? '已购' : '未购' }}
+              <div :class="'status status-' + (course.lessonIsPay === 1 ? 'purchased' : 'unPurchased')">
+                {{ course.lessonIsPay === 1 ? '已购' : '未购' }}
               </div>
             </div>
             <div class="card-bottom">
@@ -664,18 +678,26 @@ export default {
         line-height: 21px;
         cursor: pointer;
       }
+
       .toMore:hover {
         color: #000;
       }
     }
 
+    .empty-box {
+      margin: auto;
+      text-align: center;
+    }
+
     .box-bottom {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       grid-gap: 24px 24px;
+
       .course-card:hover .img {
         transform: scale(1.2); /* 鼠标悬停时放大图片，1.2为放大倍数，可自定义 */
       }
+
       .course-card {
         cursor: pointer;
         height: 288px;