补充研究报告-浏览记录和我的报告的加载更多

pages/researchReport/reportHome/reportHome.vue

@@ -2,10 +2,8 @@
 	<view class="container">
 		<view v-show="menuCurrent === 0">
 			<view class="menus-box">
-				<view class="menus-item-box"
-				@click="toReportList(key, data.value)"
-				v-for="(data,key) in categoryList"
-				:key="key">
+				<view class="menus-item-box" @click="toReportList(key, data.value)" v-for="(data,key) in categoryList"
+					:key="key">
 					<view class="icon-box">
 						<view class="iconfont icon-hetong"></view>
 					</view>
@@ -42,17 +40,14 @@
 		<view v-show="menuCurrent === 1">
 			<view class="header-box">
 				<view class="search-box">
-					<u-search
-						v-model="searchForm.keyword"
-						:clearabled="true"
-						bg-color="#E5E5E5"
-						:input-style="searchInputStyle"
-						placeholder="搜索您想要的内容"
+					<u-search v-model="searchForm.keyword" :clearabled="true" bg-color="#E5E5E5"
+						:input-style="searchInputStyle" placeholder="搜索您想要的内容"
 						@search="searchHistory(searchForm.keyword, 1)"
-						@custom="searchHistory(searchForm.keyword, 1)"
-					></u-search>
+						@custom="searchHistory(searchForm.keyword, 1)"></u-search>
 				</view>
 			</view>
+			<u-empty margin-top="50" mode="data" v-if="list.length === 0" iconSize="120" textSize="58" text="暂无数据">
+			</u-empty>
 			<view class="list-box">
 				<view class="list-item-box" v-for="item in list" :key="item.id" @click="onClickReport(item)">
 					<view class="image-box">
@@ -69,7 +64,9 @@
 						<view class="func">
 							<view v-if="item.free > 0" class="button free">免费</view>
 							<view v-else-if="item.memberFree > 0" class="button member-free">会员免费</view>
-							<view v-else :class="['button', item.status > 0 ? 'free' : 'buy']">{{item.status > 0 ? '已购买' : '立即购买'}}</view>
+							<view v-else :class="['button', item.status > 0 ? 'free' : 'buy']">
+								{{item.status > 0 ? '已购买' : '立即购买'}}
+							</view>
 						</view>
 					</view>
 				</view>
@@ -79,17 +76,15 @@
 		<view v-show="menuCurrent === 2">
 			<view class="header-box">
 				<view class="search-box">
-					<u-search
-						v-model="searchForm.keyword"
-						:clearabled="true"
-						bg-color="#E5E5E5"
-						:input-style="searchInputStyle"
-						placeholder="搜索您想要的内容"
-						@search="searchMy(searchForm.keyword, 1)"
-						@custom="searchMy(searchForm.keyword, 1)"
-					></u-search>
+					<u-search v-model="searchForm.keyword" :clearabled="true" bg-color="#E5E5E5"
+						:input-style="searchInputStyle" placeholder="搜索您想要的内容" @search="searchMy(searchForm.keyword, 1)"
+						@custom="searchMy(searchForm.keyword, 1)"></u-search>
 				</view>
 			</view>
+			<u-empty 
+			margin-top="50"
+			mode="data" v-if="list2.length === 0" iconSize="120" textSize="58" text="暂无数据">
+			</u-empty>
 			<view class="list-box">
 				<view class="list-item-box" v-for="item in list2" :key="item.id" @click="onClickReport(item)">
 					<view class="image-box">
@@ -109,7 +104,8 @@
 				</view>
 			</view>
 		</view>
-		<u-loadmore v-if="menuCurrent !== 0" :status="status" margin-top="20" margin-bottom="20"  @loadmore="loadMore"/>
+		<u-loadmore v-if="menuCurrent !== 0 && status !== 'nomore'" :status="status" margin-top="20" margin-bottom="20"
+			@loadmore="loadMore" />
 		<view class="bottom-block"></view>
 		<view class="bottom-box">
 			<view class="menu-box">
