shop-toy/interaction-flow.md

应结账款页面交互流程图

navigationStyle: 'custom',

用户操作流程

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

数据流图

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[刷新页面数据]

组件状态管理

stateDiagram-v2
    [*] --> NormalMode
    NormalMode --> SelectionMode: 点击消账按钮
    SelectionMode --> NormalMode: 点击取消
    SelectionMode --> NormalMode: 消账完成
    SelectionMode --> SelectionMode: 选择/取消选择订单
    SelectionMode --> SelectionMode: 全选/取消全选
    
    state SelectionMode {
        [*] --> NoSelection
        NoSelection --> HasSelection: 选择订单
        HasSelection --> NoSelection: 取消选择所有订单
        HasSelection --> HasSelection: 继续选择订单
    }

条件判断逻辑

flowchart TD
    A[订单点击事件] --> B{是否在选择模式?}
    B -->|否| C[忽略点击]
    B -->|是| D{订单状态是否为未结或逾期?}
    D -->|否| E[忽略点击]
    D -->|是| F{订单是否已选中?}
    F -->|是| G[取消选中订单]
    F -->|否| H[选中订单]
    G --> I[更新选中列表]
    H --> I
    I --> J[更新UI显示]