feat(official): 实现企业官网分包及内容展示
- 新增官方分包目录及页面(首页、资讯列表、详情、关于我们、留言、我的) - 自定义实现底部导航组件 OfficialTabBar,解决微信 tabBar 不支持分包问题 - 统一接口调用走 shop-api 代理,无新增 CMS 域名,减少合法域名负担 - 新增 CMS 站点信息获取接口及留言咨询提交与查询接口 - 设计并完善官网富文本样式,品牌色统一为 #185FA5,并更新 tailwind 配置 - 首页新增企业官网入口卡片,方便用户访问官网内容 - 完成官网分包构建验证,解决 Taro 构建批量删除保护问题 - 规范 CMS 字段使用,适配字段名称及状态含义 - 后续计划对历史页面 NutUI 组件进行空壳化整改,及更新 UI 设计文档
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView, RichText } from '@tarojs/components'
|
||||
import Taro, { useRouter } from '@tarojs/taro'
|
||||
import { getCmsArticle } from '@/api/official'
|
||||
import type { CmsArticle } from '@/api/official'
|
||||
import NavBar from '@/components/NavBar'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '资讯详情',
|
||||
})
|
||||
|
||||
const ArticleDetail: React.FC = () => {
|
||||
const router = useRouter()
|
||||
const id = router.params.id
|
||||
const [article, setArticle] = useState<CmsArticle>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
getCmsArticle(Number(id))
|
||||
.then((a) => setArticle(a))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
return (
|
||||
<View className='flex flex-col h-screen bg-white'>
|
||||
<NavBar title='资讯详情' />
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
<View className='p-4'>
|
||||
<Text className='text-xl font-semibold text-gray-800 block'>
|
||||
{article?.title || '加载中...'}
|
||||
</Text>
|
||||
<View className='flex items-center mt-2 mb-4'>
|
||||
<Text className='text-xs text-gray-400'>{article?.source || article?.author || ''}</Text>
|
||||
<Text className='text-xs text-gray-400 ml-3'>{article?.createTime?.slice(0, 10)}</Text>
|
||||
</View>
|
||||
{article?.content ? (
|
||||
<RichText nodes={article.content} className='official-rich' />
|
||||
) : (
|
||||
<Text className='text-sm text-gray-400'>
|
||||
{loading ? '加载中...' : '暂无内容'}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View
|
||||
className='px-4 py-3 bg-white border-t border-gray-200 safe-area-bottom'
|
||||
>
|
||||
<View
|
||||
className='bg-brand-600 rounded-full py-3 text-center'
|
||||
onClick={() => Taro.navigateTo({ url: '/official/message' })}
|
||||
>
|
||||
<Text className='text-white text-sm font-medium'>立即咨询</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArticleDetail
|
||||
Reference in New Issue
Block a user