add course tag

src/api/course.js

@@ -28,10 +28,18 @@ export function getCourse(courseId) {
  * 获取课程知识点
  * @param {string} courseId 课程ID
  */
-export function getCourseTag(courseId) {
+export function getCourseTagList(courseId) {
   return httpRequest.get(`/zy/v2/education/tag/tree/${courseId}`)
 }
 
+/**
+ * 知识点详情
+ * @param {string} tagId 知识点ID
+ */
+export function getCourseTag(tagId) {
+  return httpRequest.get(`/zy/v2/education/tag/${tagId}`)
+}
+
 /**
  * 获取搜索记录
  */
@@ -42,7 +50,7 @@ export function getSearchTips() {
 /**
  * 知识点搜索
  */
-export function getTagSearchList(data) {
+export function getSearchTagList(data) {
   return httpRequest.post('/zy/v2/education/search/tag', data, {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
   })
@@ -51,7 +59,7 @@ export function getTagSearchList(data) {
 /**
  * 视频课程搜索
  */
-export function getCourseVideoSearchList(data) {
+export function getSearchCourseVideoList(data) {
   return httpRequest.post('/zy/v2/education/search/chapter1', data, {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
   })
@@ -60,7 +68,7 @@ export function getCourseVideoSearchList(data) {
 /**
  * 课程搜索
  */
-export function getCourseSearchList(data) {
+export function getSearchCourseList(data) {
   return httpRequest.post('/zy/v2/education/search/chapter2', data, {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
   })

src/components/Card.vue

@@ -30,7 +30,8 @@ export default {
   margin: 0;
   padding-bottom: 0.1rem;
   font-size: 0.3rem;
-  font-weight: 600;
+  font-weight: bold;
+  line-height: 1;
   color: #333;
   border-bottom: 0.06rem solid #2b7ce9;
 }

src/components/FreeCourseItem.vue

@@ -70,6 +70,7 @@ export default {
 }
 .course-item__text {
   font-size: 0.26rem;
+  line-height: 0.42rem;
   color: #999;
   display: -webkit-box;
   -webkit-box-orient: vertical;

src/pages/course/learn/courseTag.vue

-<template>
-  <div class="messages"></div>
-</template>
-
-<script>
-import MessageCard from './messageCard.vue'
-import * as api from '@/api/course.js'
-export default {
-  props: {},
-  components: { MessageCard },
-  data() {
-    return {
-      messageList: []
-    }
-  },
-  getCourseTag() {
-    api.getCourseTag(this.courseId).then(response => {
-      console.log(response)
-    })
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.messages {
-  background: #eee;
-}
-</style>

src/pages/course/learn/item.vue

@@ -12,7 +12,7 @@
         <course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
       </van-tab>
       <van-tab title="知识点速学" name="1">
-        <course-tag></course-tag>
+        <course-tag :courseId="courseId"></course-tag>
       </van-tab>
     </van-tabs>
   </div>
@@ -20,7 +20,7 @@
 
 <script>
 import CourseChapter from './courseChapter.vue'
-import CourseTag from './courseTag.vue'
+import CourseTag from '../tag/index.vue'
 import * as api from '@/api/course.js'
 export default {
   name: 'CourseLearnItem',
@@ -38,7 +38,7 @@ export default {
     $route: {
       immediate: true,
       handler(route) {
-        this.tabActive = route.query.tab || '0'
+        this.tabActive = route.query.tab || '1'
       }
     }
   },
@@ -60,17 +60,10 @@ export default {
         })
         this.detail = response
       })
-    },
-    // 知识点速学
-    getCourseTag() {
-      api.getCourseTag(this.courseId).then(response => {
-        console.log(response)
-      })
     }
   },
   beforeMount() {
     this.getCourse()
-    this.getCourseTag()
   }
 }
 </script>

src/pages/course/learn/messageCard.vue

-<template>
-  <div class="message-card">
-    <div class="message-card-hd">
-      <div class="message-card__title">{{data.name}}</div>
-    </div>
-    <div class="message-card-bd">
-      <ul v-if="data.tag && data.tag.length">
-        <li v-for="item in data.tag" :key="item.id">{{item.title}}</li>
-      </ul>
-    </div>
-    <div class="message-card-ft">更多</div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MessageCard',
-  props: {
-    data: { type: Object }
-  }
-}
-</script>

src/pages/course/tag/courseTagMessage.vue

+<template>
+  <div class="course-tag-message">
+    <div class="course-tag-message-hd">
+      <div class="course-tag-message__title">{{data.name}}</div>
+    </div>
+    <div class="course-tag-message-bd">
+      <template v-if="data.children && data.children.length">
+        <ul class="message-tag-list">
+          <template v-for="item in data.children">
+            <li
+              class="course-tag-item"
+              :key="item.id"
+              @click="$emit('search', item)"
+            >{{item.name}}</li>
+          </template>
+        </ul>
+      </template>
+    </div>
+    <div class="course-tag-message-ft">
+      <div class="more">
+        更多
+        <van-icon name="arrow-down"></van-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CourseTagMessage',
+  props: {
+    data: { type: Object }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.course-tag-message {
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 6px;
+}
+.course-tag-message-hd {
+  padding: 10px 0;
+  font-size: 15px;
+  color: #222;
+}
+.course-tag-item {
+  display: inline-block;
+  height: 24px;
+  margin: 0 10px 10px 0;
+  padding: 0 15px;
+  font-size: 13px;
+  color: #fff;
+  line-height: 24px;
+  background: #67a8ff;
+  border-radius: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  cursor: pointer;
+}
+.course-tag-message-ft {
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+}
+.more {
+  font-size: 13px;
+  color: #222;
+  text-align: center;
+  cursor: pointer;
+}
+</style>

src/pages/course/tag/index.vue

+<template>
+  <div class="messages">
+    <template v-for="item in messageList">
+      <message-card :data="item" :key="item.id" @search="onSearchTag" @change="onChangeTag"></message-card>
+    </template>
+  </div>
+</template>
+
+<script>
+import MessageCard from './messageCard.vue'
+import * as api from '@/api/course.js'
+export default {
+  props: { courseId: { type: String, required: true } },
+  components: { MessageCard },
+  data() {
+    return {
+      messageList: [] // {id:'', type: 1, payload: {}}
+    }
+  },
+  methods: {
+    // 获取知识点列表
+    getCourseTagList() {
+      api.getCourseTagList(this.courseId).then(response => {
+        this.messageList = response.chapters.map((item, index) => {
+          return {
+            id: this.genId(index),
+            type: 1,
+            from: 'system',
+            payload: item
+          }
+        })
+      })
+    },
+    // 点击标签
+    onSearchTag(data) {
+      this.messageList.push({
+        id: this.genId(),
+        type: 0,
+        from: 'user',
+        payload: { text: data.name }
+      })
+      this.searchTag(data.name)
+    },
+    searchTag(keywords) {
+      api.getSearchTagList({ keywords }).then(response => {
+        this.messageList.push({
+          id: this.genId(),
+          type: 2,
+          from: 'system',
+          payload: response
+        })
+      })
+    },
+    onChangeTag(data) {
+      this.messageList.push({
+        id: this.genId(),
+        type: 0,
+        from: 'user',
+        payload: { text: data.title }
+      })
+      this.getCourseTag(data.id)
+    },
+    // 获取知识点详情
+    getCourseTag(tagId) {
+      api.getCourseTag(tagId).then(response => {
+        this.messageList.push({
+          id: this.genId(),
+          type: 3,
+          from: 'system',
+          payload: response
+        })
+      })
+    },
+    // 生成消息ID
+    genId(index) {
+      index = index || this.messageList.length
+      return `message_${index}`
+    }
+  },
+  beforeMount() {
+    this.getCourseTagList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.messages {
+  background: #eee;
+  overflow: hidden;
+}
+</style>

src/pages/course/tag/messageCard.vue

+<template>
+  <div class="message-card" :class="classes">
+    <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>
+      </slot>
+    </div>
+  </div>
+</template>
+<script>
+import CourseTagMessage from './coursetagMessage.vue'
+import SearchTagMessage from './searchtagMessage.vue'
+import TagMessage from './tagMessage.vue'
+
+export default {
+  name: 'MessageCard',
+  props: {
+    data: { type: Object }
+  },
+  components: { CourseTagMessage, SearchTagMessage, TagMessage },
+  computed: {
+    isMyPublish() {
+      return this.data.from === 'user'
+    },
+    classes() {
+      return {
+        'is-my': this.isMyPublish,
+        'is-system': !this.isMyPublish
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.message-card {
+  clear: both;
+  margin: 20px;
+}
+.message-card-text {
+  display: inline-block;
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 6px;
+}
+.is-system {
+  .message-card-content {
+    text-align: left;
+  }
+}
+.is-my {
+  .message-card-content {
+    text-align: right;
+  }
+  .message-card-text {
+    color: #fff;
+    background-color: #67a8ff;
+  }
+}
+</style>

src/pages/course/tag/searchTagMessage.vue

+<template>
+  <div class="search-tag-message">
+    <p class="tips">交小通猜你想查：</p>
+    <ul class="search-tag-list">
+      <template v-for="(item,index) in data">
+        <li class="search-tag-item" :key="item.id" @click="$emit('change', item)">
+          <span class="num">{{index+1}}:</span>
+          <span class="text">{{item.title}}</span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchTagMessage',
+  props: {
+    data: { type: Array }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-tag-message {
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 6px;
+}
+.search-tag-item {
+  margin: 10px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  .num {
+    display: inline-block;
+    min-width: 24px;
+  }
+  .text {
+    border-bottom: 1px solid #2b7ce9;
+    cursor: pointer;
+  }
+}
+</style>

src/pages/course/tag/tagMessage.vue

+<template>
+  <div class="tag-message" v-html="html"></div>
+</template>
+
+<script>
+export default {
+  name: 'TagMessage',
+  props: {
+    data: { type: Object }
+  },
+  computed: {
+    html() {
+      return this.data.contents.replace(/\n/g, '<br/>')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tag-message {
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 30px;
+}
+</style>

src/pages/login/login.vue

@@ -120,7 +120,7 @@ export default {
       }
     },
     wechatLogin() {
-      const appId = 'wx451c01d40d090d7a'
+      const appId = 'wxc6044475caf2805a'
       // 回调地址
       const redirectURI = `https://passport.ezijing.com/rest/wechat/oauth-callback?needCheck=false&identity=transport&redirectUrl=${window.location.href}`
       // 微信的地址

src/pages/search/courseList.vue

@@ -39,7 +39,7 @@ export default {
   },
   methods: {
     getList() {
-      api.getCourseSearchList(this.requestParams).then(response => {
+      api.getSearchCourseList(this.requestParams).then(response => {
         this.list = response
       })
     },

src/pages/search/tagList.vue

@@ -39,7 +39,7 @@ export default {
   },
   methods: {
     getList() {
-      api.getTagSearchList(this.requestParams).then(response => {
+      api.getSearchTagList(this.requestParams).then(response => {
         this.list = response
       })
     },

src/pages/search/videoList.vue

@@ -46,7 +46,7 @@ export default {
   },
   methods: {
     getList() {
-      api.getCourseVideoSearchList(this.requestParams).then(response => {
+      api.getSearchCourseVideoList(this.requestParams).then(response => {
         this.list = response
       })
     },