mp-vue/docs/DATE_FORMAT_FIX.md

日期格式化问题修复

问题描述

在订单详情页面的发货功能中，出现了日期格式化错误：

JSON parse error: Cannot deserialize value of type `java.util.Date` from String "2025-08-10T13:56:36.397Z": not a valid representation

问题原因

前端发送的日期格式

// 错误的格式：ISO 8601 格式
deliveryTime: new Date().toISOString()  // "2025-08-10T13:56:36.397Z"

后端期望的日期格式

// 后端期望的格式：标准日期时间格式
"yyyy-MM-dd HH:mm:ss"  // "2025-08-10 13:56:36"

解决方案

1. 修复后台管理系统

使用项目中已有的 toDateString 工具函数来格式化日期：

修复前

await updateShopOrder({
  ...form,
  deliveryStatus: 20,
  deliveryTime: new Date().toISOString()  // ❌ 错误格式
});

修复后

const now = new Date();
const deliveryTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss');

await updateShopOrder({
  ...form,
  deliveryStatus: 20,
  deliveryTime: deliveryTime  // ✅ 正确格式
});

2. 修复移动端

使用 dayjs 库来格式化日期：

// 添加日期格式化工具函数
const formatDateForBackend = (date: Date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
};

// 在需要的地方使用
const deliveryTime = formatDateForBackend(new Date());

修复的操作方法

1. 发货处理

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. 退款处理

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. 申请退款

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. 统一日期处理

// 创建统一的日期格式化工具
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. 类型安全

interface OrderUpdateData {
  deliveryTime?: string;  // 明确指定为字符串类型
  refundTime?: string;
  refundApplyTime?: string;
}

3. 错误处理

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. 代码一致性：前端各个模块使用相同的日期处理方式

这些改进确保了订单管理功能的稳定性和可靠性。