231 lines
5.7 KiB
Markdown
231 lines
5.7 KiB
Markdown
# 日期格式化问题修复
|
||
|
||
## 问题描述
|
||
|
||
在订单详情页面的发货功能中，出现了日期格式化错误：
|
||
|
||
```
|
||
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. **代码一致性**：前端各个模块使用相同的日期处理方式
|
||
|
||
这些改进确保了订单管理功能的稳定性和可靠性。
|