forked from gxwebsoft/mp-10550
126 lines
3.7 KiB
TypeScript
126 lines
3.7 KiB
TypeScript
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
|
||
|