chore: 课程讨论支持分页

src/modules/discuss/src/discuss.vue

 <template>
   <div>
-    <template v-for='(item, index) in discussList'>
-      <div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.semester_id' :data-cid='item.relate_id' :data-index='index'>
-        <div class='user'>
+    <template v-for="(item, index) in discussList">
+      <div
+        v-bind:key="index"
+        class="item-list"
+        @click="goDiscussDetail"
+        :data-id="item.id"
+        :data-sid="item.semester_id"
+        :data-cid="item.relate_id"
+        :data-index="index"
+      >
+        <div class="user">
           <template v-if="item.questioner.avatar">
-            <img class='img' :src='item.questioner.avatar' />
+            <img class="img" :src="item.questioner.avatar" />
           </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.questioner.nickname}}</div>
-            <div class='time'>{{item.created_time}}</div>
+          <div class="right">
+            <div class="name">{{ item.questioner.nickname }}</div>
+            <div class="time">{{ item.created_time }}</div>
           </div>
         </div>
-        <div class='title'>{{item.title}}</div>
-        <div :class='["text"]' v-html="item.contents"></div>
+        <div class="title">{{ item.title }}</div>
+        <div :class="['text']" v-html="item.contents"></div>
         <!-- <div :class='["text"]' v-html="item.contents"></div><div class='["ellipsis no", (item.isShow ? "on" : "")]'>....</div> -->
-        <div class='result'>{{item.answer_count}} {{ $t('DiscussModule.DiscussList.answers') }}<div style='display: inline-block; width: 20px;'></div>{{item.tag_total_count}} {{ $t('DiscussModule.DiscussList.votes') }}</div>
+        <div class="result">
+          {{ item.answer_count }} {{ $t('DiscussModule.DiscussList.answers') }}
+          <div style="display: inline-block; width: 20px;"></div>
+          {{ item.tag_total_count }} {{ $t('DiscussModule.DiscussList.votes') }}
+        </div>
         <!-- <div class='course-name'>{{item.courseName}}</div> -->
       </div>
     </template>
-    <template v-if='!discussList.length'>
-      <div class='no-data'>{{ $t('DiscussModule.DiscussList.noData') }}</div>
+    <div style="text-align:center;padding:40px;" v-if="!noMore">
+      <el-button :loading="loading" @click="load">{{ loading ? '加载中' : '加载更多' }}</el-button>
+    </div>
+    <template v-if="!discussList.length">
+      <div class="no-data">{{ $t('DiscussModule.DiscussList.noData') }}</div>
     </template>
   </div>
 </template>
@@ -45,38 +60,55 @@ import * as api from '../api/index'
 
 export default {
   name: 'Discuss',
-  components: { },
-  data () {
-    return {
-      discussList: [
-      ]
-    }
-  },
   props: {
     params: {
       type: Object,
       required: false,
-      default () {
+      default() {
         return {}
       }
     }
   },
-  mounted () {
+  data() {
+    return {
+      loading: false,
+      noMore: false,
+      discussList: []
+    }
+  },
+  computed: {
+    disabled() {
+      return this.loading || this.noMore
+    }
+  },
+  mounted() {
     this.loadAjax()
   },
   methods: {
-    loadAjax () {
-      // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
+    load() {
+      this.params.dataJson.offset += this.params.dataJson.limit
+      this.loadAjax()
+    },
+    loadAjax() {
+      this.loading = true
       api[this.params.request](this.params)
         .then(json => {
-          this.discussList = json
+          if (json.length < this.params.dataJson.limit) {
+            this.noMore = true
+          }
+          this.discussList = this.discussList.concat(json)
+        })
+        .catch(e => {
+          this.$message.error(e.message)
+        })
+        .finally(() => {
+          this.loading = false
         })
-        .catch(e => { this.$message.error(e.message) }).finally(() => { /* loading.close() */ })
     },
     /**
      * 跳转到对应 问题详情页
      */
-    goDiscussDetail (e) {
+    goDiscussDetail(e) {
       const qid = e.currentTarget.dataset.id
       const sid = e.currentTarget.dataset.sid
       const cid = e.currentTarget.dataset.cid
@@ -85,7 +117,7 @@ export default {
   },
   watch: {
     params: {
-      handler () {
+      handler() {
         this.loadAjax()
       },
       deep: true
@@ -95,18 +127,93 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.item-list:first-child { margin-top: 0.42rem; }
-.item-list {border-radius: 5px; position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.3rem; background: #fff; box-shadow: 0 0 10px rgba(204, 204, 204, 0.4); 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; }
+.item-list:first-child {
+  margin-top: 0.42rem;
+}
+.item-list {
+  border-radius: 5px;
+  position: relative;
+  padding: 0.3rem 0.26rem;
+  margin-bottom: 0.3rem;
+  background: #fff;
+  box-shadow: 0 0 10px rgba(204, 204, 204, 0.4);
+  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>