uniapp-app/pages_app/myCourseware/myCourseware.vue

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

		<!-- 标签页导航 -->
		<view class="tab-nav">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'download' }"
				@click="switchTab('download')"
			>
				我的下载
			</view>
			<view class="divder"></view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'share' }"
				@click="switchTab('share')"
			>
				我的分享
			</view>
		</view>

		<!-- 摘要栏 -->
		<view class="summary-bar">
			<view class="summary-item">
				<up-image  :src="downLoadImg" width="36rpx" height="36rpx" ></up-image>
				<text class="summary-text">: {{ downloadCount }}</text>
			</view>
			<view class="summary-item">
				<up-image  :src="moneyImg" width="36rpx" height="36rpx" ></up-image>
				<text class="summary-text">: {{ totalAmount }}</text>
			</view>
		</view>

		<!-- 课件列表 -->
		<scroll-view 
			scroll-y 
			class="courseware-list"
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
			@scrolltolower="onLoadMore"
			:lower-threshold="100"
		>
			<view class="courseware-item" v-for="(item, index) in coursewareList" :key="index" @click="onItemClick(item)">
				<view class="item-content">
					<view class="courseware-name">
						<text class="label">课件名称:</text>
						<text class="value">{{ item.name }}</text>
					</view>
					<view class="courseware-time">
						<text class="label">时间:</text>
						<text class="value">{{ item.time }}</text>
					</view>
					<view class="courseware-status">
						<text class="label">状态:</text>
						<text class="value status-paid">{{ item.status }}</text>
					</view>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view v-if="loading" class="loading-more">
				<text>加载中...</text>
			</view>
			
			<!-- 没有更多数据提示 -->
			<view v-if="noMore" class="no-more">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import downLoadImg from "@/static/course_download.png"
import moneyImg from "@/static/course_yuan.png"
const activeTab = ref('download');
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
const downloadCount = ref(4);
const totalAmount = ref('20.00');

const coursewareList = ref([
	{
		name: '慢性病毒性肝炎患者干扰素治疗不良反应临床处理专家共识',
		time: '2025-02-21',
		status: '已支付'
	},
	{
		name: '慢乙肝抗病毒治疗-把握时机正确选择',
		time: '2024-11-27',
		status: '已支付'
	},
	{
		name: '肝病相关血小板减少症临床管理中国专家共识(2023)解读',
		time: '2024-10-06',
		status: '已支付'
	},
	{
		name: '俞云松:耐药阳性菌感染诊疗思路(CHINET数据云)',
		time: '2022-10-24',
		status: '已支付'
	}
]);

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

const switchTab = (tab) => {
	activeTab.value = tab;
	// 切换标签时重置数据
	page.value = 1;
	noMore.value = false;
	// 这里可以根据标签加载不同数据
};

const onItemClick = (item) => {
	uni.showToast({ title: `点击了: ${item.name}`, icon: 'none' });
};

const onRefresh = () => {
	refreshing.value = true;
	page.value = 1;
	noMore.value = false;
	
	setTimeout(() => {
		refreshing.value = false;
		uni.showToast({ title: '刷新完成', icon: 'success' });
	}, 1000);
};

const onLoadMore = () => {
	if (loading.value || noMore.value) return;
	
	loading.value = true;
	
	setTimeout(() => {
		if (page.value < 3) {
			page.value++;
			uni.showToast({ title: '加载完成', icon: 'success' });
		} else {
			noMore.value = true;
		}
		loading.value = false;
	}, 1000);
};
</script>

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

.tab-nav {
	display: flex;
	background: #ffffff;
	border-bottom: 2rpx solid #f0f0f0;
	position: fixed;
	top: 140rpx;
	left: 0;
	right: 0;
	z-index: 10;
	.divder{
		width: 2rpx;
		height:100rpx;
		background:#eee;
	}
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #666666;
		position: relative;
		
		&.active {
			color: #8B2316;
			
			
		}
	}
}

.summary-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #8B2316;
	padding: 20rpx 30rpx;
	position: fixed;
	top: 260rpx; // 标签页导航下方
	left: 0;
	right: 0;
	z-index: 10;
	
	.summary-item {
		display: flex;
		align-items: center;
		
		.summary-text {
			color: #ffffff;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}
}

.courseware-list {
	height: calc(100vh - 140rpx - 116rpx - 80rpx);
	position: fixed;
	top: 336rpx; // 调整顶部位置，为固定的摘要栏腾出空间
	bottom: 0;
	width: 100%;
}

.courseware-item {
	background: #ffffff;
	margin-bottom: 2rpx;
	padding: 30rpx;
	border-bottom:2rpx solid #eee;
	.item-content {
		.courseware-name,
		.courseware-time,
		.courseware-status {
			display: flex;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				width: 120rpx;
				color: #8B2316;
				font-size: 28rpx;
			}
			
			.value {
				flex: 1;
				color: #666;
				font-size: 28rpx;
				line-height: 1.4;
				
				&.status-paid {
					color: #666;
				}
			}
		}
	}
}

.loading-more, .no-more {
	text-align: center;
	padding: 30rpx;
	color: #999999;
	font-size: 26rpx;
}
</style>