372 lines
9.1 KiB
Markdown
372 lines
9.1 KiB
Markdown
|
## 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
|