9.5上午更新

pages/patientClass/patientClass.vue

@@ -20,17 +20,18 @@
 			 
 			 <!-- 筛选栏 -->
 			 <view class="filter-bar">
-			 	<view class="search-box">
+			 	<view class="search-box" @click="goToSearch">
 			 		<uni-icons type="search" size="16" color="#999"></uni-icons>
 			 		<text class="search-text">搜索</text>
 			 	</view>
 			 	<view class="divider"></view>
-			 	<view class="filter-item">
-			 		<text>最新</text>
-			 		<up-image  :src="upImg" width="20rpx" height="26rpx" ></up-image>
+			 	<view class="filter-item active" @click="toggleSort">
+			 		<text>{{type==1?'最新':'最热'}}</text>
+			 		<up-image v-if="type==1" :src="upImg" width="20rpx" height="26rpx" ></up-image>
+			 		<up-image v-else :src="downImg" width="20rpx" height="26rpx" ></up-image>
 			 	</view>
 			 	<view class="divider"></view>
-			 	<view class="filter-item" @click="showFilterPopup">
+			 	<view class="filter-item" :class="{ active: isFilterActive }" @click="showFilterPopup">
 			 		<text>筛选</text>
 			 		<up-image  :src="isFilterActive ? filterOn : filter" width="30rpx" height="30rpx" ></up-image>
 			 	</view>
@@ -50,7 +51,7 @@
 						:class="{ active: tag.selected }"
 						@click="toggleTag(index)"
 					>
-						{{ tag.name }}
+						{{ tag.DES }}
 					</view>
 				</view>
 				
@@ -63,8 +64,16 @@
 		</view>
 		
 		<!-- 文章列表 -->
-		<scroll-view class="article-list" scroll-y>
-			<view class="article-item" v-for="(article, index) in articleList" :key="index" @click="goToDetail(article)">
+		<scroll-view 
+			class="article-list" 
+			scroll-y
+			refresher-enabled="true"
+			:refresher-triggered="refreshing"
+			@refresherrefresh="onRefresh"
+			@scrolltolower="onLoadMore"
+			:lower-threshold="100"
+		>
+			<view class="article-item" v-for="(article, index) in articleList" :key="article.uuid || index" @click="goToDetail(article)">
 				<image class="article-image" :src="article.image" mode="aspectFill"></image>
 				<view class="article-content">
 					<view class="article-title">{{ article.title }}</view>
@@ -77,13 +86,30 @@
 								<text>{{ article.views }}</text>
 							</view>
 							<view class="stat-item">
-								<uni-icons type="heart" size="12" color="#999"></uni-icons>
+								<uni-icons type="hand-up" size="13" color="#999"></uni-icons>
 								<text>{{ article.likes }}</text>
 							</view>
 						</view>
 					</view>
 				</view>
 			</view>
+			
+			<!-- 加载更多状态 -->
+			<view class="load-more" v-if="loading">
+				<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
+				<text class="load-text">加载中...</text>
+			</view>
+			
+			<!-- 没有更多数据 -->
+			<view class="no-more" v-if="!hasMore && articleList.length > 0">
+				<text class="no-more-text">没有更多数据了</text>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-state" v-if="articleList.length === 0 && !loading">
+				<uni-icons type="article" size="80" color="#cccccc"></uni-icons>
+				<text class="empty-text">暂无文章</text>
+			</view>
 		</scroll-view>
 		
 		<!-- 底部导航栏 -->
@@ -100,128 +126,177 @@
 	import downImg from "@/static/cb_up.png"
 	import filter from "@/static/cb_screen_no.png"
 	import filterOn from "@/static/cb_screen_yes.png"
+	import api from "@/api/api.js"
+	import docUrl from '@/utils/docUrl.js';
+	import navTo from '@/utils/navTo.js';
 	
+	const type=ref(1)
+	
+	// 分页相关状态
+	const currentPage = ref(1);
+	const pageSize = ref(10);
+	const hasMore = ref(true);
+	const loading = ref(false);
+	const refreshing = ref(false);
 	// 响应式数据
 	const activeTab = ref(0);
 	const showFilter = ref(false);
 	const isFilterActive = ref(false);
