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