feat(study): 新增课程学习页面及相关组件

新增课程学习页面，包含用户信息展示、学习记录和学习统计功能。添加了CourseList组件用于展示课程列表，并在设置页面中添加了跳转至学习页面的入口。同时更新了组件类型声明文件以支持新组件。

feat(study): 新增课程学习页面及相关组件
新增课程学习页面，包含用户信息展示、学习记录和学习统计功能。添加了CourseList组件用于展示课程列表，并在设置页面中添加了跳转至学习页面的入口。同时更新了组件类型声明文件以支持新组件。
hookehuyr
Commit 00435895ddf66194f036497849f40595e5d90db5 00435895 1 parent 40b700bc
Showing 5 changed files with 260 additions and 2 deletions
src/components.d.ts
src/components/courses/CourseList.vue
src/router/routes.js
src/views/profile/SettingsPage.vue
src/views/study/StudyPage.vue
--- a/src/components.d.ts
View file @0043589
+++ b/src/components.d.ts
View file @0043589
@@ -15,6 +15,7 @@ declare module 'vue' {
     CheckInDialog: typeof import('./components/ui/CheckInDialog.vue')['default']
     ConfirmDialog: typeof import('./components/ui/ConfirmDialog.vue')['default']
     CourseCard: typeof import('./components/ui/CourseCard.vue')['default']
+    CourseList: typeof import('./components/courses/CourseList.vue')['default']
     FrostedGlass: typeof import('./components/ui/FrostedGlass.vue')['default']
     GradientHeader: typeof import('./components/ui/GradientHeader.vue')['default']
     LiveStreamCard: typeof import('./components/ui/LiveStreamCard.vue')['default']
@@ -27,8 +28,10 @@ declare module 'vue' {
     TermsPopup: typeof import('./components/ui/TermsPopup.vue')['default']
     UploadVideoPopup: typeof import('./components/ui/UploadVideoPopup.vue')['default']
     VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
+    VanCol: typeof import('vant/es')['Col']
     VanDatePicker: typeof import('vant/es')['DatePicker']
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
@@ -40,6 +43,7 @@ declare module 'vue' {
     VanPopup: typeof import('vant/es')['Popup']
     VanProgress: typeof import('vant/es')['Progress']
     VanRate: typeof import('vant/es')['Rate']
+    VanRow: typeof import('vant/es')['Row']
     VanTab: typeof import('vant/es')['Tab']
     VanTabs: typeof import('vant/es')['Tabs']
     VanToast: typeof import('vant/es')['Toast']
--- a/src/components/courses/CourseList.vue 0 → 100644
View file @0043589
+++ b/src/components/courses/CourseList.vue 0 → 100644
View file @0043589
+<!--
+ * @Date: 2025-04-07
+ * @Description: 课程列表组件
+-->
+<template>
+    <div class="course-list">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+            <div v-for="course in courses" :key="course.id"
+                class="course-item bg-white mb-3 rounded-lg overflow-hidden">
+                <van-cell :title="course.title" :label="course.type" class="pb-2">
+                    <template #icon>
+                        <van-image :src="course.thumbnail" width="120" height="68" fit="cover" class="mr-3 rounded" />
+                    </template>
+                </van-cell>
+                <div class="px-4 pb-4">
+                    <div class="flex justify-between items-center text-sm text-gray-600 mb-2">
+                        <span>已学习 {{ formatDuration(course.studyTime) }}</span>
+                        <span>{{ course.progress }}%</span>
+                    </div>
+                    <van-progress :percentage="course.progress" :stroke-width="4" color="#4080ff" />
+                </div>
+            </div>
+        </van-list>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 接收课程列表数据
+const props = defineProps({
+    courses: {
+        type: Array,
+        default: () => []
+    }
+})
+
+// 列表加载状态
+const loading = ref(false)
+const finished = ref(true) // 由于使用的是传入的静态数据，所以直接设置为完成状态
+
+// 加载更多
+const onLoad = () => {
+    loading.value = false
+}
+
+// 格式化时长显示
+const formatDuration = (seconds) => {
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    if (hours > 0) {
+        return `${hours}小时${minutes}分钟`
+    }
+    return `${minutes}分钟`
+}
+</script>
+
+<style scoped>
+.course-list {
+    padding: 0.5rem;
+}
+
+.course-item {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+</style>
--- a/src/router/routes.js
View file @0043589
+++ b/src/router/routes.js
View file @0043589
 /*
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-28 09:39:27
+ * @LastEditTime: 2025-04-08 12:45:20
  * @FilePath: /mlaj/src/router/routes.js
  * @Description: 路由地址映射配置
  */
@@ -198,5 +198,12 @@ export const routes = [
       title: '微信授权页面',
     }
   },
+  {
+    path: '/study',
+    component: () => import('@/views/study/studyPage.vue'),
+    meta: {
+      title: '学习页面',
+    }
+  },
   ...checkinRoutes,
 ]
--- a/src/views/profile/SettingsPage.vue
View file @0043589
+++ b/src/views/profile/SettingsPage.vue
View file @0043589
 <!--
  * @Date: 2025-03-24 13:04:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-26 13:09:59
+ * @LastEditTime: 2025-04-08 11:21:01
  * @FilePath: /mlaj/src/views/profile/SettingsPage.vue
  * @Description: 用户设置页面
 -->
@@ -75,6 +75,17 @@
                 <ChevronRightIcon class="w-5 h-5 text-gray-400" />
               </div>
             </div>
+
+            <!-- 课程学习 -->
+            <div class="p-4" @click="router.push('/study')">
+              <div class="flex items-center justify-between">
+                <div>
+                  <h3 class="text-base font-medium text-gray-900">课程学习</h3>
+                  <p class="text-sm text-gray-500">课程学习</p>
+                </div>
+                <ChevronRightIcon class="w-5 h-5 text-gray-400" />
+              </div>
+            </div>
           </div>
         </FrostedGlass>
       </div>
--- a/src/views/study/StudyPage.vue 0 → 100644
View file @0043589
+++ b/src/views/study/StudyPage.vue 0 → 100644
View file @0043589
+<!--
+ * @Date: 2025-04-07
+ * @Description: 课程学习页面
+-->
+<template>
+    <div class="study-page">
+        <!-- 用户信息区域 -->
+        <div class="user-info bg-green-50/70 p-4 flex flex-col">
+            <div class="flex items-center mb-3">
+                <div class="flex-shrink-0">
+                    <van-image round width="3rem" height="3rem" :src="userInfo.avatar" :alt="userInfo.name" />
+                </div>
+                <div class="text-lg text-black font-bold" style="margin-left: 1rem">
+                    {{ userInfo.name }}
+                </div>
+            </div>
+            <div class="text-sm text-gray-500 mb-2">
+                本周第 <span class="text-black font-bold">{{ userInfo.weeklyRank }}</span> 名
+            </div>
+            <div class="text-sm text-gray-500">
+                已加入 <span class="text-black font-bold">{{ userInfo.joinDays }}</span> 天
+                <span class="mx-2">·</span>
+                连续学习
+                <span class="text-black font-bold">{{ userInfo.continuousDays }}</span> 天
+            </div>
+        </div>
+
+        <!-- 学习记录和统计标签页 -->
+        <van-tabs v-model:active="activeTab" sticky shrink>
+            <!-- 学习记录标签 -->
+            <van-tab title="学习记录" name="record">
+                <div class="p-4">
+                    <div class="flex space-x-4 mb-4">
+                        <button
+                            class="rounded-full px-6 py-2 text-sm transition-colors"
+                            :class="courseType === 'column' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'"
+                            @click="courseType = 'column'"
+                        >
+                            专栏
+                        </button>
+                        <button
+                            class="rounded-full px-6 py-2 text-sm transition-colors"
+                            :class="courseType === 'single' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'"
+                            @click="courseType = 'single'"
+                        >
+                            单课
+                        </button>
+                    </div>
+                    <course-list v-if="courseType === 'column'" :courses="columnCourses" />
+                    <course-list v-else :courses="singleCourses" />
+                </div>
+            </van-tab>
+
+            <!-- 学习统计标签 -->
+            <van-tab title="学习统计" name="stats">
+                <div class="p-4">
+                    <van-cell-group inset>
+                        <van-cell title="总学习时长" :value="formatDuration(stats.totalDuration)" />
+                        <van-cell title="已完成课程" :value="`${stats.completedCourses}门`" />
+                        <van-cell title="学习天数" :value="`${stats.studyDays}天`" />
+                        <van-cell title="平均每日学习" :value="formatDuration(stats.avgDailyDuration)" />
+                    </van-cell-group>
+                </div>
+            </van-tab>
+        </van-tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useTitle } from "@vueuse/core";
+import CourseList from "@/components/courses/CourseList.vue";
+
+// 设置页面标题
+useTitle("课程学习");
+
+// 用户信息
+const userInfo = ref({
+    avatar: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
+    name: "王鸿军",
+    weeklyRank: 11,
+    joinDays: 448,
+    continuousDays: 1,
+});
+
+// 标签页状态
+const activeTab = ref("record");
+const courseType = ref("column");
+
+// 课程列表数据
+const columnCourses = ref([
+    {
+        id: 1,
+        title: "考前赋能冥想",
+        type: "视频",
+        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
+        progress: 100,
+        duration: 1200, // 20分钟
+        studyTime: 1200,
+    },
+    {
+        id: 2,
+        title: "开学礼·让的智慧·心法老师·20241001（上）",
+        type: "视频",
+        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
+        progress: 1,
+        duration: 3600, // 1小时
+        studyTime: 10,
+    },
+    {
+        id: 1,
+        title: "考前赋能冥想",
+        type: "视频",
+        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
+        progress: 100,
+        duration: 1200, // 20分钟
+        studyTime: 1200,
+    },
+    {
+        id: 2,
+        title: "开学礼·让的智慧·心法老师·20241001（上）",
+        type: "视频",
+        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
+        progress: 1,
+        duration: 3600, // 1小时
+        studyTime: 10,
+    },
+]);
+
+const singleCourses = ref([
+    {
+        id: 3,
+        title: "冬季课·影响孩子命运的家族六要素·心法老师20250207",
+        type: "视频",
+        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
+        progress: 1,
+        duration: 3600,
+        studyTime: 1,
+    },
+]);
+
+// 学习统计数据
+const stats = ref({
+    totalDuration: 7200, // 2小时
+    completedCourses: 1,
+    studyDays: 30,
+    avgDailyDuration: 1800, // 30分钟
+});
+
+// 格式化时长显示
+const formatDuration = (seconds) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    if (hours > 0) {
+        return `${hours}小时${minutes}分钟`;
+    }
+    return `${minutes}分钟`;
+};
+</script>
+
+<style scoped>
+.study-page {
+    min-height: 100vh;
+    background-color: #fff;
+}
+
+.bg-primary {
+    background-color: #4080ff;
+}
+</style>