Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6c06abcc 1 parent 8e84f96d

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

refactor: 重构订单列表数据结构和加载逻辑
docs: 添加API接口文档和README说明
style: 移除不必要的padding-bottom样式
Inline Side-by-side
Showing 4 changed files with 730 additions and 91 deletions
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 /* 滚动列表 */
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-03 16:56:05 4 + * @LastEditTime: 2025-07-03 17:29:31
5 * @FilePath: /jgdl/src/pages/myOrders/index.vue 5 * @FilePath: /jgdl/src/pages/myOrders/index.vue
6 * @Description: 订单管理页面 6 * @Description: 订单管理页面
7 --> 7 -->
...@@ -98,8 +98,9 @@ ...@@ -98,8 +98,9 @@
98 98
99 <!-- 已取消状态 --> 99 <!-- 已取消状态 -->
100 <template v-if="order.status === 'cancelled'"> 100 <template v-if="order.status === 'cancelled'">
101 - <nut-button type="default" size="small" @click="deleteOrder(order.id)"> 101 + <nut-button type="default" size="small" @click="deleteOrder(order.id)"
102 - 删除订单 102 + :loading="deletingOrderId === order.id" :disabled="deletingOrderId === order.id">
103 + {{ deletingOrderId === order.id ? '删除中...' : '删除订单' }}
103 </nut-button> 104 </nut-button>
104 </template> 105 </template>
105 </view> 106 </view>
...@@ -270,14 +271,16 @@ ...@@ -270,14 +271,16 @@
270 271
271 <script setup> 272 <script setup>
272 import { ref, computed, onMounted } from 'vue' 273 import { ref, computed, onMounted } from 'vue'
274 +import { showToast } from '@nutui/nutui-taro'
273 import Taro from '@tarojs/taro' 275 import Taro from '@tarojs/taro'
276 +// import { deleteOrderAPI, submitReviewAPI } from '@/api/orders' // 预留真实API调用
274 import './index.less' 277 import './index.less'
275 import { $ } from '@tarojs/extend' 278 import { $ } from '@tarojs/extend'
276 import payCard from '@/components/payCard.vue' 279 import payCard from '@/components/payCard.vue'
277 // NutUI组件已全局注册，无需单独导入Rate 280 // NutUI组件已全局注册，无需单独导入Rate
278 281
279 const scrollStyle = ref({ 282 const scrollStyle = ref({
280 - height: 'calc(100vh)' 283 + height: ''
281 }) 284 })
282 285
283 // 页面状态 286 // 页面状态
...@@ -305,11 +308,11 @@ const isReadOnlyMode = ref(false) ...@@ -305,11 +308,11 @@ const isReadOnlyMode = ref(false)
305 const showOrderDetailPopup = ref(false) 308 const showOrderDetailPopup = ref(false)
306 const currentOrderDetail = ref(null) 309 const currentOrderDetail = ref(null)
307 310
308 -// 模拟订单数据 311 +// 模拟订单数据 - 我买的车
309 const boughtOrders = ref([ 312 const boughtOrders = ref([
310 { 313 {
311 - id: '1', 314 + id: 'B001',
312 - price: 999, 315 + price: 3999,
313 date: '2023-11-15 14:30', 316 date: '2023-11-15 14:30',
314 status: 'pending', 317 status: 'pending',
315 vehicle: { 318 vehicle: {
...@@ -322,74 +325,153 @@ const boughtOrders = ref([ ...@@ -322,74 +325,153 @@ const boughtOrders = ref([
322 } 325 }
323 }, 326 },
324 { 327 {
325 - id: '2', 328 + id: 'B002',
326 - price: 999, 329 + price: 5299,
327 date: '2023-10-28 09:15', 330 date: '2023-10-28 09:15',
328 status: 'completed', 331 status: 'completed',
329 vehicle: { 332 vehicle: {
330 - name: '雅迪 G5', 333 + name: '雅迪 DE2',
331 - year: '2021年', 334 + year: '2023年',
332 mileage: '续航80km', 335 mileage: '续航80km',
333 batteryCapacity: '电池容量：1.2kWh', 336 batteryCapacity: '电池容量：1.2kWh',
334 - price: 2599, 337 + price: 5299,
335 - imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60' 338 + imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
336 }, 339 },
337 - // 已评价信息
338 review: { 340 review: {
339 rating: 4, 341 rating: 4,
340 - content: '车子质量不错，续航也很给力，卖家服务态度很好，推荐购买！', 342 + content: '车子质量不错，续航也够用，就是充电时间有点长。',
341 - date: '2023-10-30 10:20' 343 + date: '2023-10-30 16:20'
342 } 344 }
343 }, 345 },
344 { 346 {
345 - id: '3', 347 + id: 'B003',
346 - price: 999, 348 + price: 2899,
347 - date: '2023-09-05 16:45', 349 + date: '2023-09-20 11:30',
348 status: 'cancelled', 350 status: 'cancelled',
349 vehicle: { 351 vehicle: {
350 - name: '绿源 MN5', 352 + name: '台铃 小狮子',
353 + year: '2021年',
354 + mileage: '续航65km',
355 + batteryCapacity: '电池容量：1.0kWh',
356 + price: 2899,
357 + imageUrl: 'https://images.unsplash.com/photo-1544191696-15693072b5a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
358 + }
359 + },
360 + {
361 + id: 'B004',
362 + price: 4599,
363 + date: '2023-08-15 15:45',
364 + status: 'completed',
365 + vehicle: {
366 + name: '九号 E80C',
351 year: '2023年', 367 year: '2023年',
352 - mileage: '续航100km', 368 + mileage: '续航80km',
353 - batteryCapacity: '电池容量：1.8kWh', 369 + batteryCapacity: '电池容量：1.44kWh',
354 - price: 4299, 370 + price: 4599,
355 - imageUrl: 'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60' 371 + imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
372 + },
373 + review: {
374 + rating: 5,
375 + content: '非常满意！车况很好，卖家服务态度也很棒，推荐！',
376 + date: '2023-08-18 10:30'
377 + }
378 + },
379 + {
380 + id: 'B005',
381 + price: 1899,
382 + date: '2023-07-22 13:20',
383 + status: 'pending',
384 + vehicle: {
385 + name: '绿源 MH5',
386 + year: '2020年',
387 + mileage: '续航50km',
388 + batteryCapacity: '电池容量：0.9kWh',
389 + price: 1899,
390 + imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
356 } 391 }
357 } 392 }
358 ]) 393 ])
359 394
395 +// 模拟订单数据 - 我卖的车
360 const soldOrders = ref([ 396 const soldOrders = ref([
361 { 397 {
362 - id: '4', 398 + id: 'S001',
363 - price: 999, 399 + price: 3200,
364 - date: '2023-11-10 11:20', 400 + date: '2023-11-10 16:45',
401 + status: 'completed',
402 + vehicle: {
403 + name: '爱玛 小蜜豆',
404 + year: '2021年',
405 + mileage: '续航60km',
406 + batteryCapacity: '电池容量：0.8kWh',
407 + price: 3200,
408 + imageUrl: 'https://images.unsplash.com/photo-1544191696-15693072b5a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
409 + },
410 + review: {
411 + rating: 5,
412 + content: '买家很爽快，交易很顺利，车子也很满意！',
413 + date: '2023-11-12 14:20'
414 + }
415 + },
416 + {
417 + id: 'S002',
418 + price: 2800,
419 + date: '2023-10-05 10:30',
365 status: 'pending', 420 status: 'pending',
366 vehicle: { 421 vehicle: {
367 - name: '爱玛 A3', 422 + name: '小刀 长征版',
368 year: '2022年', 423 year: '2022年',
369 - mileage: '续航90km', 424 + mileage: '续航70km',
370 - batteryCapacity: '电池容量：1.3kWh', 425 + batteryCapacity: '电池容量：1.1kWh',
371 - price: 3299, 426 + price: 2800,
372 - imageUrl: 'https://images.unsplash.com/photo-1591637333184-19aa84b3e01f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60' 427 + imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
373 } 428 }
374 }, 429 },
375 { 430 {
376 - id: '5', 431 + id: 'S003',
377 - price: 999, 432 + price: 4200,
378 - date: '2023-10-15 13:45', 433 + date: '2023-09-18 14:15',
379 - status: 'completed', 434 + status: 'cancelled',
380 vehicle: { 435 vehicle: {
381 - name: '台铃 战速', 436 + name: '立马 威风',
382 year: '2023年', 437 year: '2023年',
383 - mileage: '续航110km', 438 + mileage: '续航90km',
384 batteryCapacity: '电池容量：1.6kWh', 439 batteryCapacity: '电池容量：1.6kWh',
385 - price: 3599, 440 + price: 4200,
386 - imageUrl: 'https://images.unsplash.com/photo-1558980664-3a031cf67ea8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60' 441 + imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
442 + }
443 + },
444 + {
445 + id: 'S004',
446 + price: 1650,
447 + date: '2023-08-28 09:45',
448 + status: 'completed',
449 + vehicle: {
450 + name: '新日 XC1',
451 + year: '2020年',
452 + mileage: '续航45km',
453 + batteryCapacity: '电池容量：0.7kWh',
454 + price: 1650,
455 + imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
456 + }
457 + },
458 + {
459 + id: 'S005',
460 + price: 3800,
461 + date: '2023-07-12 16:20',
462 + status: 'completed',
463 + vehicle: {
464 + name: '哈啰 A80',
465 + year: '2022年',
466 + mileage: '续航85km',
467 + batteryCapacity: '电池容量：1.3kWh',
468 + price: 3800,
469 + imageUrl: 'https://images.unsplash.com/photo-1544191696-15693072b5a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
387 }, 470 },
388 - // 已评价信息
389 review: { 471 review: {
390 - rating: 5, 472 + rating: 4,
391 - content: '非常满意的一次购买体验，车辆性能超出预期，卖家很专业，物流也很快！', 473 + content: '车子成色不错，买家也很好沟通，交易愉快！',
392 - date: '2023-10-18 16:30' 474 + date: '2023-07-15 11:30'
393 } 475 }
394 } 476 }
395 ]) 477 ])
...@@ -417,8 +499,9 @@ const filteredOrders = computed(() => { ...@@ -417,8 +499,9 @@ const filteredOrders = computed(() => {
417 */ 499 */
418 const setViewMode = (mode) => { 500 const setViewMode = (mode) => {
419 viewMode.value = mode 501 viewMode.value = mode
420 - // 重置列表加载状态
421 resetListState() 502 resetListState()
503 + // 重置加载更多的状态
504 + hasMore.value = true
422 } 505 }
423 506
424 /** 507 /**
...@@ -431,11 +514,13 @@ const setActiveTab = (tab) => { ...@@ -431,11 +514,13 @@ const setActiveTab = (tab) => {
431 } 514 }
432 515
433 /** 516 /**
434 - * 重置列表加载状态 517 + * 重置列表状态
435 */ 518 */
436 const resetListState = () => { 519 const resetListState = () => {
437 loading.value = false 520 loading.value = false
438 hasMore.value = true 521 hasMore.value = true
522 + // 重置加载索引，但不重置已加载的数据
523 + // 这样切换标签时不会重复加载数据，但切换视图模式时会重置
439 } 524 }
440 525
441 /** 526 /**
...@@ -445,6 +530,107 @@ const scroll = (e) => { ...@@ -445,6 +530,107 @@ const scroll = (e) => {
445 // 可以在这里处理滚动事件 530 // 可以在这里处理滚动事件
446 } 531 }
447 532
533 +// 模拟更多数据池 - 买车订单
534 +const moreBoughtOrders = [
535 + {
536 + id: 'B006',
537 + price: 2299,
538 + date: '2023-06-18 14:30',
539 + status: 'completed',
540 + vehicle: {
541 + name: '小鸟 V1',
542 + year: '2019年',
543 + mileage: '续航55km',
544 + batteryCapacity: '电池容量：0.8kWh',
545 + price: 2299,
546 + imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
547 + },
548 + review: {
549 + rating: 3,
550 + content: '车子还行，就是电池续航有点短，价格还算合理。',
551 + date: '2023-06-20 09:15'
552 + }
553 + },
554 + {
555 + id: 'B007',
556 + price: 3599,
557 + date: '2023-05-25 16:45',
558 + status: 'cancelled',
559 + vehicle: {
560 + name: '速珂 TC Max',
561 + year: '2022年',
562 + mileage: '续航100km',
563 + batteryCapacity: '电池容量：1.8kWh',
564 + price: 3599,
565 + imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
566 + }
567 + },
568 + {
569 + id: 'B008',
570 + price: 4899,
571 + date: '2023-04-12 11:20',
572 + status: 'pending',
573 + vehicle: {
574 + name: '小牛 NGT',
575 + year: '2023年',
576 + mileage: '续航130km',
577 + batteryCapacity: '电池容量：2.0kWh',
578 + price: 4899,
579 + imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
580 + }
581 + }
582 +]
583 +
584 +// 模拟更多数据池 - 卖车订单
585 +const moreSoldOrders = [
586 + {
587 + id: 'S006',
588 + price: 2100,
589 + date: '2023-06-08 13:15',
590 + status: 'completed',
591 + vehicle: {
592 + name: '绿佳 FDT',
593 + year: '2020年',
594 + mileage: '续航50km',
595 + batteryCapacity: '电池容量：0.9kWh',
596 + price: 2100,
597 + imageUrl: 'https://images.unsplash.com/photo-1544191696-15693072b5a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
598 + }
599 + },
600 + {
601 + id: 'S007',
602 + price: 3500,
603 + date: '2023-05-20 10:30',
604 + status: 'pending',
605 + vehicle: {
606 + name: '雅迪 G5 Pro',
607 + year: '2022年',
608 + mileage: '续航85km',
609 + batteryCapacity: '电池容量：1.4kWh',
610 + price: 3500,
611 + imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
612 + }
613 + },
614 + {
615 + id: 'S008',
616 + price: 1800,
617 + date: '2023-04-15 15:45',
618 + status: 'cancelled',
619 + vehicle: {
620 + name: '爱玛 麦',
621 + year: '2019年',
622 + mileage: '续航40km',
623 + batteryCapacity: '电池容量：0.6kWh',
624 + price: 1800,
625 + imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
626 + }
627 + }
628 +]
629 +
630 +// 记录已加载的数据索引
631 +const loadedBoughtIndex = ref(0)
632 +const loadedSoldIndex = ref(0)
633 +
448 /** 634 /**
449 * 加载更多数据 635 * 加载更多数据
450 */ 636 */
...@@ -453,11 +639,37 @@ const loadMore = () => { ...@@ -453,11 +639,37 @@ const loadMore = () => {
453 639
454 loading.value = true 640 loading.value = true
455 641
456 - // 模拟加载更多数据 642 + // 模拟加载延迟
457 setTimeout(() => { 643 setTimeout(() => {
644 + const currentOrders = viewMode.value === 'bought' ? boughtOrders : soldOrders
645 + const moreOrders = viewMode.value === 'bought' ? moreBoughtOrders : moreSoldOrders
646 + const loadedIndex = viewMode.value === 'bought' ? loadedBoughtIndex : loadedSoldIndex
647 +
648 + // 每次加载2条数据
649 + const batchSize = 2
650 + const startIndex = loadedIndex.value
651 + const endIndex = Math.min(startIndex + batchSize, moreOrders.length)
652 +
653 + if (startIndex < moreOrders.length) {
654 + // 添加新数据
655 + const newOrders = moreOrders.slice(startIndex, endIndex)
656 + currentOrders.value.push(...newOrders)
657 +
658 + // 更新已加载索引
659 + if (viewMode.value === 'bought') {
660 + loadedBoughtIndex.value = endIndex
661 + } else {
662 + loadedSoldIndex.value = endIndex
663 + }
664 +
665 + // 检查是否还有更多数据
666 + hasMore.value = endIndex < moreOrders.length
667 + } else {
668 + // 没有更多数据了
669 + hasMore.value = false
670 + }
671 +
458 loading.value = false 672 loading.value = false
459 - // 这里可以添加实际的加载更多逻辑
460 - // 如果没有更多数据，设置 hasMore.value = false
461 }, 1000) 673 }, 1000)
462 } 674 }
463 675
...@@ -593,81 +805,159 @@ const closeRatePopup = () => { ...@@ -593,81 +805,159 @@ const closeRatePopup = () => {
593 */ 805 */
594 const submitRate = async () => { 806 const submitRate = async () => {
595 if (!rateContent.value.trim()) { 807 if (!rateContent.value.trim()) {
596 - Taro.showToast({ 808 + showToast({
597 title: '请输入评价内容', 809 title: '请输入评价内容',
598 - icon: 'none' 810 + type: 'fail'
599 - })
600 - return
601 - }
602 -
603 - if (rateScore.value < 1 || rateScore.value > 5) {
604 - Taro.showToast({
605 - title: '请选择评分',
606 - icon: 'none'
607 }) 811 })
608 return 812 return
609 } 813 }
610 814
815 + try {
611 submittingRate.value = true 816 submittingRate.value = true
612 817
613 - try { 818 + // 真实的API调用（当前注释掉，使用模拟数据）
614 - // 模拟提交评价 819 + // const response = await submitReviewAPI({
615 - await new Promise(resolve => setTimeout(resolve, 1500)) 820 + // orderId: currentRateOrder.value.id,
821 + // rating: rateScore.value,
822 + // comment: rateContent.value
823 + // })
824 + // if (response.success) {
825 + // // API提交成功后的处理
826 + // const currentOrders = viewMode.value === 'bought' ? boughtOrders : soldOrders
827 + // const order = currentOrders.value.find(o => o.id === currentRateOrder.value.id)
828 + // if (order) {
829 + // order.review = {
830 + // rating: rateScore.value,
831 + // content: rateContent.value,
832 + // date: new Date().toLocaleString('zh-CN')
833 + // }
834 + // order.status = 'completed'
835 + // }
836 + // showToast({
837 + // title: response.message || '评价提交成功',
838 + // type: 'success'
839 + // })
840 + // closeRatePopup()
841 + // } else {
842 + // throw new Error(response.message || '提交失败')
843 + // }
616 844
617 - // 更新订单评价信息 845 + // 模拟API调用延迟（开发阶段使用）
618 - if (currentRateOrder.value) { 846 + await new Promise(resolve => setTimeout(resolve, 1500))
619 - const currentDate = new Date()
620 - const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(2, '0')}:${String(currentDate.getMinutes()).padStart(2, '0')}`
621 847
622 - currentRateOrder.value.review = { 848 + // 更新本地数据
849 + const currentOrders = viewMode.value === 'bought' ? boughtOrders : soldOrders
850 + const order = currentOrders.value.find(o => o.id === currentRateOrder.value.id)
851 + if (order) {
852 + order.review = {
623 rating: rateScore.value, 853 rating: rateScore.value,
624 content: rateContent.value, 854 content: rateContent.value,
625 - date: dateStr 855 + date: new Date().toLocaleString('zh-CN')
626 } 856 }
857 + order.status = 'completed'
627 } 858 }
628 859
629 - Taro.showToast({ 860 + showToast({
630 title: '评价提交成功', 861 title: '评价提交成功',
631 - icon: 'success' 862 + type: 'success'
632 }) 863 })
633 864
634 - // 关闭弹窗
635 closeRatePopup() 865 closeRatePopup()
636 866
637 - // TODO: 这里可以添加实际的API调用逻辑
638 - // await api.submitOrderRate({
639 - // orderId: currentRateOrder.value.id,
640 - // rating: rateScore.value,
641 - // content: rateContent.value
642 - // })
643 -
644 } catch (error) { 867 } catch (error) {
645 - Taro.showToast({ 868 + // console.error('提交评价失败:', error)
646 - title: '提交失败，请重试', 869 + showToast({
647 - icon: 'none' 870 + title: error.message || '提交失败，请重试',
871 + type: 'fail'
648 }) 872 })
649 } finally { 873 } finally {
650 submittingRate.value = false 874 submittingRate.value = false
651 } 875 }
652 } 876 }
653 877
878 +// 删除订单相关状态
879 +const deletingOrderId = ref('')
880 +
654 /** 881 /**
655 * 删除订单 882 * 删除订单
883 + * @param {string} orderId - 订单ID
656 */ 884 */
657 -const deleteOrder = (orderId) => { 885 +const deleteOrder = async (orderId) => {
658 - Taro.showModal({ 886 + try {
887 + const result = await Taro.showModal({
659 title: '确认删除', 888 title: '确认删除',
660 - content: '确定要删除这个订单吗？', 889 + content: '确定要删除这个订单吗？删除后无法恢复。',
661 - success: (res) => { 890 + confirmText: '删除',
662 - if (res.confirm) { 891 + cancelText: '取消'
663 - // TODO: 实现删除订单逻辑
664 - Taro.showToast({
665 - title: '订单已删除',
666 - icon: 'success'
667 }) 892 })
893 +
894 + if (result.confirm) {
895 + await performDeleteOrder(orderId)
668 } 896 }
897 + } catch (error) {
898 + // 用户取消删除或其他错误
899 + // console.log('删除操作被取消或出错:', error)
669 } 900 }
901 +}
902 +
903 +/**
904 + * 执行删除订单操作
905 + * @param {string} orderId - 订单ID
906 + */
907 +const performDeleteOrder = async (orderId) => {
908 + // 设置删除状态，用于显示加载效果
909 + deletingOrderId.value = orderId
910 +
911 + try {
912 + // 真实的API调用（当前注释掉，使用模拟数据）
913 + // const response = await deleteOrderAPI({ orderId })
914 + // if (response.success) {
915 + // // API删除成功后的处理
916 + // const orders = viewMode.value === 'bought' ? boughtOrders : soldOrders
917 + // const orderIndex = orders.value.findIndex(order => order.id === orderId)
918 + // if (orderIndex !== -1) {
919 + // orders.value.splice(orderIndex, 1)
920 + // }
921 + // Taro.showToast({
922 + // title: response.message || '订单删除成功',
923 + // icon: 'success',
924 + // duration: 2000
925 + // })
926 + // } else {
927 + // throw new Error(response.message || '删除失败')
928 + // }
929 +
930 + // 模拟API调用延迟（开发阶段使用）
931 + await new Promise(resolve => setTimeout(resolve, 1000))
932 +
933 + // 从本地数据中移除订单
934 + const orders = viewMode.value === 'bought' ? boughtOrders : soldOrders
935 + const orderIndex = orders.value.findIndex(order => order.id === orderId)
936 +
937 + if (orderIndex !== -1) {
938 + orders.value.splice(orderIndex, 1)
939 +
940 + Taro.showToast({
941 + title: '订单删除成功',
942 + icon: 'success',
943 + duration: 2000
670 }) 944 })
945 + } else {
946 + throw new Error('订单不存在')
947 + }
948 +
949 + } catch (error) {
950 + // console.error('删除订单失败:', error)
951 +
952 + Taro.showToast({
953 + title: error.message || '删除失败，请重试',
954 + icon: 'none',
955 + duration: 2000
956 + })
957 + } finally {
958 + // 清除删除状态
959 + deletingOrderId.value = ''
960 + }
671 } 961 }
672 962
673 // 页面加载时的初始化 963 // 页面加载时的初始化
......