新增必考考点

src/api/test.js

+import httpRequest from '@/utils/axios'
+
+/**
+ * 获取课程列表
+ */
+export function getCourseList() {
+  return httpRequest.get('/api/zy/v2/education/courses/my')
+}

src/components/CourseListItem.vue

@@ -12,7 +12,7 @@
       </div>
     </div>
     <div class="course-item-bottom">
-      <div class="course-child" v-for="item in data.child" :key="item.id" @click="handleClick(item)">
+      <div class="course-child" v-for="item in data.child" :key="item.id" @click="$emit('on-click', item)">
         <div class="name">{{ item.course_name }}</div>
         <div class="progress" v-if="showProgress">{{ item.video_progress | progressText }}</div>
       </div>
@@ -41,11 +41,6 @@ export default {
       }
       return `已学${value}%`
     }
-  },
-  methods: {
-    handleClick(data) {
-      this.$router.push({ name: 'courseLearnItem', params: { id: data.id } })
-    }
   }
 }
 </script>

src/pages/course/tag/index.vue → src/components/CourseTag.vue

@@ -3,7 +3,7 @@
     <el-collapse v-model="activeNames" v-if="detail.chapters.length">
       <el-collapse-item :title="item.name" :name="item.id" v-for="item in detail.chapters" :key="item.id">
         <ul>
-          <li v-for="subItem in item.tag" :key="subItem.id" @click="handleClick(subItem)">
+          <li v-for="subItem in item.tag" :key="subItem.id" @click="$emit('on-click', subItem)">
             <div class="name">{{ subItem.title }}</div>
           </li>
         </ul>
