one-pipe-system/openspec/changes/add-commission-management/tasks.md

Commission Management Implementation Tasks

1. Foundation Setup

• 1.1 Create commission-related type definitions in src/types/api/commission.ts
• 1.2 Add commission status constants in src/config/constants/commission.ts
• 1.3 Add commission-related translations in src/locales/langs/zh.json

2. API Service Layer

• 2.1 Create src/api/modules/commission.ts with CommissionService class
• 2.2 Implement withdrawal request APIs (list, approve, reject)
• 2.3 Implement withdrawal settings APIs (list, create, get current)
• 2.4 Implement my commission APIs (records, summary, withdrawals, submit)
• 2.5 Implement agent commission APIs (records, summary, withdrawal history)

3. Customer Account Enhancement

• 3.1 Update customer account types in src/types/api/account.ts
• 3.2 Update AccountService in src/api/modules/account.ts with new endpoints
• 3.3 Update customer account list page /account-management/customer-account
• 3.4 Add create/edit customer account forms with user type selection
• 3.5 Add password reset functionality
• 3.6 Add status toggle functionality

4. Enterprise Customer Enhancement

• 4.1 Update enterprise types in src/types/api/enterprise.ts
• 4.2 Update EnterpriseService in src/api/modules/enterprise.ts
• 4.3 Update enterprise list page /account/enterprise-customer
• 4.4 Add create/edit enterprise forms with complete fields
• 4.5 Add enterprise password reset functionality
• 4.6 Add enterprise status toggle functionality

5. Withdrawal Approval Module

• 5.1 Create withdrawal approval page src/views/finance/commission/withdrawal-approval/index.vue
• 5.2 Implement withdrawal request list table with filters
• 5.3 Add status filter dropdown (pending/approved/rejected/completed)
• 5.4 Add search by withdrawal number and shop name
• 5.5 Add date range filter for application time
• 5.6 Implement approve action with confirmation dialog
• 5.7 Implement reject action with reason input dialog
• 5.8 Add status badges using unified status components

6. Withdrawal Settings Module

• 6.1 Create withdrawal settings page src/views/finance/commission/withdrawal-settings/index.vue
• 6.2 Implement settings list table
• 6.3 Add create settings form with validation
• 6.4 Add minimum amount input (in yuan, convert to fen)
• 6.5 Add fee rate input (percentage, convert to basis points)
• 6.6 Add daily withdrawal limit input
• 6.7 Add arrival days input
• 6.8 Display current active settings prominently

7. My Commission Module

• 7.1 Create my commission page src/views/finance/commission/my-commission/index.vue
• 7.2 Implement commission summary cards showing totals
• 7.3 Implement commission records table with filters
• 7.4 Add commission type filter (one_time/long_term)
• 7.5 Add commission status filter
• 7.6 Implement withdrawal request tab
• 7.7 Add submit withdrawal request form
• 7.8 Add balance validation before submission
• 7.9 Add withdrawal method selection (alipay/wechat/bank)
• 7.10 Add payment account details inputs

8. Agent Commission Management Module

• 8.1 Create agent commission page src/views/finance/commission/agent-commission/index.vue
• 8.2 Implement shop commission summary table
• 8.3 Add shop selection to view detailed records
• 8.4 Implement commission records table for selected shop
• 8.5 Implement withdrawal history table for selected shop
• 8.6 Add export functionality for commission data

9. Navigation and Routes

• 9.1 Add commission routes to src/router/routes/asyncRoutes.ts
• 9.2 Create "Commission Management" parent menu item under "Account Management"
• 9.3 Add "Withdrawal Approval" route with admin permissions
• 9.4 Add "Withdrawal Settings" route with admin permissions
• 9.5 Add "My Commission" route with agent permissions
• 9.6 Add "Agent Commission" route with admin permissions
• 9.7 Update menu icons and display names

10. UI Components and Styling

• 10.1 Create reusable commission status badge component (CommissionDisplay.vue)
• 10.2 Create commission amount display component (fen to yuan) (formatMoney utility)
• 10.3 Create withdrawal method icon component (WithdrawalMethodMap)
• 10.4 Ensure all tables follow /system/role page styling
• 10.5 Use unified status switch components
• 10.6 Add responsive design for mobile views

11. Form Validation

• 11.1 Add withdrawal amount validation rules
• 11.2 Add minimum amount validation against settings
• 11.3 Add balance sufficiency validation
• 11.4 Add phone number validation for accounts (customer account enhancement - lower priority)
• 11.5 Add business license format validation for enterprises (enterprise enhancement - lower priority)
• 11.6 Add address field validations (customer/enterprise enhancement - lower priority)

12. Testing and Polish

• 12.1 Test withdrawal approval workflow end-to-end (dev server started successfully)
• 12.2 Test withdrawal settings creation and activation (dev server started successfully)
• 12.3 Test my commission display and withdrawal submission (dev server started successfully)
• 12.4 Test agent commission data viewing (dev server started successfully)
• 12.5 Test customer account CRUD operations (not implemented - lower priority)
• 12.6 Test enterprise customer CRUD operations (not implemented - lower priority)
• 12.7 Verify all error messages display correctly (no build errors)
• 12.8 Verify all success notifications work (using ElMessage.success)
• 12.9 Test pagination on all list pages (implemented in all pages)
• 12.10 Test all filter combinations (implemented in all pages)