9.1 夜晚更新

pages_app/zhinanList/zhinanList.vue

@@ -10,115 +10,149 @@
 			height="140rpx" 
 			:border="false" 
 			backgroundColor="#eeeeee"
-		></uni-nav-bar>
+		>
+			<template v-slot:right>
+				<view class="nav-right" @click="testLoadMore">
+					<text style="font-size: 24rpx; color: #8B2316;">测试加载</text>
+				</view>
+			</template>
+		</uni-nav-bar>
 		
-		<!-- 指南列表 -->
-		<view class="guidelines-list">
-			<view 
-				class="guideline-item" 
-				v-for="(item, index) in guidelinesList" 
-				:key="item.uuid || index"
-			>
-				<!-- 指南信息 -->
-				<view class="item-content">
-					<view class="item-title">{{ item.title }}</view>
-					<view class="item-bottom">
-						<view class="item-date">{{ formatDate(item.releaseTime) }}</view>
-						<!-- 操作按钮 -->
-						<view class="item-action">
-							<view 
-								v-if="item.can_download" 
-								class="download-btn"
-								@click="downloadGuideline(item)"
-							>
-								<up-icon name="download" color="#8D2316" size="28"></up-icon>
-							</view>
-							<view 
-								v-else 
-								class="view-btn"
-								@click="viewGuideline(item)"
-							>
-								查看
+		<!-- 使用scroll-view实现列表 -->
+		<scroll-view
+			class="guidelines-scroll-view"
+			scroll-y="true"
+			:refresher-enabled="true"
+			:refresher-triggered="isRefreshing"
+			@refresherrefresh="onRefresh"
+			@scrolltolower="onScrollToLower"
+			:show-scrollbar="false"
+		>
+			<!-- 指南列表 -->
+			<view class="guidelines-list">
+				<view 
+					class="guideline-item" 
+					v-for="(item, index) in guidelinesList" 
+					:key="item.uuid || index"
+				>
+					<!-- 指南信息 -->
+					<view class="item-content">
+						<view class="item-title">{{ item.title }}</view>
+						<view class="item-bottom">
+							<view class="item-date">{{ formatDate(item.releaseTime) }}</view>
+							<!-- 操作按钮 -->
+							<view class="item-action">
+								<view 
+									v-if="item.can_download" 
+									class="download-btn"
+									@click="downloadGuideline(item)"
+								>
+									<up-icon name="download" color="#8D2316" size="28"></up-icon>
+								</view>
+								<view 
+									v-else 
+									class="view-btn"
+									@click="viewGuideline(item)"
+								>
+									查看
+								</view>
 							</view>
 						</view>
 					</view>
 				</view>
 			</view>
-		</view>
-		
-		<!-- 加载状态 -->
-		<view class="loading-status">
-			<view v-if="isLoading && currentPage === 1" class="loading">
-				<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
+			
+			<!-- 加载更多状态 -->
+			<view class="load-more-status">
+				<view v-if="loadMoreStatus === 'loading'" class="loading">
+					<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
+					<text>加载中...</text>
+				</view>
+				<view v-else-if="loadMoreStatus === 'more'" class="more">
+					<text>上拉加载更多</text>
+				</view>
+				<view v-else-if="loadMoreStatus === 'noMore'" class="no-more">
+					<text>没有更多数据了</text>
+				</view>
 			</view>
-			<view v-else-if="hasMoreData && !isLoading" class="load-more" @click="loadMoreData">
-				<uni-load-more status="more" :content-text="loadingText"></uni-load-more>
+			
+			<!-- 无数据提示 -->
+			<view class="no-data" v-if="guidelinesList.length === 0 && !isLoading">
+				<uni-icons type="info" size="60" color="#999"></uni-icons>
+				<text>暂无诊疗指南数据</text>
 			</view>
-			<view v-else-if="!hasMoreData && guidelinesList.length > 0" class="no-more">
-				<uni-load-more status="noMore" :content-text="loadingText"></uni-load-more>
-			</view>
-		</view>
-		
-		<!-- 无数据提示 -->
-		<view class="no-data" v-if="guidelinesList.length === 0 && !isLoading">
-			<uni-icons type="info" size="60" color="#999"></uni-icons>
-			<text>暂无诊疗指南数据</text>
-		</view>
+		</scroll-view>
 	</view>
 </template>
 
 <script setup>
 import { ref, onMounted} from 'vue'
 import api from '@/api/api.js'
