banner

src/pages/index/Banner.tsx

@@ -1,32 +1,99 @@
 import { useEffect, useState } from 'react'
 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 [item, setItem] = useState<CmsAd>()
+  const [carouselData, setCarouselData] = useState<CmsAd>()
-  const reload = () => {
+
+  // 加载轮播图数据
+  const loadCarouselData = () => {
     getCmsAd(439).then(data => {
-      setItem(data)
+      setCarouselData(data)
     })
   }
 
   useEffect(() => {
-    reload()
+    loadCarouselData()
   }, [])
 
+  // 轮播图高度，默认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` }}>
-      <Swiper defaultValue={0} height={item?.height} indicator style={{ height: item?.height + 'px' }}>
+      {/* 左侧轮播图区域 - 保持原有功能 */}
-        {item?.imageList?.map((item) => (
+      <div className="flex-1" style={{ height: '100%' }}>
-          <Swiper.Item key={item}>
+        <Swiper
-            <Image width="100%" height="100%" src={item.url} mode={'scaleToFill'} onClick={() => navTo(`${item.path}`)} lazyLoad={false} style={{ height: item.height + 'px' }} />
+          defaultValue={0}
-          </Swiper.Item>
+          height={carouselHeight}
-        ))}
+          indicator
-      </Swiper>
+          style={{ height: `${carouselHeight}px` }}
-    </>
+        >
+          {carouselData?.imageList?.map((img, index) => (
+            <Swiper.Item key={index}>
+              <Image
+                width="100%"
+                height="100%"
+                src={img.url}
+                mode={'scaleToFill'}
+                onClick={() => navTo(`${img.path}`)}
+                lazyLoad={false}
+                style={{ height: `${carouselHeight}px`, borderRadius: '4px' }}
+                alt={`轮播图${index + 1}`}
+              />
+            </Swiper.Item>
+          ))}
+        </Swiper>
+      </div>
+
+      {/* 右侧固定图片区域 - 上下两张图片 */}
+      <div className="flex-1 flex flex-col gap-2" style={{ height: '100%' }}>
+        {/* 上层图片 */}
+        <div style={{ height: '50%' }}>
+          <Image
+            width="100%"
+            height="100%"
+            src={rightFixedImages[0].url}
+            mode={'scaleToFill'}
+            onClick={() => navTo(rightFixedImages[0].path)}
+            lazyLoad={false}
+            style={{ borderRadius: '4px' }}
+            alt="右侧上层图片"
+          />
+        </div>
+
+        {/* 下层图片 */}
+        <div style={{ height: '50%' }}>
+          <Image
+            width="100%"
+            height="100%"
+            src={rightFixedImages[1].url}
+            mode={'scaleToFill'}
+            onClick={() => navTo(rightFixedImages[1].path)}
+            lazyLoad={false}
+            style={{ borderRadius: '4px' }}
+            alt="右侧下层图片"
+          />
+        </div>
+      </div>
+    </div>
   )
 }
+
 export default MyPage
+