修改分页为加载更多

components/BsCommentFollowInfo.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-06-23 10:40:04
  * @LastEditors: ch
- * @LastEditTime: 2022-06-30 21:30:31
+ * @LastEditTime: 2022-06-30 22:11:19
  * @Description: file content
 -->
 <template>
@@ -33,7 +33,6 @@ export default {
 			const day = Math.floor((followTime - commentTime) / (24 * 60 * 60 * 1000));
 			return day > 0 ? `${day}天后` : `当天`;
 		},
-
 		imgs (){
 			let urls = this.followComment.pictureUrl || '';
 			return urls ? urls.split(',') : [];

pages/goods/detail/module/Comment.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-06-24 14:39:38
  * @LastEditors: ch
- * @LastEditTime: 2022-06-30 20:59:26
+ * @LastEditTime: 2022-06-30 22:37:34
  * @Description: file content
 -->
 <template>
@@ -20,29 +20,32 @@
 			</div>
 		</div>
 		<div class="ctx">
-			<UiEmpty v-if="!list.length" :icon="require('@/assets/img/comment/empty.png')" desc="暂时没有评论"/>
-			<template v-else>
-				<div class="ctx--top">
-					<div class="ctx--top-rate" v-if="productRate">
-						<b>商品满意度</b>
-						<p>{{productRate}}</p>
-						<el-rate :value="productRate" disabled size="16px"></el-rate>
-					</div>
-					<div class="ctx--top-tabs" v-if="tabs.length > 1">
-						<span v-for="i in tabs" :key="i.labelType" @click="handleTabChanage(i)"
-							:class="{'active':i.labelType == tabActive}">
-							{{i.labelName}}({{i.commentCount}})
-						</span>
-					</div>
+			
+			
+			<div class="ctx--top">
+				<div class="ctx--top-rate" v-if="productRate">
+					<b>商品满意度</b>
+					<p>{{productRate}}</p>
+					<el-rate :value="productRate" disabled size="16px"></el-rate>
+				</div>
+				<div class="ctx--top-tabs" v-if="tabs.length > 1">
+					<span v-for="i in tabs" :key="i.labelType" @click="handleTabChanage(i)"
+						:class="{'active':i.labelType == tabActive}">
+						{{i.labelName}}({{i.commentCount}})
+					</span>
 				</div>
+			</div>
+			<UiEmpty v-if="!list.length && loading=='finish'" :icon="require('@/assets/img/comment/empty.png')" desc="暂时没有评论"/>
+			<template v-else>
 				<BsCommentInfo v-for="item in list" :key="item.id" :commentDetail="item" source="detail"/>
 			</template>
-			
+			<div v-if="loading === 'loading'" class="loading">数据加载中....</div>
+			<div v-if="loading === 'finish'" class="more" @click="next">查看更多></div>
 		</div>
 
-      <el-pagination class="pagination flex flex-right" layout="prev, pager, next"
+      <!-- <el-pagination class="pagination flex flex-right" layout="prev, pager, next"
         @current-change="handleCurrentChange" :current-page.sync="pageIndex"
-        :page-size="pageSize" :total="total"></el-pagination>
+        :page-size="pageSize" :total="total"></el-pagination> -->
 	</div>
 </template>
 <script>
@@ -87,7 +90,7 @@ export default {
 			],
 			pageSize : 10,
 			list : [],
-			loading : false
+			loading : 'finish'
 		}
 	},
 	mounted(){
@@ -98,7 +101,10 @@ export default {
 	},
 	methods:{
 		async getList(){
-			this.loading = true;
+			if(this.loading === 'loading'){
+				return false;
+			}
+			this.loading = 'loading';
 			const {error, result} = await ApiGetCommentList({
 				pageIndex : this.pageIndex,
 				length : this.pageSize,
@@ -107,12 +113,22 @@ export default {
 				sortType : this.sortActive.val,
 				isContent : this.isContent || null
 			});
-			this.loading = false
+			this.loading = 'finish';
 			if(error){
 				return false;
 			}
-			this.list = result.records;
-			this.total = result.total
+			this.list = this.list.concat(result.records);
+			if(result.records.length == 0 && this.pageIndex < result.pages){
+				this.next();
+			}
+			if(this.pageIndex === result.pages){
+				this.loading = 'nomore'
+			}
+			// this.total = result.total
+		},
+		next(){
+			this.pageIndex++;
+			this.getList();
 		},
 		async getTabCount (){
 			const {error, result} = await ApiGetCommentTabCount({
@@ -121,7 +137,6 @@ export default {
 			if(error){
 				return false;
 			}
-			// this.list = result.records;
 			this.tabs = this.tabs.concat(result.filter(i => i.commentCount > 0));
 			
 		},
@@ -153,15 +168,19 @@ export default {
 				return false
 			}
 			this.tabActive = i.labelType;
+			this.pageIndex = 1;
+			this.list = [];
 			this.getList();
 		},
 		handleCommand(val){
 			this.sortActive = val;
 			this.pageIndex = 1;
+			this.list = [];
 			this.getList();
 		},
 		handledContent(){
 			this.pageIndex = 1;
+			this.list = [];
 			this.getList();
 
 		}
@@ -195,6 +214,7 @@ export default {
 	border: 1px solid #f2f2f2;
 	border-top: 0;
 	overflow: hidden;
+	margin-bottom: 40px;
 	&--top{
 		display: flex;
 		&-rate{
@@ -256,6 +276,14 @@ export default {
 		}
 	}
 }
+.loading,.more{
+	color: #999;
+	text-align: center;
+	margin-bottom: 40px;
+}
+.more{
+	cursor: pointer;
+}
 
 .pagination {
     margin: 50px 0;