baiyuApp/pages/index/index.vue

<template>
	<view class="container">
		<image class="bg" src="@/static/images/bg.png" mode="aspectFill"></image>
		<!-- 顶部搜索栏 -->
		<view class="top-bar" :style="{ marginTop: statusBarHeight }">
			<view class="search-row" @click="onSearch">
				<image src="@/static/images/new/search.png" mode=""></image>
				<text class="search-placeholder">搜索你感兴趣的内容</text>
			</view>
			<!-- <view class="top-actions">
				<text class="action-icon">⋯</text>
				<text class="action-icon scan">⊙</text>
			</view> -->
		</view>

		<!-- 应用标题与副标题 -->
		<view class="brand">
			<image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/title2.png" mode="widthFix"></image>
			<!-- <text class="brand-title">品质韶华·乐享朝夕</text>
			<text class="brand-subtitle">全国89%的中老年人都在用的兴趣内容社区</text> -->
		</view>

		<!-- 主题横幅 Banner -->
		<scroll-view scroll-y class="scroll-content" :show-scrollbar="false" @scrolltolower="getPageFreeCoursesData">
			<view class="banner" @click="onBannerClick">
				<!-- <image class="banner-bg" src="/static/images/new/banner.png" mode="aspectFill"></image> -->
				<view class="inner">
					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
						<!-- <swiper-item class="swiper-item" v-for="(item,index) in advList" :key="index"
							@click="handleAdvClick(item)">
							<image :src="item.imageUrl" mode=""></image>
						</swiper-item> -->
						<swiper-item class="swiper-item">
							<image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/banner2.jpg" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 央广原乡行 视频推荐区 -->
			<view class="section video-section">
				<view class="section-head">
					<view class="section-title-wrap">
						<image class="play-icon" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/yxbofang.png" mode=""></image>
						<image class="section-title" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/yxy2.png"></image>
					</view>
					<view class="section-more" @click="onMoreVideos">查看更多
						<image src="/static/images/new/back.png"></image>
					</view>
				</view>
				<view class="feature-video-card">
					<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
						<view v-for="(tag, idx) in videoTags" :key="idx" class="tag-item"
							:class="{ active: videoTagId === tag.cateId }" @click="handleSelectOneType(tag)">
							<text>{{ tag.cateName }}</text>
							<view v-if="videoTagId === tag.cateId" class="triangle"></view>
						</view>
					</scroll-view>
					<template v-if="oneCourseListData.length > 0">
						<view v-for="(item, index) in oneCourseListData" :key="index" class="x-bc"
							@click="onWatchLive(item)">
							<view class="fv-thumb">
								<image class="fv-img" :src="item.imgUrl || '/static/images/new/banner.png'"
									mode="aspectFill"></image>
								<view v-if="false" class="live-tag">
									<text class="live-dot"></text>
									<text>直播中</text>
								</view>
							</view>
							<view class="fv-info">
								<text class="fv-title ellipsis">{{ item.courseName }}</text>
								<text class="fv-desc">{{ item.courseDesc }}</text>
								<view class="btn-watch" @click.stop="onWatchLive(item)">立即观看</view>
							</view>
						</view>
					</template>
					<view class="emptyCourse" v-else>暂无课程~</view>
				</view>
			</view>

			<!-- 免费精品课 -->
			<view class="section course-section">
				<view class="section-head">
					<view class="section-title-wrap">
						<image class="play-icon" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/bofang2.png" mode=""></image>
						<image class="section-title" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/jpk2.png"></image>
					</view>
					<view class="section-more" @click="onMoreCourses">更多课程
						<image src="/static/images/new/back.png"></image>
					</view>
				</view>
				<view class="courseTabViewClass">
					<u-tabs :list="courseTabList" :current="courseCurrentIndex" lineWidth="0" lineHeight="0"
						lineColor="#FF233CFF" :activeStyle="courseTabActiveStyle"
						:inactiveStyle="courseTabInactiveStyle" @click="handleSelectCourseTab">
					</u-tabs>
				</view>
				<view v-if="courses.length > 0" class="course-list">
					<view v-for="(course, idx) in courses" :key="idx" class="course-card" @click="onWatchLive(course)">
						<view class="course-thumb">
							<image class="course-img" :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill">
							</image>
							<!-- <text class="course-tag">{{ course.tag }}</text> -->
						</view>
						<view class="course-info">
							<text class="course-name">{{ 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">{{ $formattedViewCount(course.watchUserCount) }}</text>
								</view>
								<view class="btn-watch2" @click.stop="onWatchLive(course)">立即观看</view>
							</view>

						</view>
					</view>
				</view>
				<view class="emptyCourse" v-else>暂无课程~</view>
			</view>

			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script>
import {
	courseTypeDataApi, courseListDataApi
} from '@/api/home'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			videoTagId: null,
			videoTags: [],
			oneCourseListData: [],
			courseTabId: null,
			courseCurrentIndex: 0,
			courses: [],
			courseTabList: [],
			freePage: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			courseTabActiveStyle: {
				color: '#FFFFFFFF',
				fontSize: '32rpx',
				padding: '8rpx 20rpx 10rpx',
				background: 'linear-gradient( 135deg, #FF5267 0%, #FF233C 100%)',
				borderRadius: '32rpx'
			},
			courseTabInactiveStyle: {
				color: '#000000D9',
				fontSize: '32rpx',
				background: '#FFFFFFFF',
				padding: '8rpx 20rpx 10rpx',
				borderRadius: '32rpx'
			}
		}
	},
	onLoad() {
		this.getOneCourseTypeData()
		this.getFreeCourseTypeData()
	},
	methods: {
		onSearch() {
			uni.navigateTo({
				url: '/pages/index/homePageSearch'
			})
		},
		onBannerClick() {
			return
			uni.navigateTo({
				url: '/pages/index/course'
			})
		},
		onMoreVideos() {
			uni.navigateTo({
				url: '/pages/index/video'
			})
		},
		// 获取央广原乡行-类型
		async getOneCourseTypeData() {
			const params = {
				pageNum: 1,
				pageSize: 4,
				isShow: 1,
				cateType: 1,
				yxxTag: 1,
				homePage: 1
			};
			const res = await courseTypeDataApi(params);
			if (res.code === 200) {
				this.videoTags = res.data.list;
				if (this.videoTags.length > 0) {
					this.videoTagId = this.videoTags[0].cateId;
					this.oneCourseListData = [];
					// 获取原乡行课程列表
					this.getYxxCourseList(this.videoTags[0].cateId)
				}
			}
		},
		// 获取免费精品课-类型
		async getFreeCourseTypeData() {
			const params = {
				pageNum: 1,
				pageSize: 10,
				isShow: 1,
				cateType: 1,
				yxxTag: 0,
				homePage: 1
			};
			const res = await courseTypeDataApi(params);
			if (res.code === 200) {
				this.courseTabList = res.data.list.map(item => ({
					id: item.cateId,
					name: item.cateName
				}));
				this.courseTabList = [
					{
						id: 0,
						name: '精选'
					},
					...this.courseTabList
				]
				if (this.courseTabList.length > 0) {
					this.courseTabId = this.courseTabList[0].id;
					this.courses = [];
					// 获取免费精品课课程列表
					this.getFreeCourseList(this.courseTabId)
				}
			}
		},
		// 点击切换央广原乡行-类型
		handleSelectOneType(e) {
			this.videoTagId = e.cateId;
			this.oneCourseListData = [];
			// 获取原乡行课程列表
			this.getYxxCourseList(this.videoTagId)
		},
		// 点击切换免费精品课-类型
		handleSelectCourseTab(item) {
			this.courseCurrentIndex = item.index;
			this.courseTabId = item.id;
			this.courses = [];
			this.freePage.pageNum = 1;
			this.freePage.total = 0;
			// 获取免费精品课课程列表
			this.getFreeCourseList(this.courseTabId)
		},
		// 获取原乡行课程列表
		async getYxxCourseList(cateId) {
			const params = {
				pageNum: 1,
				pageSize: 10,
				subCateId: cateId,
				yxxTag: 1,
				recommendSlot: 1,
			};
			const res = await courseListDataApi(params);
			if (res.code === 200 && res.data.list.length > 0) {
				this.oneCourseListData = [res.data.list[0]];
			}
		},
		// 获取免费精品课课程列表
		async getFreeCourseList(cateId) {
			let params = {
				pageNum: this.freePage.pageNum,
				pageSize: this.freePage.pageSize,
				subCateId: cateId,
				yxxTag: 0,
				recommendSlot: 3,
			};
			if (params.subCateId == 0) {
				delete params.subCateId;
			}
			const res = await courseListDataApi(params);
			if (res.code === 200) {
				this.freePage.total = res.data.total;
				this.courses = [...this.courses, ...res.data.list];
			}
		},
		onWatchLive(e) {
			uni.navigateTo({
				url: `/pages/course/info?courseId=${e.courseId}`
			})
		},
		onMoreCourses() {
			uni.navigateTo({
				url: '/pages/index/course'
			})
		},
		// 分页获取免费精品课课程列表
		getPageFreeCoursesData() {
			if (this.freePage.total <= this.courses.length) {
				return;
			}
			this.freePage.pageNum = this.freePage.pageNum + 1;
			this.getFreeCourseList(this.courseTabId)
		},
	}
}
</script>

