Browse Source
- 调整文章列表组件路径并优化渲染逻辑 - 添加骨架屏加载效果提升用户体验 - 完善错误处理机制增强页面稳定性- 更新页面配置文件路径引用 - 移除冗余的页面配置和组件引用 -优化首页Banner组件加载状态处理 - 增强热销商品Tab切换功能和空状态展示- 调整用户经销商组件调试日志- 修改全局应用配置中的页面路径引用 - 调整主题处理逻辑执行时机master
15 changed files with 263 additions and 171 deletions
@ -0,0 +1,96 @@ |
|||
import Taro from '@tarojs/taro' |
|||
import {useShareAppMessage} from "@tarojs/taro" |
|||
import {useEffect, useState} from "react" |
|||
import {useRouter} from '@tarojs/taro' |
|||
import {View} from '@tarojs/components' |
|||
import {getCmsNavigation, listCmsNavigation} from "@/api/cms/cmsNavigation"; |
|||
import {CmsNavigation} from "@/api/cms/cmsNavigation/model"; |
|||
import {pageCmsArticle} from "@/api/cms/cmsArticle"; |
|||
import {CmsArticle} from "@/api/cms/cmsArticle/model"; |
|||
import ArticleList from './components/ArticleList' |
|||
import ArticleTabs from "./components/ArticleTabs"; |
|||
import './index.scss' |
|||
|
|||
function Category() { |
|||
const {params} = useRouter(); |
|||
const [categoryId, setCategoryId] = useState<number>(0) |
|||
const [category, setCategory] = useState<CmsNavigation[]>([]) |
|||
const [loading, setLoading] = useState<boolean>(true) |
|||
const [nav, setNav] = useState<CmsNavigation>() |
|||
const [list, setList] = useState<CmsArticle[]>([]) |
|||
|
|||
const reload = async () => { |
|||
try { |
|||
setLoading(true) |
|||
// 1.加载远程数据
|
|||
const id = Number(params.id || 4328) |
|||
const nav = await getCmsNavigation(id) |
|||
const categoryList = await listCmsNavigation({parentId: id}) |
|||
const shopGoods = await pageCmsArticle({categoryId: id}) |
|||
|
|||
// 2.赋值
|
|||
setCategoryId(id) |
|||
setNav(nav) |
|||
setList(shopGoods?.list || []) |
|||
setCategory(categoryList) |
|||
Taro.setNavigationBarTitle({ |
|||
title: `${nav?.categoryName}` |
|||
}) |
|||
} catch (error) { |
|||
console.error('文章分类加载失败:', error) |
|||
} finally { |
|||
setLoading(false) |
|||
} |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
reload() |
|||
}, []); |
|||
|
|||
useShareAppMessage(() => { |
|||
return { |
|||
title: `${nav?.categoryName}_时里院子市集`, |
|||
path: `/shop/category/index?id=${categoryId}`, |
|||
success: function () { |
|||
console.log('分享成功'); |
|||
}, |
|||
fail: function () { |
|||
console.log('分享失败'); |
|||
} |
|||
}; |
|||
}); |
|||
|
|||
// 骨架屏组件
|
|||
const ArticleSkeleton = () => ( |
|||
<View className="px-3"> |
|||
{[1, 2, 3, 4, 5].map(i => ( |
|||
<View key={i} className="flex items-center py-4 border-b border-gray-100"> |
|||
{/* 左侧文字骨架屏 */} |
|||
<View className="flex-1 pr-4"> |
|||
{/* 标题骨架屏 */} |
|||
<View className="bg-gray-200 h-5 rounded animate-pulse mb-2" style={{width: '75%'}}/> |
|||
{/* 副标题骨架屏 */} |
|||
<View className="bg-gray-200 h-4 rounded animate-pulse" style={{width: '50%'}}/> |
|||
</View> |
|||
{/* 右侧图片骨架屏 */} |
|||
<View |
|||
className="bg-gray-200 rounded animate-pulse flex-shrink-0" |
|||
style={{width: '100px', height: '100px'}} |
|||
/> |
|||
</View> |
|||
))} |
|||
</View> |
|||
) |
|||
|
|||
if (loading) { |
|||
return <ArticleSkeleton /> |
|||
} |
|||
|
|||
if(category.length > 0){ |
|||
return <ArticleTabs data={category}/> |
|||
} |
|||
|
|||
return <ArticleList data={list}/> |
|||
} |
|||
|
|||
export default Category |
|||
@ -1,71 +0,0 @@ |
|||
import Taro from '@tarojs/taro' |
|||
import {useShareAppMessage} from "@tarojs/taro" |
|||
import {Loading} from '@nutui/nutui-react-taro' |
|||
import {useEffect, useState} from "react" |
|||
import {useRouter} from '@tarojs/taro' |
|||
import {getCmsNavigation, listCmsNavigation} from "@/api/cms/cmsNavigation"; |
|||
import {CmsNavigation} from "@/api/cms/cmsNavigation/model"; |
|||
import {pageCmsArticle} from "@/api/cms/cmsArticle"; |
|||
import {CmsArticle} from "@/api/cms/cmsArticle/model"; |
|||
import ArticleList from './components/ArticleList' |
|||
import ArticleTabs from "./components/ArticleTabs"; |
|||
import './index.scss' |
|||
|
|||
function Category() { |
|||
const {params} = useRouter(); |
|||
const [categoryId, setCategoryId] = useState<number>(0) |
|||
const [category, setCategory] = useState<CmsNavigation[]>([]) |
|||
const [loading, setLoading] = useState<boolean>(true) |
|||
const [nav, setNav] = useState<CmsNavigation>() |
|||
const [list, setList] = useState<CmsArticle[]>([]) |
|||
|
|||
const reload = async () => { |
|||
// 1.加载远程数据
|
|||
const id = Number(params.id || 4328) |
|||
const nav = await getCmsNavigation(id) |
|||
const categoryList = await listCmsNavigation({parentId: id}) |
|||
const shopGoods = await pageCmsArticle({categoryId: id}) |
|||
|
|||
// 2.赋值
|
|||
setCategoryId(id) |
|||
setNav(nav) |
|||
setList(shopGoods?.list || []) |
|||
setCategory(categoryList) |
|||
Taro.setNavigationBarTitle({ |
|||
title: `${nav?.categoryName}` |
|||
}) |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
reload().then(() => { |
|||
setLoading(false) |
|||
}) |
|||
}, []); |
|||
|
|||
useShareAppMessage(() => { |
|||
return { |
|||
title: `${nav?.categoryName}_时里院子市集`, |
|||
path: `/shop/category/index?id=${categoryId}`, |
|||
success: function () { |
|||
console.log('分享成功'); |
|||
}, |
|||
fail: function () { |
|||
console.log('分享失败'); |
|||
} |
|||
}; |
|||
}); |
|||
|
|||
if (loading) { |
|||
return ( |
|||
<Loading className={'px-2'}>加载中</Loading> |
|||
) |
|||
} |
|||
|
|||
if(category.length > 0){ |
|||
return <ArticleTabs data={category}/> |
|||
} |
|||
|
|||
return <ArticleList data={list}/> |
|||
} |
|||
|
|||
export default Category |
|||
@ -1,3 +0,0 @@ |
|||
export default definePageConfig({ |
|||
navigationBarTitleText: '文章详情' |
|||
}) |
|||
@ -1,53 +0,0 @@ |
|||
import Taro from '@tarojs/taro' |
|||
import {useEffect, useState} from 'react' |
|||
import {useRouter} from '@tarojs/taro' |
|||
import {Loading} from '@nutui/nutui-react-taro' |
|||
import {View, RichText} from '@tarojs/components' |
|||
import {wxParse} from "@/utils/common"; |
|||
import {getCmsArticle} from "@/api/cms/cmsArticle"; |
|||
import {CmsArticle} from "@/api/cms/cmsArticle/model" |
|||
import Line from "@/components/Gap"; |
|||
import './index.scss' |
|||
|
|||
function Detail() { |
|||
const {params} = useRouter(); |
|||
const [loading, setLoading] = useState<boolean>(true) |
|||
// 文章详情
|
|||
const [item, setItem] = useState<CmsArticle>() |
|||
const reload = async () => { |
|||
const item = await getCmsArticle(Number(params.id)) |
|||
|
|||
if (item) { |
|||
item.content = wxParse(item.content) |
|||
setItem(item) |
|||
Taro.setNavigationBarTitle({ |
|||
title: `${item?.categoryName}` |
|||
}) |
|||
} |
|||
} |
|||
|
|||
useEffect(() => { |
|||
reload().then(() => { |
|||
setLoading(false) |
|||
}); |
|||
}, []); |
|||
|
|||
if (loading) { |
|||
return ( |
|||
<Loading className={'px-2'}>加载中</Loading> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div className={'bg-white'}> |
|||
<div className={'p-4 font-bold text-lg'}>{item?.title}</div> |
|||
<div className={'text-gray-400 text-sm px-4 '}>{item?.createTime}</div> |
|||
<View className={'content p-4'}> |
|||
<RichText nodes={item?.content}/> |
|||
</View> |
|||
<Line height={44}/> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Detail |
|||
Loading…
Reference in new issue