fix: 修复学习记录页显示问题并调整热门课程数量
修改学习记录页的显示字段,使用后端返回的格式化数据替代前端计算 调整热门课程获取数量从4增加到8 修复分页初始值错误问题
Showing
2 changed files
with
10 additions
and
8 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-03-20 19:55:21 | 2 | * @Date: 2025-03-20 19:55:21 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-06-11 13:20:30 | 4 | + * @LastEditTime: 2025-06-11 17:10:09 |
| 5 | * @FilePath: /mlaj/src/views/HomePage.vue | 5 | * @FilePath: /mlaj/src/views/HomePage.vue |
| 6 | * @Description: 美乐爱觉教育首页组件 | 6 | * @Description: 美乐爱觉教育首页组件 |
| 7 | * | 7 | * |
| ... | @@ -577,7 +577,6 @@ const checkInTypes = ref([]); | ... | @@ -577,7 +577,6 @@ const checkInTypes = ref([]); |
| 577 | // 自动轮播 | 577 | // 自动轮播 |
| 578 | let carouselInterval | 578 | let carouselInterval |
| 579 | onMounted(async () => { | 579 | onMounted(async () => { |
| 580 | - | ||
| 581 | // 获取课程列表 | 580 | // 获取课程列表 |
| 582 | const res = await getCourseListAPI({ sn: 'RMKC' }) | 581 | const res = await getCourseListAPI({ sn: 'RMKC' }) |
| 583 | if (res.code) { | 582 | if (res.code) { |
| ... | @@ -588,7 +587,7 @@ onMounted(async () => { | ... | @@ -588,7 +587,7 @@ onMounted(async () => { |
| 588 | // 获取热门课程 | 587 | // 获取热门课程 |
| 589 | const res2 = await getCourseListAPI({ | 588 | const res2 = await getCourseListAPI({ |
| 590 | sn: 'RMKC', | 589 | sn: 'RMKC', |
| 591 | - limit: 4 | 590 | + limit: 8 |
| 592 | }) | 591 | }) |
| 593 | if (res2.code) { | 592 | if (res2.code) { |
| 594 | hotCourses.value = res2.data | 593 | hotCourses.value = res2.data | ... | ... |
| ... | @@ -47,7 +47,7 @@ | ... | @@ -47,7 +47,7 @@ |
| 47 | d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" | 47 | d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" |
| 48 | /> | 48 | /> |
| 49 | </svg> | 49 | </svg> |
| 50 | - <span>学习时长:{{ formatDuration(record.study_duration) }}</span> | 50 | + <span>学习时长:{{ record.study_duration_desc }}</span> |
| 51 | </div> | 51 | </div> |
| 52 | <div class="flex items-center text-sm text-gray-500 mb-3"> | 52 | <div class="flex items-center text-sm text-gray-500 mb-3"> |
| 53 | <svg | 53 | <svg |
| ... | @@ -64,12 +64,12 @@ | ... | @@ -64,12 +64,12 @@ |
| 64 | d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" | 64 | d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" |
| 65 | /> | 65 | /> |
| 66 | </svg> | 66 | </svg> |
| 67 | - <span>最近学习:{{ formatDate(record.recent_study_time) }}</span> | 67 | + <span>最近学习:{{ record.recent_study_time }}</span> |
| 68 | </div> | 68 | </div> |
| 69 | <div class="flex items-center"> | 69 | <div class="flex items-center"> |
| 70 | <div class="flex-1"> | 70 | <div class="flex-1"> |
| 71 | <van-progress | 71 | <van-progress |
| 72 | - :percentage="record.study_progress" | 72 | + :percentage="record.record_progress" |
| 73 | :stroke-width="4" | 73 | :stroke-width="4" |
| 74 | color="#10B981" | 74 | color="#10B981" |
| 75 | /> | 75 | /> |
| ... | @@ -110,7 +110,7 @@ import { ref } from 'vue'; | ... | @@ -110,7 +110,7 @@ import { ref } from 'vue'; |
| 110 | import { useRoute } from 'vue-router'; | 110 | import { useRoute } from 'vue-router'; |
| 111 | import { useTitle } from '@vueuse/core'; | 111 | import { useTitle } from '@vueuse/core'; |
| 112 | import FrostedGlass from '@/components/ui/FrostedGlass.vue'; | 112 | import FrostedGlass from '@/components/ui/FrostedGlass.vue'; |
| 113 | -import { formatDate, formatDuration } from '@/utils/tools'; | 113 | +import { formatDate } from '@/utils/tools'; |
| 114 | 114 | ||
| 115 | // 导入接口 | 115 | // 导入接口 |
| 116 | import { getStudyRecordListAPI } from "@/api/record"; | 116 | import { getStudyRecordListAPI } from "@/api/record"; |
| ... | @@ -121,7 +121,7 @@ useTitle($route.meta.title); | ... | @@ -121,7 +121,7 @@ useTitle($route.meta.title); |
| 121 | const records = ref([]); | 121 | const records = ref([]); |
| 122 | const loading = ref(false); | 122 | const loading = ref(false); |
| 123 | const finished = ref(false); | 123 | const finished = ref(false); |
| 124 | -const page = ref(1); | 124 | +const page = ref(0); |
| 125 | const limit = ref(10); | 125 | const limit = ref(10); |
| 126 | const finishText = ref('没有更多了'); | 126 | const finishText = ref('没有更多了'); |
| 127 | 127 | ||
| ... | @@ -135,6 +135,9 @@ const onLoad = async () => { | ... | @@ -135,6 +135,9 @@ const onLoad = async () => { |
| 135 | page: nextPage, | 135 | page: nextPage, |
| 136 | }); | 136 | }); |
| 137 | if (code) { | 137 | if (code) { |
| 138 | + data.forEach((item) => { | ||
| 139 | + item.record_progress = Math.floor((item?.study_count/item?.count)*100); | ||
| 140 | + }); | ||
| 138 | records.value.push(...data); | 141 | records.value.push(...data); |
| 139 | finished.value = data.length < limit.value; | 142 | finished.value = data.length < limit.value; |
| 140 | page.value = nextPage + 1; | 143 | page.value = nextPage + 1; | ... | ... |
-
Please register or login to post a comment