## 4. 界面设计

### 4.1 客户端小程序

#### 4.1.1 首页
- **布局**: 卡片式布局，顶部轮播图，中部快捷入口，底部订单概览
- **主要元素**:
  - 待处理订单提醒卡片
  - 运输中订单状态卡片
  - 快捷功能入口图标
  - 系统公告栏
  - 数据统计概览图表
- **交互方式**:
  - 下拉刷新
  - 点击卡片进入详情
  - 消息通知提醒

#### 4.1.2 订单列表页
- **布局**: 顶部筛选栏，列表式展示订单
- **主要元素**:
  - 订单状态分类标签
  - 订单搜索框
  - 订单卡片列表
  - 订单状态标签
  - 订单关键信息摘要
- **交互方式**:
  - 左右滑动切换订单状态
  - 点击订单进入详情
  - 下拉刷新，上拉加载更多

#### 4.1.3 订单详情页
- **布局**: 分段式布局，顶部订单基本信息，中部状态流转，底部操作按钮
- **主要元素**:
  - 订单号和状态标签
  - 牛只信息卡片
  - 供应商信息卡片
  - 订单状态时间轴
  - 相关文件列表
  - 操作按钮组
- **交互方式**:
  - 点击查看大图
  - 点击查看文件详情
  - 滑动查看更多信息

#### 4.1.4 运输跟踪页
- **布局**: 上部地图区域，下部信息区域
- **主要元素**:
  - 地图控件
  - 车辆位置标记
  - 运输轨迹线
  - 预计到达时间
  - 牛只状态信息
  - 视频查看入口
- **交互方式**:
  - 地图缩放和平移
  - 点击查看详细位置
  - 点击查看实时视频

#### 4.1.5 验收确认页
- **布局**: 表单式布局
- **主要元素**:
  - 订单基本信息
  - 验收数量和重量输入框
  - 验收结果选择器
  - 照片/视频上传区
  - 验收意见输入框
  - 提交按钮
- **交互方式**:
  - 表单填写
  - 媒体文件上传
  - 提交验证

#### 4.1.6 结算支付页
- **布局**: 卡片式布局
- **主要元素**:
  - 结算金额明细
  - 支付方式选择
  - 支付按钮
  - 支付状态提示
  - 发票信息填写
- **交互方式**:
  - 选择支付方式
  - 确认支付
  - 查看支付结果

### 4.2 供应商小程序

#### 4.2.1 首页
- **布局**: 网格式布局，顶部通知栏，中部功能入口，底部数据概览
- **主要元素**:
  - 新订单通知提醒
  - 待处理事项提醒
  - 功能模块入口
  - 订单统计数据
  - 快捷操作按钮
- **交互方式**:
  - 点击进入功能模块
  - 下拉刷新
  - 消息通知提醒

#### 4.2.2 订单管理页
- **布局**: 标签页+列表式布局
- **主要元素**:
  - 订单状态标签页
  - 订单搜索框
  - 订单列表
  - 订单操作按钮
- **交互方式**:
  - 切换标签页
  - 点击订单查看详情
  - 操作按钮交互

#### 4.2.3 牛只信息页
- **布局**: 表单式布局
- **主要元素**:
  - 牛只基本信息表单
  - 检疫证明上传区
  - 牛只照片上传区
  - 批量导入按钮
  - 提交按钮
- **交互方式**:
  - 表单填写
  - 文件上传
  - 批量导入

#### 4.2.4 装车管理页
- **布局**: 步骤式布局
- **主要元素**:
  - 装车步骤指示器
  - 装车前准备检查表
  - 视频录制按钮
  - 照片拍摄按钮
  - 装车信息表单
  - 提交按钮
- **交互方式**:
  - 步骤切换
  - 视频录制
  - 照片拍摄
  - 表单填写

### 4.3 司机小程序

#### 4.3.1 首页
- **布局**: 卡片式布局，顶部任务提醒，中部地图区域，底部快捷功能
- **主要元素**:
  - 当前任务卡片
  - 简易地图控件
  - 状态上报按钮
  - 异常上报按钮
  - 快捷联系按钮
- **交互方式**:
  - 点击任务进入详情
  - 点击地图查看全屏
  - 快捷按钮操作

#### 4.3.2 任务详情页
- **布局**: 分段式布局
- **主要元素**:
  - 任务基本信息
  - 装车地点和目的地
  - 联系人信息
  - 牛只信息
  - 任务状态时间轴
  - 操作按钮组
- **交互方式**:
  - 点击查看地图导航
  - 点击拨打电话
  - 状态更新操作

#### 4.3.3 位置上报页
- **布局**: 地图为主的布局
- **主要元素**:
  - 全屏地图
  - 当前位置标记
  - 目的地标记
  - 路线规划
  - 位置上报状态
  - 手动上报按钮
- **交互方式**:
  - 地图操作
  - 手动上报位置
  - 查看上报历史

#### 4.3.4 状态上报页
- **布局**: 表单式布局
- **主要元素**:
  - 牛只状态选择器
  - 视频录制按钮
  - 照片拍摄按钮
  - 备注输入框
  - 提交按钮
- **交互方式**:
  - 状态选择
  - 视频录制
  - 照片拍摄
  - 表单提交

