hookehuyr

feat(首页): 在课程卡片上添加已购标识

为已购买的课程添加视觉标识,方便用户快速识别
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-09-25 11:54:13 4 + * @LastEditTime: 2025-10-13 11:39:43
5 * @FilePath: /mlaj/src/views/HomePage.vue 5 * @FilePath: /mlaj/src/views/HomePage.vue
6 * @Description: 美乐爱觉教育首页组件 6 * @Description: 美乐爱觉教育首页组件
7 * 7 *
...@@ -199,6 +199,14 @@ ...@@ -199,6 +199,14 @@
199 :alt="course.title" 199 :alt="course.title"
200 class="w-full h-full object-cover" 200 class="w-full h-full object-cover"
201 /> 201 />
202 + <!-- 已购标识 -->
203 + <div
204 + v-if="course.is_buy"
205 + class="absolute top-0 left-0 bg-orange-500 text-white text-xs px-2 py-1 rounded-br-lg font-medium"
206 + style="background-color: rgba(249, 115, 22, 0.85)"
207 + >
208 + 已购
209 + </div>
202 <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/60 flex flex-col justify-end p-4"> 210 <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/60 flex flex-col justify-end p-4">
203 <div class="bg-amber-500/90 text-white px-2 py-1 rounded-full text-xs font-medium inline-block w-fit mb-1"> 211 <div class="bg-amber-500/90 text-white px-2 py-1 rounded-full text-xs font-medium inline-block w-fit mb-1">
204 {{ course.category }} 212 {{ course.category }}
...@@ -300,12 +308,20 @@ ...@@ -300,12 +308,20 @@
300 class="p-3 rounded-xl" 308 class="p-3 rounded-xl"
301 > 309 >
302 <div class="flex flex-col h-full" @click="goToCourseDetail(item)"> 310 <div class="flex flex-col h-full" @click="goToCourseDetail(item)">
303 - <div class="h-28 mb-2 rounded-lg overflow-hidden"> 311 + <div class="h-28 mb-2 rounded-lg overflow-hidden relative">
304 <img 312 <img
305 :src="item.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'" 313 :src="item.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'"
306 :alt="item.title" 314 :alt="item.title"
307 class="w-full h-full object-cover" 315 class="w-full h-full object-cover"
308 /> 316 />
317 + <!-- 已购标识 -->
318 + <div
319 + v-if="item.is_buy"
320 + class="absolute top-0 left-0 bg-orange-500 text-white text-xs px-2 py-1 rounded-br-lg font-medium"
321 + style="background-color: rgba(249, 115, 22, 0.85)"
322 + >
323 + 已购
324 + </div>
309 </div> 325 </div>
310 <h4 class="font-medium text-sm mb-1 line-clamp-1">{{ item.title }}</h4> 326 <h4 class="font-medium text-sm mb-1 line-clamp-1">{{ item.title }}</h4>
311 <!--<p class="text-xs text-gray-500 flex items-center mt-auto"> 327 <!--<p class="text-xs text-gray-500 flex items-center mt-auto">
...@@ -521,7 +537,7 @@ import ActivityCard from '@/components/ui/ActivityCard.vue' ...@@ -521,7 +537,7 @@ import ActivityCard from '@/components/ui/ActivityCard.vue'
521 import SummerCampCard from '@/components/ui/SummerCampCard.vue' 537 import SummerCampCard from '@/components/ui/SummerCampCard.vue'
522 import VideoPlayer from '@/components/ui/VideoPlayer.vue' 538 import VideoPlayer from '@/components/ui/VideoPlayer.vue'
523 539
524 -// 导入模拟数据和工具函数 540 +// TODO: 导入模拟数据和工具函数
525 import { liveStreams, activities } from '@/utils/mockData' 541 import { liveStreams, activities } from '@/utils/mockData'
526 import { useTitle } from '@vueuse/core' 542 import { useTitle } from '@vueuse/core'
527 import { useAuth } from '@/contexts/auth' 543 import { useAuth } from '@/contexts/auth'
......