uniapp-app/pages_app/myCollect/file.vue

<template>
	<view class="courseware-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="课件文档"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
		</uni-nav-bar>

		<!-- 文档列表 -->
		<scroll-view 
			scroll-y 
			class="document-list"
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
			@scrolltolower="onLoadMore"
			:lower-threshold="100"
		>
			<view class="document-item" v-for="(item, index) in documentList" :key="item.id" @click="onItemClick(item)">
				<view class="content">
					<view class="title">{{ item.title }}</view>
					<view class="subtitle">{{ item.subtitle }}</view>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view v-if="loading" class="loading-more">
				<text>加载中...</text>
			</view>
			
			<!-- 空数据状态 -->
			<view v-if="!loading && documentList.length === 0" class="empty-state">
				<text>暂无课件文档</text>
			</view>
			
			<!-- 没有更多数据提示 -->
			<view v-if="noMore && documentList.length > 0" class="no-more">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/api.js';

const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);

// 文档数据列表
const documentList = ref([]);

const goBack = () => {
	uni.navigateBack();
};

const onItemClick = (item) => {
	// 跳转到文档详情页面
	uni.navigateTo({
		url: `/pages_app/myCourseware?id=${item.id}&title=${encodeURIComponent(item.title)}&subtitle=${encodeURIComponent(item.subtitle)}&path=${encodeURIComponent(item.path)}&userUuid=${encodeURIComponent(item.userUuid)}`
	});
};

// 获取文档列表
const getDocumentList = () => {
	api.getCollectionList({
		page: page.value,
		type: 6,
		title: ""
	}).then(res => {
		console.log(res);
		if (res.code === 200 && res.data) {
			const { list, totalRow, totalPage, pageNumber } = res.data;
			
			// 如果是第一页，清空列表
			if (page.value === 1) {
				documentList.value = [];
			}
			
			// 处理文档数据
			const processedList = list.map(item => ({
				id: item.other_uuid,
				title: item.title || '未知标题',
				subtitle: item.public_name || '未知作者',
				userUuid: item.user_uuid,
				path: item.path,
				type: item.type,
				agreenum: item.agreenum,
				readnum: item.readnum,
				videoType: item.video_type,
				imgpath: item.imgpath
			}));
			
			// 添加到列表
			documentList.value.push(...processedList);
			
			console.log(documentList.value);
			// 更新分页状态
			noMore.value = pageNumber >= totalPage;
			
			// 如果是第一页且有数据，显示总数
			if (page.value === 1 && totalRow > 0) {
				uni.showToast({ 
					title: `共找到 ${totalRow} 条记录`, 
					icon: 'none',
					duration: 2000
				});
			}
		} else {
			uni.showToast({ 
				title: res.message || '获取数据失败', 
				icon: 'none' 
			});
		}
	}).catch(err => {
		console.error('获取文档列表失败:', err);
		uni.showToast({ 
			title: '网络错误，请重试', 
			icon: 'none' 
		});
	}).finally(() => {
		loading.value = false;
		refreshing.value = false;
	});
};

const onRefresh = () => {
	refreshing.value = true;
	page.value = 1;
	noMore.value = false;
	
	// 调用API刷新数据
	getDocumentList();
};

const onLoadMore = () => {
	if (loading.value || noMore.value) return;
	
	loading.value = true;
	page.value++;
	
	// 调用API加载更多数据
	getDocumentList();
};

onMounted(() => {
	getDocumentList();
});
</script>

<style lang="scss" scoped>
.courseware-page {
	min-height: 100vh;
	background: #ffffff;
}

.document-list {
	height: calc(100vh - 140rpx);
	position: fixed;
	top: 140rpx;
	bottom: 0;
	width: 100%;
}

.document-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.title {
			font-size: 28rpx;
			color: #333333;
			line-height: 1.4;
			margin-bottom: 8rpx;
		}
		
		.subtitle {
			font-size: 24rpx;
			color: #666666;
		}
	}
}

.loading-more, .no-more, .empty-state {
	text-align: center;
	padding: 30rpx;
	color: #999999;
	font-size: 26rpx;
}

.empty-state {
	padding: 100rpx 30rpx;
	color: #999999;
}
</style>