chore:课程学习调整

src/pages/course/learn/index.vue

@@ -15,7 +15,7 @@ export default {
   name: 'Course',
   components: { CourseItem },
   metaInfo: {
-    title: 'VIP课程'
+    title: '课程学习'
   },
   data() {
     return {

src/pages/course/learn/item.vue

 <template>
   <div class="main-container" v-if="loaded">
-    <template v-if="detail.chapters && detail.chapters.length">
-      <course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
-    </template>
-    <van-empty description="暂无内容" v-else />
+    <div class="course-title">{{detail.course_name}}</div>
+    <van-tabs
+      class="main-tabs"
+      v-model="tabActive"
+      color="#2b7ce9"
+      :line-height="2"
+      :swipeable="true"
+    >
+      <van-tab title="课程学习">
+        <template v-if="detail.chapters && detail.chapters.length">
+          <course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
+        </template>
+        <van-empty description="暂无内容" v-else />
+      </van-tab>
+      <van-tab title="知识点速学">
+        <div class="tab-content">
+          <course-tag :courseId="courseId"></course-tag>
+        </div>
+      </van-tab>
+    </van-tabs>
   </div>
 </template>
 
 <script>
 import CourseChapter from './components/courseChapter.vue'
+import CourseTag from '../tag/index.vue'
 import * as api from '@/api/course.js'
 export default {
   name: 'CourseLearnItem',
-  components: { CourseChapter },
-  metaInfo() {
-    return {
-      title: this.title
-    }
+  components: { CourseChapter, CourseTag },
+  metaInfo: {
+    title: '课程内容'
   },
   data() {
     return {
+      tabActive: 0,
       loaded: false,
       detail: {}
     }
@@ -27,9 +43,6 @@ export default {
   computed: {
     courseId() {
       return this.$route.params.id
-    },
-    title() {
-      return this.detail.curriculum ? this.detail.curriculum.curriculum_name : ''
     }
   },
   methods: {
@@ -53,3 +66,19 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.course-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #222;
+  padding: 20px 0 10px;
+}
+.tab-content {
+  margin-left: -0.4rem;
+  margin-right: -0.4rem;
+  min-height: 100vh;
+  background: #eee;
+  padding: 0.4rem;
+}
+</style>