-	
-	// 筛选标签数据
-	const filterTags = ref([
-		{ name: '甲型肝炎', selected: false },
-		{ name: '乙型肝炎', selected: false },
-		{ name: '丙型肝炎', selected: false },
-		{ name: '药物肝', selected: false },
-		{ name: '自免肝', selected: false },
-		{ name: '酒精肝', selected: false },
-		{ name: '脂肪肝', selected: false },
-		{ name: '肝纤维化', selected: false },
-		{ name: '肝硬化', selected: false },
-		{ name: '肝癌', selected: false },
-		{ name: '肝囊虫', selected: false },
-		{ name: '肝移植', selected: false },
-		{ name: '胆结石', selected: false },
-		{ name: '胆囊炎', selected: false },
-		{ name: '其他疾病', selected: false },
-		{ name: '肝脏检查', selected: false },
-		{ name: '乙肝五项', selected: false },
-		{ name: '肝功能', selected: false },
-		{ name: '报告解读', selected: false },
-		{ name: '肝炎病毒', selected: false },
-		{ name: '传播途径', selected: false },
-		{ name: '症状表现', selected: false },
-		{ name: '疫苗接种', selected: false },
-		{ name: '诊断治疗', selected: false },
-		{ name: '抗病毒', selected: false },
-		{ name: '干扰素', selected: false },
-		{ name: '用药', selected: false },
-		{ name: '耐药', selected: false },
-		{ name: '保肝降酶', selected: false },
-		{ name: '毒副反应', selected: false },
-		{ name: '治愈停药', selected: false },
-		{ name: '肝炎复发', selected: false },
-		{ name: '预后预防', selected: false },
-		{ name: '日常生活', selected: false },
-		{ name: '饮食营养', selected: false },
-		{ name: '养肝护肝', selected: false },
-		{ name: '一图读懂', selected: false },
-		{ name: '误区辟谣', selected: false },
-		{ name: '生儿育女', selected: false },
-		{ name: '医保报销', selected: false },
-		{ name: '肝胆相照', selected: false },
-		{ name: '精华好文', selected: false },
-		{ name: '肝病故事', selected: false },
-		{ name: '名医科普', selected: false },
-		{ name: '肝病现状', selected: false },
-		{ name: '中医中药', selected: false }
-	]);
-	
-	// 模拟文章数据
-	const articleList = ref([
-		{
-			id: 1,
-			image: '/static/liver_knowledge.png',
-			title: '甩掉"乙肝大国"的帽子后，中国第一大肝病变成了它，正在侵...',
-			date: '今日',
-			isToday: true,
-			views: 185,
-			likes: 0
-		},
-		{
-			id: 2,
-			image: '/static/doctor_liver.png',
-			title: '从你我做起，让肝炎止步',
-			date: '08-01',
-			isToday: false,
-			views: 315,
-			likes: 0
-		},
-		{
-			id: 3,
-			image: '/static/liver_health.png',
-			title: '这6个指标正常，说明你肝脏健康',
-			date: '07-25',
-			isToday: false,
-			views: 1033,
-			likes: 0
-		},
-		{
-			id: 4,
-			image: '/static/diet_liver.png',
-			title: '无需节食！吃饭一个改变，脂肪肝好转了！4个月肝脏脂肪减...',
-			date: '07-18',
-			isToday: false,
-			views: 1829,
-			likes: 1
-		},
-		{
-			id: 5,
-			image: '/static/cooking_spices.png',
-			title: '这种家家都有的调料，吃太多会增加肝癌风险？很多人已超标！',
-			date: '07-11',
-			isToday: false,
-			views: 2992,
-			likes: 0
-		},
-		{
-			id: 6,
-			image: '/static/liver_protection.png',
-			title: '肝炎拖成肝硬化，下一步就是肝癌，养肝护肝，记住这3点',
-			date: '07-04',
-			isToday: false,
-			views: 1993,
-			likes: 1
+	const toggleSort = () => {
+		type.value = type.value === 1 ? 2 : 1;
+		// 重置分页状态
+		currentPage.value = 1;
+		hasMore.value = true;
+		polularScienceArticleListByKeywordsNew(true);
+	};
+	const loadGuideTags = async () => {
+			try {
+				const res = await api.guideTag({
+					type:4
+				});
+				if(res && res.code === 200 && res.data) {
+					// 将API返回的标签数据转换为筛选标签格式
+					filterTags.value = res.data.map(tag => ({
+						...tag,
+						selected: false
+					}));
+					console.log('指南标签加载成功:', filterTags.value);
+				}
+			} catch (e) {
+				console.error('加载指南标签失败:', e);
+			}
+		};
+	const polularScienceArticleListByKeywordsNew = async (isRefresh = false) => {
+		if (loading.value) return;
+		
+		loading.value = true;
+		
+		try {
+			const page = isRefresh ? 1 : currentPage.value;
+			const res = await api.polularScienceArticleListByKeywordsNew({
+				keywords: keywords.value,
+				page: page,
+				type: type.value
+			});
+			
+			if (res && res.code === 200 && res.data) {
+				const newData = res.data.list || [];
+				
+				if (isRefresh) {
+					// 下拉刷新：替换数据
+					articleList.value = newData.map(item => formatArticleData(item));
+					currentPage.value = 1;
+				} else {
+					// 上拉加载：追加数据
+					const formattedData = newData.map(item => formatArticleData(item));
+					articleList.value = [...articleList.value, ...formattedData];
+				}
+				
+				// 判断是否还有更多数据
+				hasMore.value = newData.length >= pageSize.value;
+				
+				if (!isRefresh) {
+					currentPage.value++;
+				}
+				
+				console.log('文章数据加载成功:', articleList.value);
+			}
+		} catch (error) {
+			console.error('获取文章列表失败:', error);
+			uni.showToast({
+				title: '获取数据失败',
+				icon: 'error',
+				duration: 2000
+			});
+		} finally {
+			loading.value = false;
+			refreshing.value = false;
 		}
-	]);
+	};
+	
+	// 格式化文章数据
+	const formatArticleData = (item) => {
+		// 安全检查，确保item存在且有所需属性
+		if (!item) return null;
+		
+		const submitDate = item.submitDate ? new Date(item.submitDate) : new Date();
+		const today = new Date();
+		const isToday = submitDate.toDateString() === today.toDateString();
+		
+		return {
+			uuid: item.uuid || '',
+			title: item.topic || '无标题',
+			summary: item.summary || '',
+			image: item.imgPath ? docUrl + item.imgPath : '/static/liver_knowledge.png',
+			date: isToday ? '今日' : formatDate(submitDate),
+			isToday: isToday,
+			views: item.readnum || 0,
+			likes: item.agreenum || 0,
+			tags: item.tags || '',
+			path: item.path || '',
+			submitDate: item.submitDate || ''
+		};
+	};
+	
+	// 格式化日期
+	const formatDate = (date) => {
+		const month = String(date.getMonth() + 1).padStart(2, '0');
+		const day = String(date.getDate()).padStart(2, '0');
+		return `${month}-${day}`;
+	};
+	// 筛选标签数据
+	const filterTags = ref([]);
+	
+	// 文章列表数据
+	const articleList = ref([]);
 	
 	// 方法
 	const switchTab = (index) => {
-		activeTab.value = index;
+		
+		if(index==1){
+			navTo({
+				url: '/pages_app/patientVideo/patientVideo'
+			})
+		}else if(index==2){
+			let url=encodeURIComponent('https://wx.igandan.com/wxPatient/index.htm#/problem?link=share&fromtype=doctor')
+			navTo({
+				url: '/pages_app/webview/webview?url='+url
+			})
+		}
 	};
 	
 	const goToDetail = (article) => {
 		console.log('查看文章详情:', article);
 		// 跳转到详情页
+		if (article.path) {
+			uni.navigateTo({
+				url: `/pages_app/webview/webview?url=${encodeURIComponent(docUrl+article.path)}&title=${encodeURIComponent(article.title)}`
+			});
+		}
+	};
+	
+	// 跳转到搜索页面
+	const goToSearch = () => {
+		uni.navigateTo({
+			url: '/pages_app/search/search'
+		});
+	};
+	
+	// 下拉刷新
+	const onRefresh = async () => {
+		refreshing.value = true;
+		await polularScienceArticleListByKeywordsNew(true);
+		uni.showToast({
+			title: '刷新成功',
+			icon: 'success',
+			duration: 1500
+		});
+	};
+	
+	// 上拉加载更多
+	const onLoadMore = async () => {
+		if (!hasMore.value || loading.value) return;
+		await polularScienceArticleListByKeywordsNew(false);
 	};
 	
 	const goToPage = (page) => {
@@ -253,7 +328,7 @@
 		});
 		isFilterActive.value = false;
 	};