@@ -131,15 +127,23 @@
 </template>
 
 <script setup>
-	import { ref, computed } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
+	import {
+		ref,
+		computed
+	} from 'vue'
+	import {
+		onLoad,
+		onReachBottom
+	} from '@dcloudio/uni-app'
 	import {
 		getReportCate,
 		loadReportHistory,
 		loadMyReport
 	} from '@/api/report.js'
 
-	import { useReportStore } from '@/store/reportStore.js'
+	import {
+		useReportStore
+	} from '@/store/reportStore.js'
 
 	const reportStore = useReportStore();
 
@@ -170,32 +174,32 @@
 		menuCurrent.value = index;
 		searchForm.value.keyword = ""
 		status.value = 'loadmore'
-		if(index===1){
+		if (index === 1) {
 			// 浏览记录
 			searchHistory("", 1)
-		}else if(index===2){
+		} else if (index === 2) {
 			// 我的报告
 			searchMy("", 1)
 		}
 	}
 
-	function searchHistory(keyword, pageNumber, pageSize){
+	function searchHistory(keyword, pageNumber, pageSize) {
 		status.value = 'loading'
 		loadReportHistory({
 			keyword,
 			pageNumber: pageNumber,
-			pageSize: pageSize?pageSize:10
-		}).then(res=>{
-			if(res.code===0){
-				if(pageNumber===1){
+			pageSize: pageSize ? pageSize : 10
+		}).then(res => {
+			if (res.code === 0) {
+				if (pageNumber === 1) {
 					list.value = res.data
-				}else{
+				} else {
 					list.value = [...list.value, ...res.data]
 				}
 				listCount.value = res.count
-				if(list.value.length === res.count){
+				if (list.value.length === res.count) {
 					status.value = 'nomore'
-				}else{
+				} else {
 					status.value = 'loadmore'
 				}
 				pageNum.value = pageNumber + 1;
@@ -203,23 +207,23 @@
 		})
 	}
 
-	function searchMy(keyword, pageNumber, pageSize){
+	function searchMy(keyword, pageNumber, pageSize) {
 		status.value = 'loading'
 		loadMyReport({
 			keyword,
 			pageNumber: pageNumber,
-			pageSize: pageSize?pageSize:10
-		}).then(res=>{
-			if(res.code===0){
-				if(pageNumber===1){
+			pageSize: pageSize ? pageSize : 10
+		}).then(res => {
+			if (res.code === 0) {
+				if (pageNumber === 1) {
 					list2.value = res.data
-				}else{
+				} else {
 					list2.value = [...list2.value, ...res.data]
 				}
 				listCount2.value = res.count
-				if(list2.value.length === res.count){
+				if (list2.value.length === res.count) {
 					status.value = 'nomore'
-				}else{
+				} else {
 					status.value = 'loadmore'
 				}
 				pageNum.value = pageNumber + 1;
@@ -234,7 +238,7 @@
 		})
 	}
 
-	async function init(){
+	async function init() {
 		const cateRes = await getReportCate();
 		if (cateRes.code === 0) {
 			const result = cateRes.data.reduce((acc, curr) => {
@@ -266,15 +270,23 @@
 			url: `/pages/reportDetail/reportDetail?id=${report.id}&title=${report.title}`
 		})
 	}
-	
-	function loadMore(){
-		if(menuCurrent.value === 1){
+
+	function loadMore() {
+		if (menuCurrent.value === 1) {
+			if (list.value.length === listCount) {
+				return
+			}
 			searchHistory(searchForm.value.keyword, pageNum.value)
-		}else{
+		} else {
+			if (list2.value.length === listCount2) {
+				return
+			}
 			searchMy(searchForm.value.keyword, pageNum.value)
 		}
 	}
-
+	onReachBottom(() => {
+		loadMore()
+	})
 	onLoad((load) => {
 		// console.log(load,"reporthome")
 		if (load.menuCurrent) {
@@ -282,7 +294,6 @@
 		}
 		init()
 	})
-
 </script>
 
 <style lang="scss" scoped>
@@ -301,6 +312,7 @@
 
 		.search-box {
 			margin-bottom: 20rpx;
+
 			::v-deep(.u-search) {
 				background-color: #e5e5e5;
 				border-radius: 50rpx;
@@ -321,17 +333,21 @@
 
 		.list-box {
 			padding: 0 20rpx;
+
 			.list-item-box {
 				padding: 30rpx 20rpx;
 				display: flex;
 				gap: 20rpx;
 				height: 210rpx;
 				border-bottom: 5rpx solid #E6E6E6;
+
 				&:active {
 					background-color: $uni-bg-color-hover;
 				}
+
 				.image-box {
 					width: $image-width;
+
 					image {
 						width: $image-width;
 						flex: 0 0 $image-width;
@@ -339,6 +355,7 @@
 						border-radius: $uni-card-border-radius;
 					}
 				}
+
 				.info-box {
 					.title {
 						font-size: $uni-title-font-size-2;
@@ -347,39 +364,47 @@
 						margin-bottom: 15rpx;
 						@include text-line-overflow(2);
 					}
+
 					.time {
 						font-size: $uni-font-size-2;
 						color: $uni-text-color-grey;
+
 						.iconfont {
 							font-size: $uni-font-size-2;
 							padding-right: 10rpx;
 						}
 					}
+
 					.func {
 						display: flex;
 						justify-content: flex-end;
 						font-size: $uni-font-size-2;
 						font-weight: bold;
+
 						.button {
 							text-align: center;
 							width: 130rpx;
 						}
+
 						.price {
 							color: $uni-color-error;
 							font-size: $uni-title-font-size-2;
 						}
+
 						.buy {
 							padding: 6rpx 25rpx;
 							background-color: $uni-color-error;
 							border-radius: $uni-card-border-radius;
 							color: $uni-text-color-inverse;
 						}
+
 						.free {
 							padding: 6rpx 25rpx;
 							background-color: $uni-color-primary;
 							border-radius: $uni-card-border-radius;
 							color: $uni-text-color-inverse;
 						}
+
 						.member-free {
 							padding: 10rpx 20rpx;
 							@include backgroundImg('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
@@ -392,6 +417,7 @@
 
 		.menus-box {
 			padding: 0 20rpx;
+
 			.menus-item-box {
 				width: 100%;
 				padding: 35rpx 50rpx;
@@ -401,9 +427,11 @@
 				align-items: center;
 				background-color: #006AF4;
 				border-radius: $uni-card-border-radius;
+
 				&:active {
 					background-color: #005AF4;
 				}
+
 				.icon-box {
 					width: 40%;
 					text-align: center;
@@ -414,11 +442,13 @@
 					border-radius: 50%;
 					border: 3rpx solid $uni-text-color-inverse;
 					background-color: #004DC9;
+
 					.iconfont {
 						font-size: 60rpx;
 						color: $uni-text-color-inverse;
 					}
 				}
+
 				.text-box {
 					font-size: 50rpx;
 					font-weight: bold;
@@ -431,6 +461,7 @@
 			// height: 112rpx;
 			height: calc(112rpx + env(safe-area-inset-bottom, 0));
 		}
+
 		.bottom-box {
 			padding: 5rpx 20rpx;
 			background-color: $uni-bg-color-grey;
@@ -442,20 +473,24 @@
 				height: 100rpx;
 				display: flex;
 				align-items: center;
+
 				.menu-item-box {
 					width: calc(100% / 3);
 					text-align: center;
+
 					.iconfont {
 						font-size: 55rpx;
 					}
+
 					.text {
 						font-size: $uni-font-size-2;
 					}
 				}
+
 				.is-active {
 					color: $uni-color-primary;
 				}
 			}
 		}
 	}
-</style>
+</style>