wip: 进度列表和课程详情页面

src/api/BussApi.ts

@@ -29,7 +29,10 @@ export default class BussApi {
       .then((res) => res.data);
   }
 
-  static lessons(page: number = 1, limit: number = 20): Promise<PagedData<Lesson>> {
+  static lessons(
+    page: number = 1,
+    limit: number = 20
+  ): Promise<PagedData<Lesson>> {
     const user = useUser();
     return http
       .server()
@@ -41,4 +44,16 @@ export default class BussApi {
       })
       .then((res) => res.data);
   }
+
+  static course(id: number): Promise<Lesson> {
+    const user = useUser();
+    return http
+      .server()
+      .get(`/lesson/task/${id}`, {
+        headers: {
+          Authorization: `Bearer ${user.token}`,
+        },
+      })
+      .then((res) => res.data);
+  }
 }

src/pages/index/index.vue

@@ -12,17 +12,22 @@ const router = useRouter()
 const expandedCourse = ref(['lesson'])
 const groupLessons = ref<{ [key: string]: Lesson[] }>({})
 
-const openLessonDetail = (lessonName: string) => {
-  console.log(router.routes);
-
+const openLessonDetail = (courseId: number) => {
   router.push({
     name: 'lesson',
     params: {
-      lessonName
+      courseId: `${courseId}`
     }
   })
 }
 
+const calcProgress = (course: Lesson) => {
+  const total = 4
+  let finished = 0
+  if (!!course?.script_file) finished++
+  return Math.floor((finished / total) * 100)
+}
+
 onMounted(() => {
   toast.loading({
     msg: '加载中...'
@@ -45,19 +50,20 @@ onMounted(() => {
   <page-wrapper>
     <div>
       <wd-collapse v-model="expandedCourse">
-        <wd-collapse-item v-for="(lessons, lessonName) in groupLessons" :title="`${lessonName}`" :name="`${lessonName}`"
-          :key="lessonName">
+        <wd-status-tip v-if="Object.keys(groupLessons).length === 0" image="content" tip="没有课程" />
+        <wd-collapse-item v-else 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 || '无标题课程' }}
+            <wd-status-tip v-if="lessons.length === 0" image="content" tip="没有微课视频" />
+            <div v-else v-for="(course, i) in lessons" :key="i" @click="openLessonDetail(course.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">
+              <div class="flex items-center gap-1">
+                <wd-icon :name="calcProgress(course) === 100 ? 'check-circle' : 'hourglass'" size="16px"></wd-icon>
+                <span>{{ course.course_name || '无标题视频' }}</span>
               </div>
-              <div class="flex-1">
-                <wd-progress :percentage="30" />
+              <div class="w-32 flex items-center gap-3">
+                <wd-progress :percentage="calcProgress(course)" />
+                <wd-icon name="arrow-right" size="16px" class="op-85"></wd-icon>
               </div>
             </div>
           </div>

src/pages/lesson/index.vue

@@ -1,13 +1,35 @@
 <script lang="ts" setup>
+import BussApi from '@/api/BussApi';
+import type { Lesson } from '@/types/api/lesson';
 import { useRoute } from 'uni-mini-router';
+import { onMounted, ref } from 'vue';
+import { useToast } from 'wot-design-uni';
 
 const route = useRoute()
+const toast = useToast()
+
+const course = ref<Lesson | null>(null)
+
+onMounted(() => {
+  if (!route.params?.courseId) {
+    toast.error({
+      msg: '参数错误'
+    })
+    return
+  }
+  toast.loading({
+    msg: '加载中...'
+  })
+  BussApi.course(route.params.courseId).then(courseData => {
+    toast.close()
+    course.value = courseData
+  })
+})
 </script>
 
 <template>
   <div>
-    <h1>lesson detail</h1>
-    <p>{{ decodeURI(route.params?.lessonName) }}</p>
+    <pre>{{ JSON.stringify(course, null, 2) }}</pre>
   </div>
 </template>