feat(订单管理): 实现订单删除功能并优化评价提交
refactor: 重构订单列表数据结构和加载逻辑 docs: 添加API接口文档和README说明 style: 移除不必要的padding-bottom样式
Showing
4 changed files
with
358 additions
and
9 deletions
src/api/README.md
0 → 100644
| 1 | +# 订单管理 API 接口文档 | ||
| 2 | + | ||
| 3 | +本文档描述了车辆订单管理相关的API接口使用方法和集成指南。 | ||
| 4 | + | ||
| 5 | +## 文件结构 | ||
| 6 | + | ||
| 7 | +``` | ||
| 8 | +src/api/ | ||
| 9 | +├── orders.js # 订单相关API接口 | ||
| 10 | +├── index.js # 通用API接口 | ||
| 11 | +├── fn.js # API工具函数 | ||
| 12 | +└── README.md # 本文档 | ||
| 13 | +``` | ||
| 14 | + | ||
| 15 | +## 订单API接口 (orders.js) | ||
| 16 | + | ||
| 17 | +### 主要功能 | ||
| 18 | + | ||
| 19 | +- ✅ 获取我的订单列表 | ||
| 20 | +- ✅ 获取订单详情 | ||
| 21 | +- ✅ 删除订单 | ||
| 22 | +- ✅ 取消订单 | ||
| 23 | +- ✅ 确认收货 | ||
| 24 | +- ✅ 提交评价 | ||
| 25 | +- ✅ 申请退款 | ||
| 26 | + | ||
| 27 | +### 使用示例 | ||
| 28 | + | ||
| 29 | +#### 1. 删除订单 | ||
| 30 | + | ||
| 31 | +```javascript | ||
| 32 | +import { deleteOrderAPI } from '@/api/orders' | ||
| 33 | + | ||
| 34 | +// 删除订单 | ||
| 35 | +const handleDeleteOrder = async (orderId) => { | ||
| 36 | + try { | ||
| 37 | + const response = await deleteOrderAPI({ orderId }) | ||
| 38 | + if (response.success) { | ||
| 39 | + console.log('删除成功:', response.message) | ||
| 40 | + // 更新UI状态 | ||
| 41 | + } | ||
| 42 | + } catch (error) { | ||
| 43 | + console.error('删除失败:', error.message) | ||
| 44 | + } | ||
| 45 | +} | ||
| 46 | +``` | ||
| 47 | + | ||
| 48 | +#### 2. 提交评价 | ||
| 49 | + | ||
| 50 | +```javascript | ||
| 51 | +import { submitReviewAPI } from '@/api/orders' | ||
| 52 | + | ||
| 53 | +// 提交评价 | ||
| 54 | +const handleSubmitReview = async (orderData) => { | ||
| 55 | + try { | ||
| 56 | + const response = await submitReviewAPI({ | ||
| 57 | + orderId: orderData.id, | ||
| 58 | + rating: 5, | ||
| 59 | + comment: '车况很好,推荐!', | ||
| 60 | + images: [] // 可选 | ||
| 61 | + }) | ||
| 62 | + if (response.success) { | ||
| 63 | + console.log('评价提交成功:', response.message) | ||
| 64 | + } | ||
| 65 | + } catch (error) { | ||
| 66 | + console.error('评价提交失败:', error.message) | ||
| 67 | + } | ||
| 68 | +} | ||
| 69 | +``` | ||
| 70 | + | ||
| 71 | +## 集成真实API的步骤 | ||
| 72 | + | ||
| 73 | +### 1. 更新API端点 | ||
| 74 | + | ||
| 75 | +在 `orders.js` 文件中,将 `OrderApi` 对象中的端点URL替换为真实的后端API地址: | ||
| 76 | + | ||
| 77 | +```javascript | ||
| 78 | +const OrderApi = { | ||
| 79 | + DELETE_ORDER: 'https://your-api-domain.com/api/orders/delete', | ||
| 80 | + SUBMIT_REVIEW: 'https://your-api-domain.com/api/orders/review', | ||
| 81 | + // ... 其他端点 | ||
| 82 | +}; | ||
| 83 | +``` | ||
| 84 | + | ||
| 85 | +### 2. 取消注释API调用代码 | ||
| 86 | + | ||
| 87 | +在页面组件中(如 `myOrders/index.vue`),找到相关方法并取消注释真实API调用的代码: | ||
| 88 | + | ||
| 89 | +```javascript | ||
| 90 | +// 在 performDeleteOrder 方法中 | ||
| 91 | +const response = await deleteOrderAPI({ orderId }) | ||
| 92 | +if (response.success) { | ||
| 93 | + // 处理成功响应 | ||
| 94 | +} else { | ||
| 95 | + throw new Error(response.message || '删除失败') | ||
| 96 | +} | ||
| 97 | +``` | ||
| 98 | + | ||
| 99 | +### 3. 错误处理 | ||
| 100 | + | ||
| 101 | +确保处理以下常见错误情况: | ||
| 102 | + | ||
| 103 | +- 网络连接错误 | ||
| 104 | +- 服务器错误 (5xx) | ||
| 105 | +- 客户端错误 (4xx) | ||
| 106 | +- 权限验证失败 | ||
| 107 | +- 数据验证失败 | ||
| 108 | + | ||
| 109 | +### 4. 响应格式标准化 | ||
| 110 | + | ||
| 111 | +建议后端API返回统一的响应格式: | ||
| 112 | + | ||
| 113 | +```javascript | ||
| 114 | +// 成功响应 | ||
| 115 | +{ | ||
| 116 | + success: true, | ||
| 117 | + message: '操作成功', | ||
| 118 | + data: { /* 具体数据 */ } | ||
| 119 | +} | ||
| 120 | + | ||
| 121 | +// 错误响应 | ||
| 122 | +{ | ||
| 123 | + success: false, | ||
| 124 | + message: '错误描述', | ||
| 125 | + error: { | ||
| 126 | + code: 'ERROR_CODE', | ||
| 127 | + details: '详细错误信息' | ||
| 128 | + } | ||
| 129 | +} | ||
| 130 | +``` | ||
| 131 | + | ||
| 132 | +## 安全注意事项 | ||
| 133 | + | ||
| 134 | +1. **权限验证**: 确保用户只能操作自己的订单 | ||
| 135 | +2. **数据验证**: 在前端和后端都要进行数据验证 | ||
| 136 | +3. **防重复提交**: 避免用户重复提交相同的操作 | ||
| 137 | +4. **敏感信息**: 不要在前端暴露敏感的API密钥 | ||
| 138 | +5. **HTTPS**: 生产环境必须使用HTTPS协议 | ||
| 139 | + | ||
| 140 | +## 测试建议 | ||
| 141 | + | ||
| 142 | +1. **单元测试**: 为每个API方法编写单元测试 | ||
| 143 | +2. **集成测试**: 测试API与UI组件的集成 | ||
| 144 | +3. **错误场景测试**: 测试网络错误、服务器错误等异常情况 | ||
| 145 | +4. **性能测试**: 测试API响应时间和并发处理能力 | ||
| 146 | + | ||
| 147 | +## 开发模式 vs 生产模式 | ||
| 148 | + | ||
| 149 | +当前代码支持开发模式(使用模拟数据)和生产模式(使用真实API)的切换: | ||
| 150 | + | ||
| 151 | +- **开发模式**: 注释掉真实API调用,使用模拟数据和延迟 | ||
| 152 | +- **生产模式**: 取消注释真实API调用,注释掉模拟代码 | ||
| 153 | + | ||
| 154 | +建议使用环境变量来控制模式切换,例如: | ||
| 155 | + | ||
| 156 | +```javascript | ||
| 157 | +const isDevelopment = process.env.NODE_ENV === 'development' | ||
| 158 | + | ||
| 159 | +if (isDevelopment) { | ||
| 160 | + // 使用模拟数据 | ||
| 161 | +} else { | ||
| 162 | + // 使用真实API | ||
| 163 | +} | ||
| 164 | +``` | ||
| 165 | + | ||
| 166 | +## 更新日志 | ||
| 167 | + | ||
| 168 | +- **v1.0.0**: 初始版本,包含基础的订单管理API接口 | ||
| 169 | +- 支持删除订单、提交评价等核心功能 | ||
| 170 | +- 提供完整的使用示例和集成指南 | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/api/orders.js
0 → 100644
| 1 | +/* | ||
| 2 | + * @Date: 2024-01-01 00:00:00 | ||
| 3 | + * @LastEditors: | ||
| 4 | + * @LastEditTime: 2024-01-01 00:00:00 | ||
| 5 | + * @FilePath: /jgdl/src/api/orders.js | ||
| 6 | + * @Description: 车辆订单相关API接口 | ||
| 7 | + */ | ||
| 8 | +import { fn, fetch } from './fn'; | ||
| 9 | + | ||
| 10 | +// API 端点定义 | ||
| 11 | +const OrderApi = { | ||
| 12 | + // 获取我的订单列表 | ||
| 13 | + GET_MY_ORDERS: '/api/orders/my-orders', | ||
| 14 | + // 获取订单详情 | ||
| 15 | + GET_ORDER_DETAIL: '/api/orders/detail', | ||
| 16 | + // 删除订单 | ||
| 17 | + DELETE_ORDER: '/api/orders/delete', | ||
| 18 | + // 取消订单 | ||
| 19 | + CANCEL_ORDER: '/api/orders/cancel', | ||
| 20 | + // 确认收货 | ||
| 21 | + CONFIRM_ORDER: '/api/orders/confirm', | ||
| 22 | + // 提交评价 | ||
| 23 | + SUBMIT_REVIEW: '/api/orders/review', | ||
| 24 | + // 申请退款 | ||
| 25 | + REQUEST_REFUND: '/api/orders/refund', | ||
| 26 | +}; | ||
| 27 | + | ||
| 28 | +/** | ||
| 29 | + * @description: 获取我的订单列表 | ||
| 30 | + * @param {Object} params | ||
| 31 | + * @param {string} params.type - 订单类型 'bought' | 'sold' | ||
| 32 | + * @param {number} params.page - 页码 | ||
| 33 | + * @param {number} params.limit - 每页数量 | ||
| 34 | + * @param {string} params.status - 订单状态筛选(可选) | ||
| 35 | + * @returns {Promise} | ||
| 36 | + */ | ||
| 37 | +export const getMyOrdersAPI = (params) => { | ||
| 38 | + // TODO: 替换为真实的API调用 | ||
| 39 | + return fn(fetch.get(OrderApi.GET_MY_ORDERS, params)); | ||
| 40 | +}; | ||
| 41 | + | ||
| 42 | +/** | ||
| 43 | + * @description: 获取订单详情 | ||
| 44 | + * @param {Object} params | ||
| 45 | + * @param {string} params.orderId - 订单ID | ||
| 46 | + * @returns {Promise} | ||
| 47 | + */ | ||
| 48 | +export const getOrderDetailAPI = (params) => { | ||
| 49 | + // TODO: 替换为真实的API调用 | ||
| 50 | + return fn(fetch.get(OrderApi.GET_ORDER_DETAIL, params)); | ||
| 51 | +}; | ||
| 52 | + | ||
| 53 | +/** | ||
| 54 | + * @description: 删除订单 | ||
| 55 | + * @param {Object} params | ||
| 56 | + * @param {string} params.orderId - 订单ID | ||
| 57 | + * @returns {Promise} | ||
| 58 | + * | ||
| 59 | + * @example | ||
| 60 | + * // 使用示例: | ||
| 61 | + * try { | ||
| 62 | + * const response = await deleteOrderAPI({ orderId: 'ORDER_123' }); | ||
| 63 | + * if (response.success) { | ||
| 64 | + * console.log('删除成功:', response.message); | ||
| 65 | + * } | ||
| 66 | + * } catch (error) { | ||
| 67 | + * console.error('删除失败:', error.message); | ||
| 68 | + * } | ||
| 69 | + * | ||
| 70 | + * @apiResponse | ||
| 71 | + * { | ||
| 72 | + * success: true, | ||
| 73 | + * message: '订单删除成功', | ||
| 74 | + * data: null | ||
| 75 | + * } | ||
| 76 | + */ | ||
| 77 | +export const deleteOrderAPI = (params) => { | ||
| 78 | + // TODO: 替换为真实的API调用 | ||
| 79 | + // 当集成真实API时,请确保: | ||
| 80 | + // 1. 处理网络错误和超时 | ||
| 81 | + // 2. 验证用户权限(只能删除自己的订单) | ||
| 82 | + // 3. 检查订单状态(只有特定状态的订单才能删除) | ||
| 83 | + // 4. 返回统一的响应格式 | ||
| 84 | + return fn(fetch.delete(OrderApi.DELETE_ORDER, params)); | ||
| 85 | +}; | ||
| 86 | + | ||
| 87 | +/** | ||
| 88 | + * @description: 取消订单 | ||
| 89 | + * @param {Object} params | ||
| 90 | + * @param {string} params.orderId - 订单ID | ||
| 91 | + * @param {string} params.reason - 取消原因(可选) | ||
| 92 | + * @returns {Promise} | ||
| 93 | + */ | ||
| 94 | +export const cancelOrderAPI = (params) => { | ||
| 95 | + // TODO: 替换为真实的API调用 | ||
| 96 | + return fn(fetch.post(OrderApi.CANCEL_ORDER, params)); | ||
| 97 | +}; | ||
| 98 | + | ||
| 99 | +/** | ||
| 100 | + * @description: 确认收货/完成交易 | ||
| 101 | + * @param {Object} params | ||
| 102 | + * @param {string} params.orderId - 订单ID | ||
| 103 | + * @returns {Promise} | ||
| 104 | + */ | ||
| 105 | +export const confirmOrderAPI = (params) => { | ||
| 106 | + // TODO: 替换为真实的API调用 | ||
| 107 | + return fn(fetch.post(OrderApi.CONFIRM_ORDER, params)); | ||
| 108 | +}; | ||
| 109 | + | ||
| 110 | +/** | ||
| 111 | + * @description: 提交订单评价 | ||
| 112 | + * @param {Object} params | ||
| 113 | + * @param {string} params.orderId - 订单ID | ||
| 114 | + * @param {number} params.rating - 评分 (1-5) | ||
| 115 | + * @param {string} params.comment - 评价内容 | ||
| 116 | + * @param {Array} params.images - 评价图片(可选) | ||
| 117 | + * @returns {Promise} | ||
| 118 | + * | ||
| 119 | + * @example | ||
| 120 | + * // 使用示例: | ||
| 121 | + * try { | ||
| 122 | + * const response = await submitReviewAPI({ | ||
| 123 | + * orderId: 'ORDER_123', | ||
| 124 | + * rating: 5, | ||
| 125 | + * comment: '车况很好,卖家服务态度也很棒!', | ||
| 126 | + * images: ['image1.jpg', 'image2.jpg'] // 可选 | ||
| 127 | + * }); | ||
| 128 | + * if (response.success) { | ||
| 129 | + * console.log('评价提交成功:', response.message); | ||
| 130 | + * } | ||
| 131 | + * } catch (error) { | ||
| 132 | + * console.error('评价提交失败:', error.message); | ||
| 133 | + * } | ||
| 134 | + * | ||
| 135 | + * @apiResponse | ||
| 136 | + * { | ||
| 137 | + * success: true, | ||
| 138 | + * message: '评价提交成功', | ||
| 139 | + * data: { | ||
| 140 | + * reviewId: 'REVIEW_123', | ||
| 141 | + * createdAt: '2024-01-01T12:00:00Z' | ||
| 142 | + * } | ||
| 143 | + * } | ||
| 144 | + */ | ||
| 145 | +export const submitReviewAPI = (params) => { | ||
| 146 | + // TODO: 替换为真实的API调用 | ||
| 147 | + // 当集成真实API时,请确保: | ||
| 148 | + // 1. 验证评分范围(1-5) | ||
| 149 | + // 2. 验证评价内容长度限制 | ||
| 150 | + // 3. 处理图片上传(如果有) | ||
| 151 | + // 4. 检查订单状态(只有已完成的订单才能评价) | ||
| 152 | + // 5. 防止重复评价 | ||
| 153 | + return fn(fetch.post(OrderApi.SUBMIT_REVIEW, params)); | ||
| 154 | +}; | ||
| 155 | + | ||
| 156 | +/** | ||
| 157 | + * @description: 申请退款 | ||
| 158 | + * @param {Object} params | ||
| 159 | + * @param {string} params.orderId - 订单ID | ||
| 160 | + * @param {string} params.reason - 退款原因 | ||
| 161 | + * @param {number} params.amount - 退款金额 | ||
| 162 | + * @param {Array} params.evidence - 退款凭证(可选) | ||
| 163 | + * @returns {Promise} | ||
| 164 | + */ | ||
| 165 | +export const requestRefundAPI = (params) => { | ||
| 166 | + // TODO: 替换为真实的API调用 | ||
| 167 | + return fn(fetch.post(OrderApi.REQUEST_REFUND, params)); | ||
| 168 | +}; | ||
| 169 | + | ||
| 170 | +// 导出所有API | ||
| 171 | +export default { | ||
| 172 | + getMyOrdersAPI, | ||
| 173 | + getOrderDetailAPI, | ||
| 174 | + deleteOrderAPI, | ||
| 175 | + cancelOrderAPI, | ||
| 176 | + confirmOrderAPI, | ||
| 177 | + submitReviewAPI, | ||
| 178 | + requestRefundAPI, | ||
| 179 | +}; | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| ... | @@ -103,7 +103,7 @@ | ... | @@ -103,7 +103,7 @@ |
| 103 | /* 订单列表 */ | 103 | /* 订单列表 */ |
| 104 | .order-list { | 104 | .order-list { |
| 105 | flex: 1; | 105 | flex: 1; |
| 106 | - padding-bottom: 160rpx; | 106 | + // padding-bottom: 160rpx; |
| 107 | } | 107 | } |
| 108 | 108 | ||
| 109 | /* 滚动列表 */ | 109 | /* 滚动列表 */ |
| ... | @@ -311,7 +311,7 @@ | ... | @@ -311,7 +311,7 @@ |
| 311 | 311 | ||
| 312 | .rate-score-section { | 312 | .rate-score-section { |
| 313 | margin-bottom: 40rpx; | 313 | margin-bottom: 40rpx; |
| 314 | - | 314 | + |
| 315 | .score-label { | 315 | .score-label { |
| 316 | display: block; | 316 | display: block; |
| 317 | font-size: 30rpx; | 317 | font-size: 30rpx; |
| ... | @@ -319,18 +319,18 @@ | ... | @@ -319,18 +319,18 @@ |
| 319 | margin-bottom: 20rpx; | 319 | margin-bottom: 20rpx; |
| 320 | font-weight: 500; | 320 | font-weight: 500; |
| 321 | } | 321 | } |
| 322 | - | 322 | + |
| 323 | .rate-stars { | 323 | .rate-stars { |
| 324 | margin-bottom: 16rpx; | 324 | margin-bottom: 16rpx; |
| 325 | } | 325 | } |
| 326 | - | 326 | + |
| 327 | .score-text { | 327 | .score-text { |
| 328 | font-size: 26rpx; | 328 | font-size: 26rpx; |
| 329 | color: #666; | 329 | color: #666; |
| 330 | margin-left: 16rpx; | 330 | margin-left: 16rpx; |
| 331 | } | 331 | } |
| 332 | } | 332 | } |
| 333 | - | 333 | + |
| 334 | .rate-input-section { | 334 | .rate-input-section { |
| 335 | .input-label { | 335 | .input-label { |
| 336 | display: block; | 336 | display: block; |
| ... | @@ -339,7 +339,7 @@ | ... | @@ -339,7 +339,7 @@ |
| 339 | margin-bottom: 20rpx; | 339 | margin-bottom: 20rpx; |
| 340 | font-weight: 500; | 340 | font-weight: 500; |
| 341 | } | 341 | } |
| 342 | - | 342 | + |
| 343 | .rate-textarea { | 343 | .rate-textarea { |
| 344 | width: 100%; | 344 | width: 100%; |
| 345 | min-height: 200rpx; | 345 | min-height: 200rpx; |
| ... | @@ -348,18 +348,18 @@ | ... | @@ -348,18 +348,18 @@ |
| 348 | padding: 20rpx; | 348 | padding: 20rpx; |
| 349 | font-size: 28rpx; | 349 | font-size: 28rpx; |
| 350 | line-height: 1.5; | 350 | line-height: 1.5; |
| 351 | - | 351 | + |
| 352 | &:focus { | 352 | &:focus { |
| 353 | border-color: #ff6b35; | 353 | border-color: #ff6b35; |
| 354 | } | 354 | } |
| 355 | - | 355 | + |
| 356 | &.readonly { | 356 | &.readonly { |
| 357 | background-color: #f8f9fa; | 357 | background-color: #f8f9fa; |
| 358 | border-color: #e9ecef; | 358 | border-color: #e9ecef; |
| 359 | color: #666; | 359 | color: #666; |
| 360 | } | 360 | } |
| 361 | } | 361 | } |
| 362 | - | 362 | + |
| 363 | .review-date { | 363 | .review-date { |
| 364 | display: block; | 364 | display: block; |
| 365 | font-size: 24rpx; | 365 | font-size: 24rpx; | ... | ... |
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment