Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
00435895 1 parent 40b700bc

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

新增课程学习页面，包含用户信息展示、学习记录和学习统计功能。添加了CourseList组件用于展示课程列表，并在设置页面中添加了跳转至学习页面的入口。同时更新了组件类型声明文件以支持新组件。
Inline Side-by-side
Showing 5 changed files with 260 additions and 2 deletions
......@@ -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']
......
<!--
* @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>
/*
* @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,
]
......
<!--
* @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>
......
<!--
* @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>