hookehuyr

feat(订单管理): 实现订单删除功能并优化评价提交

refactor: 重构订单列表数据结构和加载逻辑
docs: 添加API接口文档和README说明
style: 移除不必要的padding-bottom样式
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
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.