实验台

src/api/index.js

@@ -67,12 +67,15 @@ export default {
 
     // 课程学习
     pageConditionalQueryCourseByStudent: `occupationlab/occupationlab/theoreticalCourse/pageConditionalQueryCourseByStudent`,
+    collectCourse: `occupationlab/occupationlab/theoreticalCourse/collectCourse`,
     listClassification: `occupationlab/occupationlab/theoreticalCourseClassification/pagingQuery`,
     findByIdCourse: `occupationlab/occupationlab/theoreticalCourse/findById`,
     playRecordSave: `occupationlab/occupationlab/playRecord/save`,
     studentLoginPreCourse: `occupationlab/occupationlab/theoreticalCourse/studentLoginPreCourse`,
     getRedisCache: `occupationlab/occupationlab/theoreticalCourse/getRedisCache`,
     getSubsection: `occupationlab/occupationlab/theoreticalCourseSubsection/getSubsection`,
+    recentUse: `nakadai/nakadai/curriculum/recentUse`,
+    recordRecentUsage: `nakadai/nakadai/curriculum/recordRecentUsage`,
 
     // 资讯
     queryAllColumns: `occupationlab/occupationlab/information/column/queryAllColumns`, // 栏目树

src/pages/course/list/index.vue

@@ -13,7 +13,7 @@
         <!-- 课程筛选 -->
         <div class="filter">
             <div class="wrap-inner" style="padding-bottom: 0">
-                <dl>
+                <dl v-if="active != 2">
                     <dt>课程分类：</dt>
                     <dd :class="{active: form.categoryId === ''}" @click="changeCategory('')">不限</dd>
                     <dd v-for="(item, i) in classificationList" :key="i" :class="{active: form.categoryId === item.id}" @click="changeCategory(item.id)">{{ item.classificationName }}</dd>
@@ -38,6 +38,9 @@
                           <i class="el-icon-view"></i>
                           {{ item.pageviews }}
                         </div>
+                        <div class="meta collect" @click.stop="collect(item)">
+                          <i :class="item.collectionStatus ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
+                        </div>
                         <div class="meta">
                           <i class="el-icon-user"></i>
                           {{ item.schoolName }}
@@ -77,6 +80,10 @@ export default {
               {
                 id: 0,
                 name: '共享课程'
+              },
+              {
+                id: 2,
+                name: '我的收藏'
               }
             ],
             form: {
@@ -109,7 +116,7 @@ export default {
     },
     mounted() {
       // 登录后的课程才需要展示本校课程
-      this.isTourist || this.tabs.push({
+      this.isTourist || this.tabs.splice(1, 0, {
         id: 1,
         name: '本校课程'
       })
@@ -199,6 +206,12 @@ export default {
             this.page = val;
             this.getData();
         },
+        // 收藏
+        collect(item) {
+          this.$post(`${this.api.collectCourse}?courseId=${item.id}&state=${item.collectionStatus ? 0 : 1}`).then(res => {
+            this.getData()
+          }).catch(res => {})
+        },
         toDetail(id) {
             this.$router.push(`/${this.isTourist ? 'preCourse' : 'course'}/details?id=${id}&source=${this.active}`);
         }
@@ -369,6 +382,9 @@ export default {
               color: #a9a9a9;
               font-size: 12px;
             }
+            .collect {
+              font-size: 20px;
+            }
             &:hover {
                 box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
                 img {

src/pages/station/list/index.vue

@@ -9,7 +9,11 @@
             </div>
         </div>
         <div class="station">
-            <div class="inner">
+          <div class="inner">
+            <div class="tabs">
+              <a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a>
+            </div>
+            <div class="curs">
               <template v-if="curriculumList.length">
                 <template v-for="(item,index) in curriculumList">
                     <div class="item" :title="item.curriculumName" @click="goPreview(item)" :key="index" v-if="!keyword || item.curriculumName.includes(keyword)">
@@ -28,6 +32,7 @@
                   </div>
               </div>
             </div>
+          </div>
         </div>
     </div>
 </template>
@@ -38,6 +43,17 @@ export default {
     data() {
         return {
             keyword: "",
+            active: 0,
+            tabs: [
+              {
+                id: 0,
+                name: '实验课程'
+              },
+              {
+                id: 1,
+                name: '最近使用'
+              }
+            ],
             curriculumList: []
         }
     },
@@ -46,15 +62,25 @@ export default {
     },
     methods: {
         getschoolCourse() { // 获取课程列表
+          this.active ?
+            this.$post(this.api.recentUse, {
+              pageNum: 1,
+              pageSize: 100
+            }).then(({ page }) => {
+                this.curriculumList = page.records
+            }).catch(err => {}) :
             this.$get(this.api.schoolCourse).then(res => {
                 this.curriculumList = res.data;
-            }).catch(err => {
+            }).catch(err => {})
-                console.log(err);
-            });
         },
         goPreview(item) {
             this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}`);
         },
+        // tab切换
+        tabChange(item) {
+          this.active = item.id
+          this.getschoolCourse()
+        },
     }
 };
 </script>
@@ -93,61 +119,83 @@ export default {
     }
 }
 
+.tabs {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .item {
+        padding: 0 20px;
+        margin-right: 16px;
+        font-size: 17px;
+        text-align: center;
+        color: #333;
+        line-height: 50px;
+        border-bottom: 3px solid transparent;
+        cursor: pointer;
+        &.active {
+            color: #007EFF;
+            border-color: #007EFF;
+        }
+    }
+}
 .station {
     min-height: calc(100vh - 520px);
     background: url(../../../assets/img/station1.png) (top left)/auto no-repeat,
                 url(../../../assets/img/station2.png) bottom right/auto no-repeat;
     .inner {
+      width: 1072px;
+      margin: 0 auto;
+    }
+    .curs {
         display: flex;
         flex-wrap: wrap;
-        width: 1072px;
         padding-top: 60px;
-        margin: 0 auto;
+        .item {
-    }
+            position: relative;
-    .item {
+            padding: 0 10px;
-        position: relative;
+            margin: 0 10px 40px;
-        padding: 0 10px;
+            text-align: center;
-        margin: 0 10px 40px;
+            background-color: #fff;
-        text-align: center;
+            border-radius: 8px;
-        background-color: #fff;
+            cursor: pointer;
-        border-radius: 8px;
+            &:hover {
-        cursor: pointer;
+                opacity: .9;
-        &:hover {
+            }
-            opacity: .9;
+            img {
-        }
+                width: 215px;
-        img {
+                height: 118px;
-            width: 215px;
+                margin-top: -20px;
-            height: 118px;
+                border-radius: 12px;
-            margin-top: -20px;
+            }
-            border-radius: 12px;
+            .bottom {
-        }
+                display: flex;
-        .bottom {
+                justify-content: space-between;
-            display: flex;
+                align-items: center;
-            justify-content: space-between;
+                padding: 10px 5px;
-            align-items: center;
+            }
-            padding: 10px 5px;
+            .text {
-        }
+                display: inline-flex;
-        .text {
+                align-items: center;
-            display: inline-flex;
+                width: 130px;
-            align-items: center;
+                height: 40px;
-            width: 130px;
+                text-align: left;
-            height: 40px;
+                font-size: 12px;
-            text-align: left;
+                line-height: 1.6;
-            font-size: 12px;
+                overflow: hidden;
-            line-height: 1.6;
+                span {
-            overflow: hidden;
+                    @include mul-ellipsis(2);
-            span {
+                }
-                @include mul-ellipsis(2);
+            }
+            a {
+                padding: 0 8px;
+                line-height: 28px;
+                font-size: 14px;
+                color: #7A7A7A;
+                border-radius: 20px;
+                border: 1px solid #DADADA;
             }
-        }
-        a {
-            padding: 0 8px;
-            line-height: 28px;
-            font-size: 14px;
-            color: #7A7A7A;
-            border-radius: 20px;
-            border: 1px solid #DADADA;
         }
     }
+    
 }
 </style>

src/pages/station/preview/index.vue

@@ -173,6 +173,7 @@ export default {
         this.insertScript();
         this.getData();
         this.getStatus()
+        this.addRecord()
     },
     destroyed() {
       // 记录播放时长
@@ -195,6 +196,10 @@ export default {
             this.assessmentList = data.assessmentConfig;
             this.systemIds = data.systemIds
         },
+        // 记录最近使用
+        addRecord() {
+          this.$post(`${this.api.recordRecentUsage}?cid=${this.courseId}`).then(res => {}).catch(res => {})
+        },
         // 查询是否过期
         getStatus() {
           this.$get(this.api.whetherToRenewTheFee, {

src/setting.js

@@ -28,7 +28,7 @@ if (isPro) {
     uploadURL = `http://121.37.12.51/`
     host = "http://121.37.12.51/"; // 测试服
     // host = 'https://www.occupationlab.com/' // 正式服
-    // host = "http://192.168.31.51:9000/"; // 榕
+    host = "http://192.168.31.151:9000/"; // 榕
     // host = "http://192.168.31.116:9000/"; // 赓
 }