<style lang="scss" scoped>
.bg {
	width: 100%;
	height: 380rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

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

/* 顶部搜索 */
.top-bar {
	display: flex;
	align-items: center;
	padding: 24rpx 24rpx 30rpx;
	position: relative;
}

.search-row {
	flex: 1;
	display: flex;
	align-items: center;
	height: 76rpx;
	padding: 0 24rpx;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 38rpx;

	image {
		width: 44rpx;
		height: 44rpx;
	}
}

.search-placeholder {
	margin-left: 12rpx;
	font-size: 32rpx;
	color: rgba(0, 0, 0, 0.25);
}

.top-actions {
	display: flex;
	align-items: center;
	margin-left: 20rpx;
}

.action-icon {
	font-size: 36rpx;
	color: #333;
	margin-right: 16rpx;
}

.action-icon.scan {
	font-size: 40rpx;
}

/* 品牌标题 */
.brand {
	padding: 0 68rpx 30rpx;
	background: #fff;

	image {
		width: 100%;
	}
}

.brand-title {
	display: block;
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.brand-subtitle {
	font-size: 24rpx;
	color: #999;
}

/* Banner */
.banner {
	position: relative;
	height: 210rpx;
	margin: 0 24rpx 40rpx;
	border-radius: 16rpx;
	overflow: hidden;

	//background: linear-gradient(135deg, #87CEEB 0%, #E0F4FF 100%);
	.inner {
		width: 100%;
		height: 210rpx;
		border-radius: 10rpx;
		overflow: hidden;

		.swiper,
		.swiper-item,
		.swiper-item image {
			width: 100%;
			height: 100%;
		}

	}
}

.banner-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.banner-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.15);
}

