fix(shop): 修复商品详情页图片显示和收货地址接口兼容性

- 新增 parseContent 函数,将 Markdown 图片语法转换为 RichText 可识别的 HTML 标签
- RichText 组件中使用 parseContent 处理后的内容,解决图片无法显示问题
- 重写 listShopUserAddress 接口,兼容后端多种响应格式及 code 为 0 或 200 的情况
- useAddress 中添加加载地址日志,优化错误捕获并规范日志输出格式
This commit is contained in:
2026-06-25 22:48:37 +08:00
parent 1d30897ab6
commit 8fb0bbcd8b
5 changed files with 110 additions and 6 deletions

View File

@@ -1,8 +1,42 @@
import request from '@/utils/request';
import type { ShopUserAddress } from './shopUserAddress/model';
/**
* 解析地址列表响应
* 兼容多种后端返回格式:
* 1. 直接数组 ShopUserAddress[]
* 2. 标准包装 { code, message, data: ShopUserAddress[] }
* 3. 标准包装 + 分页 { code, message, data: { list: [], count } }
* 4. code 为 0 或 200 都视为成功
*/
function parseAddressList(res: any): ShopUserAddress[] {
if (Array.isArray(res)) {
return res as ShopUserAddress[];
}
if (res && typeof res === 'object') {
const code = (res as any).code;
if (code === 0 || code === 200) {
const data = (res as any).data;
if (Array.isArray(data)) {
return data as ShopUserAddress[];
}
if (data && Array.isArray(data.list)) {
return data.list as ShopUserAddress[];
}
// code 成功但 data 为空
return [];
}
}
return [];
}
/** 收货地址列表 */
export function listShopUserAddress(params?: any) {
return request.get('/shop/shop-user-address', params);
export async function listShopUserAddress(params?: any) {
const res: any = await request.get('/shop/shop-user-address', params);
// 调试日志:微信开发者工具 console 可见,便于核对返回结构
// eslint-disable-next-line no-console
console.log('[listShopUserAddress] raw response:', JSON.stringify(res)?.substring(0, 500));
return parseAddressList(res);
}
/** 获取收货地址详情 */

View File

@@ -29,10 +29,14 @@ export function useAddress(): UseAddressReturn {
setLoading(true)
try {
const list = await listShopUserAddress()
console.log('[useAddress] loaded addresses:', list?.length, JSON.stringify(list)?.substring(0, 200))
// 调试日志:可看到解析后的地址数量与首项
// eslint-disable-next-line no-console
console.log('[useAddress] loaded addresses:', Array.isArray(list) ? list.length : 0,
list && (list as any[]).length > 0 ? JSON.stringify(list[0])?.substring(0, 200) : '(empty)')
setAddresses(Array.isArray(list) ? list : [])
} catch (error) {
console.error('[useAddress] Load addresses error:', error)
} catch (error: any) {
// eslint-disable-next-line no-console
console.error('[useAddress] Load addresses error:', error?.message || error)
setAddresses([])
} finally {
setLoading(false)

View File

@@ -191,6 +191,29 @@ const ProductDetailPage: React.FC = () => {
// 配送方式文案
const deliveryText = product.deliveryMode === 1 ? '限自提' : '送上门'
/**
* 将商品详情内容中的 Markdown 图片语法转换为 RichText 可识别的 HTML
* 支持格式:![alt](url) 和 ![alt](url?params)
*/
const parseContent = (content: string): string => {
if (!content) return ''
let html = content
// 将 ![...](url) 转换为 <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>
)}