banner图片换成动态

src/pages/index/Banner.tsx

@@ -1,48 +1,48 @@
-import { useEffect, useState } from 'react'
+import {useEffect, useState} from 'react'
-import { Swiper } from '@nutui/nutui-react-taro'
+import {Swiper} from '@nutui/nutui-react-taro'
-import { CmsAd } from "@/api/cms/cmsAd/model";
+import {CmsAd} from "@/api/cms/cmsAd/model";
-import { Image } from '@nutui/nutui-react-taro'
+import {Image} from '@nutui/nutui-react-taro'
-import { getCmsAd } from "@/api/cms/cmsAd";
+import {getCmsAd} from "@/api/cms/cmsAd";
 import navTo from "@/utils/common";
 
-// 右侧固定的两张图片（上下排列）
-const rightFixedImages = [
-  {
-    url: '/static/images/right-top.png',  // 上层图片路径
-    path: '/pages/activity/detail?id=1'   // 上层图片点击跳转地址
-  },
-  {
-    url: '/static/images/right-bottom.png',  // 下层图片路径
-    path: '/pages/goods/list?category=2'     // 下层图片点击跳转地址
-  }
-];
 
 const MyPage = () => {
   const [carouselData, setCarouselData] = useState<CmsAd>()
+  const [hotToday, setHotToday] = useState<CmsAd>()
+  const [groupBuy, setGroupBuy] = useState<CmsAd>()
 
-  // 加载轮播图数据
+  // 加载数据
-  const loadCarouselData = () => {
+  const loadData = () => {
+    // 轮播图
     getCmsAd(439).then(data => {
       setCarouselData(data)
     })
+    // 今日热卖素材（上层图片）
+    getCmsAd(444).then(data => {
+      setHotToday(data)
+    })
+    // 社区拼团素材（下层图片）
+    getCmsAd(445).then(data => {
+      setGroupBuy(data)
+    })
   }
 
   useEffect(() => {
-    loadCarouselData()
+    loadData()
   }, [])
 
   // 轮播图高度，默认200px
   const carouselHeight = carouselData?.height || 200;
 
   return (
-    <div className="flex flex-row w-full gap-2 p-2 box-sizing-border" style={{ height: `${carouselHeight}px` }}>
+    <div className="flex flex-row w-full gap-2 p-2 box-sizing-border" style={{height: `${carouselHeight}px`}}>
-      {/* 左侧轮播图区域 - 保持原有功能 */}
+      {/* 左侧轮播图区域 */}
-      <div className="flex-1" style={{ height: '100%' }}>
+      <div className="flex-1" style={{height: '100%'}}>
         <Swiper
           defaultValue={0}
           height={carouselHeight}
           indicator
-          style={{ height: `${carouselHeight}px` }}
+          style={{height: `${carouselHeight}px`}}
         >
           {carouselData?.imageList?.map((img, index) => (
             <Swiper.Item key={index}>
@@ -53,7 +53,7 @@ const MyPage = () => {
                 mode={'scaleToFill'}
                 onClick={() => navTo(`${img.path}`)}
                 lazyLoad={false}
-                style={{ height: `${carouselHeight}px`, borderRadius: '4px' }}
+                style={{height: `${carouselHeight}px`, borderRadius: '4px'}}
                 alt={`轮播图${index + 1}`}
               />
             </Swiper.Item>
@@ -61,34 +61,60 @@ const MyPage = () => {
         </Swiper>
       </div>
 
-      {/* 右侧固定图片区域 - 上下两张图片 */}
+      {/* 右侧上下图片区域 - 从API获取数据 */}
-      <div className="flex-1 flex flex-col gap-2" style={{ height: '100%' }}>
+      <div className="flex-1 flex flex-col gap-2" style={{height: '100%'}}>
-        {/* 上层图片 */}
+        {/* 上层图片 - 使用今日热卖素材 */}
-        <div style={{ height: '50%' }}>
+        <div style={{height: '50%'}}>
-          <Image
+          {hotToday?.imageList?.length ? (
-            width="100%"
+            <Image
-            height="100%"
+              width="100%"
-            src={rightFixedImages[0].url}
+              height="100%"
-            mode={'scaleToFill'}
+              src={hotToday.imageList[0].url}
-            onClick={() => navTo(rightFixedImages[0].path)}
+              mode={'scaleToFill'}
-            lazyLoad={false}
+              onClick={() => navTo("/cms/category/index?id=4424" || '')}
-            style={{ borderRadius: '4px' }}
+              lazyLoad={false}
-            alt="右侧上层图片"
+              style={{borderRadius: '4px'}}
-          />
+              alt="今日热卖"
+            />
+          ) : (
+            <div style={{
+              height: '100%',
+              backgroundColor: '#f5f5f5',
+              borderRadius: '4px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}>
+              <span style={{color: '#999', fontSize: '12px'}}>加载中...</span>
+            </div>
+          )}
         </div>
 
-        {/* 下层图片 */}
+        {/* 下层图片 - 使用社区拼团素材 */}
-        <div style={{ height: '50%' }}>
+        <div style={{height: '50%'}}>
-          <Image
+          {groupBuy?.imageList?.length ? (
-            width="100%"
+            <Image
-            height="100%"
+              width="100%"
-            src={rightFixedImages[1].url}
+              height="100%"
-            mode={'scaleToFill'}
+              src={groupBuy.imageList[0].url}
-            onClick={() => navTo(rightFixedImages[1].path)}
+              mode={'scaleToFill'}
-            lazyLoad={false}
+              onClick={() => navTo(groupBuy.imageList[0].path || '')}
-            style={{ borderRadius: '4px' }}
+              lazyLoad={false}
-            alt="右侧下层图片"
+              style={{borderRadius: '4px'}}
-          />
+              alt="社区拼团"
+            />
+          ) : (
+            <div style={{
+              height: '100%',
+              backgroundColor: '#f5f5f5',
+              borderRadius: '4px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}>
+              <span style={{color: '#999', fontSize: '12px'}}>加载中...</span>
+            </div>
+          )}
         </div>
       </div>
     </div>