gxwebsoft
d83a6bdd69
- 在关于我们页补充企业优势和联系方式演示数据展示 - 资讯列表页增加分类标签，实现按分类筛选资讯 - 文章详情页新增相关推荐文章展示逻辑 - 主页使用演示数据兜底导航、Banner、核心业务、公司简介和文章列表 - 各页面均优化站点信息使用，优先展示真实数据，缺失时使用演示数据 - 留言页增加公司联系信息展示，提升体验 - 个人中心页支持分享官网，展示演示数据防止空白 - 主页Banner支持无图时使用渐变背景和文字占位 - 统一使用演示数据，保证页面无空白，提升整体稳定性和用户体验
83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { View, Text, ScrollView, RichText } from '@tarojs/components'
|
|
import Taro, { useRouter } from '@tarojs/taro'
|
|
import { getCmsArticle, pageCmsArticle } from '@/api/official'
|
|
import type { CmsArticle } from '@/api/official'
|
|
import ArticleCard from '../components/ArticleCard'
|
|
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 [related, setRelated] = useState<CmsArticle[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (!id) return
|
|
getCmsArticle(Number(id))
|
|
.then((a) => setArticle(a))
|
|
.catch(() => {})
|
|
.finally(() => setLoading(false))
|
|
// 相关推荐：取最新几条，排除当前
|
|
pageCmsArticle({ status: 0, deleted: 0, page: 1, limit: 4 })
|
|
.then((r) => {
|
|
const list = (r?.list || []).filter((x) => x.articleId !== Number(id)).slice(0, 3)
|
|
setRelated(list)
|
|
})
|
|
.catch(() => {})
|
|
}, [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>
|
|
|
|
{/* 相关推荐 */}
|
|
{related.length > 0 && (
|
|
<View className='px-3 pb-4'>
|
|
<View className='flex items-center mb-2'>
|
|
<View className='w-1 h-4 bg-brand-600 rounded mr-2' />
|
|
<Text className='text-base font-semibold text-gray-800'>相关推荐</Text>
|
|
</View>
|
|
{related.map((a) => (
|
|
<ArticleCard key={a.articleId} article={a} />
|
|
))}
|
|
</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
|