You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.7 KiB
125 lines
3.7 KiB
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 navTo from "@/utils/common";
|
|
|
|
|
|
const MyPage = () => {
|
|
const [carouselData, setCarouselData] = useState<CmsAd>()
|
|
const [hotToday, setHotToday] = useState<CmsAd>()
|
|
const [groupBuy, setGroupBuy] = useState<CmsAd>()
|
|
|
|
// 加载数据
|
|
const loadData = () => {
|
|
// 轮播图
|
|
getCmsAd(439).then(data => {
|
|
setCarouselData(data)
|
|
})
|
|
// 今日热卖素材（上层图片）
|
|
getCmsAd(444).then(data => {
|
|
setHotToday(data)
|
|
})
|
|
// 社区拼团素材（下层图片）
|
|
getCmsAd(445).then(data => {
|
|
setGroupBuy(data)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
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-1" style={{height: '100%'}}>
|
|
<Swiper
|
|
defaultValue={0}
|
|
height={carouselHeight}
|
|
indicator
|
|
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>
|
|
|
|
{/* 右侧上下图片区域 - 从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={hotToday.imageList[0].url}
|
|
mode={'scaleToFill'}
|
|
onClick={() => navTo("/cms/category/index?id=4424" || '')}
|
|
lazyLoad={false}
|
|
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%'}}>
|
|
{groupBuy?.imageList?.length ? (
|
|
<Image
|
|
width="100%"
|
|
height="100%"
|
|
src={groupBuy.imageList[0].url}
|
|
mode={'scaleToFill'}
|
|
onClick={() => navTo(groupBuy.imageList[0].path || '')}
|
|
lazyLoad={false}
|
|
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>
|
|
)
|
|
}
|
|
|
|
export default MyPage
|
|
|