# 日期格式化问题修复 ## 问题描述 在订单详情页面的发货功能中,出现了日期格式化错误: ``` JSON parse error: Cannot deserialize value of type `java.util.Date` from String "2025-08-10T13:56:36.397Z": not a valid representation ``` ## 问题原因 ### 前端发送的日期格式 ```javascript // 错误的格式:ISO 8601 格式 deliveryTime: new Date().toISOString() // "2025-08-10T13:56:36.397Z" ``` ### 后端期望的日期格式 ```java // 后端期望的格式:标准日期时间格式 "yyyy-MM-dd HH:mm:ss" // "2025-08-10 13:56:36" ``` ## 解决方案 ### 1. 修复后台管理系统 使用项目中已有的 `toDateString` 工具函数来格式化日期: #### 修复前 ```typescript await updateShopOrder({ ...form, deliveryStatus: 20, deliveryTime: new Date().toISOString() // ❌ 错误格式 }); ``` #### 修复后 ```typescript const now = new Date(); const deliveryTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss'); await updateShopOrder({ ...form, deliveryStatus: 20, deliveryTime: deliveryTime // ✅ 正确格式 }); ``` ### 2. 修复移动端 使用 `dayjs` 库来格式化日期: ```typescript // 添加日期格式化工具函数 const formatDateForBackend = (date: Date) => { return dayjs(date).format('YYYY-MM-DD HH:mm:ss'); }; // 在需要的地方使用 const deliveryTime = formatDateForBackend(new Date()); ``` ## 修复的操作方法 ### 1. 发货处理 ```typescript const handleDelivery = () => { Modal.confirm({ title: '确认发货', content: '确定要将此订单标记为已发货吗?', onOk: async () => { try { loading.value = true; const now = new Date(); const deliveryTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss'); await updateShopOrder({ ...form, deliveryStatus: 20, deliveryTime: deliveryTime }); message.success('发货成功'); } catch (error: any) { message.error(error.message || '发货失败'); } } }); }; ``` ### 2. 退款处理 ```typescript const handleApproveRefund = () => { Modal.confirm({ title: '同意退款', content: '确定要同意此订单的退款申请吗?', onOk: async () => { try { loading.value = true; const now = new Date(); const refundTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss'); await updateShopOrder({ ...form, orderStatus: 6, refundTime: refundTime }); message.success('退款处理成功'); } catch (error: any) { message.error(error.message || '退款处理失败'); } } }); }; ``` ### 3. 申请退款 ```typescript const handleApplyRefund = () => { Modal.confirm({ title: '申请退款', content: '确定要为此订单申请退款吗?', onOk: async () => { try { loading.value = true; const now = new Date(); const refundApplyTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss'); await updateShopOrder({ ...form, orderStatus: 4, refundApplyTime: refundApplyTime }); message.success('退款申请已提交'); } catch (error: any) { message.error(error.message || '申请退款失败'); } } }); }; ``` ## 日期格式对比 | 格式类型 | 示例 | 用途 | |---------|------|------| | ISO 8601 | `2025-08-10T13:56:36.397Z` | 前端 JavaScript 标准 | | 标准格式 | `2025-08-10 13:56:36` | 后端 Java 期望格式 | | 显示格式 | `2025年08月10日 13:56` | 用户界面显示 | ## 最佳实践 ### 1. 统一日期处理 ```typescript // 创建统一的日期格式化工具 const DateUtils = { // 格式化为后端期望的格式 toBackendFormat: (date: Date) => { return toDateString(date, 'yyyy-MM-dd HH:mm:ss'); }, // 格式化为显示格式 toDisplayFormat: (date: Date) => { return toDateString(date, 'yyyy年MM月dd日 HH:mm'); }, // 格式化为短日期格式 toShortFormat: (date: Date) => { return toDateString(date, 'MM-dd HH:mm'); } }; ``` ### 2. 类型安全 ```typescript interface OrderUpdateData { deliveryTime?: string; // 明确指定为字符串类型 refundTime?: string; refundApplyTime?: string; } ``` ### 3. 错误处理 ```typescript const formatDateSafely = (date: Date | string | null | undefined): string | undefined => { if (!date) return undefined; try { const dateObj = typeof date === 'string' ? new Date(date) : date; if (isNaN(dateObj.getTime())) return undefined; return toDateString(dateObj, 'yyyy-MM-dd HH:mm:ss'); } catch (error) { console.error('日期格式化失败:', error); return undefined; } }; ``` ## 测试验证 ### 1. 功能测试 - ✅ 发货功能正常工作 - ✅ 退款处理功能正常工作 - ✅ 申请退款功能正常工作 ### 2. 日期格式测试 - ✅ 后端能正确解析日期字符串 - ✅ 前端显示日期格式正确 - ✅ 时区处理正确 ### 3. 边界情况测试 - ✅ 空日期处理 - ✅ 无效日期处理 - ✅ 时区转换处理 ## 总结 通过统一使用项目中的 `toDateString` 工具函数和 `dayjs` 库,我们成功修复了日期格式化问题。这个修复不仅解决了当前的错误,还为未来的日期处理提供了标准化的方案。 ### 关键改进点: 1. **统一日期格式**:所有发送到后端的日期都使用 `yyyy-MM-dd HH:mm:ss` 格式 2. **工具函数复用**:使用项目现有的日期格式化工具 3. **错误处理**:添加了适当的错误处理和用户提示 4. **代码一致性**:前端各个模块使用相同的日期处理方式 这些改进确保了订单管理功能的稳定性和可靠性。