-	
+	const keywords=ref('');
 	const confirmFilter = () => {
 		// 检查是否有选中的标签
 		const hasSelected = filterTags.value.some(tag => tag.selected);
@@ -261,16 +336,24 @@
 		
 		// 执行筛选逻辑
 		if (hasSelected) {
-			const selectedTags = filterTags.value.filter(tag => tag.selected).map(tag => tag.name);
+			const selectedTags = filterTags.value.filter(tag => tag.selected).map(tag => tag.DES);
 			console.log('选中的标签:', selectedTags);
-			// 这里可以添加实际的筛选逻辑
+			keywords.value = selectedTags.join(',');
+		} else {
+			keywords.value = '';
 		}
 		
+		// 重置分页状态
+		currentPage.value = 1;
+		hasMore.value = true;
+		
 		showFilter.value = false;
+		polularScienceArticleListByKeywordsNew(true);
 	};
 	
 	onShow(() => {
-		console.log('患教学堂页面显示');
+		polularScienceArticleListByKeywordsNew(true);
+		loadGuideTags();
 	});
 </script>
 
@@ -372,8 +455,13 @@ $padding-small: 10px;
 		gap: 3px;
 		font-size: 14px;
 		color: #999;
+		transition: all 0.3s ease;
 	}
 }
+.filter-item.active{
+	color: $theme-color;
+}
+
 
 // 文章列表
 .article-list {
@@ -449,6 +537,46 @@ $padding-small: 10px;
 			}
 		}
 	}
+	
+	// 加载状态样式
+	.load-more {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 30rpx;
+		color: #999;
+		
+		.load-text {
+			margin-left: 10rpx;
+			font-size: 28rpx;
+		}
+	}
+	
+	.no-more {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 30rpx;
+		
+		.no-more-text {
+			font-size: 28rpx;
+			color: #999;
+		}
+	}
+	
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 100rpx 30rpx;
+		
+		.empty-text {
+			margin-top: 20rpx;
+			font-size: 28rpx;
+			color: #999;
+		}
+	}
 }
 
 // 底部导航栏