68 lines
2.8 KiB
Vue
68 lines
2.8 KiB
Vue
<script lang="ts" setup>
|
|
import BussApi from '@/api/BussApi';
|
|
import { useDayjs } from '@/composables/useDayjs';
|
|
import type { Lesson } from '@/types/api/lesson';
|
|
import { calcLessonProgress, extractLessonStage, getLessonSteps } from '@/utils/lesson';
|
|
import { useRoute } from 'uni-mini-router';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { useToast } from 'wot-design-uni';
|
|
|
|
const route = useRoute()
|
|
const toast = useToast()
|
|
const dayjs = useDayjs()
|
|
|
|
const lesson = ref<Lesson | null>(null)
|
|
const lessonSteps = computed(() => lesson.value ? getLessonSteps(lesson.value) : [])
|
|
const lessonStages = computed(() => lesson.value ? extractLessonStage(lesson.value) : null)
|
|
const lessonProgress = computed(() => lesson.value ? calcLessonProgress(lesson.value) : 0)
|
|
|
|
onMounted(() => {
|
|
if (!route.params?.courseId) {
|
|
toast.error({
|
|
msg: '参数错误'
|
|
})
|
|
return
|
|
}
|
|
toast.loading({
|
|
msg: '加载中...'
|
|
})
|
|
BussApi.course(route.params.courseId).then(courseData => {
|
|
toast.close()
|
|
lesson.value = courseData
|
|
}).catch(err => {
|
|
toast.error({ msg: err.message })
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div :class="`pattern p-4 flex flex-col gap-6 relative ${lessonProgress === 100 ? 'bg-emerald' : (lessonProgress === 0 ? 'bg-neutral' : 'bg-blue')}`">
|
|
<div class="flex flex-col gap-0">
|
|
<h2 class="text-sm text-white font-black op-50">{{ lesson?.course_name }}</h2>
|
|
<h1 class="text-lg text-white font-bold">{{ lesson?.m_lesson_name }}</h1>
|
|
</div>
|
|
<p class="text-xs text-white font-bold op-50" style="line-height: 1;">
|
|
创建于 {{ dayjs(lesson?.created_at).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</p>
|
|
<div class="absolute text-white top-2 right-2 op-35 text-18">
|
|
<div v-if="lessonProgress === 100" class="i-tabler-circle-check"></div>
|
|
<div v-else-if="lessonProgress === 0" class="i-tabler-circle-dashed"></div>
|
|
<div v-else class="i-tabler-hourglass-empty"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<wd-steps :active="lessonStages?.step || 0" vertical>
|
|
<wd-step v-for="(step, index) in lessonSteps" :key="index" :title="step.title"
|
|
:description="step.description" />
|
|
</wd-steps>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pattern {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
</style>
|