@@ -44,9 +44,6 @@ export default {
         .finally(() => {
           this.loaded = true
         })
-    },
-    handleClick(data) {
-      this.$router.push({ name: 'courseTagItem', params: { id: data.id } })
     }
   },
   beforeMount() {

src/components/layout/aside.vue

@@ -31,8 +31,8 @@ export default {
         { title: '真题实战', icon: '', path: '/exam' },
         { title: '错题集合', icon: '', path: '/exam' },
         { title: '收藏试题', icon: '', path: '/exam' },
-        { title: '必考考点', icon: '', path: '/exam' },
-        { title: '考证课程', icon: '', path: '/course' },
+        { title: '必考考点', icon: '', path: '/course/test' },
+        { title: '考证课程', icon: '', path: '/course/learn' },
         { title: '意见反馈', icon: '', path: '/feedback' },
         { title: '联系客服', icon: '', path: '/contact' }
       ]

src/modules/viewer/index.vue

 <template>
-  <div class="course-viewer">
+  <div class="course-viewer" element-loading-text="加载中..." v-loading="!loaded">
     <div class="course-viewer-main">
       <!-- 顶部区域 -->
       <div class="course-viewer-main-hd">
@@ -55,7 +55,8 @@ export default {
       ppts: [],
       pptIndex: 0,
       isSeek: false,
-      menuVisible: true
+      menuVisible: true,
+      loaded: false
     }
   },
   watch: {
@@ -145,9 +146,15 @@ export default {
     },
     // 获取课程详情
     getCourse() {
-      api.getCourse(this.sid, this.cid).then(response => {
+      this.loaded = false
+      api
+        .getCourse(this.sid, this.cid)
+        .then(response => {
           this.detail = response
         })
+        .finally(() => {
+          this.loaded = true
+        })
     },
     // PPT列表更新
     handlePPTupdate(list) {

src/components/CourseChapter.vue → src/pages/course/learn/components/CourseChapter.vue

@@ -2,7 +2,7 @@
   <el-collapse v-model="activeNames">
     <el-collapse-item :title="item.name" :name="item.id" v-for="item in data" :key="item.id">
       <ul>
-        <li v-for="subItem in item.children" :key="subItem.id" @click="$emit('on-click', subItem)">
+        <li v-for="subItem in item.children" :key="subItem.id" @click="handleClick(subItem)">
           <div class="name">{{ subItem.name }}</div>
           <div class="progress" v-if="showProgress">{{ progressText(subItem.video_progress) }}</div>
         </li>
@@ -33,6 +33,9 @@ export default {
         return '已学完'
       }
       return `已学${value}%`
+    },
+    handleClick(data) {
+      this.$router.push({ name: 'viewerCourseChapter', params: { cid: this.courseId, id: data.id } })
     }
   }
 }

src/pages/course/learn/index.vue

 <template>
-  <course-list />
+  <course-list @on-click="handleClick" />
 </template>
 
 <script>
 import CourseList from '@/components/CourseList.vue'
 
 export default {
-  name: 'CourseLearn',
-  components: { CourseList }
+  components: { CourseList },
+  methods: {
+    handleClick(data) {
+      this.$router.push({ name: 'courseLearnItem', params: { id: data.id } })
+    }
+  }
 }
 </script>

src/pages/course/learn/item.vue

@@ -11,21 +11,20 @@
     </div>
     <el-tabs v-model="tabActive">
       <el-tab-pane lazy label="按章节学习">
-        <course-chapter :courseId="courseId" :data="detail.chapters" @on-click="handleClick"></course-chapter>
+        <course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
       </el-tab-pane>
       <el-tab-pane lazy label="按考点学习">
-        <course-tag :courseId="courseId"></course-tag>
+        <course-tag :courseId="courseId" @on-click="onTagClick"></course-tag>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-import CourseChapter from '@/components/CourseChapter.vue'
-import CourseTag from '../tag/index.vue'
+import CourseChapter from './components/CourseChapter'
+import CourseTag from '@/components/CourseTag'
 import * as api from '@/api/course.js'
 export default {
-  name: 'CourseLearnItem',
   components: { CourseChapter, CourseTag },
   metaInfo() {
     return {
@@ -57,8 +56,9 @@ export default {
           this.loaded = true
         })
     },
-    handleClick(data) {
-      this.$router.push({ name: 'viewerCourseChapter', params: { cid: this.courseId, id: data.id } })
+    // 考点点击
+    onTagClick(data) {
+      this.$router.push({ name: 'courseTagItem', params: { courseId: this.courseId, id: data.id } })
     }
   },
   beforeMount() {

src/pages/course/player/index.vue

-<template>
-  <div class="main-container" style="margin:0 0.15rem">
-    <course-list @on-click="handleClick" />
-  </div>
-</template>
-
-<script>
-import CourseList from '@/components/CourseList.vue'
-
-export default {
-  name: 'CoursePlayer',
-  components: { CourseList },
-  metaInfo: {
-    title: '考证课程'
-  },
-  computed: {
-    isWeapp() {
-      return this.$store.state.isWeapp
-    }
-  },
-  methods: {
-    handleClick(data) {
-      if (this.isWeapp) {
-        const url = `/pages/web/index?src=${window.location.origin}/course/player/${data.id}`
-        wx.miniProgram.navigateTo({ url })
-      } else {
-        this.$router.push({ name: 'coursePlayerItem', params: { id: data.id } })
-      }
-    }
-  }
-}
-</script>

src/pages/course/player/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" @on-click="handleClick"></course-chapter>
-    </template>
-    <van-empty description="暂无内容" v-else />
-  </div>
-</template>
-
-<script>
-import CourseChapter from '@/components/CourseChapter.vue'
-import * as api from '@/api/course.js'
-
-export default {
-  name: 'CoursePlayerItem',
-  components: { CourseChapter },
-  metaInfo() {
-    return {
-      title: this.detail.course_name || ''
-    }
-  },
-  data() {
-    return {
-      loaded: false,
-      detail: {}
-    }
-  },
-  computed: {
-    courseId() {
-      return this.$route.params.id
-    },
-    isWeapp() {
-      return this.$store.state.isWeapp
-    },
-    isVip() {
-      return this.$store.state.isVip
-    }
-  },
-  methods: {
-    // 课程学习
-    getCourse() {
-      this.loaded = false
-      api.getCourse(this.courseId).then(response => {
-        this.loaded = true
-        response.chapters = response.chapters.filter(item => {
-          item.children = item.children.filter(
-            child => child.type === 2 && child.resource_id && child.resource_id !== '6684350363920760832'
-          )
-          return item.children.length
-        })
-        this.detail = response
-      })
-    },
-    handleClick(data) {
-      if (this.isWeapp) {
-        wx.miniProgram.navigateTo({ url: `/pages/course/player?course_id=${this.courseId}&chapter_id=${data.id}` })
-      } else {
-        window.alert('请在微信小程序中打开')
-      }
-    }
-  },
-  beforeMount() {
-    this.getCourse()
-  }
-}
-</script>

src/pages/course/test/components/CourseChapter.vue

+<template>
+  <div element-loading-text="加载中..." v-loading="!loaded">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item :title="item.name" :name="item.id" v-for="item in chapters" :key="item.id">
+        <ul>
+          <li v-for="subItem in item.children" :key="subItem.id">
+            <div class="name">{{ subItem.name }}</div>
+            <div class="buttons">
+              <el-button round size="mini" v-if="subItem.status === '100'">测试</el-button>
+              <el-button round size="mini" v-if="['0', '3'].includes(subItem.status)">继续测试</el-button>
+              <template v-if="['1', '2'].includes(subItem.status)">
+                <el-button round size="mini">重新测试</el-button>
+                <el-button round size="mini">报告</el-button>
+              </template>
+            </div>
+          </li>
+        </ul>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/test'
+export default {
+  props: {
+    courseId: { type: String, required: true }
+  },
+  data() {
+    return {
+      loaded: false,
+      activeNames: [],
+      courseList: []
+    }
+  },
+  computed: {
+    currentCourse() {
+      return this.courseList.find(item => {
+        return item.course_id === this.courseId
+      })
+    },
+    chapters() {
+      return this.currentCourse ? this.currentCourse.curriculum.chapters_examination : []
+    }
+  },
+  methods: {
+    getCourseList() {
+      this.loaded = false
+      api
+        .getCourseList()
+        .then(response => {
+          this.courseList = response
+        })
+        .finally(() => {
+          this.loaded = true
+        })
+    }
+  },
+  beforeMount() {
+    this.getCourseList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-collapse {
+  border: 0;
+}
+::v-deep .el-collapse-item__header {
+  font-size: 14px;
+  font-weight: 600;
+  color: #222;
+}
+::v-deep .el-collapse-item__content {
+  padding-bottom: 10px;
+}
+li {
+  display: flex;
+  padding: 5px 0;
+  cursor: pointer;
+  color: #666;
+  &:hover {
+    color: #c01540;
+  }
+  .name {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+</style>

src/pages/course/test/index.vue

+<template>
+  <course-list @on-click="handleClick" />
+</template>
+
+<script>
+import CourseList from '@/components/CourseList.vue'
+
+export default {
+  components: { CourseList },
+  methods: {
+    handleClick(data) {
+      this.$router.push({ name: 'courseTestItem', params: { id: data.id } })
+    }
+  }
+}
+</script>

src/pages/course/test/item.vue

+<template>
+  <div class="main-container" element-loading-text="加载中..." v-loading="!loaded">
+    <div class="course-top" v-if="detail.curriculum">
+      <div class="course-top-hd">
+        <div class="course-top__title">{{ detail.curriculum.curriculum_name }}</div>
+      </div>
+      <div class="course-top-bd">
+        <div class="course-top__pic"><img :src="detail.curriculum.curriculum_picture" /></div>
+        <div class="course-top__content" v-html="detail.curriculum.curriculum_represent"></div>
+      </div>
+    </div>
+    <el-tabs v-model="tabActive">
+      <el-tab-pane lazy label="按章节练习">
+        <course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
+      </el-tab-pane>
+      <el-tab-pane lazy label="按考点练习">
+        <course-tag :courseId="courseId" @on-click="onTagClick"></course-tag>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import CourseChapter from './components/CourseChapter'
+import CourseTag from '@/components/CourseTag'
+import * as api from '@/api/course.js'
+export default {
+  components: { CourseChapter, CourseTag },
+  metaInfo() {
+    return {
+      title: this.detail.course_name || ''
+    }
+  },
+  data() {
+    return {
+      tabActive: 0,
+      loaded: false,
+      detail: {}
+    }
+  },
+  computed: {
+    courseId() {
+      return this.$route.params.id
+    }
+  },
+  methods: {
+    // 课程学习
+    getCourse() {
+      this.loaded = false
+      api
+        .getCourse(this.courseId)
+        .then(response => {
+          this.detail = response
+        })
+        .finally(() => {
+          this.loaded = true
+        })
+    },
+    onTagClick(data) {
+      console.log(data)
+    }
+  },
+  beforeMount() {
+    this.getCourse()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-container {
+  height: 100%;
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+.course-top {
+  padding-bottom: 20px;
+}
+.course-top-hd {
+  padding-bottom: 8px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #ccc;
+}
+.course-top__title {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1;
+}
+.course-top-bd {
+  display: flex;
+}
+.course-top__pic {
+  width: 160px;
+  height: 90px;
+  margin-right: 20px;
+  border-radius: 2px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.course-top__content {
+  flex: 1;
+  line-height: 24px;
+  overflow: hidden;
+}
+</style>

src/pages/search/components/tagList.vue

@@ -2,7 +2,9 @@
   <div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
     <ul v-if="list.length">
       <li v-for="item in list" :key="item.id">
-        <router-link :to="{ name: 'courseTagItem', params: { id: item.id } }">{{ item.title }}</router-link>
+        <router-link :to="{ name: 'courseTagItem', params: { courseId: item.course_id, id: item.id } }">
+          {{ item.title }}
+        </router-link>
       </li>
     </ul>
     <template v-else>

src/pages/search/components/videoList.vue

@@ -67,7 +67,9 @@ export default {
     refresh() {
       this.getList()
     },
-    onClick(data) {}
+    onClick(data) {
+      this.$router.push({ name: 'viewerCourseChapter', params: { cid: data.course_id, id: data.id } })
+    }
   },
   beforeMount() {
     this.getList()

src/router/routes.js

@@ -19,9 +19,17 @@ const courseRoutes = [
   },
   // 课程知识点详情
   {
-    path: '/course/tag/:id',
+    path: '/course/learn/:courseId/tag/:id',
     name: 'courseTagItem',
     component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/course/tag/item')
+  },
+  // 课程练习列表
+  { path: '/course/test', component: () => import(/* webpackChunkName: "course-test" */ '@/pages/course/test') },
+  // 课程练习详情
+  {
+    path: '/course/test/:id',
+    name: 'courseTestItem',
+    component: () => import(/* webpackChunkName: "course-test" */ '@/pages/course/test/item')
   }
 ]