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:
@ -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>
|
||||
|
Reference in New Issue
Block a user