feat(课程): 新增课程列表二维码页面和图片卡片组件

添加课程列表二维码页面路由和视图组件
创建课程图片卡片组件用于二维码页面展示
更新组件类型声明文件以包含新组件

@@ -16,6 +16,7 @@ declare module 'vue' {
     CollapsibleCalendar: typeof import('./components/ui/CollapsibleCalendar.vue')['default']
     ConfirmDialog: typeof import('./components/ui/ConfirmDialog.vue')['default']
     CourseCard: typeof import('./components/ui/CourseCard.vue')['default']
+    CourseImageCard: typeof import('./components/ui/CourseImageCard.vue')['default']
     CourseList: typeof import('./components/courses/CourseList.vue')['default']
     FormPage: typeof import('./components/infoEntry/formPage.vue')['default']
     FrostedGlass: typeof import('./components/ui/FrostedGlass.vue')['default']

+<!--
+ * @Date: 2025-01-21 14:31:21
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-10-20 17:56:14
+ * @FilePath: /mlaj/src/components/ui/CourseImageCard.vue
+ * @Description: 课程图片卡片组件 - 一行显示一张图片，高度自适应
+-->
+<template>
+  <router-link
+    :to="linkTo || `/courses/${course.id}`"
+    class="block bg-white rounded-lg overflow-hidden shadow-sm mb-4"
+  >
+    <div class="relative">
+      <!-- 课程封面图片 -->
+      <img
+        :src="course.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'"
+        :alt="course.title"
+        class="w-full h-auto object-cover"
+        style="aspect-ratio: 16/9;"
+      />
+
+      <!-- 已购标识 -->
+      <div
+        v-if="course.is_buy"
+        class="absolute top-2 left-2 bg-orange-500 text-white text-xs px-2 py-1 rounded font-medium"
+        style="background-color: rgba(249, 115, 22, 0.85)"
+      >
+        已购
+      </div>
+
+      <!-- 价格标签 -->
+      <div class="absolute bottom-2 right-2 bg-opacity-60 text-white text-xs px-2 py-1 rounded" style="background-color: rgba(249, 115, 22, 0.85)">
+        <span v-if="course?.price !== '0.00'" class="font-semibold">¥{{ course.price }}</span>
+        <span v-else class="font-semibold">免费</span>
+      </div>
+    </div>
+
+    <!-- 课程信息 -->
+    <div class="p-3">
+      <h3 class="font-medium text-sm mb-2 line-clamp-2 text-gray-900">{{ course.title }}</h3>
+      <div class="text-gray-500 text-xs mb-2 line-clamp-1">{{ course.subtitle }}</div>
+      <div class="flex justify-between items-center text-gray-400 text-xs">
+        <span>已更新{{ course.count }}期</span>
+        <span>{{ course.buy_count }}人订阅</span>
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<script setup>
+/**
+ * 课程图片卡片组件的属性定义
+ */
+defineProps({
+  // 课程数据对象
+  course: {
+    type: Object,
+    required: true
+  },
+  // 自定义链接地址
+  linkTo: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style scoped>
+/* 文本截断样式 */
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>

 /*
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-17 16:47:13
+ * @LastEditTime: 2025-10-20 17:37:47
  * @FilePath: /mlaj/src/router/routes.js
  * @Description: 路由地址映射配置
  */
@@ -40,6 +40,12 @@ export const routes = [
     meta: { title: '课程列表' },
   },
   {
+    path: '/courses-list-qr',
+    name: 'CourseListQR',
+    component: () => import('../views/courses/CourseListQRPage.vue'),
+    meta: { title: '课程列表二维码' },
+  },
+  {
     path: '/profile',
     name: 'Profile',
     component: () => import('../views/profile/ProfilePage.vue'),

+<!--
+ * @Date: 2025-03-21 14:31:21
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-05-21 16:57:36
+ * @FilePath: /mlaj/src/views/courses/CourseListQRPage.vue
+ * @Description: 课程列表页面 - 支持列表和卡片两种显示模式
+-->
+<template>
+  <AppLayout title="课程列表">
+    <div class="pb-16">
+      <!-- Course List -->
+      <div class="px-4">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多课程了"
+          @load="onLoad"
+          class="space-y-4"
+        >
+          <!-- 根据type参数显示不同组件 -->
+          <template v-if="displayType === 'card'">
+            <CourseImageCard v-for="course in courses" :key="course.id" :course="course" />
+          </template>
+          <template v-else>
+            <CourseCard v-for="course in courses" :key="course.id" :course="course" />
+          </template>
+        </van-list>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import AppLayout from '@/components/layout/AppLayout.vue';
+import CourseCard from '@/components/ui/CourseCard.vue';
+import CourseImageCard from '@/components/ui/CourseImageCard.vue';
+// 导入接口
+import { getCourseListAPI } from "@/api/course";
+import { List } from 'vant';
+
+const $route = useRoute();
+const courses = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const limit = ref(5);
+const page = ref(0);
+
+// 根据URL参数确定显示类型
+const displayType = computed(() => {
+  return $route.query.type || 'list'; // 默认为list模式
+});
+
+// 获取URL参数中的ID
+const courseId = computed(() => {
+  return $route.query.id || '';
+});
+
+// Load more courses
+const onLoad = async () => {
+  const nextPage = page.value;
+  const params = { 
+    limit: limit.value, 
+    page: nextPage
+  };
+  
+  // 如果有ID参数，添加到请求中
+  if (courseId.value) {
+    params.id = courseId.value;
+  }
+  
+  const res = await getCourseListAPI(params);
+  if (res.code) {
+    courses.value = [...courses.value, ...res.data];
+    finished.value = res.data.length < limit.value;
+    page.value = nextPage + 1;
+  }
+  loading.value = false;
+};
+</script>