更新项目文档，明确小程序独立架构和技术选型

2025-09-17 23:01:14 +08:00
parent aa1e08baa5
commit eeedbebb9c
20 changed files with 2020 additions and 116 deletions
--- a/mini_program/需求文档-第3部分.md
+++ b/mini_program/需求文档-第3部分.md
@@ -0,0 +1,372 @@
+## 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