feat(课程): 添加课程banner接口和轮播组件

实现课程页面的banner轮播功能，从接口动态获取banner数据

 /*
  * @Date: 2025-04-15 09:32:07
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-04-18 17:15:52
+ * @LastEditTime: 2025-06-16 11:34:00
  * @FilePath: /mlaj/src/api/course.js
  * @Description: 课程模块相关接口
  */
@@ -17,6 +17,7 @@ const Api = {
   GROUP_COMMENT_DEL: '/srv/?a=group_comment_del',
   GROUP_COMMENT_LIKE: '/srv/?a=group_comment_like',
   GROUP_COMMENT_DISLIKE: '/srv/?a=group_comment_dislike',
+  GET_COURSE_BANNER: '/srv/?a=get_article_list&sn=BEHALOBANNER',
 }
 
 /**
@@ -92,3 +93,11 @@ export const addGroupCommentLikeAPI = (params) => fn(fetch.post(Api.GROUP_COMMEN
  * @return: data: ''
  */
 export const delGroupCommentLikeAPI = (params) => fn(fetch.post(Api.GROUP_COMMENT_DISLIKE, params))
+
+
+/**
+ * @description: 获取课程banner
+ * @param {*} params
+ * @returns
+ */
+export const getCourseBannerAPI = (params) => fn(fetch.get(Api.GET_COURSE_BANNER, params))

@@ -8,19 +8,31 @@
 
       <!-- Featured Course Banner -->
       <div class="px-4 mb-5">
-        <div class="relative rounded-xl overflow-hidden shadow-lg h-40">
-          <img
-            src="https://cdn.ipadbiz.cn/mlaj/images/featured-course.jpg"
-            alt="传承之道"
-            class="w-full h-full object-cover"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 flex flex-col justify-end p-4"
+        <van-swipe
+          class="rounded-xl overflow-hidden shadow-lg h-40"
+          :autoplay="3000"
+          :show-indicators="true"
+          indicator-color="rgba(255, 255, 255, 0.5)"
+          indicator-active-color="#fbbf24"
+        >
+          <van-swipe-item
+            v-for="(banner, index) in bannerList"
+            :key="index"
+            class="relative"
           >
-            <h2 class="text-3xl font-bold text-amber-400 drop-shadow-md">传承之道</h2>
-            <p class="text-xl text-white font-semibold drop-shadow-sm">大理鸡足山游学</p>
-          </div>
-        </div>
+            <img
+              :src="banner.banner || 'https://cdn.ipadbiz.cn/mlaj/images/featured-course.jpg'"
+              :alt="banner.title || '课程横幅'"
+              class="w-full h-full object-cover"
+            />
+            <div
+              class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 flex flex-col justify-end p-4"
+            >
+              <h2 class="text-3xl font-bold text-amber-400 drop-shadow-md">{{ banner.post_title }}</h2>
+              <p class="text-xl text-white font-semibold drop-shadow-sm">{{ banner.post_excerpt }}</p>
+            </div>
+          </van-swipe-item>
+        </van-swipe>
       </div>
 
       <!-- Today's Live -->
@@ -92,15 +104,20 @@ import { featuredCourse, liveStreams } from "@/utils/mockData";
 import { useTitle } from '@vueuse/core';
 
 // 导入接口
-import { getCourseListAPI } from "@/api/course";
+import { getCourseListAPI, getCourseBannerAPI } from "@/api/course";
 
-const courses = ref([])
+const courses = ref([]);
+const bannerList = ref([]);
 
 onMounted(async () => {
   const res = await getCourseListAPI({ limit: 4 });
   if (res.code) {
     courses.value = res.data;
   }
+  const bannerRes = await getCourseBannerAPI();
+  if (bannerRes.code) {
+    bannerList.value = bannerRes.list;
+  }
 })
 
 const $route = useRoute();