.banner-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	margin-bottom: 8rpx;
}

.banner-desc {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.95);
}

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

.section {
	padding-bottom: 32rpx;
}

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	padding: 0 24rpx;
}

.section-title {
	width: 226rpx;
	height: 36rpx;
}

.section-title-wrap {
	display: flex;
	align-items: center;
}

.play-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 10rpx;
}

.section-more {
	font-size: 26rpx;
	color: #999;

	image {
		width: 16rpx;
		height: 20rpx;
	}
}

/* 横向标签 */
.tag-scroll {
	height: 80rpx;
	white-space: nowrap;
	margin-bottom: 5rpx;
}

.tag-item {
	position: relative;
	display: inline-block;
	padding: 6rpx 24rpx;
	margin-right: 24rpx;
	border-radius: 10rpx;
	background: rgba(255, 255, 255, 0.5);
}

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

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

/* 底部小三角核心 */
.triangle {
	z-index: 10;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -5px;
	width: 0;
	height: 0;
	border-left: 30rpx solid transparent;
	border-right: 30rpx solid transparent;
	border-top: 20rpx solid #FF233C;
}

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

/* 特色视频卡片 */
.feature-video-card {
	display: flex;
	//align-items: center;
	flex-direction: column;
	background: linear-gradient(135deg, #5F111A 0%, #37050B 100%);
	border-radius: 30rpx;
	overflow: hidden;
	padding: 30rpx 20rpx;
	margin-left: 24rpx;
	margin-right: 24rpx;
}

.fv-thumb {
	position: relative;
	width: 360rpx;
	height: 240rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
}

.fv-img {
	width: 100%;
	height: 100%;
	background: #e0e0e0;
}

.live-tag {
	position: absolute;
	left: 0;
	top: 20rpx;
	display: flex;
	align-items: center;
	width: 130rpx;
	height: 44rpx;
	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 0rpx 8rpx 8rpx 0rpx;
}

.live-tag text {
	font-size: 28rpx;
	color: #fff;
	margin-left: 6rpx;
}

.live-dot {
	width: 12rpx;
	height: 12rpx;
	background: #fff;
	border-radius: 50%;
	animation: blink 1s infinite;
}

@keyframes blink {
	50% {
		opacity: 0.5;
	}
}

.fv-info {
	flex: 1;
	//padding: 20rpx 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-width: 0;
}

.fv-title {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	text-align: center;
	font-style: normal;
	margin-bottom: 8rpx;
}

.fv-desc {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 44rpx;
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 红色按钮 */
.btn-watch {
	width: 188rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	background: #FFFFFF;
	border-radius: 12rpx;
	margin-top: 28rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #3F040B;
}

.btn-watch2 {
	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;
}

.courseTabViewClass {
	width: 100%;
	padding-left: 14rpx;
	margin-top: 8rpx;
	margin-bottom: 24rpx;
}

/* 课程列表 */
.course-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	padding: 0 24rpx
}

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

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

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

.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-name {
	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;
}

.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;
}

/* 底部占位（为全局 tabBar 留出空间） */
.bottom-placeholder {
	height: 120rpx;
}

::v-deep .u-tabs__wrapper__nav__item {
	padding: 0 10rpx !important;
}

.emptyCourse {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200rpx;
	padding: 24rpx 50rpx;
	color: #999999;
}
</style>