fix(shop): 修复商品详情页图片显示和收货地址接口兼容性
- 新增 parseContent 函数,将 Markdown 图片语法转换为 RichText 可识别的 HTML 标签 - RichText 组件中使用 parseContent 处理后的内容,解决图片无法显示问题 - 重写 listShopUserAddress 接口,兼容后端多种响应格式及 code 为 0 或 200 的情况 - useAddress 中添加加载地址日志,优化错误捕获并规范日志输出格式
This commit is contained in:
@@ -191,6 +191,29 @@ const ProductDetailPage: React.FC = () => {
|
||||
// 配送方式文案
|
||||
const deliveryText = product.deliveryMode === 1 ? '限自提' : '送上门'
|
||||
|
||||
/**
|
||||
* 将商品详情内容中的 Markdown 图片语法转换为 RichText 可识别的 HTML
|
||||
* 支持格式: 和 
|
||||
*/
|
||||
const parseContent = (content: string): string => {
|
||||
if (!content) return ''
|
||||
let html = content
|
||||
// 将  转换为 <img src="url" style="max-width:100%"/>
|
||||
html = html.replace(
|
||||
/!\[([^\]]*)\]\(([^)]+)\)/g,
|
||||
'<img src="$2" mode="widthFix" style="max-width:100%;display:block;" />'
|
||||
)
|
||||
// 兜底:如果内容里直接包含 http(s) 图片链接(非 img 标签包裹的),也尝试转成图片
|
||||
// 匹配独立的 https://xxx.jpg/png/gif 链接
|
||||
if (html.includes('http') && !html.includes('<img')) {
|
||||
html = html.replace(
|
||||
/(https?:\/\/[^\s\)]+\.(jpg|jpeg|png|gif|webp)(\?[^\s\)]*)?)/gi,
|
||||
'<img src="$1" mode="widthFix" style="max-width:100%;display:block;" />'
|
||||
)
|
||||
}
|
||||
return html
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='flex flex-col bg-gray-50' style={{ height: '100vh' }}>
|
||||
<ScrollView scrollY style={{ height: scrollHeight }}>
|
||||
@@ -320,7 +343,7 @@ const ProductDetailPage: React.FC = () => {
|
||||
<Text className='text-base font-medium text-gray-800 mb-3 block'>商品详情</Text>
|
||||
<View className='text-sm text-gray-600 leading-6'>
|
||||
{product.content ? (
|
||||
<RichText nodes={product.content} />
|
||||
<RichText nodes={parseContent(product.content)} />
|
||||
) : (
|
||||
<Text className='text-gray-400'>暂无详情</Text>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user