baiyuApp/pages/index/homePageSearch.vue

<template>
	<view class="container">
		<!-- 顶部导航 Tab -->
		<view class="top-nav">
			<view class="search-cont">
				<view class="inner">
					<image class="icon-search"
						src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search.png" mode="">
					</image>
					<input type="text" @confirm="goSearch" v-model="keywordValue" placeholder="请输入关键字搜索内容"
						placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
					<u-icon v-if="keywordValue != ''" name="close-circle" color="#00000073" size="20"
						@tap="deleteKeywordMethods"></u-icon>
				</view>
				<view class="searchBtnViewClass" @tap="goSearch">搜索</view>
			</view>
			<view v-if="false" class="nav-row">
				<view class="nav-all" :class="{ active: activeId === 'all' }" @tap.stop="onSelectAll">
					<text>全部</text>
				</view>
				<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
					<view class="nav-inner">
						<view v-for="(item, index) in navList" :key="index"
							:class="['nav-item', { active: item.id === activeId }]"
							@tap.stop="onSelectByIndex(item.id)">
							<text>{{ item.categoryName }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll-wrap" :show-scrollbar="false" :scroll-top="scrollTop"
			@scrolltolower="isSearch ? getPageSearchCoursesData() : getPageRecommendCoursesData()">
			<!-- 没有搜索词-推荐课程 -->
			<template v-if="!isSearch">
				<view style="height: 300rpx;width: 100%;"> </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>
			<!-- 搜索后的课程列表 内容 -->
			<template v-else>
				<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 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-if="isSearch && courseList.length == 0" class="empty-state">
					<image class="empty-icon" src="@/static/images/new/nodata.png"></image>
					<text class="empty-text">没有搜索任何内容，换个词试试</text>
				</view>
			</template>
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script>
import {
	courseListDataApi
} from '@/api/home'
export default {
	data() {
		return {
			keywordValue: '',
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			activeId: 'all',
			courseList: [],
			isSearch: false,
			scrollTop: 0,
			searchPage: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			navList: [{
				id: 37,
				categoryName: "健康食品"
			},
			{
				id: 35,
				categoryName: "绿色有机"
			},
			{
				id: 36,
				categoryName: "膳食营养"
			},
			{
				id: 33,
				categoryName: "太极养生"
			}
			],
			recommendList: [],
			recommendPage: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
		}
	},
	onLoad() {
		this.getRecommendData()
	},
	methods: {
		deleteKeywordMethods() {
			this.keywordValue = ''
			this.isSearch = false
			this.courseList = []
			this.scrollTop = 0
		},
		goSearch() {
			if (this.keywordValue == '') {
				this.isSearch = false
				this.searchPage.pageNum = 1;
				this.searchPage.total = 0;
				this.courseList = [];
			} else {
				this.resetSearchDataList()
			}
		},
		onSelectAll() {
			this.activeId = 'all'
		},
		onCourseClick(course) {
			uni.navigateTo({
				url: `/pages/course/info?courseId=${course.courseId}`
			})
		},
		onSelectByIndex(id) {
			this.activeId = id
		},

		// 搜索课程列表
		async searchCourseList() {
			let params = {
				pageNum: this.searchPage.pageNum,
				pageSize: this.searchPage.pageSize,
				keyword: this.keywordValue,
			};
			uni.showLoading({
				title: "加载中...",
				mask: true,
			})
			const res = await courseListDataApi(params);
			this.isSearch = true
			uni.hideLoading()
			if (res.code === 200 && res.data.list.length > 0) {
				this.searchPage.total = res.data.total;
				this.courseList = [...this.courseList, ...res.data.list];
			}
		},

		// 分页获取搜索课程列表
		getPageSearchCoursesData() {
			if (this.searchPage.total <= this.courseList.length) {
				return;
			}
			this.searchPage.pageNum++;
			this.searchCourseList();
		},

		// 搜索课程列表重置方法
		resetSearchDataList() {
			this.searchPage.pageNum = 1;
			this.searchPage.total = 0;
			this.courseList = [];
			this.scrollTop = 0;
			this.searchCourseList();
		},

		// 获取推荐课程列表
		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();
		},
	}
}
</script>

<style lang="scss" scoped>
/* 图片箭头旋转类（展开时向上） */
.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;
}

.search-cont {
	padding: 24rpx 24rpx 20rpx;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.inner {
		box-sizing: border-box;
		width: calc(100vw - 135rpx);
		height: 72rpx;
		background: #F7F7F7;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;

		.icon-search {
			width: 28upx;
			height: 28upx;
			margin-right: 20upx;
		}

		input {
			height: 65rpx;
			line-height: 65rpx;
			flex: 1;
			font-size: 32rpx;
			padding-right: 15rpx;
		}

	}

	.searchBtnViewClass {
		font-weight: 400;
		font-size: 36rpx;
		color: #222222;
	}

	.icon-search {
		margin-left: 10upx;
		width: 40upx;
		height: 40upx;

		image {
			width: 40upx;
			height: 40upx;
		}

	}
}

.nav-row {
	display: flex;
	align-items: center;
	padding: 0 24rpx 24rpx;
	gap: 30rpx;
}

.nav-all {
	flex-shrink: 0;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 40rpx;
	color: rgba(0, 0, 0, 0.85);
	line-height: 56rpx;
}

.nav-all.active {
	color: #FF233C;
	font-weight: 600;
}

.nav-scroll {
	flex: 1;
}

.nav-inner {
	display: inline-flex;
	padding: 0;
	gap: 30rpx;
}

.nav-item {
	flex-shrink: 0;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 40rpx;
	color: rgba(0, 0, 0, 0.85);
	line-height: 56rpx;
}

.nav-item.active {
	color: #FF233C;
	font-weight: 600;
}

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

/* 课程网格 */
.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;

	image {
		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: 60rpx;
	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>