191 lines
10 KiB
Vue
191 lines
10 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file CourseDetailView.vue
|
|
* @description Quick view of course details including video preview, curriculum, and enroll logic
|
|
*/
|
|
import { ref, computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
course: any;
|
|
user: any;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'back'): void;
|
|
(e: 'enroll', courseId: number): void;
|
|
}>();
|
|
|
|
const getLocalizedText = (text: any) => {
|
|
if (!text) return ''
|
|
if (typeof text === 'string') return text
|
|
return text.th || text.en || ''
|
|
}
|
|
|
|
const formatPrice = (price: number) => {
|
|
return new Intl.NumberFormat('th-TH', { style: 'currency', currency: 'THB' }).format(price);
|
|
}
|
|
|
|
const enrollmentLoading = ref(false);
|
|
|
|
const handleEnroll = () => {
|
|
if(!props.course) return;
|
|
enrollmentLoading.value = true;
|
|
emit('enroll', props.course.id);
|
|
// Loading state reset depends on parent, but locally we can reset after emit or keep until prop changes
|
|
// In this pattern, we just emit.
|
|
setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="animate-fade-in-up">
|
|
<q-btn
|
|
flat
|
|
icon="arrow_back"
|
|
label="ย้อนกลับ"
|
|
class="mb-6 font-bold text-slate-500 hover:text-slate-800 transition-colors"
|
|
@click="emit('back')"
|
|
/>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Left: Content Detail -->
|
|
<div class="lg:col-span-2 space-y-8">
|
|
|
|
<!-- Video Preview Section -->
|
|
<div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group bg-black">
|
|
<template v-if="course.media?.video_url">
|
|
<video
|
|
controls
|
|
class="w-full h-full object-cover"
|
|
:poster="course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
|
|
>
|
|
<source :src="course.media.video_url" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</template>
|
|
<!-- Placeholder if no video -->
|
|
<template v-else>
|
|
<img
|
|
:src="course.cover_image || 'https://placehold.co/800x450?text=No+Preview'"
|
|
class="w-full h-full object-cover opacity-60"
|
|
/>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center ring-1 ring-white/50">
|
|
<q-icon name="play_arrow" size="40px" class="text-white" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Course Title & Description -->
|
|
<div>
|
|
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 leading-tight">
|
|
{{ getLocalizedText(course.title) }}
|
|
</h1>
|
|
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 mb-6">
|
|
<span class="flex items-center gap-1 bg-slate-100 px-3 py-1 rounded-full text-slate-700 font-medium">
|
|
<q-icon name="category" size="16px" class="text-blue-500" />
|
|
{{ course.category?.name?.th || course.category?.name?.en || 'ทั่วไป' }}
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<q-icon name="schedule" size="16px" />
|
|
{{ course.duration_minutes || 60 }} นาที
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<q-icon name="person" size="16px" />
|
|
{{ course.instructor?.first_name }} {{ course.instructor?.last_name }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="prose max-w-none text-slate-600 leading-relaxed font-light">
|
|
<p>{{ getLocalizedText(course.description) }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Curriculum Preview -->
|
|
<div class="bg-slate-50 rounded-3xl p-6 md:p-8">
|
|
<h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
|
|
<q-icon name="list_alt" class="text-blue-600" />
|
|
เนื้อหาบทเรียน
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<div class="px-6 py-4 bg-slate-100 font-bold text-slate-800 flex justify-between items-center">
|
|
<span>{{ idx + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
|
|
<span class="text-xs text-slate-500 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
|
|
</div>
|
|
<div class="divide-y divide-slate-100">
|
|
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<q-icon
|
|
:name="lesson.type === 'VIDEO' ? 'play_circle' : 'article'"
|
|
:class="lesson.type === 'VIDEO' ? 'text-blue-500' : 'text-orange-500'"
|
|
size="18px"
|
|
/>
|
|
<span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
|
|
<span v-if="lesson.duration_minutes" class="text-slate-400 text-xs">{{ lesson.duration_minutes }} นาที</span>
|
|
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 py-8">
|
|
ยังไม่มีเนื้อหาในขณะนี้
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right: Enrollment Card -->
|
|
<div class="lg:col-span-1">
|
|
<div class="sticky top-24">
|
|
<div class="bg-white rounded-3xl shadow-xl shadow-slate-200/50 p-6 border border-slate-100 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
|
|
|
|
<div class="relative">
|
|
<div class="text-3xl font-black text-slate-900 mb-2 font-display">
|
|
{{ course.price > 0 ? formatPrice(course.price) : 'เรียนฟรี' }}
|
|
</div>
|
|
<div v-if="course.price > 0" class="text-sm text-slate-500 mb-6 line-through">
|
|
{{ formatPrice(course.price * 2) }}
|
|
</div>
|
|
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
size="lg"
|
|
color="primary"
|
|
class="w-full mb-4 shadow-lg shadow-blue-600/30 font-bold"
|
|
:label="user ? (course.enrolled ? 'เข้าสู่บทเรียน' : (course.price > 0 ? 'ซื้อคอร์สเรียนนี้' : 'ลงทะเบียนเรียนฟรี')) : 'เข้าสู่ระบบเพื่อลงทะเบียน'"
|
|
:loading="enrollmentLoading"
|
|
@click="handleEnroll"
|
|
/>
|
|
|
|
<div class="text-xs text-center text-slate-400">
|
|
รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน
|
|
</div>
|
|
|
|
<hr class="my-6 border-slate-100">
|
|
|
|
<div class="space-y-3 block">
|
|
<div class="flex items-center gap-3 text-sm text-slate-600">
|
|
<q-icon name="check_circle" class="text-green-500" />
|
|
เข้าเรียนได้ตลอดชีพ
|
|
</div>
|
|
<div class="flex items-center gap-3 text-sm text-slate-600">
|
|
<q-icon name="check_circle" class="text-green-500" />
|
|
ทำแบบทดสอบไม่จำกัด
|
|
</div>
|
|
<div class="flex items-center gap-3 text-sm text-slate-600">
|
|
<q-icon name="check_circle" class="text-green-500" />
|
|
ใบประกาศนียบัตรเมื่อเรียนจบ
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|