Переглянути джерело

✨ feat(ad): 实现广告轮播图动态数据展示

- 移除AdBannerCarousel组件中的本地默认广告数据
- 改为通过props从NewHomePage传入动态广告数据
- 优化广告图片路径获取方式,使用fullUrl替代path
- 调整NewHomePage中广告轮播组件的调用方式,传入动态数据

🐛 fix(ad): 修复广告图片显示问题

- 修正广告图片URL获取逻辑,使用banner.file.fullUrl替代banner.file.path
- 调整占位图生成逻辑,移除固定类型参数
- 确保广告图片在无数据时正确显示占位图
yourname 7 місяців тому
батько
коміт
939b78ae23

+ 2 - 26
src/client/mobile/components/AdBannerCarousel.tsx

@@ -37,32 +37,8 @@ export const AdBannerCarousel: React.FC<AdBannerCarouselProps> = ({
   const navigate = useNavigate();
   const autoplayRef = useRef<NodeJS.Timeout | null>(null);
 
-  // 默认广告数据
-  const defaultAds: AdBannerItem[] = [
-    {
-      id: 1,
-      title: "银龄智慧平台上线",
-      description: "专为银龄人群打造的智慧生活服务平台",
-      image: "/images/banner1.jpg",
-      link: "/about"
-    },
-    {
-      id: 2,
-      title: "免费技能培训",
-      description: "多门实用技能课程,助力银龄再就业",
-      image: "/images/banner2.jpg",
-      link: "/elderly-university"
-    },
-    {
-      id: 3,
-      title: "时间银行招募",
-      description: "存储时间,收获温暖,共建互助社区",
-      image: "/images/placeholder-banner.jpg",
-      link: "/time-bank"
-    }
-  ];
-
-  const displayAds = ads.length > 0 ? ads : defaultAds;
+  // 使用传入的动态广告数据,没有则使用默认数据
+  const displayAds = ads;
 
   // 自动播放控制
   const startAutoplay = () => {

+ 8 - 12
src/client/mobile/pages/NewHomePage.tsx

@@ -298,7 +298,7 @@ const NewHomePage: React.FC = () => {
     id: banner.id,
     title: banner.title,
     description: banner.description || '',
-    image: banner.file?.path || unsplash.getPlaceholderImage('banner', banner.id),
+    image: banner.file?.fullUrl || unsplash.getPlaceholderImage(undefined, banner.id),
     fallbackImage: '/images/placeholder-banner.jpg',
     link: banner.linkUrl || '#'
   }));
@@ -410,19 +410,15 @@ const NewHomePage: React.FC = () => {
 
       {/* 主要内容 */}
       <div className="pb-16">
-        {/* 轮播图 */}
-        {banners.length > 0 && (
-          <div className="bg-white bg-opacity-60 backdrop-blur-sm">
-            <EnhancedCarousel 
-              items={banners} 
-              autoPlayInterval={5000}
-              className="rounded-b-2xl"
-            />
-          </div>
-        )}
 
         {/* 广告位轮播 */}
-        <AdBannerCarousel />
+        <AdBannerCarousel ads={banners.map(banner => ({
+          id: banner.id,
+          title: banner.title,
+          description: banner.description,
+          image: banner.image,
+          link: banner.link
+        }))} />
 
         {/* 服务分类 */}
         <div className="mt-4 px-4">