feat(official): 实现企业官网分包及内容展示
- 新增官方分包目录及页面(首页、资讯列表、详情、关于我们、留言、我的) - 自定义实现底部导航组件 OfficialTabBar,解决微信 tabBar 不支持分包问题 - 统一接口调用走 shop-api 代理,无新增 CMS 域名,减少合法域名负担 - 新增 CMS 站点信息获取接口及留言咨询提交与查询接口 - 设计并完善官网富文本样式,品牌色统一为 #185FA5,并更新 tailwind 配置 - 首页新增企业官网入口卡片,方便用户访问官网内容 - 完成官网分包构建验证,解决 Taro 构建批量删除保护问题 - 规范 CMS 字段使用,适配字段名称及状态含义 - 后续计划对历史页面 NutUI 组件进行空壳化整改,及更新 UI 设计文档
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
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
|
||||
Reference in New Issue
Block a user