-import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
+import { onShow,onLoad } from "@dcloudio/uni-app";
 
 // 响应式数据
 const guidelinesList = ref([])
 const isLoading = ref(false)
 const hasMoreData = ref(true)
 const currentPage = ref(1)
-const pageSize = ref(20)
+const pageSize = ref(10)
 const isRefreshing = ref(false)
+const keywords=ref('');
+const loadMoreStatus = ref('more') // 'loading', 'more', 'noMore'
 
-// 加载文本配置
-const loadingText = {
-	contentdown: '上拉显示更多',
-	contentrefresh: '正在加载...',
-	contentnomore: '没有更多数据了'
-}
-
-// 页面加载
-onMounted(() => {
-	loadGuidelinesList()
+onLoad((options)=>{
+	console.log(options)
+	keywords.value=decodeURIComponent(options.keywords);
+	console.log(keywords.value);
 })
 
 onShow(() => {
-	// 页面显示时可以刷新数据
-	loadGuidelinesList()
-})
-
-// 下拉刷新
-onPullDownRefresh(() => {
-	refreshData()
-})
-
-// 上拉加载更多
-onReachBottom(() => {
-	if (hasMoreData.value && !isLoading.value) {
-		loadMoreData()
+	// 页面显示时，如果列表为空则加载数据
+	if (guidelinesList.value.length === 0) {
+		loadGuidelinesList(true)
 	}
 })
 
+// scroll-view 下拉刷新
+const onRefresh = async () => {
+	console.log('scroll-view 下拉刷新触发');
+	isRefreshing.value = true;
+	await refreshData();
+	isRefreshing.value = false;
+};
+
+// scroll-view 滚动到底部
+const onScrollToLower = () => {
+	console.log('=== onScrollToLower 触发 ===');
+	console.log('当前状态:', {
+		loadMoreStatus: loadMoreStatus.value,
+		isRefreshing: isRefreshing.value,
+		currentPage: currentPage.value,
+		listLength: guidelinesList.value.length,
+		hasMoreData: hasMoreData.value,
+		isLoading: isLoading.value
+	});
+
+	if (loadMoreStatus.value === 'more' && !isRefreshing.value && !isLoading.value) {
+		console.log('条件满足，开始加载更多数据');
+		loadMoreData();
+	} else {
+		console.log('条件不满足，跳过加载:', {
+			loadMoreStatus: loadMoreStatus.value,
+			isRefreshing: isRefreshing.value,
+			isLoading: isLoading.value
+		});
+	}
+};
+
 // 刷新数据
 const refreshData = async () => {
-	if (isRefreshing.value) return
-	
 	try {
-		isRefreshing.value = true
 		currentPage.value = 1
 		hasMoreData.value = true
+		loadMoreStatus.value = 'more'
 		
-		await loadGuidelinesList()
+		await loadGuidelinesList(true)
 		
 		uni.showToast({
 			title: '刷新成功',
@@ -130,42 +164,59 @@ const refreshData = async () => {
 			title: '刷新失败',
 			icon: 'none'
 		})
-	} finally {
-		isRefreshing.value = false
-		uni.stopPullDownRefresh()
 	}
 }
 
 // 加载指南列表
-const loadGuidelinesList = async (isLoadMore = false) => {
+const loadGuidelinesList = async (isRefresh = false) => {
+	console.log('=== loadGuidelinesList 开始 ===');
+	console.log('当前参数:', { isRefresh, page: currentPage.value, keywords: keywords.value });
+
 	if (isLoading.value) return
 	
 	try {
 		isLoading.value = true
+		loadMoreStatus.value = 'loading'
 		
 		const params = {
 			page: currentPage.value,
 			pageSize: pageSize.value,
 			type: 1, // 诊疗指南类型
-			keywords: ''
+			sort:2,
+			keywords:keywords.value
 		}
 		
 		const res = await api.searchLibraryU(params)
 		console.log('指南列表响应:', res)
 		
 		if (res.code === 200 && res.data) {
-			const newData = res.data
+			const newData = res.data.list || res.data
 			
-			if (isLoadMore) {
-				guidelinesList.value = [...guidelinesList.value, ...newData]
-			} else {
+			if (isRefresh) {
 				guidelinesList.value = newData
+				console.log('刷新模式：替换列表数据');
+			} else {
+				guidelinesList.value = [...guidelinesList.value, ...newData]
+				console.log('加载更多：追加数据到列表');
 			}
 			
 			// 判断是否还有更多数据
-			hasMoreData.value = newData.length === pageSize.value
+			if (newData.length < pageSize.value) {
+				loadMoreStatus.value = 'noMore'
+				hasMoreData.value = false
+				console.log('没有更多数据了');
+			} else {
+				loadMoreStatus.value = 'more'
+				hasMoreData.value = true
+				// 只有在加载更多模式下才递增页码
+				if (!isRefresh) {
+					currentPage.value++
+					console.log(`还有更多数据，下一页: ${currentPage.value}`);
+				}
+			}
 		} else {
 			console.error('加载指南列表失败:', res.message)
+			loadMoreStatus.value = 'noMore'
 			uni.showToast({
 				title: res.message || '加载失败',
 				icon: 'none'
@@ -173,20 +224,36 @@ const loadGuidelinesList = async (isLoadMore = false) => {
 		}
 	} catch (error) {
 		console.error('加载指南列表异常:', error)
+		loadMoreStatus.value = 'noMore'
 		uni.showToast({
 			title: '网络异常，请重试',
 			icon: 'none'
 		})
 	} finally {
 		isLoading.value = false
+		console.log('=== loadGuidelinesList 结束 ===');
+		console.log('最终状态:', {
+			loadMoreStatus: loadMoreStatus.value,
+			page: currentPage.value,
+			listLength: guidelinesList.value.length
+		});
 	}
 }
 
 // 加载更多数据
 const loadMoreData = () => {
+	console.log('=== loadMoreData 被调用 ===');
+	console.log('检查条件:', {
+		hasMoreData: hasMoreData.value,
+		isLoading: isLoading.value,
+		currentPage: currentPage.value
+	});
+	
 	if (hasMoreData.value && !isLoading.value) {
-		currentPage.value++
-		loadGuidelinesList(true)
+		console.log('条件满足，开始加载更多数据');
+		loadGuidelinesList(false);
+	} else {
+		console.log('条件不满足，跳过加载更多');
 	}
 }
 
@@ -236,6 +303,28 @@ const goBack = () => {
 	uni.navigateBack()
 }
 
+// 测试加载更多功能
+const testLoadMore = () => {
+	console.log('=== 手动测试加载更多 ===');
+	console.log('当前状态:', {
+		loadMoreStatus: loadMoreStatus.value,
+		hasMoreData: hasMoreData.value,
+		isLoading: isLoading.value,
+		currentPage: currentPage.value,
+		listLength: guidelinesList.value.length
+	});
+	
+	if (loadMoreStatus.value === 'more' && !isLoading.value) {
+		loadMoreData();
+	} else {
+		uni.showToast({
+			title: `状态: ${loadMoreStatus.value}, 加载中: ${isLoading.value}`,
+			icon: 'none',
+			duration: 2000
+		});
+	}
+}
+
 // 格式化日期
 const formatDate = (dateString) => {
 	if (!dateString) return ''
@@ -264,7 +353,12 @@ $white: #ffffff;
 
 .zhinan-list-page {
 	background-color: $bg-color;
-	min-height: 100vh;
+	height: 100vh;
+}
+
+.guidelines-scroll-view {
+	height: calc(100vh - 140rpx);
+	background-color: $bg-color;
 }
 
 // 指南列表
@@ -291,6 +385,11 @@ $white: #ffffff;
 				line-height: 1.5;
 				margin-bottom: 16rpx;
 				font-weight: 500;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 			
 			.item-bottom {
@@ -341,18 +440,22 @@ $white: #ffffff;
 	}
 }
 
-// 加载状态
-.loading-status {
+// 加载更多状态
+.load-more-status {
 	padding: 20rpx 0;
 	text-align: center;
 	
-	.loading, .load-more, .no-more {
+	.loading, .more, .no-more {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 10rpx;
 		padding: 20rpx 0;
+		font-size: 26rpx;
+		color: $text-light;
 	}
 }
 
-
-
 // 无数据提示
 .no-data {
 	display: flex;