StudyCatalogPopup.vue
3.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!--
* @Date: 2025-12-27 23:56:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-22 15:59:35
* @FilePath: /mlaj/src/components/studyDetail/StudyCatalogPopup.vue
* @Description: 课程目录弹窗
-->
<template>
<van-popup v-model:show="show_catalog_model" position="bottom" round closeable safe-area-inset-bottom
style="height: 80%">
<div class="flex flex-col h-full">
<div class="flex-none px-4 py-3 border-b bg-white sticky top-0 z-10">
<div class="text-lg font-medium">课程目录</div>
</div>
<div ref="scroll_container_ref" class="flex-1 overflow-y-auto px-4 py-2" style="overflow-y: scroll;">
<div v-if="lessons.length" class="space-y-4">
<div v-for="(lesson, index) in lessons" :key="index" @click="$emit('lessonClick', lesson)"
class="lesson-item bg-white p-4 cursor-pointer hover:bg-gray-50 transition-colors border-b border-gray-200 relative"
:class="{ 'is-active': String(courseId) === String(lesson.id) }"
:data-lesson-id="String(lesson.id)">
<div v-if="lesson.progress > 0 && lesson.progress < 100"
class="absolute top-2 right-2 px-2 py-1 bg-green-100 text-green-600 text-xs rounded">
上次看到</div>
<div class="text-black text-sm mb-2"
:class="{ 'text-green-600 font-medium': String(courseId) === String(lesson.id) }">
{{ lesson.title }} •
<span class="text-sm text-gray-500">{{ courseTypeMaps[lesson.course_type] }}</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<span>开课时间: {{ lesson.schedule_time ? dayjs(lesson.schedule_time).format('YYYY-MM-DD') : '暂无'
}}</span>
<span class="mx-2">|</span>
<span v-if="lesson.duration">建议时长: {{ lesson.duration }} 分钟</span>
</div>
</div>
</div>
<van-empty v-else description="暂无目录" />
</div>
</div>
</van-popup>
</template>
<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import dayjs from 'dayjs';
const props = defineProps({
showCatalog: {
type: Boolean,
default: false
},
lessons: {
type: Array,
default: () => []
},
courseId: {
type: [String, Number],
default: ''
},
courseTypeMaps: {
type: Object,
default: () => ({})
}
});
const emit = defineEmits([
'update:showCatalog',
'lessonClick'
]);
const scroll_container_ref = ref(null);
const show_catalog_model = computed({
get: () => props.showCatalog,
set: (val) => emit('update:showCatalog', val)
});
watch(show_catalog_model, (newVal) => {
if (!newVal) return;
nextTick(() => {
const container = scroll_container_ref.value;
if (!container) return;
// 查找当前激活的课程项
const active_item = container.querySelector('.lesson-item.is-active');
if (!active_item) return;
// 计算滚动位置，使选中项居中
const container_height = container.clientHeight;
const item_top = active_item.offsetTop;
const item_height = active_item.clientHeight;
const scroll_top = item_top - (container_height / 2) + (item_height / 2);
container.scrollTo({
top: scroll_top,
behavior: 'smooth'
});
});
});
</script>