gxwebsoft
2e80a49ca1
- 新增官方分包目录及页面（首页、资讯列表、详情、关于我们、留言、我的） - 自定义实现底部导航组件 OfficialTabBar，解决微信 tabBar 不支持分包问题 - 统一接口调用走 shop-api 代理，无新增 CMS 域名，减少合法域名负担 - 新增 CMS 站点信息获取接口及留言咨询提交与查询接口 - 设计并完善官网富文本样式，品牌色统一为 #185FA5，并更新 tailwind 配置 - 首页新增企业官网入口卡片，方便用户访问官网内容 - 完成官网分包构建验证，解决 Taro 构建批量删除保护问题 - 规范 CMS 字段使用，适配字段名称及状态含义 - 后续计划对历史页面 NutUI 组件进行空壳化整改，及更新 UI 设计文档
73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { View, Text, ScrollView } from '@tarojs/components'
|
|
import Taro, { useRouter } from '@tarojs/taro'
|
|
import { pageCmsArticle } from '@/api/official'
|
|
import type { CmsArticle } from '@/api/official'
|
|
import ArticleCard from '../components/ArticleCard'
|
|
import OfficialTabBar from '../components/OfficialTabBar'
|
|
import NavBar from '@/components/NavBar'
|
|
|
|
definePageConfig({
|
|
navigationBarTitleText: '资讯',
|
|
})
|
|
|
|
const ArticleList: React.FC = () => {
|
|
const router = useRouter()
|
|
const categoryId = router.params.categoryId
|
|
const [articles, setArticles] = useState<CmsArticle[]>([])
|
|
const [page, setPage] = useState(1)
|
|
const [finished, setFinished] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const load = async (p: number) => {
|
|
if (loading || finished) return
|
|
setLoading(true)
|
|
try {
|
|
const res = await pageCmsArticle({
|
|
status: 0,
|
|
deleted: 0,
|
|
page: p,
|
|
limit: 10,
|
|
categoryId: categoryId ? Number(categoryId) : undefined,
|
|
})
|
|
const list = res?.list || []
|
|
setArticles((prev) => (p === 1 ? list : [...prev, ...list]))
|
|
setPage(p)
|
|
if (list.length < 10) setFinished(true)
|
|
} catch (e) {
|
|
console.error('资讯列表加载失败', e)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
load(1)
|
|
}, [])
|
|
|
|
return (
|
|
<View className='flex flex-col h-screen bg-gray-50'>
|
|
<NavBar title='资讯' />
|
|
<ScrollView scrollY className='flex-1' onScrollToLower={() => load(page + 1)}>
|
|
<View className='p-3'>
|
|
{articles.length > 0 ? (
|
|
articles.map((a) => <ArticleCard key={a.articleId} article={a} />)
|
|
) : (
|
|
<View className='py-10 text-center'>
|
|
<Text className='text-sm text-gray-400'>{loading ? '加载中...' : '暂无资讯'}</Text>
|
|
</View>
|
|
)}
|
|
{loading && (
|
|
<View className='py-3 text-center'>
|
|
<Text className='text-xs text-gray-400'>加载中...</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
<OfficialTabBar active='article' />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default ArticleList
|