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.
123 lines
3.9 KiB
123 lines
3.9 KiB
import {useEffect, useState} from 'react'
|
|
import {View} from '@tarojs/components'
|
|
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";
|
|
import {ShopGoods} from "@/api/shop/shopGoods/model";
|
|
import {listShopGoods} from "@/api/shop/shopGoods";
|
|
|
|
|
|
const MyPage = () => {
|
|
const [carouselData, setCarouselData] = useState<CmsAd>()
|
|
// const [hotToday, setHotToday] = useState<CmsAd>()
|
|
// const [groupBuy, setGroupBuy] = useState<CmsAd>()
|
|
const [hotGoods, setHotGoods] = useState<ShopGoods[]>([])
|
|
|
|
// 加载数据
|
|
const loadData = () => {
|
|
// 轮播图
|
|
getCmsAd(439).then(data => {
|
|
setCarouselData(data)
|
|
})
|
|
// 今日热卖素材（上层图片）
|
|
// getCmsAd(444).then(data => {
|
|
// setHotToday(data)
|
|
// })
|
|
// 社区拼团素材（下层图片）
|
|
// getCmsAd(445).then(data => {
|
|
// setGroupBuy(data)
|
|
// })
|
|
// 今日热卖
|
|
listShopGoods({categoryId: 4424, limit: 2}).then(data => {
|
|
setHotGoods(data)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadData()
|
|
}, [])
|
|
|
|
// 轮播图高度，默认200px
|
|
const carouselHeight = carouselData?.height || 200;
|
|
|
|
return (
|
|
<View className="flex p-2 justify-between" style={{height: `${carouselHeight}px`}}>
|
|
{/* 左侧轮播图区域 */}
|
|
<View style={{width: '50%', 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'}}
|
|
/>
|
|
</Swiper.Item>
|
|
))}
|
|
</Swiper>
|
|
</View>
|
|
|
|
{/* 右侧上下图片区域 - 从API获取数据 */}
|
|
<View className="flex flex-col" style={{width: '50%', height: '100%'}}>
|
|
{/* 上层图片 - 使用今日热卖素材 */}
|
|
<View className={'ml-2 bg-white rounded-lg'}>
|
|
<View className={'px-3 my-2 font-bold text-sm'}>今日热卖</View>
|
|
<View className={'px-3 flex'} style={{
|
|
height: '110px'
|
|
}}>
|
|
{
|
|
hotGoods.map(item => (
|
|
<View className={'item flex flex-col mr-4'}>
|
|
<Image
|
|
width={70}
|
|
height={70}
|
|
src={item.image}
|
|
mode={'scaleToFill'}
|
|
lazyLoad={false}
|
|
style={{
|
|
borderRadius: '4px'
|
|
}}
|
|
onClick={() => navTo('/shop/category/index?id=4424')}
|
|
/>
|
|
<View className={'text-xs py-2'}>到手价¥{item.price}</View>
|
|
</View>
|
|
))
|
|
}
|
|
</View>
|
|
</View>
|
|
|
|
{/* 下层图片 - 使用社区拼团素材 */}
|
|
<View className={'ml-2 bg-white rounded-lg mt-3'}>
|
|
<View className={'px-3 my-2 font-bold text-sm'}>走进社区</View>
|
|
<View className={'rounded-lg px-3 pb-3'}>
|
|
<Image
|
|
width={'100%'}
|
|
height={100}
|
|
src={'https://oss.wsdns.cn/20250919/941c99899e694a7798cab3bb28f1f238.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90'}
|
|
mode={'scaleToFill'}
|
|
lazyLoad={false}
|
|
style={{
|
|
borderRadius: '4px'
|
|
}}
|
|
onClick={() => navTo('cms/detail/index?id=10109')}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default MyPage
|
|
|