hookehuyr

refactor(首页): 移除夏令营推广区块并改用API获取精选课程数据

- 注释掉静态夏令营推广区块代码
- 从API获取精选课程数据替换原有模拟数据
- 更新轮播逻辑使用精选课程数据
- 更新课程封面图片字段匹配API返回格式
<!--
* @Date: 2025-03-20 19:55:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-09 16:10:07
* @LastEditTime: 2025-06-11 13:15:30
* @FilePath: /mlaj/src/views/HomePage.vue
* @Description: 美乐爱觉教育首页组件
*
......@@ -142,7 +142,7 @@
</div>
<!-- Summer Camp Promotion -->
<div class="px-4 mb-6">
<!-- <div class="px-4 mb-6">
<SummerCampCard :items="[
{
title: '大国少年-世界正东方',
......@@ -175,7 +175,7 @@
imageUrl: 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp-3.jpg'
}
]" />
</div>
</div> -->
<!-- Featured Courses Carousel -->
<div class="mb-6">
......@@ -189,13 +189,13 @@
style="scrollbar-width: none; -ms-overflow-style: none;"
>
<div
v-for="(course, index) in courses.slice(0, 4)"
v-for="(course, index) in goodCourses"
:key="course.id"
class="flex-shrink-0 w-full snap-center px-4"
>
<div class="relative rounded-xl overflow-hidden shadow-lg h-48">
<img
:src="course.imageUrl || 'https://cdn.ipadbiz.cn/mlaj/images/featured-course.jpg'"
:src="course.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'"
:alt="course.title"
class="w-full h-full object-cover"
/>
......@@ -236,7 +236,7 @@
<!-- Carousel Indicators -->
<div class="flex justify-center mt-4">
<button
v-for="(_, index) in courses.slice(0, 4)"
v-for="(_, index) in goodCourses.slice(0, 4)"
:key="index"
@click="scrollToSlide(index)"
:class="[
......@@ -522,7 +522,7 @@ import SummerCampCard from '@/components/ui/SummerCampCard.vue'
import VideoPlayer from '@/components/ui/VideoPlayer.vue'
// 导入模拟数据和工具函数
import { courses, liveStreams, activities } from '@/utils/mockData'
import { liveStreams, activities } from '@/utils/mockData'
import { useTitle } from '@vueuse/core'
import { useAuth } from '@/contexts/auth'
import { showToast } from 'vant'
......@@ -561,6 +561,7 @@ const displayedRecommendations = ref([]) // 当前显示的推荐内容
//
const userRecommendations = ref([])
const hotCourses = ref([])
const goodCourses = ref([])
// 获取推荐内容
const getRecommendations = (random = false) => {
if (random) {
......@@ -576,13 +577,7 @@ const checkInTypes = ref([]);
// 自动轮播
let carouselInterval
onMounted(async () => {
carouselInterval = setInterval(() => {
if (carouselRef.value) {
const nextSlide = (currentSlide.value + 1) % courses.slice(0, 4).length
scrollToSlide(nextSlide)
}
}, 5000)
// TODO: 模拟获取用户推荐内容
// 获取课程列表
const res = await getCourseListAPI({ sn: 'RMKC' })
if (res.code) {
......@@ -598,6 +593,20 @@ onMounted(async () => {
if (res2.code) {
hotCourses.value = res2.data
}
// TODO: 获取精选课程
const res3 = await getCourseListAPI({
sn: 'RMKC', // JXKC
limit: 4
})
if (res3.code) {
goodCourses.value = res3.data
carouselInterval = setInterval(() => {
if (carouselRef.value) {
const nextSlide = (currentSlide.value + 1) % goodCourses.value.slice(0, 4).length
scrollToSlide(nextSlide)
}
}, 5000)
}
// 获取签到列表
if(currentUser.value) {
......