# Implementation Tasks

## 1. Type Definitions

- [ ] 1.1 Create `src/types/api/order.ts` with order types, enums, and interfaces
- [ ] 1.2 Add order type exports to `src/types/api/index.ts`

## 2. API Service Layer

- [ ] 2.1 Create `src/api/modules/order.ts` with OrderService class
- [ ] 2.2 Implement `getOrders()` - list orders with pagination and filters
- [ ] 2.3 Implement `getOrderById()` - fetch single order details
- [ ] 2.4 Implement `createOrder()` - create new order
- [ ] 2.5 Implement `cancelOrder()` - cancel pending order
- [ ] 2.6 Add OrderService export to `src/api/modules/index.ts`

## 3. Internationalization

- [ ] 3.1 Add Chinese translations to `src/locales/langs/zh.json` under `orderManagement` namespace
- [ ] 3.2 Add English translations to `src/locales/langs/en.json` under `orderManagement` namespace
- [ ] 3.3 Include keys for: menu titles, page titles, table columns, search fields, statuses, actions, messages

## 4. Routing Configuration

- [ ] 4.1 Add `OrderList` route alias to `src/router/routesAlias.ts`
- [ ] 4.2 Add order management route group to `src/router/routes/asyncRoutes.ts`
- [ ] 4.3 Configure route with proper icon, title, and keepAlive settings

## 5. UI Components

- [ ] 5.1 Create `src/views/order-management/order-list/index.vue` component skeleton
- [ ] 5.2 Implement search bar with filters (order_no, payment_status, order_type, date range)
- [ ] 5.3 Implement data table with columns (ID, order_no, buyer info, order type, payment status, total amount, created_at, actions)
- [ ] 5.4 Add pagination controls
- [ ] 5.5 Implement view details action (navigate to detail view or show in dialog)
- [ ] 5.6 Implement cancel order action with confirmation dialog
- [ ] 5.7 Add status badges and formatters for payment status and order type
- [ ] 5.8 Format currency amounts (分 to 元 conversion)
- [ ] 5.9 Implement create order button and dialog (optional - can be phase 2)

## 6. Business Logic

- [ ] 6.1 Implement order list data fetching with loading states
- [ ] 6.2 Implement search and filter logic
- [ ] 6.3 Implement pagination handlers
- [ ] 6.4 Implement cancel order with optimistic UI updates
- [ ] 6.5 Add error handling and user feedback (ElMessage)
- [ ] 6.6 Implement date/time formatting using project utilities

## 7. Validation & Polish

- [ ] 7.1 Test search and filtering functionality
- [ ] 7.2 Test pagination and data refresh
- [ ] 7.3 Test cancel order flow
- [ ] 7.4 Verify i18n coverage (switch language and check all text)
- [ ] 7.5 Verify responsive layout and table column configuration
- [ ] 7.6 Code review and cleanup (remove console logs, verify TypeScript types)