gxwebsoft
d83a6bdd69
- 在关于我们页补充企业优势和联系方式演示数据展示 - 资讯列表页增加分类标签，实现按分类筛选资讯 - 文章详情页新增相关推荐文章展示逻辑 - 主页使用演示数据兜底导航、Banner、核心业务、公司简介和文章列表 - 各页面均优化站点信息使用，优先展示真实数据，缺失时使用演示数据 - 留言页增加公司联系信息展示，提升体验 - 个人中心页支持分享官网，展示演示数据防止空白 - 主页Banner支持无图时使用渐变背景和文字占位 - 统一使用演示数据，保证页面无空白，提升整体稳定性和用户体验
101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { View, Text, ScrollView, RichText, Image } from '@tarojs/components'
|
|
import Taro from '@tarojs/taro'
|
|
import { getCmsWebsiteSiteInfo } from '@/api/official'
|
|
import type { CmsWebsite } from '@/api/official'
|
|
import { getCompressedImageUrl } from '@/utils/image'
|
|
import OfficialTabBar from '../components/OfficialTabBar'
|
|
import NavBar from '@/components/NavBar'
|
|
import { DEMO_SITE, DEMO_ADVANTAGES } from '../data/demo'
|
|
|
|
definePageConfig({
|
|
navigationBarTitleText: '关于我们',
|
|
})
|
|
|
|
const About: React.FC = () => {
|
|
const [site, setSite] = useState<CmsWebsite>()
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
getCmsWebsiteSiteInfo()
|
|
.then((s) => setSite(s))
|
|
.catch(() => {})
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
const effectiveSite: CmsWebsite = site ?? (DEMO_SITE as CmsWebsite)
|
|
const aboutHtml =
|
|
(site as any)?.config?.about || (site as any)?.description || DEMO_SITE.config?.about || ''
|
|
|
|
const contact = {
|
|
phone: effectiveSite.phone || DEMO_SITE.phone,
|
|
email: effectiveSite.email || DEMO_SITE.email,
|
|
address: effectiveSite.address || DEMO_SITE.address,
|
|
}
|
|
|
|
return (
|
|
<View className='flex flex-col h-screen bg-gray-50'>
|
|
<NavBar title='关于我们' />
|
|
<ScrollView scrollY className='flex-1'>
|
|
<View className='p-4'>
|
|
<View className='flex items-center mb-4'>
|
|
{effectiveSite.websiteLogo ? (
|
|
<Image
|
|
src={getCompressedImageUrl(effectiveSite.websiteLogo, { width: 120 })}
|
|
className='w-16 h-16 rounded mr-3'
|
|
mode='aspectFill'
|
|
/>
|
|
) : (
|
|
<View className='w-16 h-16 rounded bg-brand-600 flex items-center justify-center mr-3'>
|
|
<Text className='text-white text-2xl font-bold'>
|
|
{(effectiveSite.websiteName || '官').slice(0, 1)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
<Text className='text-lg font-semibold text-gray-800'>
|
|
{effectiveSite.websiteName || '企业官网'}
|
|
</Text>
|
|
</View>
|
|
|
|
{aboutHtml ? (
|
|
<RichText nodes={aboutHtml} className='official-rich' />
|
|
) : (
|
|
<Text className='text-sm text-gray-400'>
|
|
{loading ? '加载中...' : '暂无介绍'}
|
|
</Text>
|
|
)}
|
|
|
|
{/* 企业优势 */}
|
|
<View className='mt-5'>
|
|
<View className='flex items-center mb-3'>
|
|
<View className='w-1 h-4 bg-brand-600 rounded mr-2' />
|
|
<Text className='text-base font-semibold text-gray-800'>企业优势</Text>
|
|
</View>
|
|
<View className='flex flex-wrap -mx-1'>
|
|
{DEMO_ADVANTAGES.map((a) => (
|
|
<View key={a.title} className='w-1/2 px-1 mb-2'>
|
|
<View className='bg-white rounded-lg p-3 h-full'>
|
|
<Text className='text-xl'>{a.icon}</Text>
|
|
<Text className='text-sm font-medium text-gray-800 block mt-1'>{a.title}</Text>
|
|
<Text className='text-xs text-gray-400 mt-0.5 leading-snug block'>{a.desc}</Text>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
{/* 联系方式 */}
|
|
<View className='mt-4 bg-white rounded-lg p-4'>
|
|
<Text className='text-sm text-gray-500 block'>联系电话：{contact.phone || '—'}</Text>
|
|
<Text className='text-sm text-gray-500 block mt-2'>邮箱：{contact.email || '—'}</Text>
|
|
<Text className='text-sm text-gray-500 block mt-2'>地址：{contact.address || '—'}</Text>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
<OfficialTabBar active='about' />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default About
|