Merge branch 'master' of https://gitlab.ezijing.com/ezijing/transport-weapp-h5

package.json

@@ -70,14 +70,14 @@
     "promise.prototype.finally": "^3.1.2",
     "regenerator": "^0.14.4",
     "swiper": "^5.4.5",
-    "vant": "^2.8.7",
+    "vant": "^2.9.0",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-i18n": "^8.16.0",
     "vue-loader": "^15.9.1",
     "vue-meta-info": "^0.1.7",
-    "vue-router": "^3.1.6",
+    "vue-router": "^3.3.4",
     "vue-template-compiler": "^2.6.11",
-    "vuex": "^3.4.0"
+    "vuex": "^3.5.1"
   }
 }

src/pages/course/learn/item.vue

@@ -13,7 +13,10 @@
         <course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
       </van-tab>
       <van-tab title="知识点速学" name="1">
-        <course-tag :courseId="courseId" style="margin-left:-0.4rem;margin-right:-0.4rem;"></course-tag>
+        <course-tag
+          :courseId="courseId"
+          style="margin-left:-0.4rem;margin-right:-0.4rem;min-height:100vh;background:#eee;"
+        ></course-tag>
       </van-tab>
     </van-tabs>
   </div>

src/pages/course/tag/courseTagMessage.vue

@@ -4,15 +4,15 @@
       <div class="course-tag-message__title">{{data.name}}</div>
     </div>
     <div class="course-tag-message-bd">
-      <template v-if="data.children && data.children.length">
+      <template v-if="data.tag && data.tag.length">
         <ul class="message-tag-list" ref="content">
-          <template v-for="item in data.children">
-            <li class="course-tag-item" :key="item.id" @click="$emit('search', item)">{{item.name}}</li>
+          <template v-for="item in data.tag">
+            <li class="course-tag-item" :key="item.id" @click="onClick(item)">{{item.title}}</li>
           </template>
         </ul>
       </template>
     </div>
-    <div class="more" @click="toggleMore" v-if="hasMore">
+    <div class="more" @click="viewMore" v-if="hasMore">
       <template v-if="!showMore">
         <span>更多</span>
         <van-icon name="arrow-down"></van-icon>
@@ -29,6 +29,8 @@
 export default {
   name: 'CourseTagMessage',
   props: {
+    courseId: { type: String },
+    isTest: { type: Boolean, default: false },
     data: { type: Object }
   },
   data() {
@@ -49,12 +51,32 @@ export default {
     }
   },
   methods: {
+    onClick(data) {
+      if (this.isTest) {
+        const query = {
+          type: 2,
+          tag_id: data.id,
+          papersUrl: 'zy/v2/examination/course-papers'
+        }
+        this.$router.push({ path: '/exam/answer', query })
+        return
+      }
+      this.$emit('change', data)
+    },
     toggleMore() {
       this.showMore = !this.showMore
+    },
+    viewMore() {
+      this.$router.push({
+        name: 'courseTag',
+        params: { courseId: this.courseId, chapterId: this.data.id }
+      })
     }
   },
   mounted() {
-    this.contentHeight = this.$refs.content.offsetHeight
+    this.contentHeight = this.$refs.content
+      ? this.$refs.content.offsetHeight
+      : 0
   }
 }
 </script>

src/pages/course/tag/index.vue

@@ -2,7 +2,14 @@
   <div class="course-tag">
     <div class="messages" ref="messages">
       <template v-for="item in messageList">
-        <message-card :data="item" :key="item.id" @search="onSearchTag" @change="onChangeTag"></message-card>
+        <message-card
+          :courseId="courseId"
+          :isTest="isTest"
+          :data="item"
+          :key="item.id"
+          @search="onSearchTag"
+          @change="onChangeTag"
+        ></message-card>
       </template>
     </div>
     <div class="send">
