hookehuyr

feat(课程详情页): 添加课程大纲展开/收起功能

为了优化用户体验,当课程大纲条目超过4条时,默认显示前4条,并提供展开/收起按钮,点击按钮可查看全部或收起部分条目
...@@ -78,10 +78,15 @@ ...@@ -78,10 +78,15 @@
78 78
79 <div v-if="activeTab === '课程大纲'"> 79 <div v-if="activeTab === '课程大纲'">
80 <div class="space-y-4"> 80 <div class="space-y-4">
81 - <div v-for="(item, index) in course?.schedule" :key="index" class="border-l-2 border-green-500 pl-3"> 81 + <div v-for="(item, index) in displayedSchedule" :key="index" class="border-l-2 border-green-500 pl-3">
82 <h4 class="font-medium text-gray-800">{{ item.title }}</h4> 82 <h4 class="font-medium text-gray-800">{{ item.title }}</h4>
83 <p class="text-sm text-gray-600 mt-1">{{ item.duration }}分钟 · {{ item.schedule_time || '空数据' }}个小节</p> 83 <p class="text-sm text-gray-600 mt-1">{{ item.duration }}分钟 · {{ item.schedule_time || '空数据' }}个小节</p>
84 </div> 84 </div>
85 + <div v-if="course?.schedule?.length > 4" class="flex justify-center mt-4">
86 + <button @click="toggleSchedule" class="p-2 rounded-full hover:bg-green-50 text-green-600 hover:text-green-700 transition-all duration-300">
87 + <van-icon :name="isScheduleExpanded ? 'arrow-down' : 'arrow-up'" class="text-xl transform transition-transform duration-300" />
88 + </button>
89 + </div>
85 </div> 90 </div>
86 </div> 91 </div>
87 92
...@@ -399,6 +404,22 @@ onMounted(async () => { ...@@ -399,6 +404,22 @@ onMounted(async () => {
399 } 404 }
400 } 405 }
401 }) 406 })
407 +
408 +
409 +const isScheduleExpanded = ref(false)
410 +
411 +// 计算显示的课程大纲列表
412 +const displayedSchedule = computed(() => {
413 + if (!course.value?.schedule) return []
414 + return isScheduleExpanded.value || course.value.schedule.length <= 4
415 + ? course.value.schedule
416 + : course.value.schedule.slice(0, 4)
417 +})
418 +
419 +// 切换课程大纲展开/收起状态
420 +const toggleSchedule = () => {
421 + isScheduleExpanded.value = !isScheduleExpanded.value
422 +}
402 </script> 423 </script>
403 424
404 <style scoped> 425 <style scoped>
......