#### 4.3.5 交付确认页
- **布局**: 步骤式布局
- **主要元素**:
  - 到达确认步骤
  - 卸货记录步骤
  - 交接确认步骤
  - 电子签名区域
  - 完成按钮
- **交互方式**:
  - 步骤切换
  - 电子签名
  - 表单填写

### 4.4 内部员工小程序

#### 4.4.1 首页
- **布局**: 仪表盘式布局
- **主要元素**:
  - 业务数据概览
  - 待处理事项提醒
  - 异常情况预警
  - 功能模块入口
  - 系统公告
- **交互方式**:
  - 点击进入功能模块
  - 点击处理待办事项
  - 查看详细数据

#### 4.4.2 订单监控页
- **布局**: 表格式布局
- **主要元素**:
  - 高级搜索筛选区
  - 订单列表表格
  - 订单状态标签
  - 操作按钮组
- **交互方式**:
  - 条件筛选
  - 点击查看详情
  - 批量操作

#### 4.4.3 运输监控页
- **布局**: 地图为主的布局
- **主要元素**:
  - 全屏地图
  - 多车辆位置标记
  - 车辆筛选控件
  - 车辆详情侧边栏
  - 异常标记
- **交互方式**:
  - 地图缩放和平移
  - 点击车辆查看详情
  - 筛选车辆显示

#### 4.4.4 数据管理页
- **布局**: 标签页+表格式布局
- **主要元素**:
  - 数据类型标签页
  - 数据列表表格
  - 添加/编辑按钮
  - 导入/导出按钮
- **交互方式**:
  - 切换数据类型
  - 增删改查操作
  - 数据导入导出

## 5. 交互流程

### 5.1 采购订单流程
```mermaid
sequenceDiagram
    participant Client as 客户端小程序
    participant Staff as 员工小程序
    participant Supplier as 供应商小程序
    participant Driver as 司机小程序
    
    Client->>Client: 创建采购订单
    Client->>Staff: 提交订单审核
    Staff->>Staff: 审核订单
    Staff->>Supplier: 转发订单
    Supplier->>Supplier: 确认接单
    Supplier->>Supplier: 准备牛只
    Supplier->>Supplier: 上传检疫证明
    Supplier->>Driver: 通知装车
    Driver->>Driver: 上传车辆信息
    Driver->>Driver: 上传消毒证明
    Driver->>Supplier: 到达装车地点
    Supplier->>Supplier: 记录装车过程
    Driver->>Driver: 确认装车完成
    Driver->>Driver: 开始运输
    Driver->>Driver: 定时上报位置和状态
    Client->>Client: 实时查看运输状态
    Driver->>Client: 到达目的地
    Client->>Client: 验收确认
    Client->>Client: 支付结算
    Staff->>Staff: 完成订单
```

### 5.2 牛只核验流程
```mermaid
flowchart TD
    A[供应商登录小程序] --> B[选择订单]
    B --> C[填写牛只信息]
    C --> D[上传检疫证明]
    D --> E{系统自动检查}
    E -- 合格 --> F[通知司机准备装车]
    E -- 不合格 --> G[系统提示修正]
    G --> D
    F --> H[司机上传车辆信息]
    H --> I[司机上传消毒证明]
    I --> J{员工小程序审核}
    J -- 通过 --> K[开始装车流程]
    J -- 不通过 --> L[通知整改]
    L --> I
    K --> M[完成核验]
```

### 5.3 运输跟踪流程
```mermaid
sequenceDiagram
    participant Driver as 司机小程序
    participant System as 系统后台
    participant Client as 客户端小程序
    participant Staff as 员工小程序
    
    Driver->>System: 开始运输，启动位置跟踪
    loop 每10分钟
        Driver->>System: 自动上报GPS位置
        System->>Client: 更新运输轨迹
        System->>Staff: 更新运输监控
    end
    
    Driver->>System: 定时上传牛只状态
    System->>Client: 推送状态更新
    System->>Staff: 更新状态监控
    
    alt 异常情况
        Driver->>System: 上报异常情况
        System->>Client: 推送异常警报
        System->>Staff: 推送异常警报
        Staff->>Driver: 远程指导处理
    end
    
    Driver->>System: 到达目的地
    System->>Client: 推送到达通知
    Client->>Driver: 确认接收
    Driver->>System: 完成运输任务
```

### 5.4 验收结算流程
```mermaid
sequenceDiagram
    participant Driver as 司机小程序
    participant Client as 客户端小程序
    participant System as 系统后台
    participant Staff as 员工小程序
    
    Driver->>Client: 到达通知
    Client->>Client: 验收牛只
    Client->>System: 提交验收结果
    
    alt 验收合格
        System->>System: 自动计算结算金额
        System->>Client: 生成结算单
        Client->>Client: 确认结算单
        Client->>System: 在线支付
        System->>Staff: 确认收款
        Staff->>System: 完成订单
    else 验收异常
        Client->>System: 提交异常报告
        System->>Staff: 异常处理通知
        Staff->>Staff: 处理异常
        Staff->>System: 调整结算金额
        System->>Client: 更新结算单
        Client->>System: 确认并支付
    end