refactor(category):重构文章分类页面结构和加载逻辑

- 调整文章列表组件路径并优化渲染逻辑
- 添加骨架屏加载效果提升用户体验
- 完善错误处理机制增强页面稳定性- 更新页面配置文件路径引用
- 移除冗余的页面配置和组件引用
-优化首页Banner组件加载状态处理
- 增强热销商品Tab切换功能和空状态展示- 调整用户经销商组件调试日志- 修改全局应用配置中的页面路径引用
- 调整主题处理逻辑执行时机
This commit is contained in:
2025-09-26 12:45:07 +08:00
parent 915c06ecab
commit b8e13fdc68
15 changed files with 263 additions and 171 deletions

View File

@@ -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获取数据 */}