huertian/ppms-uni-vue3-huertian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 课程名和微课名展示错误

Browse Source
This commit is contained in:
Timothy Yin 2024-09-20 23:32:31 +08:00
parent 476563377b
commit 2d2ffc9fab
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/index/index.vue
View File

@ -29,11 +29,13 @@ onMounted(() => {
})
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] = []
const groupData = res.data.sort((a: Lesson, b: Lesson) => {
return a.id - b.id
}).reduce((acc: any, cur: any) => {
if (!acc[cur.course_name]) {
acc[cur.course_name] = []
}
acc[cur.m_lesson_name].push(cur)
acc[cur.course_name].push(cur)
return acc
}, {})
groupedLessons.value = groupData
@ -78,7 +80,7 @@ onMounted(() => {
<div class="w-1.5 aspect-square rounded-full bg-blue"></div>
<span class="text-xs text-blue font-bold font-mono">
{{ courses.filter(lesson => calcLessonProgress(lesson) !== 0 && calcLessonProgress(lesson) !==
100).length }}
100).length }}
</span>
</div>
<div class="flex items-center gap-0.5">
@ -101,11 +103,12 @@ onMounted(() => {
<wd-icon
:name="calcLessonProgress(lesson) === 100 ? 'check-circle' : (calcLessonProgress(lesson) === 0 ? 'circle1' : 'hourglass')"
size="16px"></wd-icon>
<span>{{ lesson.course_name || '无标题视频' }}</span>
<span>{{ lesson.m_lesson_name || '无标题视频' }}</span>
</div>
<div class="w-32 flex items-center gap-3">
<wd-progress :percentage="calcLessonProgress(lesson)" :color="calcLessonProgress(lesson) === 100 ? '#34d399' : '#60a5fa'" hide-text />
<wd-icon name="arrow-right" size="16px" class="op-85"></wd-icon>
<div class="w-24 flex items-center gap-3">
<wd-progress :percentage="calcLessonProgress(lesson)"
:color="calcLessonProgress(lesson) === 100 ? '#34d399' : '#60a5fa'" hide-text />
<wd-icon name="chevron-right" size="16px" class="op-75"></wd-icon>
</div>
</div>
</div>

14
src/pages/lesson/index.vue
View File

@ -37,13 +37,16 @@ onMounted(() => {
<template>
<div>
<div class="pattern p-4 flex flex-col gap-6 relative">
<div :class="`pattern p-4 flex flex-col gap-6 relative ${lessonProgress === 100 ? 'bg-emerald' : 'bg-blue'}`">
<div class="flex flex-col gap-0">
<h2 class="text-sm text-white font-black op-50">{{ lesson?.m_lesson_name }}</h2>
<h1 class="text-lg text-white font-bold">{{ lesson?.course_name }}</h1>
<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>
<wd-icon :name="lessonProgress === 100 ? 'check-circle' : 'hourglass'" custom-class="absolute text-white top-2 right-2 op-35" size="64px" />
<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>
<wd-icon :name="lessonProgress === 100 ? 'check-circle' : 'hourglass'"
custom-class="absolute text-white top-2 right-2 op-35" size="64px" />
</div>
<div class="p-4">
<wd-steps :active="lessonStages?.step || 0" vertical>
@ -56,7 +59,6 @@ onMounted(() => {
<style scoped>
.pattern {
background-color: #4d80f0;
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>