feat: Add "lesson" page and related components

This commit adds a new "lesson" page along with the necessary components and types. The "lesson" page displays the details of a specific lesson and includes a dynamic route parameter for the lesson name. Additionally, the commit includes updates to the `pages.json` file to configure the navigation bar title for the "lesson" page.
This commit is contained in:
2024-09-19 15:13:42 +08:00
parent 8f0c422dd8
commit 53287e4cbd
10 changed files with 163 additions and 39 deletions

View File

@ -1,43 +1,70 @@
<script setup lang="ts">
import BussApi from '@/api/BussApi';
import pageWrapper from '@/components/page-wrapper.vue';
import type { Lesson } from '@/types/api/lesson';
import { useRouter } from 'uni-mini-router';
import { onMounted, ref } from 'vue';
import { useToast } from 'wot-design-uni';
const toast = useToast()
const router = useRouter()
const expandedCourse = ref(['lesson'])
const groupLessons = ref<{ [key: string]: Lesson[] }>({})
const openLessonDetail = (lessonName: string) => {
console.log(router.routes);
router.push({
name: 'lesson',
params: {
lessonName
}
})
}
onMounted(() => {
toast.loading({
msg: '加载中...'
})
BussApi.lessons().then(res => {
toast.close()
const groupData = res.data.reduce((acc: any, cur: any) => {
if (!acc[cur.m_lesson_name]) {
acc[cur.m_lesson_name] = []
}
acc[cur.m_lesson_name].push(cur)
return acc
}, {})
groupLessons.value = groupData
})
})
</script>
<template>
<page-wrapper>
<div class="content">
<img class="logo" src="/static/logo.png" />
<div class="flex flex-col items-center gap-4">
<p class="title text-4xl text-neutral-300 font-bold">
XSH PPMS
</p>
</div>
<div>
<wd-collapse v-model="expandedCourse">
<wd-collapse-item 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 || '无标题课程' }}
</div>
<div class="flex-1">
<wd-progress :percentage="30" />
</div>
</div>
</div>
</wd-collapse-item>
</wd-collapse>
</div>
</page-wrapper>
</template>
<script setup lang="ts">
import pageWrapper from '@/components/page-wrapper.vue';
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
}
</style>
<style></style>