feat(课程详情页): 添加课程大纲展开/收起功能
为了优化用户体验,当课程大纲条目超过4条时,默认显示前4条,并提供展开/收起按钮,点击按钮可查看全部或收起部分条目
Showing
1 changed file
with
22 additions
and
1 deletions
| ... | @@ -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> | ... | ... |
-
Please register or login to post a comment