feat(official): 实现企业官网分包及内容展示

- 新增官方分包目录及页面(首页、资讯列表、详情、关于我们、留言、我的)
- 自定义实现底部导航组件 OfficialTabBar,解决微信 tabBar 不支持分包问题
- 统一接口调用走 shop-api 代理,无新增 CMS 域名,减少合法域名负担
- 新增 CMS 站点信息获取接口及留言咨询提交与查询接口
- 设计并完善官网富文本样式,品牌色统一为 #185FA5,并更新 tailwind 配置
- 首页新增企业官网入口卡片,方便用户访问官网内容
- 完成官网分包构建验证,解决 Taro 构建批量删除保护问题
- 规范 CMS 字段使用,适配字段名称及状态含义
- 后续计划对历史页面 NutUI 组件进行空壳化整改,及更新 UI 设计文档
This commit is contained in:
2026-08-11 08:48:16 +08:00
parent d611a76ebd
commit 2e80a49ca1
20 changed files with 926 additions and 16 deletions
+66
View File
@@ -0,0 +1,66 @@
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'
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 aboutHtml =
(site as any)?.config?.about || (site as any)?.description || ''
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'>
{site?.websiteLogo && (
<Image
src={getCompressedImageUrl(site.websiteLogo, { width: 120 })}
className='w-16 h-16 rounded mr-3'
mode='aspectFill'
/>
)}
<Text className='text-lg font-semibold text-gray-800'>
{site?.websiteName || '企业官网'}
</Text>
</View>
{aboutHtml ? (
<RichText nodes={aboutHtml} className='official-rich' />
) : (
<Text className='text-sm text-gray-400'>
{loading ? '加载中...' : '暂无介绍'}
</Text>
)}
<View className='mt-4 bg-white rounded-lg p-4'>
<Text className='text-sm text-gray-500 block'>{site?.phone || '—'}</Text>
<Text className='text-sm text-gray-500 block mt-2'>{site?.email || '—'}</Text>
<Text className='text-sm text-gray-500 block mt-2'>{site?.address || '—'}</Text>
</View>
</View>
</ScrollView>
<OfficialTabBar active='about' />
</View>
)
}
export default About