feat(page): 学习详情和课程详情页标题改为动态显示课程名
- StudyDetailPage: 标题显示具体课程名,默认"学习详情" - StudyCoursePage: 标题显示具体课程名,默认"课程详情" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Showing
2 changed files
with
10 additions
and
7 deletions
| ... | @@ -120,7 +120,7 @@ | ... | @@ -120,7 +120,7 @@ |
| 120 | </template> | 120 | </template> |
| 121 | 121 | ||
| 122 | <script setup> | 122 | <script setup> |
| 123 | -import { ref, onMounted, nextTick, onUnmounted, computed } from 'vue'; | 123 | +import { ref, onMounted, nextTick, onUnmounted, computed, watch } from 'vue'; |
| 124 | import { useTitle } from '@vueuse/core'; | 124 | import { useTitle } from '@vueuse/core'; |
| 125 | import { useRouter } from "vue-router"; | 125 | import { useRouter } from "vue-router"; |
| 126 | import dayjs from 'dayjs'; | 126 | import dayjs from 'dayjs'; |
| ... | @@ -137,9 +137,6 @@ const course_id = computed(() => { | ... | @@ -137,9 +137,6 @@ const course_id = computed(() => { |
| 137 | return router.currentRoute.value.params.id || ''; | 137 | return router.currentRoute.value.params.id || ''; |
| 138 | }); | 138 | }); |
| 139 | 139 | ||
| 140 | -// 页面标题 | ||
| 141 | -useTitle('课程详情'); | ||
| 142 | - | ||
| 143 | // 当前激活的标签页 | 140 | // 当前激活的标签页 |
| 144 | const activeTab = ref('detail'); | 141 | const activeTab = ref('detail'); |
| 145 | // tabs DOM映射 | 142 | // tabs DOM映射 |
| ... | @@ -258,6 +255,11 @@ const updateTabsWrapperHeight = () => { | ... | @@ -258,6 +255,11 @@ const updateTabsWrapperHeight = () => { |
| 258 | }; | 255 | }; |
| 259 | 256 | ||
| 260 | const course = ref([]); | 257 | const course = ref([]); |
| 258 | + | ||
| 259 | +// 页面标题(动态显示课程名) | ||
| 260 | +const pageTitle = computed(() => course.value?.title || '课程详情'); | ||
| 261 | +watch(pageTitle, (newTitle) => useTitle(newTitle), { immediate: true }); | ||
| 262 | + | ||
| 261 | const course_lessons = ref([]); | 263 | const course_lessons = ref([]); |
| 262 | const course_type_maps = ref({ | 264 | const course_type_maps = ref({ |
| 263 | video: '视频', | 265 | video: '视频', | ... | ... |
| ... | @@ -238,7 +238,7 @@ | ... | @@ -238,7 +238,7 @@ |
| 238 | </template> | 238 | </template> |
| 239 | 239 | ||
| 240 | <script setup> | 240 | <script setup> |
| 241 | -import { ref, onMounted, nextTick } from 'vue'; | 241 | +import { ref, onMounted, nextTick, computed, watch } from 'vue'; |
| 242 | import { useRoute, useRouter } from 'vue-router'; | 242 | import { useRoute, useRouter } from 'vue-router'; |
| 243 | import { useTitle } from '@vueuse/core'; | 243 | import { useTitle } from '@vueuse/core'; |
| 244 | import VideoPlayer from '@/components/media/VideoPlayer.vue'; | 244 | import VideoPlayer from '@/components/media/VideoPlayer.vue'; |
| ... | @@ -396,8 +396,9 @@ const handleCheckInSuccess = () => { | ... | @@ -396,8 +396,9 @@ const handleCheckInSuccess = () => { |
| 396 | 396 | ||
| 397 | const audioList = ref([]); | 397 | const audioList = ref([]); |
| 398 | 398 | ||
| 399 | -// 设置页面标题 | 399 | +// 设置页面标题(动态显示课程名) |
| 400 | -useTitle('学习详情'); | 400 | +const pageTitle = computed(() => course.value?.title || '学习详情'); |
| 401 | +watch(pageTitle, (newTitle) => useTitle(newTitle), { immediate: true }); | ||
| 401 | 402 | ||
| 402 | const topWrapperHeight = ref(0); | 403 | const topWrapperHeight = ref(0); |
| 403 | const bottomWrapperHeight = ref(0); | 404 | const bottomWrapperHeight = ref(0); | ... | ... |
-
Please register or login to post a comment