wip: 进度列表和课程详情页面
This commit is contained in:
@ -29,7 +29,10 @@ export default class BussApi {
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
static lessons(page: number = 1, limit: number = 20): Promise<PagedData<Lesson>> {
|
||||
static lessons(
|
||||
page: number = 1,
|
||||
limit: number = 20
|
||||
): Promise<PagedData<Lesson>> {
|
||||
const user = useUser();
|
||||
return http
|
||||
.server()
|
||||
@ -41,4 +44,16 @@ export default class BussApi {
|
||||
})
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
static course(id: number): Promise<Lesson> {
|
||||
const user = useUser();
|
||||
return http
|
||||
.server()
|
||||
.get(`/lesson/task/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${user.token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => res.data);
|
||||
}
|
||||
}
|
||||
|
@ -12,17 +12,22 @@ const router = useRouter()
|
||||
const expandedCourse = ref(['lesson'])
|
||||
const groupLessons = ref<{ [key: string]: Lesson[] }>({})
|
||||
|
||||
const openLessonDetail = (lessonName: string) => {
|
||||
console.log(router.routes);
|
||||
|
||||
const openLessonDetail = (courseId: number) => {
|
||||
router.push({
|
||||
name: 'lesson',
|
||||
params: {
|
||||
lessonName
|
||||
courseId: `${courseId}`
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const calcProgress = (course: Lesson) => {
|
||||
const total = 4
|
||||
let finished = 0
|
||||
if (!!course?.script_file) finished++
|
||||
return Math.floor((finished / total) * 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
toast.loading({
|
||||
msg: '加载中...'
|
||||
@ -45,19 +50,20 @@ onMounted(() => {
|
||||
<page-wrapper>
|
||||
<div>
|
||||
<wd-collapse v-model="expandedCourse">
|
||||
<wd-collapse-item v-for="(lessons, lessonName) in groupLessons" :title="`${lessonName}`" :name="`${lessonName}`"
|
||||
:key="lessonName">
|
||||
<wd-status-tip v-if="Object.keys(groupLessons).length === 0" image="content" tip="没有课程" />
|
||||
<wd-collapse-item v-else v-for="(lessons, lessonName) in groupLessons" :title="`${lessonName || '无标题课程'}`"
|
||||
:name="`${lessonName}`" :key="lessonName">
|
||||
<div class="w-full">
|
||||
<!-- <wd-card type="rectangle" v-for="(course, i) in lessons" :title="course.course_name">
|
||||
todo
|
||||
</wd-card> -->
|
||||
<div v-for="(course, i) in lessons" :key="i" @click="openLessonDetail(`${lessonName}`)"
|
||||
class="w-full flex justify-between items-center gap-20" style="justify-content: space-between;">
|
||||
<div class="">
|
||||
{{ course.course_name || '无标题课程' }}
|
||||
<wd-status-tip v-if="lessons.length === 0" image="content" tip="没有微课视频" />
|
||||
<div v-else v-for="(course, i) in lessons" :key="i" @click="openLessonDetail(course.id)"
|
||||
class="w-full py-2 flex justify-between items-center gap-20 border-b border-b-solid border-neutral-200 last:border-b-0 first:pt-0 last:pb-0">
|
||||
<div class="flex items-center gap-1">
|
||||
<wd-icon :name="calcProgress(course) === 100 ? 'check-circle' : 'hourglass'" size="16px"></wd-icon>
|
||||
<span>{{ course.course_name || '无标题视频' }}</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<wd-progress :percentage="30" />
|
||||
<div class="w-32 flex items-center gap-3">
|
||||
<wd-progress :percentage="calcProgress(course)" />
|
||||
<wd-icon name="arrow-right" size="16px" class="op-85"></wd-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,13 +1,35 @@
|
||||
<script lang="ts" setup>
|
||||
import BussApi from '@/api/BussApi';
|
||||
import type { Lesson } from '@/types/api/lesson';
|
||||
import { useRoute } from 'uni-mini-router';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useToast } from 'wot-design-uni';
|
||||
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
|
||||
const course = ref<Lesson | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
if (!route.params?.courseId) {
|
||||
toast.error({
|
||||
msg: '参数错误'
|
||||
})
|
||||
return
|
||||
}
|
||||
toast.loading({
|
||||
msg: '加载中...'
|
||||
})
|
||||
BussApi.course(route.params.courseId).then(courseData => {
|
||||
toast.close()
|
||||
course.value = courseData
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>lesson detail</h1>
|
||||
<p>{{ decodeURI(route.params?.lessonName) }}</p>
|
||||
<pre>{{ JSON.stringify(course, null, 2) }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
Reference in New Issue
Block a user