diff --git a/src/pages/index/Banner.tsx b/src/pages/index/Banner.tsx index 4a07466..ca32c84 100644 --- a/src/pages/index/Banner.tsx +++ b/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 {Image} from '@nutui/nutui-react-taro' -import {getCmsAd} from "@/api/cms/cmsAd"; +import { CmsAd } from "@/api/cms/cmsAd/model"; +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 [item, setItem] = useState() - const reload = () => { + const [carouselData, setCarouselData] = useState() + + // 加载轮播图数据 + const loadCarouselData = () => { getCmsAd(439).then(data => { - setItem(data) + setCarouselData(data) }) } useEffect(() => { - reload() + loadCarouselData() }, []) + // 轮播图高度,默认200px + const carouselHeight = carouselData?.height || 200; + return ( - <> - - {item?.imageList?.map((item) => ( - - navTo(`${item.path}`)} lazyLoad={false} style={{ height: item.height + 'px' }} /> - - ))} - - +
+ {/* 左侧轮播图区域 - 保持原有功能 */} +
+ + {carouselData?.imageList?.map((img, index) => ( + + navTo(`${img.path}`)} + lazyLoad={false} + style={{ height: `${carouselHeight}px`, borderRadius: '4px' }} + alt={`轮播图${index + 1}`} + /> + + ))} + +
+ + {/* 右侧固定图片区域 - 上下两张图片 */} +
+ {/* 上层图片 */} +
+ navTo(rightFixedImages[0].path)} + lazyLoad={false} + style={{ borderRadius: '4px' }} + alt="右侧上层图片" + /> +
+ + {/* 下层图片 */} +
+ navTo(rightFixedImages[1].path)} + lazyLoad={false} + style={{ borderRadius: '4px' }} + alt="右侧下层图片" + /> +
+
+
) } + export default MyPage +