educational_Template3/pages/home/index.vue

<template>
	<view class="home-container">
		<!-- 顶部背景装饰 -->
		<view class="top-bg-decoration"></view>

		<!-- 自定义导航栏 -->
		<view class="nav-bar-fixed" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="product-name">产品名称</view>
				<view class="search-input-box" @click="toSearch">
					<image class="search-icon" src="/static/search_gray.png" mode="aspectFit"></image>
					<text class="placeholder">搜索课程</text>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="main-content-scroll" scroll-y :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
			<!-- Banner 轮播图 -->
			<view class="banner-section">
				<swiper class="banner-swiper" :indicator-dots="true" circular autoplay interval="3000" duration="500" 
					indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
					<swiper-item v-for="(item, index) in advList" :key="index" @click="handleAdvClick(item)">
						<view class="banner-card">
							<image v-if="item.imageUrl" class="banner-image" :src="item.imageUrl" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 导航网格 -->
			<view class="nav-grid">
				<view class="nav-item" v-for="(item, index) in navMenus" :key="index" @click="menuClick(item)">
					<view class="nav-icon-wrap">
						<image class="nav-icon" :src="item.icon" mode="aspectFit"></image>
					</view>
					<text class="nav-title">{{ item.title }}</text>
				</view>
			</view>

			<!-- 热门好课 -->
			<view class="section-container">
				<view class="section-header">
					<text class="section-title">热门好课</text>
					<view class="more-link" @click="goClassList(1)">
						<text>更多</text>
						<image class="arrow-icon" src="/static/right_arrow_right.png" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 特色大课 -->
				<view class="featured-course-card" v-if="featuredCourse" @click="goClass(featuredCourse.courseId, 1)">
					<view class="cover-wrap">
						<image class="course-cover" :src="featuredCourse.imgUrl || '/static/bg_video.png'" mode="aspectFill"></image>
						<view class="tag-yangsheng">养生</view>
						<view class="lesson-badge">
							<view class="left">
							<image class="left-icon" src="/static/course_number_bg.png" mode="aspectFit"></image>
							<image class="play-icon-small" src="/static/course_number.png" mode="aspectFit"></image>
							<text>第1讲</text>
							</view>
							<text>共{{ featuredCourse.lessonCount }}节课</text>
							<image class="arrow-right-small" src="/static/right_arrow_white.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="course-info">
						<view class="course-title">{{ featuredCourse.courseName }}</view>
						<view class="course-footer">
							<view class="author-info">
								<image class="author-avatar" :src="featuredCourse.authorAvatar || '/static/avatar.png'" mode="aspectFill"></image>
								<text class="author-name">{{ featuredCourse.authorName }}</text>
							</view>
							<view class="playback-count">{{ featuredCourse.playCount }}次播放</view>
						</view>
					</view>
				</view>

				<!-- 课程列表 -->
				<view class="course-list">
					<view class="course-item" v-for="(item, index) in otherCourses" :key="index" @click="goClass(item.courseId, 1)">
						<image class="item-thumb" :src="item.imgUrl || '/static/course_img.png'" mode="aspectFill"></image>
						<view class="item-content">
							<view class="item-title ellipsis-2">{{ item.courseName }}</view>
							<view class="item-footer">
								<text class="item-playback">{{ item.playCount }}次播放</text>
								<view class="study-btn">去学习</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部间距 -->
			<view class="bottom-safe-area"></view>
		</scroll-view>

		<!-- 原有的弹窗组件保留 -->
		<view class="popup-box" v-if="activityShow">
			<view class="info-mask" @tap="closeActivity()"></view>
			<view class="info-form">
				<image :src="activity.logoUrl" @tap="showActivity()" />
			</view>
		</view>
		<z-modal :show="tuiModalControl" placeholderText="请输入邀请码" :btnGroup="btnGroup" :contentType="2"
			titleText="填写邀请码" @cancle="cancleTui" @sure="submitTui"></z-modal>
	</view>
</template>

