From 476563377b721b02640061381deccf190f161844 Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Fri, 20 Sep 2024 20:53:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E5=86=99=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8C=87=E7=A4=BA=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts           |  1 +
 src/pages/index/index.vue | 58 +++++++++++++++++++++++++++++++++++----
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 7888117..a7a4dbd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -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']
   }
 }
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 145842a..4dee932 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -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>