9.1 KiB
9.1 KiB
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 采购订单流程
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 牛只核验流程
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 运输跟踪流程
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 验收结算流程
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