forked from gxwebsoft/mp-10550
refactor(category):重构文章分类页面结构和加载逻辑
- 调整文章列表组件路径并优化渲染逻辑 - 添加骨架屏加载效果提升用户体验 - 完善错误处理机制增强页面稳定性- 更新页面配置文件路径引用 - 移除冗余的页面配置和组件引用 -优化首页Banner组件加载状态处理 - 增强热销商品Tab切换功能和空状态展示- 调整用户经销商组件调试日志- 修改全局应用配置中的页面路径引用 - 调整主题处理逻辑执行时机
This commit is contained in:
@@ -13,24 +13,32 @@ const MyPage = () => {
|
||||
const [carouselData, setCarouselData] = useState<CmsAd>()
|
||||
const [hotToday, setHotToday] = useState<CmsAd>()
|
||||
const [item, setItem] = useState<CmsArticle>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
// 轮播图
|
||||
const flash = await getCmsAdByCode('flash')
|
||||
// 今日热卖
|
||||
const hotToday = await getCmsAdByCode('hot_today')
|
||||
// 时里动态
|
||||
const news = await pageCmsArticle({limit:1,recommend:1})
|
||||
// 赋值
|
||||
if(flash){
|
||||
setCarouselData(flash)
|
||||
}
|
||||
if(hotToday){
|
||||
setHotToday(hotToday)
|
||||
}
|
||||
if(news && news.list.length > 0){
|
||||
setItem(news.list[0])
|
||||
try {
|
||||
setLoading(true)
|
||||
// 轮播图
|
||||
const flash = await getCmsAdByCode('flash')
|
||||
// 今日热卖
|
||||
const hotToday = await getCmsAdByCode('hot_today')
|
||||
// 时里动态
|
||||
const news = await pageCmsArticle({limit:1,recommend:1})
|
||||
// 赋值
|
||||
if(flash){
|
||||
setCarouselData(flash)
|
||||
}
|
||||
if(hotToday){
|
||||
setHotToday(hotToday)
|
||||
}
|
||||
if(news && news.list.length > 0){
|
||||
setItem(news.list[0])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Banner数据加载失败:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,30 +49,91 @@ const MyPage = () => {
|
||||
// 轮播图高度,默认200px
|
||||
const carouselHeight = carouselData?.height || 200;
|
||||
|
||||
// 骨架屏组件
|
||||
const BannerSkeleton = () => (
|
||||
<View className="flex p-2 justify-between" style={{height: `${carouselHeight}px`}}>
|
||||
{/* 左侧轮播图骨架屏 */}
|
||||
<View style={{width: '50%', height: '100%'}}>
|
||||
<View
|
||||
className="bg-gray-200 rounded animate-pulse"
|
||||
style={{height: `${carouselHeight}px`}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 右侧骨架屏 */}
|
||||
<View className="flex flex-col" style={{width: '50%', height: '100%'}}>
|
||||
{/* 上层骨架屏 */}
|
||||
<View className="ml-2 bg-white rounded-lg">
|
||||
<View className="px-3 my-2">
|
||||
<View className="bg-gray-200 h-4 w-16 rounded animate-pulse"/>
|
||||
</View>
|
||||
<View className="px-3 flex" style={{height: '110px'}}>
|
||||
{[1, 2].map(i => (
|
||||
<View key={i} className="item flex flex-col mr-4">
|
||||
<View className="bg-gray-200 rounded animate-pulse" style={{width: 70, height: 70}}/>
|
||||
<View className="bg-gray-200 h-3 w-16 rounded mt-2 animate-pulse"/>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 下层骨架屏 */}
|
||||
<View className="ml-2 bg-white rounded-lg mt-3">
|
||||
<View className="px-3 my-2">
|
||||
<View className="bg-gray-200 h-4 w-20 rounded animate-pulse"/>
|
||||
</View>
|
||||
<View className="rounded-lg px-3 pb-3">
|
||||
<View className="bg-gray-200 rounded animate-pulse" style={{width: '100%', height: 106}}/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
// 如果正在加载,显示骨架屏
|
||||
if (loading) {
|
||||
return <BannerSkeleton />
|
||||
}
|
||||
|
||||
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`}}
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
touchAction: 'pan-y',
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
<Swiper
|
||||
defaultValue={0}
|
||||
height={carouselHeight}
|
||||
indicator
|
||||
autoPlay
|
||||
duration={3000}
|
||||
style={{height: `${carouselHeight}px`}}
|
||||
>
|
||||
{carouselData && 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',
|
||||
pointerEvents: 'auto'
|
||||
}}
|
||||
/>
|
||||
</Swiper.Item>
|
||||
))}
|
||||
</Swiper>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 右侧上下图片区域 - 从API获取数据 */}
|
||||
|
||||
Reference in New Issue
Block a user