baiyuApp/pages/index/course.vue

<template>
	<view class="container">
		<!-- 顶部导航 Tab -->
		<view class="top-nav" :style="{ marginTop: statusBarHeight }">
			<view class="nav-tabs">
				<view class="nav-item" :class="{ active: tabIndex === 0 }" @click="handleChangeTopTab(0)">
					<text>精品课程</text>
					<view v-if="tabIndex === 0" class="nav-indicator"></view>
				</view>
				<view class="nav-item" :class="{ active: tabIndex === 1 }" @click="handleChangeTopTab(1)">
					<text>最近学习</text>
					<view v-if="tabIndex === 1" class="nav-indicator"></view>
				</view>
			</view>
			<view v-if="tabIndex === 0" class="category-wrap">
				<view class="category-tags" :class="{ collapsed: !categoryExpand }">
					<view v-for="(cat, idx) in categories" :key="idx" class="tag-item"
						:class="{ active: categoryIndex === cat.cateId }" @click="handleCategoryIdClick(cat.cateId)">
						<text>{{ cat.cateName }}</text>
					</view>
				</view>
				<view class="expand-btn" @click="categoryExpand = !categoryExpand">
					<text>{{ categoryExpand ? '收起' : '展开' }}</text>
					<image :class="{ 'rotate-arrow': !categoryExpand }" src="@/static/images/new/expand.png"></image>
				</view>
			</view>
		</view>

		<!-- 精品课程 内容 -->
		<scroll-view v-show="tabIndex === 0" scroll-y class="scroll-wrap" :show-scrollbar="false"
			@scrolltolower="getPageJpCoursesData">
			<!-- 分类标签区 -->
			<!-- 课程网格 -->
			<view v-if="courseList.length > 0" class="course-grid">
				<view v-for="(course, idx) in courseList" :key="idx" class="course-card" @click="onCourseClick(course)">
					<view class="card-cover">
						<image :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill" class="cover-img"></image>
					</view>
					<view class="course-info">
						<text class="card-title">{{ course.courseName }}</text>
						<view class="x-end" style="justify-content: space-between;">
							<view class="course-meta">
								<image class="courseMetaIcon" src="@/static/images/new/renshu.png"></image>
								<text class="meta-count">{{ course.watchUserCount }}</text>
							</view>
							<view class="btn-watch" @click.stop="onCourseClick(course)">立即观看</view>
						</view>
					</view>

				</view>
			</view>
			<view v-else class="empty-state">
				<image class="empty-icon" src="@/static/images/new/nodata.png"></image>
				<text class="empty-text">暂无课程</text>
			</view>
			<view class="bottom-placeholder"></view>
		</scroll-view>

		<!-- 最近学习 内容 -->
		<scroll-view v-show="tabIndex === 1" scroll-y class="scroll-wrap" :show-scrollbar="false"
			@scrolltolower="recentList.length > 0 ? getPageCourseStudyData() : getPageRecommendCoursesData()">
			<!-- 有学习记录：按日期分组列表 -->
			<template v-if="recentList.length > 0">
				<view v-for="(group, gIdx) in recentList" :key="gIdx" class="recent-group">
					<view class="group-date">
						<image class="date-icon" src="@/static/images/new/time.png"></image>
						<text class="date-text">{{ group.date }}</text>
					</view>
					<view v-for="(item, i) in group.courses" :key="i" class="recent-card" @click="onCourseClick(item)">
						<view class="recent-thumb">
							<image :src="item.imgUrl || '/static/logo.jpg'" mode="aspectFill" class="thumb-img"></image>
						</view>
						<view class="recent-info">
							<text class="recent-title">{{ item.courseName }}</text>
							<text class="recent-progress">已学: {{ item.progress }}%</text>
							<view class="y-end">
								<view class="btn-watch" @click.stop="onCourseClick(item)">立即观看</view>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 无学习记录：空态 + 为您精选 -->
			<template v-else>
				<view class="empty-state">
					<image class="empty-icon" src="@/static/images/new/nodata.png"></image>
					<text class="empty-text">暂无学习内容</text>
				</view>
				<view class="recommend-section">
					<text class="recommend-title">为您精选</text>
					<view v-if="recommendList.length > 0" class="course-grid" style="padding: 0;">
						<view v-for="(course, idx) in recommendList" :key="idx" class="course-card"
							@click="onCourseClick(course)">
							<view class="card-cover">
								<image :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill" class="cover-img">
								</image>
							</view>

							<view class="card-footer">
								<text class="card-title">{{ course.courseName }}</text>
								<view class="x-end" style="justify-content: space-between;">
									<view class="course-meta">
										<image src="@/static/images/new/renshu.png"></image>
										<text class="meta-count">{{ course.watchUserCount }}</text>
									</view>
									<view class="btn-watch" @click.stop="onCourseClick(course)">立即观看</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="empty-state">
						<image class="empty-icon" src="@/static/images/new/nodata.png"></image>
						<text class="empty-text">暂无课程</text>
					</view>
				</view>
			</template>
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script>
import {
	courseTypeDataApi, courseListDataApi
} from '@/api/home'
import { getCourseStudyList } from '@/api/course'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			tabIndex: 0,
			categoryExpand: false,
			categoryIndex: 0,
			categories: [{ cateId: 0, cateName: '全部' }],
			courseList: [],
			jpPage: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			recentList: [],
			recentPage: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			recommendList: [],
			recommendPage: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
		}
	},
	onLoad() {
		this.getJpCourseTypeData();
		this.getJpCourseList();
	},
	methods: {
		onCourseClick(e) {
			let newUrl = `/pages/course/info?courseId=${e.courseId}`
			if (e.videoId) {
				newUrl = `${newUrl}&videoId=${e.videoId}`
			}
			uni.navigateTo({
				url: newUrl
			})
		},
		// 切换顶部 Tab
		handleChangeTopTab(index) {
			this.tabIndex = index;
			if (index == 1) {
				this.resetCourseStudyDataList()
			}
		},

		// 获取学习记录课程列表
		async getCourseStudyListMethos() {
			const res = await getCourseStudyList({},
				this.recentPage.pageNum,
				this.recentPage.pageSize,
			);
			if (res.code === 200 && res.data.list.length > 0) {
				this.recentPage.total = res.data.total;
				this.recentList = [...this.recentList, ...res.data.list];
			} else {
				this.recentList = [];
				this.resetRecommendDataList();
			}
		},

		// 分页获取学习记录课程列表
		getPageCourseStudyData() {
			if (this.recentPage.total <= this.recentList.length) {
				return;
			}
			this.recentPage.pageNum++;
			this.getCourseStudyListMethos();
		},

		// 学习记录课程列表重置方法
		resetCourseStudyDataList() {
			this.recentPage.pageNum = 1;
			this.recentPage.total = 0;
			this.recentList = [];
			this.getCourseStudyListMethos();
		},

		// 获取为您精选课程列表
		async getRecommendData() {
			let params = {
				pageNum: this.recommendPage.pageNum,
				pageSize: this.recommendPage.pageSize,
			};
			const res = await courseListDataApi(params);
			if (res.code === 200 && res.data.list.length > 0) {
				this.recommendPage.total = res.data.total;
				this.recommendList = [...this.recommendList, ...res.data.list];
			}
		},

		// 分页获取为您精选课程列表
		getPageRecommendCoursesData() {
			if (this.recommendPage.total <= this.recommendList.length) {
				return;
			}
			this.recommendPage.pageNum++;
			this.getRecommendData();
		},

		// 为您精选课程列表重置方法
		resetRecommendDataList() {
			this.recommendPage.pageNum = 1;
			this.recommendPage.total = 0;
			this.recommendList = [];
			this.getRecommendData();
		},

		// 点击分类标签
		handleCategoryIdClick(id) {
			this.categoryIndex = id;
			this.resetJpDataList();
		},

		// 获取精品课程-类型
		async getJpCourseTypeData() {
			const params = {
				pageNum: 1,
				pageSize: 20,
				isShow: 1,
				cateType: 1,
				yxxTag: 0
			};
			const res = await courseTypeDataApi(params);
			if (res.code === 200) {
				this.categories = [...this.categories, ...res.data.list];
			}
		},
		// 获取精品课程-列表
		async getJpCourseList() {
			let params = {
				pageNum: this.jpPage.pageNum,
				pageSize: this.jpPage.pageSize,
				subCateId: this.categoryIndex,
				yxxTag: 0,
			};
			if (params.subCateId === 0) {
				delete params.subCateId;
			}
			uni.showLoading({
				title: "加载中...",
				mask: true,
			})
			const res = await courseListDataApi(params);
			uni.hideLoading()
			if (res.code === 200 && res.data.list.length > 0) {
				this.jpPage.total = res.data.total;
				this.courseList = [...this.courseList, ...res.data.list];
			}
		},
		// 分页获取精品课程列表
		getPageJpCoursesData() {
			if (this.jpPage.total <= this.courseList.length) {
				return;
			}
			this.jpPage.pageNum++;
			this.getJpCourseList();
		},

		// 精品课程列表重置方法
		resetJpDataList() {
			this.jpPage.pageNum = 1;
			this.jpPage.total = 0;
			this.courseList = [];
			this.getJpCourseList();
		},
	}
}
</script>
<style scoped lang="scss">
/* 图片箭头旋转类（展开时向上） */
.rotate-arrow {
	transform: rotate(180deg);
}

