Merge branch 'master' of https://git.mmlizi.com/lizi/shop-toy

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显示]