<script>
	import { courseList } from '@/api/class.js'
	import zModal from '@/components/z-modal/z-modal.vue'
	import { getStoreActivity } from '@/api/activity.js'
	import { getIndexData, bindPromoter } from '@/api/index'
	import { getUserInfo } from '@/api/user'

	export default {
		components: {
			zModal
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				advList: [
					{ imageUrl: '', advUrl: '', showType: 1 },
					{ imageUrl: '', advUrl: '', showType: 1 }
				],
				navMenus: [
					{ title: '药品商城', icon: '/static/menu1.png',  linkUrl: '/pages/shopping/index', linkType: 1 },
					{ title: '热门好课', icon: '/static/menu2.png',linkUrl: '/pages_course/teacherClassroom?type=1', linkType: 1 },
					{ title: '我的课程', icon: '/static/menu3.png',  linkUrl: '/pages_course/teacherClassroom?type=2', linkType: 1 },
					{ title: '专业客服', icon: '/static/menu4.png',  linkUrl: '/pages/message/index', linkType: 1 }
				],
				featuredCourse: {
					courseId: 4,
					courseName: '你和合理膳食还有多少距离?',
					imgUrl: '/static/bg_video.png',
					lessonCount: 30,
					authorName: '健康大讲堂',
					authorAvatar: '/static/avatar.png',
					playCount: '8.1万'
				},
				otherCourses: [
					{ courseId: 5, courseName: '脑梗塞是帕金森病的发病因素吗?', imgUrl: '/static/famous_doctor_img.png', playCount: '25862' },
					{ courseId: 6, courseName: '合理的运动与健康', imgUrl: '/static/famous_doctor_img2.png', playCount: '25862' },
					{ courseId: 7, courseName: '合理的运动与健康', imgUrl: '/static/course_img.png', playCount: '25862' },
					{ courseId: 8, courseName: '合理的运动与健康', imgUrl: '/static/famous_doctor_img.png', playCount: '25862' }
				],
				activityShow: false,
				activity: null,
				tuiModalControl: false,
				btnGroup: [
					{ text: '取消', color: '#FFFFFF', bgColor: '#999999', width: '150rpx', height: '80rpx', shape: 'fillet', eventName: 'cancle' },
					{ text: '确定', color: '#FFFFFF', bgColor: '#5B37FD', width: '150rpx', height: '80rpx', shape: 'fillet', eventName: 'sure' }
				]
			}
		},
		onLoad() {
			this.getIndexData();
			this.getCourseList();
		},
		methods: {
			getCourseList() {
				courseList().then(res => {
					if (res.code == 200 && res.data && res.data.length > 0) {
						// 实际数据更新
					}
				});
			},
			getIndexData() {
				getIndexData().then(res => {
					if (res.code == 200 && res.data.advList && res.data.advList.length > 0) {
						this.advList = res.data.advList;
					}
				});
			},
			handleAdvClick(item) {
				if (item.advUrl) {
					uni.navigateTo({ url: item.advUrl });
				}
			},
			menuClick(item) {
				if (item.linkType == 1) {
					uni.navigateTo({ url: item.linkUrl });
				}
			},
			goClass(id, type) {
				uni.navigateTo({
					url: '/pages_course/learn?courseId=' + id + '&type=' + type
				});
			},
			goClassList(type) {
				uni.navigateTo({
					url: '/pages_course/teacherClassroom?type=' + type
				});
			},
			toSearch() {
				uni.navigateTo({ url: './productSearch' });
			},
			closeActivity() { this.activityShow = false; },
			showActivity() {
				this.activityShow = false;
				uni.navigateTo({ url: '/pages_shopping/shopping/activityDetails?activityId=' + this.activity.activityId });
			},
			cancleTui() { this.tuiModalControl = false; },
			submitTui(e) {
				if (!e.inputText) {
					uni.showToast({ icon: 'none', title: "请输入邀请码" });
					return;
				}
				bindPromoter({ userCode: e.inputText }).then(res => {
					if (res.code == 200) {
						uni.showToast({ icon: 'none', title: res.msg });
						this.tuiModalControl = false;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.home-container {
		min-height: 100vh;
		background-color: #FFFFFF;
		position: relative;
	}

	.top-bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 450rpx;
		background: linear-gradient(180deg, #F0F2FF 0%, rgba(255, 255, 255, 0) 100%);
		z-index: 0;
	}

	/* 导航栏 */
	.nav-bar-fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		background-color: transparent;

		.nav-content {
			height: 44px;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.product-name {
				font-size: 42rpx;
				font-weight: bold;
				color: #1A1A1A;
				margin-right: 24rpx;
				flex-shrink: 0;
			}

			.search-input-box {
				width: 302rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				display: flex;
				align-items: center;
				padding: 0 28rpx;
				margin-right: 24rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

				.search-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 14rpx;
				}

				.placeholder {
					font-size: 28rpx;
					color: #BBBBBB;
				}
			}

		
		}
	}

	.main-content-scroll {
		height: 100vh;
		position: relative;
		z-index: 1;
	}

	/* Banner */
	.banner-section {
		padding: 20rpx 30rpx;

		.banner-swiper {
			height: 233rpx;
			border-radius: 28rpx;
			overflow: hidden;
		}

		.banner-card {
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, #FF4D4D 0%, #FF8533 100%);
			position: relative;
		}

		.banner-image {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
	}

	/* 导航网格 */
	.nav-grid {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 50rpx;

		.nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.nav-icon-wrap {
				width: 104rpx;
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				.nav-icon {
					width:100%;
					height: 100%;
				}
			}

			.nav-title {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}
		}
	}

	/* 章节容器 */
	.section-container {
		padding: 20rpx 30rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.section-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #1A1A1A;
			}

			.more-link {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #BBBBBB;

				.arrow-icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 4rpx;
				}
			}
		}
	}

	/* 特色大课卡片 */
	.featured-course-card {
		background: #FFFFFF;
		border-radius: 28rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 30rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 40rpx;

		.cover-wrap {
			position: relative;
			width: 100%;
			height: 420rpx;

			.course-cover {
				width: 100%;
				height: 100%;
			}

			.tag-yangsheng {
				position: absolute;
				top: 0;
				left: 0;
				padding: 10rpx 28rpx;
				background: #5B37FD;
				color: #FFFFFF;
				font-size: 26rpx;
				border-bottom-right-radius: 24rpx;
			}

			.lesson-badge {
				padding-right: 16rpx;
				position: absolute;
				bottom: 24rpx;
				right: 24rpx;
			background: rgba(0,0,0,0.5);
				backdrop-filter: blur(6px);
				border-radius: 24rpx;
				display: flex;
				height: 48rpx;
				align-items: center;
				color: #FFFFFF;
				font-size: 26rpx;
				.left{
					display: flex;
					align-items: center;
					padding-left: 16rpx;
					width: 144rpx;
					height: 48rpx;
					position: relative;
					.left-icon{
					position: absolute;
					left: 0;
					top: 0;
					width: 144rpx;
					height: 48rpx;
					z-index: -1;
				}
				.play-icon-small {
					width: 30rpx;
					height: 30rpx;
					margin-right: 4rpx;
				}
				}
				
				.arrow-right-small {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.course-info {
			padding: 30rpx;
				background: #68686A;
				color: #fff;
			.course-title {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 28rpx;
			}

			.course-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.author-info {
					display: flex;
					align-items: center;

					.author-avatar {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.author-name {
						font-size: 28rpx;
					}
				}

				.playback-count {
					font-size: 28rpx;
				}
			}
		}
	}

	/* 课程列表 */
	.course-list {
		.course-item {
			display: flex;
			padding: 30rpx 0;
			&:last-child {
				border-bottom: none;
			}

			.item-thumb {
				width: 260rpx;
				height: 160rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			.item-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-title {
					font-size: 32rpx;
					color: #1A1A1A;
					font-weight: bold;
					line-height: 1.4;
				}

				.item-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item-playback {
						font-size: 26rpx;
						color: #CCCCCC;
					}

					.study-btn {
						padding: 12rpx 40rpx;
						background: #5B37FD;
						color: #FFFFFF;
						font-size: 28rpx;
						border-radius: 36rpx;
						font-weight: 500;
					}
				}
			}
		}
	}

	.ellipsis-2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.bottom-safe-area {
		height: 160rpx;
	}
</style>