.container {
	min-height: 100vh;
	background: #F5F5F5;
	display: flex;
	flex-direction: column;
}

/* 顶部 Tab */
.top-nav {
	display: flex;
	flex-direction: column;
	background: #fff;
	/* border-bottom: 1rpx solid #f0f0f0; */
}

.nav-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 24rpx 0;
}

.nav-item text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 36rpx;
	color: #030303;
}

.nav-item.active text {
	font-weight: 600;
	font-size: 40rpx;
}

.nav-indicator {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100rpx;
	height: 10rpx;
	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 6rpx;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.action-icon {
	font-size: 36rpx;
	color: #666;
}

/* 滚动区 */
.scroll-wrap {
	flex: 1;
	height: 0;
}

/* 分类标签 */
.category-wrap {
	padding: 24rpx 0;
	border-radius: 0rpx 0rpx 20rpx 20rpx;
	background: #fff;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.category-tags {
	width: 100%;
	box-sizing: border-box;
	padding: 0 24rpx;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.category-tags.collapsed {
	max-height: 100rpx;
	overflow: hidden;
}

.tag-item {
	width: 31%;
	height: 96rpx;
	box-sizing: border-box;
	padding: 20rpx 0;
	text-align: center;
	border-radius: 20rpx;
	background: #f0f0f0;
	margin-right: 3%;
	margin-bottom: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tag-item:nth-last-child(-n+3) {
	margin-bottom: 0;
}

.tag-item:nth-child(3n) {
	margin-right: 0;
}

.tag-item text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 40rpx;
	color: rgba(0, 0, 0, 0.85);
}

.tag-item.active {
	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
}

.tag-item.active text {
	color: #fff;
}

.expand-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
	width: 166rpx;
	height: 64rpx;
	border-radius: 32rpx;
	border: 2rpx solid #FF233C;
}

.expand-btn text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #FF233C;
}

