赵忠林
611f0e3216
- 使用 `View` 替代 `div`，优化 Taro 组件结构 - 移除旧的广告位状态逻辑，引入商品数据接口 `listShopGoods` - 调整右侧热卖区域展示结构，支持商品列表渲染 - 更新图片点击跳转路径及样式细节feat(BestSellers): 增加 Tabs 分类展示热销商品 - 引入 `Tabs` 组件实现分类切换功能- 当前仅实现“今日主推”Tab 展示商品列表 - 其他 Tab（即将到期、活动预告）暂显示空状态组件 -优化部分样式和 Swiper 高度设置 feat(UserCard): 设置用户头像默认图片及移除冗余属性 - 在未登录或无头像时显示默认头像 - 移除 `Image` 组件中冗余的 `alt` 属性 refactor(OrderList): 移除未使用的导航工具函数 - 删除从 `navigation` 工具中导入的 `switchTab` 函数引用
124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
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
|
||
|