课程讨论模块提取

client/src/modules/discuss/api/index.js

@@ -33,3 +33,13 @@ export function getChapterVideoAliyun(vid) {
     { headers: { 'Content-Type': 'application/json' } }
   )
 }
+
+/**
+ * 获取课程讨论列表
+ */
+export const getDiscussList = (path, dataJson) => {
+  return httpRequest.get(
+    `/v2/qa/questions${path}`,
+    dataJson
+  )
+}

client/src/modules/discuss/src/discuss.vue

@@ -3,15 +3,15 @@
     <template v-for='(item, index) in discussList'>
       <div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-cid='item.cid' :data-index='index'>
         <div class='user'>
-          <template v-if="item.user.url">
-            <img class='img' :src='item.user.url' />
+          <template v-if="item.questioner.url">
+            <img class='img' :src='item.questioner.url' />
           </template>
           <template v-else>
-            <img class='img' src='../../assets/images/person-default.jpg' />
+            <img class='img' src='../assets/images/person-default.jpg' />
           </template>
           <div class='right'>
-            <div class='name'>{{item.user.name}}</div>
-            <div class='time'>{{item.user.time}}</div>
+            <div class='name'>{{item.questioner.name}}</div>
+            <div class='time'>{{item.questioner.time}}</div>
           </div>
         </div>
         <div class='title'>{{item.title}}</div>
@@ -27,10 +27,10 @@
 </template>
 
 <script>
-import api from '../api/index'
+import * as api from '../api/index'
 
 export default {
-  name: Discuss,
+  name: 'Discuss',
   components: { },
   data () {
     return {
@@ -92,15 +92,17 @@ export default {
     },
     loadAjax () {
       let pathUrl = ''
-      for (let i = 0; i < this.tabs.length; i++) {
-        if (this.tabs[i].isShow) {
-          pathUrl = this.tabs[i].path
+      this.tabs.map((item, index) => {
+        if (item.isShow) {
+          pathUrl = item.path
         }
-      }
+      })
       const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
-      cAction.Discuss.getDiscussList(pathUrl, this.param).then(json => {
-        this.discussList = json
-      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
+      api.getDiscussList(pathUrl, this.param)
+        .then(json => {
+          this.discussList = json
+        })
+        .catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
     },
     /**
      * 切换 - tab
@@ -130,4 +132,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-</style>
\ No newline at end of file
+.item-list:first-child { margin-top: 0.42rem; }
+.item-list { position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.2rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); cursor: pointer; }
+.item-list .user { position: relative; overflow: hidden; }
+.item-list .user .img { float: left; width: 0.6rem; height: 0.6rem; background: #e5e5e5; border-radius: 50%; }
+.item-list .user .right { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
+.item-list .user .right .name { font-size: 0.18rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; }
+.item-list .user .right .time { margin-top: 0.05rem; font-size: 0.16rem; color: #a0a0a0; }
+.item-list .title { margin: 0.15rem 0; font-size: 0.22rem; color: #313131; font-weight: 700; line-height: 1.5; text-align: justify; }
+.item-list .text { font-size: 0.18rem; color: #535353; line-height: 1.5; text-align: justify; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; */ word-break:break-all; overflow: hidden; }
+.item-list .ellipsis { display: none; position: absolute; right: 0.24rem; bottom: 0.68rem; padding: 0 0.15rem 0 0.05rem; color: #535353; background: #fff; font-size: 0.18rem; }
+.item-list .ellipsis.on { display: block; }
+.item-list .result { margin-top: 0.15rem; font-size: 0.16rem; color: #313131; }
+.item-list .course-name { position: absolute; right: 0.32rem; bottom: 0.28rem; font-size: 0.16rem; color: #b49441; }
+.no-data { font-size: 0.24rem; color: #112c42; line-height: 1rem; text-align: center; }
+</style>

client/src/modules/index.js

@@ -2,9 +2,11 @@
 /* 模块基于 element-ui，一定在 element-ui后加载 */
 
 import LoginModule from './login-module'
+import Discuss from './discuss'
 
 const components = [
-  LoginModule
+  LoginModule,
+  Discuss
 ]
 
 const install = function (Vue, opts = {}) {
@@ -20,5 +22,6 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 export default {
   install,
-  LoginModule
+  LoginModule,
+  Discuss
 }

client/src/pages/learn/discussion.vue

@@ -8,6 +8,8 @@
       </template>
     </div>
     <div class="discuss-scroll">
+      <!-- <discuss>
+      </discuss> -->
       <template v-for='(item, index) in discussList'>
         <div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-cid='item.cid' :data-index='index'>
           <div class='user'>
@@ -25,7 +27,6 @@
           <div class='title'>{{item.title}}</div>
           <div :class='["text"]' v-html="item.text"></div><div :class='["ellipsis", (item.isShow ? "on" : "")]'>....</div>
           <div class='result'>{{item.askCnt}} {{ $t('pages.learn.discussion.answers') }}<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} {{ $t('pages.learn.discussion.votes') }}</div>
-          <!-- <div class='course-name'>{{item.courseName}}</div> -->
         </div>
       </template>
       <template v-if='!discussList.length'>
@@ -109,6 +110,7 @@ export default {
       const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
       cAction.Discuss.getDiscussList(pathUrl, this.param).then(json => {
         this.discussList = json
+        console.log(this.discussList)
       }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
     },
     /**