.expand-btn .arrow {
	margin-left: 6rpx;
	font-size: 22rpx;
}

.expand-btn image {
	margin-left: 10rpx;
	width: 32rpx;
	height: 32rpx;
}

/* 课程网格 */
.course-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 24rpx;
	gap: 24rpx 20rpx;
	flex-direction: column;
}

.course-card {
	display: flex;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	padding: 20rpx;
}

.course-tag {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 8rpx 12rpx;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	font-size: 22rpx;
	color: #fff;
}

.course-info {
	flex: 1;
	padding-left: 24rpx;
	/* padding: 20rpx 24rpx; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

.course-meta {
	display: flex;
	align-items: center;

	.courseMetaIcon {
		width: 30rpx;
		height: 30rpx;
	}

}

.meta-icon {
	font-size: 24rpx;
	margin-right: 6rpx;
	color: #999;
}

.meta-count {
	margin-left: 10rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #666666;
}

.card-cover {
	position: relative;
	width: 296rpx;
	height: 222rpx;
	border-radius: 20rpx;
	overflow: hidden;
	flex-shrink: 0;
}

.cover-img {
	width: 100%;
	height: 100%;
	background: #BB6D6D;
}

.card-title {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #222222;
	line-height: 50rpx;
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.card-footer {
	flex: 1;
	padding-left: 24rpx;
	/* padding: 20rpx 24rpx; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

.card-views {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #666666;
	line-height: 44rpx;
}

.btn-watch {
	width: 168rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 32rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #FFFFFF;
}

/* 最近学习 - 按日期分组 */
.recent-group {
	padding: 24rpx 24rpx 0;
}

.group-date {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}

.date-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}

.date-text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 40rpx;
	line-height: 56rpx;
	color: #222222;
}

.recent-card {
	display: flex;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	padding: 20rpx;
	margin-bottom: 24rpx;
}

.recent-card:last-child {
	margin-bottom: 0;
}

.recent-thumb {
	position: relative;
	width: 296rpx;
	height: 222rpx;
	border-radius: 20rpx;
	overflow: hidden;
	flex-shrink: 0;
}

.thumb-img {
	width: 100%;
	height: 100%;
	background: #BB6D6D;
}

.recent-info {
	flex: 1;
	padding-left: 24rpx;
	/* padding: 20rpx 24rpx; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

.recent-title {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #222222;
	line-height: 50rpx;
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.recent-progress {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: rgba(0, 0, 0, 0.65);
	line-height: 44rpx;
}

/* 空态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 0 48rpx;
	/* background: linear-gradient(180deg, #fff5f5 0%, #fff 100%); */
}

.empty-icon {
	width: 310rpx;
	height: 260rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 36rpx;
	color: rgba(0, 0, 0, 0.25);
	line-height: 50rpx;
}

/* 为您精选 */
.recommend-section {
	padding: 0 24rpx 32rpx;
}

.recommend-title {
	display: block;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 40rpx;
	color: #222222;
	line-height: 56rpx;
	padding-bottom: 24rpx;
}

.bottom-placeholder {
	height: 120rpx;
}
</style>