chamomind/elearning
6
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: implement dynamic course detail page with course content display and enrollment functionality.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-27 09:42:01 +07:00
parent 310a5e7dd7
commit c5c9f481e8
1 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

32
Frontend-Learner/pages/course/[id].vue
View file

@ -92,8 +92,8 @@ useHead({
<p class="text-lg leading-relaxed">{{ getLocalizedText(course.description) }}</p> <p class="text-lg leading-relaxed">{{ getLocalizedText(course.description) }}</p>
</div> </div>
<div class="bg-white dark:bg-slate-800 rounded-3xl p-6 md:p-8 shadow-sm border border-slate-100 dark:border-slate-700/50"> <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-white mb-6 flex items-center gap-2"> <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> <span class="w-1 h-6 bg-blue-500 rounded-full"></span>
{{ $t('course.courseContent') }} {{ $t('course.courseContent') }}
</h3> </h3>
@ -121,14 +121,14 @@ useHead({
</div> </div>
</div> </div>
<div v-else class="text-center py-8 text-slate-400"> <div v-else class="text-center py-8 text-slate-400 dark:text-black font-medium">
<p>{{ $t('course.noContent') }}</p> <p>{{ $t('course.noContent') }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="lg:col-span-4"> <div class="lg:col-span-4">
<div class="sticky top-24 bg-white dark:bg-slate-800 rounded-3xl p-6 md:p-8 shadow-lg border border-slate-100 dark:border-slate-700/50"> <div class="sticky top-24 bg-white rounded-3xl p-6 md:p-8 shadow-lg border border-slate-100">
<div class="mb-8"> <div class="mb-8">
<span class="text-sm text-slate-400 line-through mr-3" v-if="course.original_price">{{ course.original_price }}</span> <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"> <div class="flex items-center gap-2">
@ -145,19 +145,19 @@ useHead({
{{ isEnrolling ? 'กำลังลงทะเบียน...' : $t('course.enrollNow') }} {{ isEnrolling ? 'กำลังลงทะเบียน...' : $t('course.enrollNow') }}
</button> </button>
<div class="space-y-4 text-sm text-slate-600 dark:text-slate-400 pt-6 border-t border-slate-100 dark:border-slate-700"> <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-white">{{ course.have_certificate ? $t('course.available') : '-' }}</span>
</div>
<div class="flex justify-between py-2">
<span>ระดับ</span>
<span class="font-bold text-slate-900 dark:text-white">ทั้งหมด</span>
</div>
<div class="flex justify-between py-2"> <div class="flex justify-between py-2">
<span>การเข้าถึง</span> <span>{{ $t('course.certificate') }}</span>
<span class="font-bold text-slate-900 dark:text-white">ตลอดชีพ</span> <span class="font-bold text-slate-900 dark:text-black">{{ course.have_certificate ? $t('course.available') : '-' }}</span>
</div> </div>
<div class="flex justify-between py-2">
<span>ระดับ</span>
<span class="font-bold text-slate-900 dark:text-black">ทั้งหมด</span>
</div>
<div class="flex justify-between py-2">
<span>การเข้าถึง</span>
<span class="font-bold text-slate-900 dark:text-black">ตลอดชีพ</span>
</div>
</div> </div>
</div> </div>