hookehuyr

refactor(课程详情页): 优化课程详情页的标签显示逻辑

根据课程内容动态显示标签页,移除默认值'N/A'
...@@ -57,20 +57,14 @@ ...@@ -57,20 +57,14 @@
57 <!-- Tab Content --> 57 <!-- Tab Content -->
58 <div class="p-4"> 58 <div class="p-4">
59 <div v-if="activeTab === '课程特色'"> 59 <div v-if="activeTab === '课程特色'">
60 - <!-- <ul class="list-disc pl-5 space-y-2 text-gray-700"> 60 + <div v-html="course?.feature"></div>
61 - <li>小班授课,更多关注</li>
62 - <li>名师授课,经验丰富</li>
63 - <li>随堂练习,巩固知识</li>
64 - <li>及时反馈,调整教学</li>
65 - </ul> -->
66 - <div v-html="course?.feature || 'N/A'"></div>
67 </div> 61 </div>
68 62
69 <div v-if="activeTab === '课程大纲'"> 63 <div v-if="activeTab === '课程大纲'">
70 <div class="space-y-4"> 64 <div class="space-y-4">
71 <div v-for="(item, index) in displayedSchedule" :key="index" class="border-l-2 border-green-500 pl-3"> 65 <div v-for="(item, index) in displayedSchedule" :key="index" class="border-l-2 border-green-500 pl-3">
72 <h4 class="font-medium text-gray-800">{{ item.title }}</h4> 66 <h4 class="font-medium text-gray-800">{{ item.title }}</h4>
73 - <p class="text-sm text-gray-600 mt-1">{{ item.duration }}分钟 · {{ item.schedule_time || 'N/A' }}个小节</p> 67 + <p class="text-sm text-gray-600 mt-1">{{ item.duration }}分钟 · {{ item.schedule_time }}个小节</p>
74 </div> 68 </div>
75 <div v-if="course?.schedule?.length > 4" class="flex justify-center mt-4"> 69 <div v-if="course?.schedule?.length > 4" class="flex justify-center mt-4">
76 <button @click="toggleSchedule" 70 <button @click="toggleSchedule"
...@@ -84,13 +78,13 @@ ...@@ -84,13 +78,13 @@
84 78
85 <div v-if="activeTab === '课程亮点'"> 79 <div v-if="activeTab === '课程亮点'">
86 <div class="space-y-3 text-gray-700"> 80 <div class="space-y-3 text-gray-700">
87 - <div v-html="course?.highlights || 'N/A'"></div> 81 + <div v-html="course?.highlights"></div>
88 </div> 82 </div>
89 </div> 83 </div>
90 84
91 <div v-if="activeTab === '学习目标'"> 85 <div v-if="activeTab === '学习目标'">
92 <div class="space-y-3 text-gray-700"> 86 <div class="space-y-3 text-gray-700">
93 - <div v-html="course?.learning_goal || 'N/A'"></div> 87 + <div v-html="course?.learning_goal"></div>
94 </div> 88 </div>
95 </div> 89 </div>
96 </div> 90 </div>
...@@ -273,12 +267,16 @@ const toggleFavorite = async () => { ...@@ -273,12 +267,16 @@ const toggleFavorite = async () => {
273 } 267 }
274 268
275 // Curriculum items 269 // Curriculum items
276 -const curriculumItems = [ 270 +const curriculumItems = computed(() => {
277 - { title: '课程特色', active: true }, 271 + if (!course.value) return [];
278 - { title: '课程大纲', active: false }, 272 +
279 - { title: '课程亮点', active: false }, 273 + return [
280 - { title: '学习目标', active: false }, 274 + { title: '课程特色', active: activeTab.value === '课程特色', show: !!course.value.feature },
281 -] 275 + { title: '课程大纲', active: activeTab.value === '课程大纲', show: !!(course.value.schedule && course.value.schedule.length > 0) },
276 + { title: '课程亮点', active: activeTab.value === '课程亮点', show: !!course.value.highlights },
277 + { title: '学习目标', active: activeTab.value === '学习目标', show: !!course.value.learning_goal },
278 + ].filter(item => item.show);
279 +});
282 280
283 // Handle image error 281 // Handle image error
284 const handleImageError = (e) => { 282 const handleImageError = (e) => {
...@@ -370,6 +368,13 @@ onMounted(async () => { ...@@ -370,6 +368,13 @@ onMounted(async () => {
370 isFavorite.value = foundCourse.is_favorite; 368 isFavorite.value = foundCourse.is_favorite;
371 isPurchased.value = foundCourse.is_buy; 369 isPurchased.value = foundCourse.is_buy;
372 isReviewed.value = foundCourse.is_comment; 370 isReviewed.value = foundCourse.is_comment;
371 +
372 + // 设置默认选中的 tab,确保选中的 tab 有内容
373 + const availableTabs = curriculumItems.value;
374 + if (availableTabs.length > 0 && !availableTabs.some(item => item.title === activeTab.value)) {
375 + activeTab.value = availableTabs[0].title;
376 + }
377 +
373 // 获取评论列表 378 // 获取评论列表
374 await fetchCommentList() 379 await fetchCommentList()
375 } else { 380 } else {
......