173 lines
8.1 KiB
Vue
173 lines
8.1 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file [id].vue
|
|
* @description Dynamic Course Detail Page.
|
|
* Displays detailed information about a specific course based on the ID.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: 'default',
|
|
middleware: 'auth'
|
|
})
|
|
|
|
const route = useRoute()
|
|
// ดึง courseId จาก URL params (แปลงเป็น integer)
|
|
const courseId = computed(() => parseInt(route.params.id as string))
|
|
const { fetchCourseById, enrollCourse, getLocalizedText } = useCourse()
|
|
|
|
// ใช้ useAsyncData ดึงข้อมูลคอร์ส Server-side rendering (SSR)
|
|
// Key: 'course-{id}' เพื่อให้ cache แยกกันตาม ID
|
|
const { data: courseData, error, refresh } = await useAsyncData(`course-${courseId.value}`, () => fetchCourseById(courseId.value))
|
|
|
|
const course = computed(() => {
|
|
return courseData.value?.success ? courseData.value.data : null
|
|
})
|
|
|
|
const isEnrolling = ref(false)
|
|
|
|
// ฟังก์ชันสำหรับกดปุ่ม "ลงทะเบียนเรียน"
|
|
const handleEnroll = async () => {
|
|
if (!course.value) return
|
|
if (isEnrolling.value) return
|
|
isEnrolling.value = true
|
|
|
|
// เรียก API ลงทะเบียนเรียน
|
|
const res = await enrollCourse(course.value.id)
|
|
|
|
if (res.success) {
|
|
// ถ้าสำเร็จ ให้เปลี่ยนหน้าไปที่ "คอร์สของฉัน" พร้อม params enrolled=true
|
|
// Use object syntax for robust query param handling
|
|
const targetId = route.params.id || course.value?.id
|
|
return navigateTo({
|
|
path: '/dashboard/my-courses',
|
|
query: {
|
|
enrolled: 'true',
|
|
course_id: String(targetId)
|
|
}
|
|
})
|
|
} else {
|
|
// กรณี error แสดง alert (อนาคตอาจเปลี่ยนเป็น Toast notification)
|
|
alert(res.error || 'Failed to enroll')
|
|
}
|
|
|
|
isEnrolling.value = false
|
|
}
|
|
|
|
|
|
|
|
|
|
useHead({
|
|
title: computed(() => course.value ? `${getLocalizedText(course.value.title)} - E-Learning` : 'Course Details')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-container">
|
|
|
|
|
|
<div v-if="course" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
|
|
<div class="lg:col-span-8">
|
|
<div class="relative aspect-video bg-slate-900 rounded-2xl overflow-hidden shadow-lg mb-8 group cursor-pointer border border-slate-200 dark:border-slate-700">
|
|
<div v-if="course.thumbnail_url" class="absolute inset-0">
|
|
<img :src="course.thumbnail_url" class="w-full h-full object-cover opacity-90 group-hover:opacity-75 transition-opacity" />
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-6 leading-tight">{{ getLocalizedText(course.title) }}</h1>
|
|
|
|
<div class="prose prose-slate dark:prose-invert max-w-none mb-10 text-slate-600 dark:text-slate-300">
|
|
<p class="text-lg leading-relaxed">{{ getLocalizedText(course.description) }}</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-slate-100">
|
|
<h3 class="font-bold text-xl text-slate-900 dark:text-black mb-6 flex items-center gap-2">
|
|
<span class="w-1 h-6 bg-blue-500 rounded-full"></span>
|
|
{{ $t('course.courseContent') }}
|
|
</h3>
|
|
|
|
<div v-if="course.chapters && course.chapters.length > 0">
|
|
<div v-for="(chapter, cIdx) in course.chapters" :key="cIdx" class="mb-6 last:mb-0">
|
|
<div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-xl mb-2 border border-slate-100 dark:border-slate-600">
|
|
<span class="font-bold text-slate-800 dark:text-slate-100">{{ getLocalizedText(chapter.title) }}</span>
|
|
<span class="text-xs font-semibold px-2 py-1 bg-white dark:bg-slate-600 rounded text-slate-500 dark:text-slate-300 border border-slate-200 dark:border-slate-500">
|
|
{{ chapter.lessons ? chapter.lessons.length : 0 }} {{ $t('course.lessons') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="pl-4 pr-2 space-y-1">
|
|
<div v-for="(lesson, lIdx) in chapter.lessons" :key="lIdx" class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors group">
|
|
<div class="flex items-center gap-3 overflow-hidden">
|
|
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-400 dark:text-slate-500 text-[10px] flex items-center justify-center font-bold">
|
|
{{ Number(lIdx) + 1 }}
|
|
</span>
|
|
<span class="text-sm text-slate-600 dark:text-slate-300 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{{ getLocalizedText(lesson.title) }}</span>
|
|
</div>
|
|
<span class="text-xs text-slate-400 flex-shrink-0 font-mono">{{ lesson.duration_minutes || 0 }}:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-8 text-slate-400 dark:text-black font-medium">
|
|
<p>{{ $t('course.noContent') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-4">
|
|
<div class="sticky top-24 bg-white rounded-3xl p-6 md:p-8 shadow-lg border border-slate-100">
|
|
<div class="mb-8">
|
|
<span class="text-sm text-slate-400 line-through mr-3" v-if="course.original_price">{{ course.original_price }}</span>
|
|
<div class="flex items-center gap-2">
|
|
<h2 class="text-4xl font-black text-blue-600 dark:text-blue-400 tracking-tight">{{ course.is_free ? 'ฟรี' : course.price }}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
@click="handleEnroll"
|
|
:disabled="isEnrolling"
|
|
class="w-full py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 transition-all hover:translate-y-[-2px] mb-6 flex items-center justify-center disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none"
|
|
>
|
|
<span v-if="isEnrolling" class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>
|
|
{{ isEnrolling ? 'กำลังลงทะเบียน...' : $t('course.enrollNow') }}
|
|
</button>
|
|
|
|
<div class="space-y-4 text-sm text-slate-600 dark:text-black pt-6 border-t border-slate-100">
|
|
<div class="flex justify-between py-2">
|
|
<span>{{ $t('course.certificate') }}</span>
|
|
<span class="font-bold text-slate-900 dark:text-black">{{ course.have_certificate ? $t('course.available') : '-' }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Loading / Error State -->
|
|
<div v-else class="text-center py-20">
|
|
<div v-if="error" class="text-red-500 mb-4">
|
|
<p class="font-bold">เกิดข้อผิดพลาดในการโหลดข้อมูล</p>
|
|
<p class="text-sm opacity-80">{{ error.message }}</p>
|
|
</div>
|
|
<div v-else class="flex flex-col items-center gap-4 text-slate-400">
|
|
<div class="w-10 h-10 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin"/>
|
|
<p>กำลังโหลด...</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@keyframes pulse-slow {
|
|
0%, 100% { opacity: 0.1; transform: scale(1); }
|
|
50% { opacity: 0.15; transform: scale(1.15); }
|
|
}
|
|
|
|
.animate-pulse-slow {
|
|
animation: pulse-slow 10s linear infinite;
|
|
}
|
|
</style>
|