@@ -30,23 +37,32 @@
 import MessageCard from './messageCard.vue'
 import * as api from '@/api/course.js'
 export default {
-  props: { courseId: { type: String, required: true } },
+  props: {
+    courseId: { type: String, required: true },
+    isTest: { type: Boolean, default: false }
+  },
   components: { MessageCard },
   data() {
     return {
+      detail: { chapters: [] },
       messageList: [], // {id:'', type: 1, payload: {}}
       searchValue: ''
     }
   },
   watch: {
     messageList(list) {
+      if (list.length > this.detail.chapters.length) {
         this.scrollBottom()
       }
+      this.$emit('message', list)
+    }
   },
   methods: {
     // 获取知识点列表
     getCourseTagList() {
       api.getCourseTagList(this.courseId).then(response => {
+        this.$emit('ready', response)
+        this.detail = response
         this.messageList = response.chapters.map((item, index) => {
           return {
             id: this.genId(index),
@@ -141,10 +157,10 @@ export default {
     left: 0;
     right: 0;
     bottom: 0;
-    height: 50px;
     background: rgba(247, 247, 247, 1);
     box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
     z-index: 999;
+    padding-bottom: env(safe-area-inset-bottom);
   }
   ::v-deep .van-search__content {
     background-color: #fff;

src/pages/course/tag/item.vue

-<template></template>
+<template>
+  <div class="course-tag-wrapper">
+    <div class="course-tag-hd">
+      <h1 class="tag-title">{{detail.title}}</h1>
+    </div>
+    <div class="course-tag-bd">
+      <div class="course-tag-main">
+        <div class="tag-content" v-html="html"></div>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script>
+import * as api from '@/api/course.js'
 export default {
-  name: 'CourseTagItem'
+  name: 'CourseTagItem',
+  data() {
+    return {
+      detail: {}
+    }
+  },
+  computed: {
+    tagId() {
+      return this.$route.params.id
+    },
+    html() {
+      return this.detail.contents
+        ? this.detail.contents.replace(/\n/g, '<br/>')
+        : ''
+    }
+  },
+  methods: {
+    // 获取知识点详情
+    getCourseTag() {
+      api.getCourseTag(this.tagId).then(response => {
+        this.detail = response
+      })
+    }
+  },
+  beforeMount() {
+    this.getCourseTag()
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.course-tag-wrapper {
+  min-height: 100vh;
+  background-color: #eee;
+  box-sizing: border-box;
+}
+.course-tag-hd {
+  padding: 0.4rem;
+  background-color: #fff;
+}
+.course-tag-bd {
+  padding: 0.4rem;
+}
+.course-tag-main {
+  padding: 0.2rem;
+  background-color: #fff;
+  border-radius: 0.12rem;
+}
+.tag-title {
+  font-size: 0.3rem;
+  font-weight: bold;
+  color: #222;
+  line-height: 0.48rem;
+}
+.tag-content {
+  padding: 20px 0;
+  font-size: 13px;
+  line-height: 24px;
+}
 </style>

src/pages/course/tag/list.vue

+<template>
+  <div class="course-tag-wrapper">
+    <div class="course-tag-hd">
+      <h1 class="course-title">{{detail.course_name}}</h1>
+    </div>
+    <div class="course-tag-bd">
+      <div class="course-tag-main">
+        <h1 class="tag-title">{{chapter.name}}</h1>
+        <ul class="tag-list">
+          <li class="tag-item" v-for="item in tagList" :key="item.id" @click="onClick(item)">
+            <span>{{item.title}}</span>
+            <van-icon name="arrow" />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from '@/api/course.js'
+export default {
+  name: 'CourseTagList',
+  data() {
+    return {
+      detail: { chapters: [] }
+    }
+  },
+  computed: {
+    courseId() {
+      return this.$route.params.courseId
+    },
+    chapterId() {
+      return this.$route.params.chapterId
+    },
+    chapter() {
+      const found = this.detail.chapters.find(
+        item => item.id === this.chapterId
+      )
+      return found || {}
+    },
+    tagList() {
+      return this.chapter.tag || []
+    }
+  },
+  methods: {
+    // 获取知识点列表
+    getCourseTagList() {
+      api.getCourseTagList(this.courseId).then(response => {
+        this.detail = response
+      })
+    },
+    onClick({ id }) {
+      this.$router.push({ name: 'courseTagItem', params: { id } })
+    }
+  },
+  beforeMount() {
+    this.getCourseTagList()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.course-tag-wrapper {
+  min-height: 100vh;
+  background-color: #eee;
+  box-sizing: border-box;
+}
+.course-tag-hd {
+  padding: 0.4rem;
+  background-color: #fff;
+}
+.course-tag-bd {
+  padding: 0.4rem;
+}
+.course-tag-main {
+  padding: 0.2rem;
+  background-color: #fff;
+  border-radius: 0.12rem;
+}
+.course-title {
+  font-size: 0.3rem;
+  color: #222;
+}
+.tag-title {
+  font-size: 0.3rem;
+  font-weight: bold;
+  color: #222;
+  line-height: 0.48rem;
+}
+.tag-item {
+  position: relative;
+  padding: 0.4rem 0.4rem 0.4rem 0;
+  font-size: 0.3rem;
+  color: #222;
+  line-height: 1.4;
+  border-bottom: 1px solid #eee;
+  &:last-child {
+    border-bottom: 0;
+  }
+  ::v-deep .van-icon {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+</style>

src/pages/course/tag/messageCard.vue

@@ -3,9 +3,26 @@
     <div class="message-card-content">
       <slot :data="data.payload">
         <div class="message-card-text" v-if="data.type === 0">{{data.payload.text}}</div>
-        <course-tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 1"></course-tag-message>
-        <search-tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 2"></search-tag-message>
-        <tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 3"></tag-message>
+        <course-tag-message
+          :courseId="courseId"
+          :isTest="isTest"
+          :data="data.payload"
+          v-on="$listeners"
+          v-if="data.type === 1"
+        ></course-tag-message>
+        <search-tag-message
+          :courseId="courseId"
+          :isTest="isTest"
+          :data="data.payload"
+          v-on="$listeners"
+          v-if="data.type === 2"
+        ></search-tag-message>
+        <tag-message
+          :courseId="courseId"
+          :data="data.payload"
+          v-on="$listeners"
+          v-if="data.type === 3"
+        ></tag-message>
       </slot>
     </div>
   </div>
@@ -18,6 +35,8 @@ import TagMessage from './tagMessage.vue'
 export default {
   name: 'MessageCard',
   props: {
+    courseId: { type: String },
+    isTest: { type: Boolean, default: false },
     data: { type: Object }
   },
   components: { CourseTagMessage, SearchTagMessage, TagMessage },
@@ -38,7 +57,7 @@ export default {
 <style lang="scss" scoped>
 .message-card {
   clear: both;
-  margin: 20px;
+  margin-bottom: 20px;
 }
 .message-card-text {
   display: inline-block;

src/pages/course/tag/searchTagMessage.vue

@@ -3,7 +3,7 @@
     <p class="tips">交小通猜你想查：</p>
     <ul class="search-tag-list">
       <template v-for="(item,index) in dataList">
-        <li class="search-tag-item" :key="item.id" @click="$emit('change', item)">
+        <li class="search-tag-item" :key="item.id" @click="onClick(item)">
           <span class="num">{{index+1}}:</span>
           <span class="text">{{item.title}}</span>
         </li>
@@ -26,6 +26,8 @@
 export default {
   name: 'SearchTagMessage',
   props: {
+    courseId: { type: String },
+    isTest: { type: Boolean, default: false },
     data: {
       type: Array,
       default() {
@@ -38,7 +40,7 @@ export default {
   },
   computed: {
     hasMore() {
-      return this.data.length > 5
+      return this.data.length > this.maxCount
     },
     dataList() {
       if (this.hasMore && !this.showMore) {
@@ -48,6 +50,18 @@ export default {
     }
   },
   methods: {
+    onClick(data) {
+      if (this.isTest) {
+        const query = {
+          type: 2,
+          tag_id: data.id,
+          papersUrl: 'zy/v2/examination/course-papers'
+        }
+        this.$router.push({ path: '/exam/answer', query })
+        return
+      }
+      this.$emit('change', data)
+    },
     toggleMore() {
       this.showMore = !this.showMore
     }

src/pages/course/tag/tagMessage.vue

@@ -3,7 +3,7 @@
     <div class="tag-message-bd">
       <div class="tag-message-content" ref="content" v-html="html"></div>
     </div>
-    <div class="more" @click="toggleMore" v-if="hasMore">
+    <div class="more" @click="viewMore" v-if="hasMore">
       <template v-if="!showMore">
         <span>更多</span>
         <van-icon name="arrow-down"></van-icon>
@@ -39,12 +39,17 @@ export default {
       }
     },
     html() {
-      return this.data.contents.replace(/\n/g, '<br/>')
+      return this.data.contents
+        ? this.data.contents.replace(/\n/g, '<br/>')
+        : ''
     }
   },
   methods: {
     toggleMore() {
       this.showMore = !this.showMore
+    },
+    viewMore() {
+      this.$router.push({ name: 'courseTagItem', params: { id: this.data.id } })
     }
   },
   mounted() {

src/pages/courseExam/courseNode.vue

 <template>
-  <div>
-    {{$route.query.id}}
+  <div class="course-tag-wrapper">
+    <div class="course-tag-hd">
+      <h1 class="course-title">{{detail.course_name}}</h1>
+    </div>
+    <div class="course-tag-bd">
+      <course-tag :courseId="courseId" :isTest="true" @ready="onReady"></course-tag>
+    </div>
   </div>
 </template>
 
 <script>
+import CourseTag from '@/pages/course/tag/index.vue'
 export default {
+  components: { CourseTag },
+  data() {
+    return {
+      detail: {}
+    }
+  },
+  computed: {
+    courseId() {
+      return this.$route.query.id
+    }
+  },
+  methods: {
+    onReady(response) {
+      this.detail = response
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
+.course-tag-wrapper {
+  min-height: 100vh;
+  background-color: #eee;
+  box-sizing: border-box;
+}
+.course-tag-hd {
+  padding: 0.4rem;
+  background-color: #fff;
+}
+.course-tag-bd {
+  padding: 0.4rem;
+}
+.course-title {
+  font-size: 0.3rem;
+  color: #222;
+}
 </style>

src/pages/search/tagList.vue

 <template>
   <div class="main-list">
     <ul v-if="list.length">
-      <li v-for="item in list" :key="item.id" @click="onClick">{{item.title}}</li>
+      <li v-for="item in list" :key="item.id" @click="onClick(item)">{{item.title}}</li>
     </ul>
     <template v-else>
       <slot name="empty">
@@ -47,9 +47,8 @@ export default {
     refresh() {
       this.getList()
     },
-    onClick() {
-      window.alert('开发中')
-      // this.$router.push({ name: 'courseLearnItem', params: { id } })
+    onClick(data) {
+      this.$router.push({ name: 'courseTagItem', params: { id: data.id } })
     }
   },
   beforeMount() {

src/router/routes.js

@@ -70,6 +70,18 @@ export default [
     name: 'courseLearnItem',
     component: () => import('../pages/course/learn/item.vue')
   },
+  // 课程知识点
+  {
+    path: '/course/learn/:courseId/tag/:chapterId',
+    name: 'courseTag',
+    component: () => import('../pages/course/tag/list.vue')
+  },
+  // 课程知识点详情
+  {
+    path: '/course/tag/:id',
+    name: 'courseTagItem',
+    component: () => import('../pages/course/tag/item.vue')
+  },
   // 登录
   {
     path: '/login',