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

feat: 重写首页列表样式，添加指示器

Browse Source
This commit is contained in:
Timothy Yin
2024-09-20 20:53:47 +08:00
parent bc4cb97dea
commit 476563377b
2 changed files with 54 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -23,6 +23,7 @@ declare module 'vue' {
WdSteps: typeof import('wot-design-uni/components/wd-steps/wd-steps.vue')['default']
WdTabbar: typeof import('wot-design-uni/components/wd-tabbar/wd-tabbar.vue')['default']
WdTabbarItem: typeof import('wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue')['default']
WdTag: typeof import('wot-design-uni/components/wd-tag/wd-tag.vue')['default']
WdToast: typeof import('wot-design-uni/components/wd-toast/wd-toast.vue')['default']
}
}

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

@ -6,6 +6,7 @@ import { calcLessonProgress } from '@/utils/lesson';
import { useRouter } from 'uni-mini-router';
import { onMounted, ref } from 'vue';
import { useToast } from 'wot-design-uni';
import WdTag from 'wot-design-uni/components/wd-tag/wd-tag.vue';
const toast = useToast()
const router = useRouter()
@ -36,6 +37,8 @@ onMounted(() => {
return acc
}, {})
groupedLessons.value = groupData
// auto expand all course
// expandedCourse.value = Object.keys(groupData)
}).catch(err => {
toast.error({ msg: err.message })
})
@ -47,12 +50,53 @@ onMounted(() => {
<div>
<wd-collapse v-model="expandedCourse">
<wd-status-tip v-if="Object.keys(groupedLessons).length === 0" image="content" tip="没有微课" />
<wd-collapse-item v-else v-for="(courses, courseName) in groupedLessons" :title="`${courseName || '无标题课程'}`"
:name="`${courseName}`" :key="courseName">
<wd-collapse-item v-else v-for="(courses, courseName) in groupedLessons" :name="`${courseName}`"
:key="courseName">
<template #title="{ expanded, disabled, isFirst }">
<div class="w-full flex justify-between items-center">
<div class="flex flex-col gap-1">
<p class="pt-1">{{ courseName || '无标题课程' }}</p>
<div class="flex items-center gap-1">
<wd-tag v-if="courses.filter(lesson => calcLessonProgress(lesson) !== 0 && calcLessonProgress(lesson) !==
100).length > 0" custom-class="w-fit" type="primary">进行中</wd-tag>
<wd-tag v-if="courses.filter(lesson => calcLessonProgress(lesson) === 100).length === courses.length"
custom-class="w-fit" type="success">已完成</wd-tag>
<wd-tag custom-class="op-60" plain>
共{{ courses.length }}课时
</wd-tag>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-1.5 op-75">
<div class="flex items-center gap-0.5">
<div class="w-1.5 aspect-square rounded-full bg-emerald"></div>
<span class="text-xs text-emerald font-bold font-mono">
{{ courses.filter(lesson => calcLessonProgress(lesson) === 100).length }}
</span>
</div>
<div class="flex items-center gap-0.5">
<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 }}
</span>
</div>
<div class="flex items-center gap-0.5">
<div class="w-1.5 aspect-square rounded-full bg-neutral"></div>
<span class="text-xs text-neutral font-bold font-mono">
{{ courses.filter(lesson => calcLessonProgress(lesson) === 0).length }}
</span>
</div>
</div>
<wd-icon name="arrow-down" size="16px"
:custom-class="`op-50 transition-transform duration-300 w-fit ${expanded ? 'rotate-180' : ''}`"></wd-icon>
</div>
</div>
</template>
<div class="w-full">
<wd-status-tip v-if="courses.length === 0" image="content" tip="没有课程小节" />
<div v-else v-for="(lesson, i) in courses" :key="i" @click="openLessonDetail(lesson.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">
class="w-full py-2 flex justify-between items-center gap-20 border-b border-b-solid border-neutral-100 last:border-b-0 first:pt-0 last:pb-0">
<div class="flex items-center gap-1">
<wd-icon
:name="calcLessonProgress(lesson) === 100 ? 'check-circle' : (calcLessonProgress(lesson) === 0 ? 'circle1' : 'hourglass')"
@ -60,7 +104,7 @@ onMounted(() => {
<span>{{ lesson.course_name || '无标题视频' }}</span>
</div>
<div class="w-32 flex items-center gap-3">
<wd-progress :percentage="calcLessonProgress(lesson)" hide-text />
<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>
</div>
@ -71,4 +115,8 @@ onMounted(() => {
</page-wrapper>
</template>
<style></style>
<style>
.wd-collapse-item__header>view {
width: 100%;
}
</style>