fix(shop): 修复商品详情页图片显示和收货地址接口兼容性
- 新增 parseContent 函数,将 Markdown 图片语法转换为 RichText 可识别的 HTML 标签 - RichText 组件中使用 parseContent 处理后的内容,解决图片无法显示问题 - 重写 listShopUserAddress 接口,兼容后端多种响应格式及 code 为 0 或 200 的情况 - useAddress 中添加加载地址日志,优化错误捕获并规范日志输出格式
This commit is contained in:
36
.workbuddy/memory/2026-06-24.md
Normal file
36
.workbuddy/memory/2026-06-24.md
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
# 2026-06-24
|
||||||
|
|
||||||
|
## 提现页面路由修复
|
||||||
|
|
||||||
|
### 问题
|
||||||
|
`navigateTo:fail page "pages/user/withdraw/index" is not found` — app.config.ts 中提现页面路由被注释掉
|
||||||
|
|
||||||
|
### 修复
|
||||||
|
- **`src/app.config.ts`** — 取消注释 `pages/user/withdraw/index` 路由注册
|
||||||
|
|
||||||
|
## 钱包页面隐藏提现入口
|
||||||
|
|
||||||
|
### 改动文件
|
||||||
|
- **`src/pages/user/wallet.tsx`**
|
||||||
|
|
||||||
|
### 改动内容
|
||||||
|
1. 余额卡片去掉"提现"按钮,只保留"充值"
|
||||||
|
2. 快捷操作去掉"提现记录"入口,只保留余额明细、充值记录、兑换码
|
||||||
|
|
||||||
|
## 收货地址列表不显示问题修复
|
||||||
|
|
||||||
|
### 问题
|
||||||
|
`pages/user/address-list` 页面接口返回有地址数据,但页面不显示,导致无法下单
|
||||||
|
|
||||||
|
### 根因分析
|
||||||
|
1. **`model.ts` 与 `model/index.ts` 重复定义** — 两个文件对 `ShopUserAddress` 定义不同字段,`model.ts` 缺少 `ShopUserAddressParam` 导出
|
||||||
|
2. **`listShopUserAddress` 对响应格式不够健壮** — 只处理 `code === 0 && data` 为数组的情况,不兼容分页格式或 `code: 200`
|
||||||
|
3. **`request.ts` 拦截器只接受 `code === 0`** — 如果后端返回 `code: 200` 会直接抛错
|
||||||
|
|
||||||
|
### 修复(3个文件)
|
||||||
|
1. **删除 `src/api/shop/shopUserAddress/model.ts`** — 保留更完整的 `model/index.ts`
|
||||||
|
2. **`src/api/shop/shopUserAddress/index.ts`** — `listShopUserAddress` 重写,兼容3种响应格式:直接数组、`{code, data: [...]}` 、`{code, data: {list: [...]}}`,同时兼容 `code: 0` 和 `code: 200`
|
||||||
|
3. **`src/utils/request.ts`** — `responseInterceptor` 成功码从 `code === 0` 扩展为 `code === 0 || code === 200`
|
||||||
|
4. **`src/hooks/useAddress.ts`** — 加 console.log 日志方便排查
|
||||||
|
|
||||||
|
构建编译通过 ✓
|
||||||
7
.workbuddy/memory/2026-06-25.md
Normal file
7
.workbuddy/memory/2026-06-25.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
# 2026-06-25 工作日志
|
||||||
|
|
||||||
|
## 商品详情页图片不显示修复
|
||||||
|
- **文件**: `src/pages/shop/product-detail.tsx`
|
||||||
|
- **问题**: 商品详情区域 `product.content` 包含 Markdown 图片语法(``),微信小程序的 `RichText` 组件不支持 Markdown,导致原样输出文本而非渲染图片
|
||||||
|
- **修复**: 新增 `parseContent()` 函数,将 Markdown 图片语法转为 `<img>` HTML 标签,同时兜底处理裸 URL 图片链接
|
||||||
|
- **构建状态**: 编译通过 ✓
|
||||||
@@ -1,8 +1,42 @@
|
|||||||
import request from '@/utils/request';
|
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) {
|
export async function listShopUserAddress(params?: any) {
|
||||||
return request.get('/shop/shop-user-address', params);
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 获取收货地址详情 */
|
/** 获取收货地址详情 */
|
||||||
|
|||||||
@@ -29,10 +29,14 @@ export function useAddress(): UseAddressReturn {
|
|||||||
setLoading(true)
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
const list = await listShopUserAddress()
|
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 : [])
|
setAddresses(Array.isArray(list) ? list : [])
|
||||||
} catch (error) {
|
} catch (error: any) {
|
||||||
console.error('[useAddress] Load addresses error:', error)
|
// eslint-disable-next-line no-console
|
||||||
|
console.error('[useAddress] Load addresses error:', error?.message || error)
|
||||||
setAddresses([])
|
setAddresses([])
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
|
|||||||
@@ -191,6 +191,29 @@ const ProductDetailPage: React.FC = () => {
|
|||||||
// 配送方式文案
|
// 配送方式文案
|
||||||
const deliveryText = product.deliveryMode === 1 ? '限自提' : '送上门'
|
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 (
|
return (
|
||||||
<View className='flex flex-col bg-gray-50' style={{ height: '100vh' }}>
|
<View className='flex flex-col bg-gray-50' style={{ height: '100vh' }}>
|
||||||
<ScrollView scrollY style={{ height: scrollHeight }}>
|
<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>
|
<Text className='text-base font-medium text-gray-800 mb-3 block'>商品详情</Text>
|
||||||
<View className='text-sm text-gray-600 leading-6'>
|
<View className='text-sm text-gray-600 leading-6'>
|
||||||
{product.content ? (
|
{product.content ? (
|
||||||
<RichText nodes={product.content} />
|
<RichText nodes={parseContent(product.content)} />
|
||||||
) : (
|
) : (
|
||||||
<Text className='text-gray-400'>暂无详情</Text>
|
<Text className='text-gray-400'>暂无详情</Text>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user