banner图片换成动态

src/pages/index/Banner.tsx

@@ -5,30 +5,30 @@ import { Image } from '@nutui/nutui-react-taro'
 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
@@ -36,7 +36,7 @@ const MyPage = () => {
 
   return (
     <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%'}}>
         <Swiper
           defaultValue={0}
@@ -61,34 +61,60 @@ const MyPage = () => {
         </Swiper>
       </div>
 
-      {/* 右侧固定图片区域 - 上下两张图片 */}
+      {/* 右侧上下图片区域 - 从API获取数据 */}
       <div className="flex-1 flex flex-col gap-2" style={{height: '100%'}}>
-        {/* 上层图片 */}
+        {/* 上层图片 - 使用今日热卖素材 */}
         <div style={{height: '50%'}}>
+          {hotToday?.imageList?.length ? (
             <Image
               width="100%"
               height="100%"
-            src={rightFixedImages[0].url}
+              src={hotToday.imageList[0].url}
               mode={'scaleToFill'}
-            onClick={() => navTo(rightFixedImages[0].path)}
+              onClick={() => navTo("/cms/category/index?id=4424" || '')}
               lazyLoad={false}
               style={{borderRadius: '4px'}}
-            alt="右侧上层图片"
+              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%'}}>
+          {groupBuy?.imageList?.length ? (
             <Image
               width="100%"
               height="100%"
-            src={rightFixedImages[1].url}
+              src={groupBuy.imageList[0].url}
               mode={'scaleToFill'}
-            onClick={() => navTo(rightFixedImages[1].path)}
+              onClick={() => navTo(groupBuy.imageList[0].path || '')}
               lazyLoad={false}
               style={{borderRadius: '4px'}}
-            alt="右侧下层图片"
+              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>