9.1
This commit is contained in:
zoujiandong
+168
-138
@@ -16,7 +16,7 @@
|
||||
<!-- 排序和筛选栏 -->
|
||||
<view class="filter-bar">
|
||||
<view class="filter-item" @click="toggleSort">
|
||||
<text class="filter-text">最新</text>
|
||||
<text class="filter-text">{{sort==2?'最新':'最热'}}</text>
|
||||
<view class="newbox">
|
||||
<up-image :src="upImg" width="20rpx" height="26rpx" ></up-image>
|
||||
</view>
|
||||
@@ -104,7 +104,9 @@
|
||||
import downImg from "@/static/cb_up.png"
|
||||
import tougaoImg from "@/static/kejiantougao.png"
|
||||
import downLoadImg from "@/static/wdxz.png"
|
||||
import api from '@/api/api.js';
|
||||
const isFilterActive=ref(false)
|
||||
const sort = ref(2);
|
||||
// 响应式数据
|
||||
const refreshing = ref(false);
|
||||
const loading = ref(false);
|
||||
@@ -113,44 +115,7 @@
|
||||
const pageSize = ref(10);
|
||||
|
||||
// 响应式数据
|
||||
const coursewareList = ref([
|
||||
{
|
||||
title: "颜学兵: 广东省基孔肯雅热诊疗指引",
|
||||
author: "颜学兵 徐州医科大学附属医院",
|
||||
views: 179,
|
||||
price: "10.0"
|
||||
},
|
||||
{
|
||||
title: "颜学兵: 佛山市基孔肯雅热中医诊治推荐用方",
|
||||
author: "颜学兵 徐州医科大学附属医院",
|
||||
views: 122,
|
||||
price: "10.0"
|
||||
},
|
||||
{
|
||||
title: "抗菌药物的临床应用",
|
||||
author: "肝胆相照官方账号 北京肝胆相照公益基金会",
|
||||
views: 656,
|
||||
price: "15.0"
|
||||
},
|
||||
{
|
||||
title: "中国肝癌多学科综合治疗专家共识 (2025)",
|
||||
author: "肝胆相照官方账号 北京肝胆相照公益基金会",
|
||||
views: 208,
|
||||
price: "15.0"
|
||||
},
|
||||
{
|
||||
title: "耐药结核病全口服短程治疗专家共识 (2025)",
|
||||
author: "肝胆相照官方账号 北京肝胆相照公益基金会",
|
||||
views: 256,
|
||||
price: "15.0"
|
||||
},
|
||||
{
|
||||
title: "结核分枝杆菌合并乙型肝炎病毒治专家共识",
|
||||
author: "肝胆相照官方账号 北京肝胆相照公益基金会",
|
||||
views: 358,
|
||||
price: "15.0"
|
||||
}
|
||||
]);
|
||||
const coursewareList = ref([]);
|
||||
|
||||
// 方法
|
||||
const goBack = () => {
|
||||
@@ -171,10 +136,7 @@
|
||||
};
|
||||
|
||||
const toggleSort = () => {
|
||||
uni.showToast({
|
||||
title: '排序功能',
|
||||
icon: 'none'
|
||||
});
|
||||
sort.value=sort.value==1?2:1
|
||||
};
|
||||
|
||||
|
||||
@@ -192,110 +154,141 @@
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
// 模拟API数据
|
||||
const mockApiData = [
|
||||
{
|
||||
id: 7,
|
||||
title: "肝胆疾病影像学诊断指南",
|
||||
author: "影像科专家团队 北京协和医院",
|
||||
views: 445,
|
||||
price: "20.0"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "肝硬化并发症治疗新进展",
|
||||
author: "消化内科专家 上海交通大学医学院",
|
||||
views: 332,
|
||||
price: "18.0"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "肝胆外科手术技巧精要",
|
||||
author: "外科专家 中山大学附属第一医院",
|
||||
views: 567,
|
||||
price: "25.0"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "肝胆疾病护理规范",
|
||||
author: "护理专家团队 中国护理学会",
|
||||
views: 289,
|
||||
price: "12.0"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// 下拉刷新
|
||||
const onRefresh = async () => {
|
||||
refreshing.value = true;
|
||||
const onRefresh = async () => {
|
||||
refreshing.value = true;
|
||||
|
||||
try {
|
||||
// 重置数据
|
||||
page.value = 1;
|
||||
noMore.value = false;
|
||||
|
||||
try {
|
||||
// 模拟API调用延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 重置数据
|
||||
page.value = 1;
|
||||
noMore.value = false;
|
||||
|
||||
// 重新加载第一页数据
|
||||
await loadData(true);
|
||||
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '刷新失败',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
refreshing.value = false;
|
||||
}
|
||||
};
|
||||
// 重新加载第一页数据
|
||||
await loadData(true);
|
||||
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '刷新失败',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
refreshing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 上拉加载更多
|
||||
const onLoadMore = async () => {
|
||||
console.log('加载更多')
|
||||
if (loading.value || noMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
// 模拟API调用延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
// 加载下一页数据
|
||||
await loadData(false);
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
// 上拉加载更多
|
||||
const onLoadMore = async () => {
|
||||
console.log('加载更多')
|
||||
if (loading.value || noMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
// 加载下一页数据
|
||||
await loadData(false);
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载数据
|
||||
const loadData = async (isRefresh = false) => {
|
||||
// 模拟API分页逻辑
|
||||
const startIndex = (page.value - 1) * pageSize.value;
|
||||
const endIndex = startIndex + pageSize.value;
|
||||
const newData = mockApiData.slice(startIndex, endIndex);
|
||||
// 加载数据
|
||||
const loadData = async (isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
page.value = 1;
|
||||
coursewareList.value = [];
|
||||
noMore.value = false;
|
||||
}
|
||||
|
||||
if (loading.value || noMore.value) return;
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
console.log(`开始加载第${page.value}页课件数据`);
|
||||
|
||||
if (isRefresh) {
|
||||
// 刷新时替换所有数据
|
||||
coursewareList.value = coursewareList.value.slice(0, 6); // 保留原有6条数据
|
||||
} else {
|
||||
// 加载更多时追加数据
|
||||
if (newData.length > 0) {
|
||||
coursewareList.value.push(...newData);
|
||||
page.value++;
|
||||
// 调用API获取课件列表
|
||||
const res = await api.ganDanFileByKeyWords({
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
sort: sort.value,
|
||||
// 可以根据需要添加其他筛选参数
|
||||
keywords: '',
|
||||
title: '',
|
||||
// fileType: selectedFileType.value,
|
||||
// sortBy: sortType.value
|
||||
});
|
||||
|
||||
console.log('课件列表API响应:', res);
|
||||
|
||||
if (res && res.code === 200) {
|
||||
let newItems = [];
|
||||
let totalCount = 0;
|
||||
|
||||
// 解析API返回的数据结构
|
||||
if (res.data && res.data.list) {
|
||||
newItems = res.data.list;
|
||||
totalCount = res.data.total || res.data.totalRow || 0;
|
||||
console.log('使用 res.data.list 结构');
|
||||
} else if (res.data && Array.isArray(res.data)) {
|
||||
newItems = res.data;
|
||||
totalCount = res.total || 0;
|
||||
console.log('使用 res.data 数组结构');
|
||||
} else {
|
||||
console.error('无法识别的数据结构:', res.data);
|
||||
noMore.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('解析后的数据:', { newItems, totalCount, newItemsLength: newItems.length });
|
||||
|
||||
if (Array.isArray(newItems)) {
|
||||
if (isRefresh) {
|
||||
coursewareList.value = newItems;
|
||||
console.log('刷新模式：替换列表数据');
|
||||
} else {
|
||||
coursewareList.value.push(...newItems);
|
||||
console.log('加载更多：追加数据到列表');
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
if (newItems.length < pageSize.value || coursewareList.value.length >= totalCount) {
|
||||
noMore.value = true;
|
||||
console.log('没有更多数据了');
|
||||
} else {
|
||||
page.value++;
|
||||
console.log(`还有更多数据，下一页: ${page.value}`);
|
||||
}
|
||||
} else {
|
||||
console.error('API返回的数据不是数组格式:', newItems);
|
||||
noMore.value = true;
|
||||
}
|
||||
} else {
|
||||
console.error('加载课件列表失败:', res.message);
|
||||
uni.showToast({
|
||||
title: res.message || '加载失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('加载课件列表异常:', error);
|
||||
uni.showToast({
|
||||
title: '网络异常，请重试',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
const showFilter = ref(false)
|
||||
|
||||
// 筛选弹窗相关数据
|
||||
@@ -340,7 +333,9 @@
|
||||
// 这里可以根据选中的标签进行数据筛选
|
||||
};
|
||||
onShow(() => {
|
||||
// 页面显示时的逻辑
|
||||
// 页面显示时加载数据
|
||||
console.log('页面显示，开始加载课件数据');
|
||||
loadData(true);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@@ -634,4 +629,39 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载状态样式
|
||||
.loading-state,
|
||||
.empty-state,
|
||||
.load-more-state,
|
||||
.no-more-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60rpx 20rpx;
|
||||
color: $text-secondary;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.load-more-state {
|
||||
padding: 40rpx 20rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.no-more-state {
|
||||
padding: 40rpx 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user