diff --git a/interaction-flow.md b/interaction-flow.md new file mode 100644 index 0000000..06849a8 --- /dev/null +++ b/interaction-flow.md @@ -0,0 +1,89 @@ +# 应结账款页面交互流程图 + +## 用户操作流程 + +```mermaid +flowchart TD + A[用户进入应结账款页面] --> B[查看商户列表] + B --> C[点击商户头部的"消账"按钮] + C --> D[进入选择模式] + + D --> E{用户操作} + E -->|点击订单| F[选择/取消选择订单] + E -->|点击全选| G[全选/取消全选] + E -->|点击取消| H[退出选择模式] + E -->|选择订单后点击进行消账| I[打开消账弹窗] + + F --> J[更新已选数量和金额] + G --> J + J --> K{是否有选中订单} + K -->|有| L[显示"进行消账(X)"按钮] + K -->|无| M[显示"取消"按钮] + + L --> N[点击"进行消账"] + N --> I + I --> O[填写消账信息] + O --> P[提交消账申请] + P --> Q[消账成功] + Q --> R[退出选择模式] + R --> S[刷新列表] + + H --> T[返回正常模式] + M --> T + T --> B + S --> B +``` + +## 数据流图 + +```mermaid +flowchart LR + A[用户点击消账] --> B[selectionMode[merchantId] = true] + B --> C[显示选择界面] + + C --> D[用户选择订单] + D --> E[selectedOrders[merchantId] 更新] + E --> F[计算选中数量和金额] + F --> G[更新按钮状态] + + G --> H[点击进行消账] + H --> I[获取选中订单数据] + I --> J[调用消账API] + J --> K[消账完成] + K --> L[selectionMode[merchantId] = false] + L --> M[刷新页面数据] +``` + +## 组件状态管理 + +```mermaid +stateDiagram-v2 + [*] --> NormalMode + NormalMode --> SelectionMode: 点击消账按钮 + SelectionMode --> NormalMode: 点击取消 + SelectionMode --> NormalMode: 消账完成 + SelectionMode --> SelectionMode: 选择/取消选择订单 + SelectionMode --> SelectionMode: 全选/取消全选 + + state SelectionMode { + [*] --> NoSelection + NoSelection --> HasSelection: 选择订单 + HasSelection --> NoSelection: 取消选择所有订单 + HasSelection --> HasSelection: 继续选择订单 + } +``` + +## 条件判断逻辑 + +```mermaid +flowchart TD + A[订单点击事件] --> B{是否在选择模式?} + B -->|否| C[忽略点击] + B -->|是| D{订单状态是否为未结或逾期?} + D -->|否| E[忽略点击] + D -->|是| F{订单是否已选中?} + F -->|是| G[取消选中订单] + F -->|否| H[选中订单] + G --> I[更新选中列表] + H --> I + I --> J[更新UI显示] \ No newline at end of file diff --git a/settlement-redesign-plan.md b/settlement-redesign-plan.md new file mode 100644 index 0000000..3aac42a --- /dev/null +++ b/settlement-redesign-plan.md @@ -0,0 +1,342 @@ +# 应结账款页面重构方案 + +## 需求概述 + +1. 将商户卡片中的"批量消账"按钮改为"消账" +2. 移除每个订单的"申请消账"按钮 +3. 点击"消账"按钮后，进入选择模式，可以选择该商户下的多个订单 +4. 选择订单后，按钮文本变为"进行消账(X)"，X为选择的订单数量 +5. 添加全选/取消全选功能 +6. 显示已选订单的汇总金额 +7. 限制只能选择未结和逾期状态的订单 +8. 点击"进行消账"后，执行批量消账逻辑 + +## 数据结构设计 + +### 新增状态变量 + +```typescript +// 选择模式状态 +const selectionMode = ref>({}) // 记录每个商户是否处于选择模式 +const selectedOrders = ref>({}) // 记录每个商户选中的订单ID列表 +``` + +### 计算属性 + +```typescript +// 计算每个商户选中的订单数量 +const selectedCount = computed(() => { + return (merchantId: string) => selectedOrders.value[merchantId]?.length || 0 +}) + +// 计算每个商户选中的订单总金额 +const selectedAmount = computed(() => { + return (merchantId: string) => { + const group = groupedByMerchant.value.find(g => g.merchantId === merchantId) + if (!group) return 0 + + const selectedIds = selectedOrders.value[merchantId] || [] + return group.settlements + .filter(item => selectedIds.includes(item.id)) + .reduce((sum, item) => sum + item.amount, 0) + } +}) + +// 计算每个商户是否全选 +const isAllSelected = computed(() => { + return (merchantId: string) => { + const group = groupedByMerchant.value.find(g => g.merchantId === merchantId) + if (!group) return false + + const selectableOrders = group.settlements.filter( + item => item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE + ) + const selectedIds = selectedOrders.value[merchantId] || [] + + return selectableOrders.length > 0 && selectableOrders.every(item => selectedIds.includes(item.id)) + } +}) +``` + +## UI 设计 + +### 1. 商户头部修改 + +```vue + + + + + + + + + + 消账 + + + + + + +``` + +### 2. 订单列表修改 + +```vue + + + + + + + + + + + + + + + + +``` + +## 功能实现 + +### 1. 进入选择模式 + +```typescript +function enterSelectionMode(merchantId: string) { + selectionMode.value[merchantId] = true + selectedOrders.value[merchantId] = [] +} +``` + +### 2. 退出选择模式 + +```typescript +function exitSelectionMode(merchantId: string) { + selectionMode.value[merchantId] = false + selectedOrders.value[merchantId] = [] +} +``` + +### 3. 处理订单点击 + +```typescript +function handleOrderClick(merchantId: string, orderId: string, status: SettlementStatus) { + // 只有在选择模式下且订单状态为未结或逾期时才能选择 + if (!selectionMode.value[merchantId]) return + if (status !== SettlementStatus.UNSETTLED && status !== SettlementStatus.OVERDUE) return + + const selected = selectedOrders.value[merchantId] || [] + const index = selected.indexOf(orderId) + + if (index > -1) { + // 取消选择 + selected.splice(index, 1) + } else { + // 添加选择 + selected.push(orderId) + } + + selectedOrders.value[merchantId] = selected +} +``` + +### 4. 全选/取消全选 + +```typescript +function toggleSelectAll(merchantId: string) { + const group = groupedByMerchant.value.find(g => g.merchantId === merchantId) + if (!group) return + + const selectableOrders = group.settlements.filter( + item => item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE + ) + + if (isAllSelected.value(merchantId)) { + // 取消全选 + selectedOrders.value[merchantId] = [] + } else { + // 全选 + selectedOrders.value[merchantId] = selectableOrders.map(item => item.id) + } +} +``` + +### 5. 批量消账 + +```typescript +function handleBatchWriteOff(merchantId: string) { + const selectedIds = selectedOrders.value[merchantId] || [] + if (selectedIds.length === 0) return + + const group = groupedByMerchant.value.find(g => g.merchantId === merchantId) + if (!group) return + + // 获取选中的订单 + const selectedSettlements = group.settlements.filter(item => selectedIds.includes(item.id)) + + currentSettlement.value = null + currentMerchantSettlements.value = selectedSettlements + isBatchMode.value = true + writeOffVisible.value = true + + // 退出选择模式 + exitSelectionMode(merchantId) +} +``` + +## 样式设计 + +### 1. 选择模式样式 + +```scss +.order-item { + &.selection-mode { + display: flex; + align-items: flex-start; + gap: 20rpx; + padding: 24rpx; + + .checkbox { + width: 40rpx; + height: 40rpx; + border-radius: 50%; + border: 2rpx solid #ddd; + display: flex; + align-items: center; + justify-content: center; + margin-top: 10rpx; + flex-shrink: 0; + + .i-carbon-checkmark-outline { + font-size: 24rpx; + color: #999; + } + + .i-carbon-checkmark-filled { + font-size: 24rpx; + color: $primary; + } + } + + &.selected .checkbox { + background: rgba($primary, 0.1); + border-color: $primary; + } + + &.disabled { + opacity: 0.5; + pointer-events: none; + } + + .order-content { + flex: 1; + } + } +} +``` + +### 2. 选择控制区域样式 + +```scss +.selection-controls { + display: flex; + flex-direction: column; + gap: 12rpx; + align-items: flex-end; + + .select-all-btn { + display: flex; + align-items: center; + gap: 6rpx; + padding: 8rpx 16rpx; + background: rgba($primary, 0.05); + border-radius: 20rpx; + color: $primary; + font-size: 22rpx; + + .i-carbon-checkmark-outline, + .i-carbon-checkmark-filled { + font-size: 24rpx; + } + } + + .selected-info { + text-align: right; + font-size: 22rpx; + + .amount { + display: block; + font-size: 26rpx; + font-weight: 600; + color: $danger; + } + } + + .cancel-btn { + padding: 8rpx 20rpx; + background: rgba($text-2, 0.1); + border-radius: 20rpx; + color: $text-2; + font-size: 24rpx; + } + + .batch-btn-small.active { + background: $primary; + color: white; + } +} +``` + +## 交互流程 + +1. 用户点击商户头部的"消账"按钮 +2. 进入选择模式，显示选择框和全选按钮 +3. 用户可以选择/取消选择符合条件的订单 +4. 选择订单后，显示已选数量和汇总金额 +5. 点击"进行消账"按钮，打开消账弹窗 +6. 消账完成后退出选择模式，刷新列表 + +## 注意事项 + +1. 只有未结和逾期状态的订单才能被选择 +2. 选择模式下，其他商户的卡片保持正常状态 +3. 消账弹窗需要支持批量处理多个订单 +4. 需要处理选择状态的响应式更新 \ No newline at end of file diff --git a/src/components/finance/WriteOffRecord.vue b/src/components/finance/WriteOffRecord.vue new file mode 100644 index 0000000..25662f4 --- /dev/null +++ b/src/components/finance/WriteOffRecord.vue @@ -0,0 +1,390 @@ + + + + + \ No newline at end of file diff --git a/src/pages/finance/settlement.vue b/src/pages/finance/settlement.vue index eb59e58..a9324f0 100644 --- a/src/pages/finance/settlement.vue +++ b/src/pages/finance/settlement.vue @@ -1,7 +1,9 @@