---
一、核心架构设计
1. 本地数据库
- 使用SQLite/IndexedDB存储离线订单数据（商品ID、数量、用户信息、时间戳等）。
- 字段设计需包含`sync_status`（0:未同步, 1:同步中, 2:同步成功, 3:同步失败）。
2. 同步队列管理
- 维护一个待同步队列（如`PendingOrdersQueue`），按时间戳排序。
- 网络恢复时优先处理最早未同步的订单。
3. 网络状态监听
- 通过`navigator.onLine`（Web）或`ConnectivityManager`（Android）监听网络变化。
- 触发同步逻辑时需防抖（如延迟5秒执行，避免频繁请求）。
---
二、关键代码实现（伪代码）
1. 离线下单流程
```javascript
// 用户提交订单（离线场景）
async function submitOfflineOrder(orderData) {
try {
// 1. 写入本地数据库
const orderId = await db.insert(orders, {
...orderData,
sync_status: 0,
created_at: new Date().toISOString()
});
// 2. 加入同步队列
PendingOrdersQueue.add(orderId);
// 3. 返回本地订单号给用户
return { success: true, orderId };
} catch (error) {
console.error(离线下单失败:, error);
return { success: false, error: 订单保存失败 };
}
}
```
2. 网络恢复后同步
```javascript
// 监听网络恢复事件
window.addEventListener(online, async () => {
const queue = PendingOrdersQueue.getAll();
if (queue.length === 0) return;
// 防抖处理
clearTimeout(window.syncTimeout);
window.syncTimeout = setTimeout(async () => {
for (const orderId of queue) {
try {
// 1. 标记为同步中
await db.update(orders, { sync_status: 1 }, { id: orderId });
// 2. 获取订单详情
const order = await db.get(orders, orderId);
// 3. 调用API同步（需处理API重试）
const response = await api.syncOrder(order);
if (response.success) {
await db.update(orders, { sync_status: 2 }, { id: orderId });
PendingOrdersQueue.remove(orderId);
} else {
await db.update(orders, { sync_status: 3 }, { id: orderId });
}
} catch (error) {
console.error(同步失败:, error);
await db.update(orders, { sync_status: 3 }, { id: orderId });
}
}
}, 5000); // 延迟5秒执行
});
```
---
三、万象源码部署适配
1. 数据库集成
- 若万象源码使用MySQL/PostgreSQL，需增加离线订单表，并通过定时任务（如Quartz）扫描`sync_status=0`的订单。
- 示例SQL：
```sql
CREATE TABLE offline_orders (
id VARCHAR(36) PRIMARY KEY,
user_id VARCHAR(36),
items JSON,
sync_status TINYINT DEFAULT 0,
created_at TIMESTAMP
);
```
2. 同步接口设计
- 添加`/api/sync-order`接口，接收离线订单数据并返回同步结果。
- 接口需支持幂等性（避免重复提交导致重复扣款）。
3. 冲突解决
- 若离线期间商品价格/库存变化，同步时需校验：
```javascript
async function validateOrderBeforeSync(order) {
const product = await api.getProduct(order.product_id);
if (product.stock < order.quantity) {
throw new Error(商品库存不足);
}
// 其他校验逻辑...
}
```
---
四、用户体验优化
1. 离线状态提示
- 显示“当前为离线模式，订单将在网络恢复后自动提交”的Toast提示。
2. 同步进度反馈
- 在订单详情页显示同步状态（如“同步中/已同步/失败”）。
3. 失败重试机制
- 允许用户手动触发重试，或系统自动重试（指数退避策略）。
---
五、部署注意事项
1. 服务端配置
- 确保API支持高并发（离线订单可能集中同步）。
- 设置合理的超时时间（如30秒）。
2. 客户端缓存清理
- 同步成功后删除本地冗余数据，避免占用空间。
3. 测试场景
- 模拟弱网环境（如Chrome DevTools的Throttling）。
- 测试多设备同时同步的冲突处理。
---
通过以上方案，生鲜App可在离线时正常下单，并在网络恢复后无缝同步数据，保障用户体验和数据一致性。如需具体代码实现或源码修改指导，可进一步提供万象源码的技术栈（如React Native/Flutter/原生开发）。
广告
