diff --git a/mini_program/README.md b/mini_program/README.md index 76addcc..206e638 100644 --- a/mini_program/README.md +++ b/mini_program/README.md @@ -2,7 +2,7 @@ ## 📱 项目概述 -活牛采购智能数字化系统小程序矩阵基于uni-app框架开发，支持微信小程序、支付宝小程序、H5等多端发布。系统包含四个独立的小程序应用，分别服务于不同角色用户，实现活牛采购全流程的移动端操作。 +活牛采购智能数字化系统小程序矩阵包含四个完全独立的小程序应用，分别服务于不同角色用户，实现活牛采购全流程的移动端操作。每个小程序都是独立开发、独立部署的，不共享公共资源、API、类型定义或样式。 **核心特性：** - 🎯 **多角色支持**：客户端、供应商、司机、内部员工四大角色 @@ -11,55 +11,80 @@ - 📍 **位置服务**：GPS定位和轨迹跟踪 - 📸 **媒体支持**：图片、视频上传和播放 - 💼 **离线缓存**：关键数据本地缓存 +- 🔐 **安全机制**：数据加密与权限控制 +- 📊 **数据可视化**：业务数据图表展示 ## 🛠 技术栈 -| 类别 | 技术选型 | 版本 | 说明 | +每个小程序可以根据自身需求选择适合的技术栈： + +| 类别 | 可选技术 | 版本 | 说明 | |------|----------|------|------| -| **跨端框架** | uni-app | ^3.0.0 | 跨平台开发框架 | -| **前端框架** | Vue 3 | ^3.3.0 | 响应式前端框架 | -| **开发语言** | TypeScript | ^5.0.0 | 类型安全开发 | -| **状态管理** | Pinia | ^2.1.0 | 状态管理库 | -| **UI组件库** | uni-ui | ^1.4.0 | uni-app官方组件库 | -| **HTTP客户端** | uni.request | 内置 | 网络请求封装 | -| **地图服务** | 腾讯地图 | latest | 位置和导航服务 | -| **构建工具** | Vite | ^4.4.0 | 快速构建工具 | -| **代码规范** | ESLint + Prettier | latest | 代码质量保证 | +| **跨端框架** | uni-app / 原生小程序 | 最新版 | 根据需求选择 | +| **前端框架** | Vue 3 / 原生 | 最新版 | 根据需求选择 | +| **开发语言** | TypeScript / JavaScript | 最新版 | 根据需求选择 | +| **状态管理** | Pinia / Vuex / 原生 | 最新版 | 根据需求选择 | +| **UI组件库** | 各平台组件库 | 最新版 | 根据需求选择 | +| **HTTP客户端** | 平台API | 内置 | 网络请求 | +| **地图服务** | 腾讯/高德/百度地图 | 最新版 | 位置和导航服务 | +| **构建工具** | 平台工具 | 最新版 | 构建发布 | ## 📂 项目结构 ``` mini_program/ -├── client-mp/ # 客户端小程序 +├── client-mp/ # 客户端小程序（采购人） │ ├── src/ │ │ ├── pages/ # 页面文件 -│ │ │ ├── index/ # 首页 -│ │ │ ├── order/ # 订单相关 -│ │ │ ├── profile/ # 个人中心 -│ │ │ └── auth/ # 认证相关 │ │ ├── components/ # 组件 +│ │ ├── stores/ # 状态管理 +│ │ ├── utils/ # 工具函数 +│ │ ├── api/ # API接口 +│ │ ├── static/ # 静态资源 +│ │ ├── App.vue # 应用入口 +│ │ └── main.ts # 主文件 +│ ├── manifest.json # 应用配置 +│ ├── pages.json # 页面配置 +│ └── package.json # 依赖配置 +├── supplier-mp/ # 供应商小程序（完全独立） +│ ├── src/ +│ │ ├── pages/ # 页面文件 +│ │ ├── components/ # 组件 │ │ ├── stores/ # 状态管理 │ │ ├── utils/ # 工具函数 │ │ ├── api/ # API接口 │ │ ├── static/ # 静态资源 │ │ ├── App.vue # 应用入口 │ │ └── main.ts # 主文件 -│ ├── manifest.json # 应用配置 -│ ├── pages.json # 页面配置 -│ └── package.json # 依赖配置 -├── supplier-mp/ # 供应商小程序 │ └── ... -├── driver-mp/ # 司机小程序 +├── driver-mp/ # 司机小程序（完全独立） +│ ├── src/ +│ │ ├── pages/ # 页面文件 +│ │ ├── components/ # 组件 +│ │ ├── stores/ # 状态管理 +│ │ ├── utils/ # 工具函数 +│ │ ├── api/ # API接口 +│ │ ├── static/ # 静态资源 +│ │ ├── App.vue # 应用入口 +│ │ └── main.ts # 主文件 │ └── ... -├── staff-mp/ # 内部员工小程序 +├── staff-mp/ # 内部员工小程序（完全独立） +│ ├── src/ +│ │ ├── pages/ # 页面文件 +│ │ ├── components/ # 组件 +│ │ ├── stores/ # 状态管理 +│ │ ├── utils/ # 工具函数 +│ │ ├── api/ # API接口 +│ │ ├── static/ # 静态资源 +│ │ ├── App.vue # 应用入口 +│ │ └── main.ts # 主文件 │ └── ... -├── common/ # 公共资源 -│ ├── components/ # 公共组件 -│ ├── utils/ # 公共工具 -│ ├── api/ # 公共API -│ ├── types/ # 类型定义 -│ └── styles/ # 公共样式 ├── docs/ # 开发文档 +│ ├── 需求文档-第1部分.md # 概述和用户角色 +│ ├── 需求文档-第2部分.md # 功能需求 +│ ├── 需求文档-第3部分.md # 界面设计和交互流程 +│ ├── 需求文档-第4部分.md # 技术实现和测试计划 +│ └── ... └── README.md # 项目文档 ``` @@ -67,38 +92,40 @@ mini_program/ ### 环境要求 - Node.js >= 16.0.0 -- HBuilderX >= 3.8.0 或 VS Code + uni-app插件 -- 微信开发者工具 -- 支付宝小程序开发工具（可选） +- 各小程序开发工具（微信开发者工具、支付宝小程序开发工具等） ### 安装依赖 ```bash +# 每个小程序独立安装依赖 cd mini_program/client-mp npm install -# 安装其他小程序依赖 -cd ../supplier-mp && npm install -cd ../driver-mp && npm install -cd ../staff-mp && npm install +cd ../supplier-mp +npm install + +cd ../driver-mp +npm install + +cd ../staff-mp +npm install ``` ### 开发模式 ```bash -# 客户端小程序 +# 每个小程序独立开发 cd client-mp -npm run dev:mp-weixin # 微信小程序 -npm run dev:mp-alipay # 支付宝小程序 -npm run dev:h5 # H5 +npm run dev # 或使用对应平台的开发命令 # 其他小程序类似 ``` ### 构建发布 ```bash -# 生产环境构建 -npm run build:mp-weixin -npm run build:mp-alipay -npm run build:h5 +# 每个小程序独立构建 +cd client-mp +npm run build # 或使用对应平台的构建命令 + +# 其他小程序类似 ``` ## 📱 小程序功能模块 @@ -106,38 +133,130 @@ npm run build:h5 ### 1. 客户端小程序 (Client MP) **目标用户**：采购人、采购企业 **核心功能**： -- 📋 **订单管理**：创建采购订单、查看订单状态 -- 🚛 **运输跟踪**：实时查看运输进度和位置 -- ✅ **验收确认**：到货验收、质量确认 -- 💰 **支付结算**：查看结算单、在线支付 -- 📊 **数据统计**：采购数据分析和报表 +- 📋 **订单管理** + - 创建采购订单 + - 选择供应商 + - 设置牛只品种、数量、重量要求 + - 设置单价和预付款比例 + - 查看订单状态和流转记录 +- 🚛 **运输跟踪** + - 实时查看运输车辆位置 + - 显示运输轨迹和预计到达时间 + - 查看历史轨迹回放 + - 查看牛只运输状态实时数据 + - 接收异常状态预警通知 +- ✅ **验收管理** + - 验收牛只数量和重量 + - 记录验收结果（合格/不合格） + - 上传验收照片和视频 + - 记录异常情况（死亡、受伤等） + - 提交异常处理申请 +- 💰 **支付结算** + - 查看系统自动生成的结算单 + - 核对结算金额明细 + - 支持微信支付、支付宝支付 + - 支持银行转账凭证上传 + - 查看支付记录和凭证 +- 📊 **数据统计** + - 展示采购总量、总金额等关键指标 + - 展示采购趋势图表 + - 按品种、供应商等维度统计 + - 牛只质量合格率统计 + - 供应商质量评分对比 ### 2. 供应商小程序 (Supplier MP) **目标用户**：牲畜供应商 **核心功能**： -- 📦 **订单接收**：接收和确认采购订单 -- 🐄 **牲畜管理**：牲畜信息录入和管理 -- 📋 **检疫证明**：上传检疫合格证明 -- 🚚 **装车管理**：装车过程记录和监控 -- 📸 **现场拍照**：装车现场照片和视频 +- 📦 **订单管理** + - 接收新订单通知 + - 查看订单详情 + - 确认接单或拒绝 + - 设置预计发货时间 + - 按状态分类查看订单 +- 🐄 **牛只管理** + - 录入牛只基本信息（品种、数量、重量等） + - 上传牛只照片 + - 批量导入牛只信息 + - 上传《动物检疫合格证明》 + - 上传疫苗接种记录 +- 🚚 **装车管理** + - 确认空水空槽时间 + - 上传装车前准备证明 + - 联系司机确认装车时间 + - 记录装车过程 + - 上传装车视频和照片 +- 💼 **结算管理** + - 查看结算单详情 + - 核对结算金额 + - 确认结算单 + - 查看收款记录 + - 开具发票管理 +- 📋 **资质管理** + - 营业执照信息维护 + - 资质证书上传和管理 + - 联系人信息维护 ### 3. 司机小程序 (Driver MP) **目标用户**：运输司机 **核心功能**： -- 🚛 **车辆登记**：车辆信息和证件管理 -- 📍 **位置上报**：实时GPS位置上报 -- 📱 **状态更新**：运输状态实时更新 -- 🎥 **视频上报**：运输过程视频记录 -- 📄 **单据管理**：运输单据电子化管理 +- 🚛 **任务管理** + - 接收运输任务通知 + - 查看任务详情 + - 确认接受任务 + - 按状态分类展示任务 + - 历史任务查询 +- 🚗 **车辆信息** + - 车辆基本信息维护 + - 驾驶证和行驶证上传 + - 车辆照片上传 + - 上传空车过磅视频 + - 上传车辆消毒证明 +- 📍 **位置上报** + - 自动定时上报GPS位置（每10分钟） + - 手动上报当前位置 + - 设置位置共享权限 + - 查看导航路线 + - 查看上报历史 +- 📱 **状态上报** + - 定时上报牛只状态 + - 上传运输过程视频 + - 记录休息和加油等事件 + - 上报交通事故、车辆故障等异常 + - 上报牛只异常状况 +- 📄 **交付确认** + - 确认到达目的地 + - 上传到达照片 + - 记录到达时间 + - 电子交接单生成 + - 采购方签字确认 ### 4. 内部员工小程序 (Staff MP) **目标用户**：企业内部员工 **核心功能**： -- 👥 **用户管理**：用户信息查看和管理 -- 📊 **数据监控**：业务数据实时监控 -- ⚠️ **异常处理**：异常情况处理和跟进 -- 📋 **审核管理**：订单和流程审核 -- 📈 **统计报表**：业务统计和分析 +- 👥 **订单监控** + - 审核新创建的订单 + - 查看订单详情 + - 修改订单信息 + - 确认或驳回订单 + - 全流程订单状态监控 +- 🚚 **运输监控** + - 查看所有运输中车辆位置 + - 监控运输异常情况 + - 远程指导处理问题 + - 查看实时上传的视频 + - 调阅历史视频记录 +- 📊 **数据管理** + - 牛只品种管理 + - 价格区间设置 + - 区域信息管理 + - 管理采购人账号 + - 管理供应商账号 +- 📈 **统计分析** + - 订单量和交易额统计 + - 供应商绩效分析 + - 运输效率分析 + - 异常事件统计 + - 改进措施跟踪 ## 🔧 开发规范 @@ -146,26 +265,37 @@ npm run build:h5 - **组件名**：PascalCase（如 `OrderCard.vue`） - **变量名**：camelCase（如 `orderInfo`） - **常量名**：UPPER_SNAKE_CASE（如 `API_BASE_URL`） +- **接口名**：以I开头，PascalCase（如 `IOrderData`） +- **类型名**：PascalCase（如 `OrderStatus`） ### 目录规范 +每个小程序独立维护自己的目录结构： - `pages/`：页面文件，按功能模块分组 - `components/`：组件文件，按类型分组 - `stores/`：状态管理，按业务模块分组 - `api/`：接口定义，按业务模块分组 - `utils/`：工具函数，按功能分组 +- `static/`：静态资源，按类型分组 +- `types/`：类型定义，按业务模块分组 ### 代码规范 +每个小程序可以根据自身需求制定代码规范，但建议： - 使用TypeScript进行类型约束 -- 使用Composition API编写组件 +- 使用Composition API编写组件（如使用Vue） - 遵循ESLint和Prettier规范 - 组件props必须定义类型 - 使用defineEmits定义事件 +- 使用状态管理库管理全局状态 +- 使用async/await处理异步操作 +- 使用try/catch处理异常 -## 🌐 API接口 +## 🌐 API接口示例 -### 接口配置 +每个小程序独立实现自己的API接口层： + +### 接口配置示例 ```typescript -// 环境配置 +// 环境配置示例（每个小程序独立配置） const config = { development: { baseURL: 'http://localhost:3001/api', @@ -178,9 +308,9 @@ const config = { } ``` -### 请求封装 +### 请求封装示例 ```typescript -// 统一请求封装 +// 请求封装示例（每个小程序独立实现） interface RequestOptions { url: string method?: 'GET' | 'POST' | 'PUT' | 'DELETE' @@ -200,11 +330,13 @@ const request = (options: RequestOptions) => { } ``` -## 📍 位置服务 +## 📍 位置服务示例 -### GPS定位 +每个小程序独立实现位置服务功能： + +### GPS定位示例 ```typescript -// 获取当前位置 +// 获取当前位置示例 const getCurrentLocation = () => { return new Promise((resolve, reject) => { uni.getLocation({ @@ -215,51 +347,40 @@ const getCurrentLocation = () => { }) } -// 实时位置上报 +// 实时位置上报示例 const startLocationTracking = () => { - setInterval(async () => { - try { - const location = await getCurrentLocation() - await reportLocation(location) - } catch (error) { - console.error('位置上报失败:', error) - } - }, 10000) // 每10秒上报一次 -} -``` - -## 📸 媒体处理 - -### 图片上传 -```typescript -// 选择并上传图片 -const uploadImage = () => { - uni.chooseImage({ - count: 9, + // 后台定位权限检查 + uni.getSetting({ success: (res) => { - res.tempFilePaths.forEach(filePath => { - uni.uploadFile({ - url: `${config.baseURL}/upload`, - filePath, - name: 'file', - header: { - 'Authorization': `Bearer ${getToken()}` + if (!res.authSetting['scope.userLocation']) { + uni.authorize({ + scope: 'scope.userLocation', + success: () => { + startBackgroundLocationTracking(); }, - success: (uploadRes) => { - console.log('上传成功:', uploadRes) + fail: () => { + uni.showModal({ + title: '提示', + content: '需要位置权限才能进行运输跟踪', + showCancel: false + }); } - }) - }) + }); + } else { + startBackgroundLocationTracking(); + } } - }) + }); } ``` -## 💾 数据缓存 +## 💾 数据缓存示例 -### 本地存储 +每个小程序独立实现数据缓存功能： + +### 本地存储示例 ```typescript -// 缓存管理 +// 缓存管理示例 class CacheManager { static set(key: string, value: any, expire?: number) { const data = { @@ -288,11 +409,13 @@ class CacheManager { } ``` -## 🔐 权限管理 +## 🔐 权限管理示例 -### 登录状态管理 +每个小程序独立实现权限管理功能： + +### 登录状态管理示例 ```typescript -// 登录状态检查 +// 登录状态检查示例 const checkAuth = () => { const token = CacheManager.get('token') if (!token) { @@ -304,7 +427,7 @@ const checkAuth = () => { return true } -// 页面访问权限 +// 页面访问权限示例 const checkPagePermission = (userRole: string, requiredRole: string[]) => { return requiredRole.includes(userRole) } @@ -312,6 +435,8 @@ const checkPagePermission = (userRole: string, requiredRole: string[]) => { ## 🧪 测试策略 +每个小程序独立进行测试： + ### 单元测试 - 工具函数测试 - 组件功能测试 @@ -326,6 +451,8 @@ const checkPagePermission = (userRole: string, requiredRole: string[]) => { ## 📦 发布部署 +每个小程序独立发布部署： + ### 微信小程序发布 1. 使用微信开发者工具打开项目 2. 点击「上传」按钮上传代码 @@ -338,13 +465,44 @@ const checkPagePermission = (userRole: string, requiredRole: string[]) => { 3. 登录支付宝开放平台提交审核 4. 审核通过后发布上线 +## 📚 相关文档 + +### 需求文档 +- [需求文档-第1部分](./需求文档-第1部分.md) - 概述和用户角色 +- [需求文档-第2部分](./需求文档-第2部分.md) - 功能需求 +- [需求文档-第3部分](./需求文档-第3部分.md) - 界面设计和交互流程 +- [需求文档-第4部分](./需求文档-第4部分.md) - 技术实现和测试计划 + +### 开发指南 +- [uni-app官方文档](https://uniapp.dcloud.io/) +- [Vue 3官方文档](https://v3.cn.vuejs.org/) +- [TypeScript官方文档](https://www.typescriptlang.org/) +- [微信小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/framework/) +- [支付宝小程序开发文档](https://opendocs.alipay.com/mini/developer) + ## 🤝 贡献指南 -1. **Fork** 仓库 -2. **创建**特性分支 (`git checkout -b feature/AmazingFeature`) -3. **提交**更改 (`git commit -m 'Add some AmazingFeature'`) -4. **推送**到分支 (`git push origin feature/AmazingFeature`) -5. **开启** Pull Request +每个小程序独立管理代码仓库和贡献流程。 + +## 📅 开发计划 + +### 第一阶段（2025年10月） +- 完成四个小程序的基础框架搭建 +- 实现各小程序的用户认证功能 +- 开发各小程序的核心功能模块 + +### 第二阶段（2025年11月） +- 完成四个小程序的全部功能开发 +- 实现各小程序的实时数据同步 +- 完成各小程序的媒体上传功能 +- 开发各小程序的数据统计模块 + +### 第三阶段（2025年12月） +- 各小程序独立测试 +- 系统联调和集成测试 +- 性能优化和兼容性测试 +- 用户体验优化 +- 准备上线发布 --- diff --git a/mini_program/client-mp/package.json b/mini_program/client-mp/package.json new file mode 100644 index 0000000..0cce434 --- /dev/null +++ b/mini_program/client-mp/package.json @@ -0,0 +1,34 @@ +{ + "name": "client-mp", + "version": "1.0.0", + "description": "活牛采购智能数字化系统 - 客户端小程序", + "main": "main.js", + "scripts": { + "dev": "hbuilderx", + "build": "hbuilderx build" + }, + "keywords": [ + "活牛采购", + "小程序", + "uni-app" + ], + "author": "", + "license": "ISC", + "dependencies": { + "@dcloudio/uni-app": "^3.0.0-alpha-3070320230701001", + "pinia": "^2.1.0", + "vue": "^3.3.0" + }, + "devDependencies": { + "@types/node": "^18.0.0", + "@typescript-eslint/eslint-plugin": "^5.0.0", + "@typescript-eslint/parser": "^5.0.0", + "@vue/tsconfig": "^0.4.0", + "eslint": "^8.0.0", + "eslint-config-prettier": "^8.0.0", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-vue": "^9.0.0", + "prettier": "^2.0.0", + "typescript": "^5.0.0" + } +} \ No newline at end of file diff --git a/mini_program/client-mp/src/App.vue b/mini_program/client-mp/src/App.vue new file mode 100644 index 0000000..e69de29 diff --git a/mini_program/client-mp/src/api/order.ts b/mini_program/client-mp/src/api/order.ts new file mode 100644 index 0000000..f7c627f --- /dev/null +++ b/mini_program/client-mp/src/api/order.ts @@ -0,0 +1,30 @@ +import { request } from '@/utils/request'; +import type { IOrder, IOrderStats } from '@/types/order'; + +// 获取订单统计 +export const fetchOrderStats = async (): Promise => { + try { + const res = await request({ + url: '/order/stats', + method: 'GET' + }); + return res.data; + } catch (error) { + console.error('获取订单统计失败:', error); + throw error; + } +}; + +// 获取最近订单 +export const fetchRecentOrders = async (): Promise => { + try { + const res = await request({ + url: '/order/recent', + method: 'GET' + }); + return res.data; + } catch (error) { + console.error('获取最近订单失败:', error); + throw error; + } +}; \ No newline at end of file diff --git a/mini_program/client-mp/src/api/user.ts b/mini_program/client-mp/src/api/user.ts new file mode 100644 index 0000000..9799537 --- /dev/null +++ b/mini_program/client-mp/src/api/user.ts @@ -0,0 +1,16 @@ +import { request } from '@/utils/request'; +import type { IUser } from '@/types/user'; + +// 获取用户信息 +export const fetchUserInfo = async (): Promise => { + try { + const res = await request({ + url: '/user/info', + method: 'GET' + }); + return res.data; + } catch (error) { + console.error('获取用户信息失败:', error); + throw error; + } +}; \ No newline at end of file diff --git a/mini_program/client-mp/src/main.ts b/mini_program/client-mp/src/main.ts new file mode 100644 index 0000000..7c49338 --- /dev/null +++ b/mini_program/client-mp/src/main.ts @@ -0,0 +1,30 @@ +import { createSSRApp } from 'vue'; +import App from './App.vue'; +import { createPinia } from 'pinia'; +import * as Pinia from 'pinia'; + +export function createApp() { + const app = createSSRApp(App); + const pinia = createPinia(); + + // 配置Pinia + pinia.use(({ store }) => { + // 持久化存储 + const storageKey = `pinia_${store.$id}`; + const savedState = uni.getStorageSync(storageKey); + if (savedState) { + store.$patch(JSON.parse(savedState)); + } + + store.$subscribe((mutation, state) => { + uni.setStorageSync(storageKey, JSON.stringify(state)); + }); + }); + + app.use(pinia); + + return { + app, + pinia + }; +} \ No newline at end of file diff --git a/mini_program/client-mp/src/manifest.json b/mini_program/client-mp/src/manifest.json new file mode 100644 index 0000000..a836d85 --- /dev/null +++ b/mini_program/client-mp/src/manifest.json @@ -0,0 +1,84 @@ +{ + "name": "活牛采购-客户端", + "appid": "", + "description": "活牛采购智能数字化系统客户端小程序", + "versionName": "1.0.0", + "versionCode": "100", + "transformPx": false, + "app-plus": { + "usingComponents": true, + "nvueStyleCompiler": "uni-app", + "compilerVersion": 3, + "splashscreen": { + "alwaysShowBeforeRender": true, + "waiting": true, + "autoclose": true, + "delay": 0 + }, + "modules": {}, + "distribute": { + "android": { + "permissions": [ + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "" + ] + }, + "ios": { + "dSYMs": false, + "privacyDescription": { + "NSLocationWhenInUseUsageDescription": "此应用需要访问您的位置信息，以便提供运输跟踪服务", + "NSCameraUsageDescription": "此应用需要访问您的相机，以便上传照片和视频", + "NSPhotoLibraryUsageDescription": "此应用需要访问您的相册，以便选择照片和视频", + "NSMicrophoneUsageDescription": "此应用需要访问您的麦克风，以便录制视频" + } + } + } + }, + "mp-weixin": { + "appid": "wx0123456789abcdef", + "setting": { + "urlCheck": false, + "es6": true, + "postcss": true, + "minified": true + }, + "usingComponents": true, + "permission": { + "scope.userLocation": { + "desc": "您的位置信息将用于运输跟踪服务" + } + }, + "requiredPrivateInfos": [ + "getLocation", + "chooseLocation" + ] + }, + "mp-alipay": { + "usingComponents": true, + "appid": "2021000000000000" + }, + "vueVersion": "3", + "h5": { + "router": { + "mode": "hash", + "base": "/" + }, + "title": "活牛采购-客户端", + "optimization": { + "treeShaking": { + "enable": true + } + } + } +} \ No newline at end of file diff --git a/mini_program/client-mp/src/pages.json b/mini_program/client-mp/src/pages.json new file mode 100644 index 0000000..628ea54 --- /dev/null +++ b/mini_program/client-mp/src/pages.json @@ -0,0 +1,140 @@ +{ + "pages": [ + { + "path": "pages/index/index", + "style": { + "navigationBarTitleText": "活牛采购", + "enablePullDownRefresh": true + } + }, + { + "path": "pages/order/order-list", + "style": { + "navigationBarTitleText": "订单管理", + "enablePullDownRefresh": true + } + }, + { + "path": "pages/order/order-detail", + "style": { + "navigationBarTitleText": "订单详情" + } + }, + { + "path": "pages/order/order-create", + "style": { + "navigationBarTitleText": "创建订单" + } + }, + { + "path": "pages/tracking/tracking-list", + "style": { + "navigationBarTitleText": "运输跟踪" + } + }, + { + "path": "pages/tracking/tracking-detail", + "style": { + "navigationBarTitleText": "运输详情" + } + }, + { + "path": "pages/acceptance/acceptance-list", + "style": { + "navigationBarTitleText": "验收管理" + } + }, + { + "path": "pages/acceptance/acceptance-detail", + "style": { + "navigationBarTitleText": "验收详情" + } + }, + { + "path": "pages/payment/payment-list", + "style": { + "navigationBarTitleText": "结算支付" + } + }, + { + "path": "pages/payment/payment-detail", + "style": { + "navigationBarTitleText": "结算详情" + } + }, + { + "path": "pages/statistics/statistics", + "style": { + "navigationBarTitleText": "数据统计" + } + }, + { + "path": "pages/auth/login", + "style": { + "navigationBarTitleText": "登录" + } + }, + { + "path": "pages/auth/register", + "style": { + "navigationBarTitleText": "注册" + } + }, + { + "path": "pages/user/profile", + "style": { + "navigationBarTitleText": "个人中心" + } + }, + { + "path": "pages/user/settings", + "style": { + "navigationBarTitleText": "设置" + } + } + ], + "globalStyle": { + "navigationBarTextStyle": "black", + "navigationBarTitleText": "活牛采购", + "navigationBarBackgroundColor": "#F8F8F8", + "backgroundColor": "#F8F8F8" + }, + "tabBar": { + "color": "#7A7E83", + "selectedColor": "#3cc51f", + "borderStyle": "black", + "backgroundColor": "#ffffff", + "list": [ + { + "pagePath": "pages/index/index", + "iconPath": "static/images/tabbar/home.png", + "selectedIconPath": "static/images/tabbar/home-active.png", + "text": "首页" + }, + { + "pagePath": "pages/order/order-list", + "iconPath": "static/images/tabbar/order.png", + "selectedIconPath": "static/images/tabbar/order-active.png", + "text": "订单" + }, + { + "pagePath": "pages/tracking/tracking-list", + "iconPath": "static/images/tabbar/tracking.png", + "selectedIconPath": "static/images/tabbar/tracking-active.png", + "text": "跟踪" + }, + { + "pagePath": "pages/user/profile", + "iconPath": "static/images/tabbar/user.png", + "selectedIconPath": "static/images/tabbar/user-active.png", + "text": "我的" + } + ] + }, + "easycom": { + "autoscan": true, + "custom": { + "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" + } + } +} \ No newline at end of file diff --git a/mini_program/client-mp/src/pages/index/index.vue b/mini_program/client-mp/src/pages/index/index.vue new file mode 100644 index 0000000..69d8f7c --- /dev/null +++ b/mini_program/client-mp/src/pages/index/index.vue @@ -0,0 +1,289 @@ + + + + + \ No newline at end of file diff --git a/mini_program/client-mp/src/pages/index/types.ts b/mini_program/client-mp/src/pages/index/types.ts new file mode 100644 index 0000000..2ec331d --- /dev/null +++ b/mini_program/client-mp/src/pages/index/types.ts @@ -0,0 +1,25 @@ +// 首页数据类型定义 +export interface IHomeData { + pendingOrders: number; + inTransitOrders: number; + pendingAcceptance: number; + pendingPayment: number; + recentOrders: IRecentOrder[]; + statistics: { + totalAmount: number; + totalWeight: number; + averagePrice: number; + }; +} + +// 最近订单类型定义 +export interface IRecentOrder { + id: string; + orderNo: string; + supplierName: string; + quantity: number; + weight: number; + status: string; + statusText: string; + createTime: string; +} \ No newline at end of file diff --git a/mini_program/client-mp/src/stores/order.ts b/mini_program/client-mp/src/stores/order.ts new file mode 100644 index 0000000..8072146 --- /dev/null +++ b/mini_program/client-mp/src/stores/order.ts @@ -0,0 +1,59 @@ +import { defineStore } from 'pinia'; +import { ref } from 'vue'; +import type { IOrder, IOrderStats } from '@/types/order'; +import { fetchOrderStats, fetchRecentOrders } from '@/api/order'; + +export const useOrderStore = defineStore('order', () => { + // 订单统计 + const pendingCount = ref(0); + const inTransitCount = ref(0); + const pendingAcceptanceCount = ref(0); + const pendingPaymentCount = ref(0); + const totalAmount = ref(0); + const totalWeight = ref(0); + const averagePrice = ref(0); + + // 最近订单 + const recentOrders = ref([]); + + // 获取订单统计 + const fetchOrderStats = async () => { + try { + const stats = await fetchOrderStats(); + pendingCount.value = stats.pendingCount; + inTransitCount.value = stats.inTransitCount; + pendingAcceptanceCount.value = stats.pendingAcceptanceCount; + pendingPaymentCount.value = stats.pendingPaymentCount; + totalAmount.value = stats.totalAmount; + totalWeight.value = stats.totalWeight; + averagePrice.value = stats.averagePrice; + } catch (error) { + console.error('获取订单统计失败:', error); + throw error; + } + }; + + // 获取最近订单 + const fetchRecentOrders = async () => { + try { + const orders = await fetchRecentOrders(); + recentOrders.value = orders; + } catch (error) { + console.error('获取最近订单失败:', error); + throw error; + } + }; + + return { + pendingCount, + inTransitCount, + pendingAcceptanceCount, + pendingPaymentCount, + totalAmount, + totalWeight, + averagePrice, + recentOrders, + fetchOrderStats, + fetchRecentOrders + }; +}); \ No newline at end of file diff --git a/mini_program/client-mp/src/stores/user.ts b/mini_program/client-mp/src/stores/user.ts new file mode 100644 index 0000000..95da6a4 --- /dev/null +++ b/mini_program/client-mp/src/stores/user.ts @@ -0,0 +1,33 @@ +import { defineStore } from 'pinia'; +import { ref } from 'vue'; +import type { IUser } from '@/types/user'; +import { fetchUserInfo } from '@/api/user'; + +export const useUserStore = defineStore('user', () => { + // 用户信息 + const userInfo = ref({ + id: '', + name: '加载中...', + avatar: '/static/images/default-avatar.png', + lastLogin: '', + phone: '', + company: '', + role: 'client' + }); + + // 获取用户信息 + const fetchUserInfo = async () => { + try { + const info = await fetchUserInfo(); + userInfo.value = info; + } catch (error) { + console.error('获取用户信息失败:', error); + throw error; + } + }; + + return { + userInfo, + fetchUserInfo + }; +}); \ No newline at end of file diff --git a/mini_program/client-mp/src/types/order.ts b/mini_program/client-mp/src/types/order.ts new file mode 100644 index 0000000..47a8940 --- /dev/null +++ b/mini_program/client-mp/src/types/order.ts @@ -0,0 +1,35 @@ +// 订单状态类型 +export type OrderStatus = + | 'pending' + | 'confirmed' + | 'in_transit' + | 'pending_acceptance' + | 'completed' + | 'canceled'; + +// 订单基础信息 +export interface IOrder { + id: string; + orderNo: string; + supplierId: string; + supplierName: string; + quantity: number; + weight: number; + price: number; + totalAmount: number; + status: OrderStatus; + statusText: string; + createTime: string; + updateTime: string; +} + +// 订单统计信息 +export interface IOrderStats { + pendingCount: number; + inTransitCount: number; + pendingAcceptanceCount: number; + pendingPaymentCount: number; + totalAmount: number; + totalWeight: number; + averagePrice: number; +} \ No newline at end of file diff --git a/mini_program/client-mp/src/types/request.ts b/mini_program/client-mp/src/types/request.ts new file mode 100644 index 0000000..c2d3c67 --- /dev/null +++ b/mini_program/client-mp/src/types/request.ts @@ -0,0 +1,14 @@ +// 请求选项 +export interface RequestOptions { + url: string; + method?: 'GET' | 'POST' | 'PUT' | 'DELETE'; + data?: any; + header?: Record; +} + +// 响应数据 +export interface ResponseData { + code: number; + message: string; + data: T; +} \ No newline at end of file diff --git a/mini_program/client-mp/src/types/user.ts b/mini_program/client-mp/src/types/user.ts new file mode 100644 index 0000000..4b5b711 --- /dev/null +++ b/mini_program/client-mp/src/types/user.ts @@ -0,0 +1,17 @@ +// 用户角色类型 +export type UserRole = + | 'client' + | 'supplier' + | 'driver' + | 'staff'; + +// 用户信息 +export interface IUser { + id: string; + name: string; + avatar: string; + lastLogin: string; + phone: string; + company: string; + role: UserRole; +} \ No newline at end of file diff --git a/mini_program/client-mp/src/utils/request.ts b/mini_program/client-mp/src/utils/request.ts new file mode 100644 index 0000000..de36482 --- /dev/null +++ b/mini_program/client-mp/src/utils/request.ts @@ -0,0 +1,86 @@ +import type { RequestOptions } from '@/types/request'; + +// 环境配置 +const config = { + development: { + baseURL: 'http://localhost:3001/api', + wsURL: 'ws://localhost:3001' + }, + production: { + baseURL: 'https://api.niumall.com/api', + wsURL: 'wss://api.niumall.com' + } +}; + +// 当前环境 +const env = process.env.NODE_ENV === 'production' ? 'production' : 'development'; +const { baseURL, wsURL } = config[env]; + +// 请求封装 +export const request = (options: RequestOptions) => { + return new Promise((resolve, reject) => { + uni.request({ + url: baseURL + options.url, + method: options.method || 'GET', + data: options.data, + header: { + 'Authorization': `Bearer ${getToken()}`, + 'Content-Type': 'application/json', + ...options.header + }, + success: (res) => { + if (res.statusCode >= 200 && res.statusCode < 300) { + resolve(res.data); + } else { + handleError(res); + reject(res); + } + }, + fail: (err) => { + handleError(err); + reject(err); + } + }); + }); +}; + +// WebSocket连接 +export const connectWebSocket = () => { + return uni.connectSocket({ + url: wsURL, + success: () => { + console.log('WebSocket连接成功'); + }, + fail: (err) => { + console.error('WebSocket连接失败:', err); + } + }); +}; + +// 获取token +const getToken = (): string => { + try { + const token = uni.getStorageSync('token'); + return token || ''; + } catch (e) { + return ''; + } +}; + +// 错误处理 +const handleError = (error: any) => { + console.error('请求错误:', error); + + // 未授权 + if (error.statusCode === 401) { + uni.redirectTo({ + url: '/pages/auth/login' + }); + } + + // 其他错误 + uni.showToast({ + title: error.data?.message || '请求失败', + icon: 'none' + }); +}; \ No newline at end of file diff --git a/mini_program/需求文档-第1部分.md b/mini_program/需求文档-第1部分.md new file mode 100644 index 0000000..5e3165c --- /dev/null +++ b/mini_program/需求文档-第1部分.md @@ -0,0 +1,61 @@ +# 活牛采购智能数字化系统 - 小程序端需求文档 + +## 版本历史 +| 版本 | 日期 | 作者 | 说明 | +|------|------|------|------| +| v1.0 | 2025-09-17 | 系统架构师 | 初版小程序需求文档 | + +## 1. 概述 + +### 1.1 文档目的 +本文档详细描述活牛采购智能数字化系统小程序端的功能需求、界面设计、交互流程和技术实现方案，为小程序开发团队提供明确的开发指导。 + +### 1.2 小程序矩阵架构 +活牛采购智能数字化系统小程序矩阵基于uni-app框架开发，支持微信小程序、支付宝小程序、H5等多端发布。系统包含四个独立的小程序应用，分别服务于不同角色用户： +- 客户端小程序（采购人） +- 供应商小程序 +- 司机小程序 +- 内部员工小程序 + +### 1.3 技术架构 +- **跨端框架**: uni-app ^3.0.0 +- **前端框架**: Vue 3 ^3.3.0 +- **开发语言**: TypeScript ^5.0.0 +- **状态管理**: Pinia ^2.1.0 +- **UI组件库**: uni-ui ^1.4.0 +- **地图服务**: 腾讯地图 +- **构建工具**: Vite ^4.4.0 + +## 2. 用户角色与场景 + +### 2.1 采购人（客户端小程序） +**主要场景**: +1. 创建采购订单 +2. 查看订单进度 +3. 实时跟踪运输状态 +4. 到货验收确认 +5. 在线支付结算 + +### 2.2 供应商（供应商小程序） +**主要场景**: +1. 接收订单通知 +2. 上传牛只信息和检疫证明 +3. 管理装车过程 +4. 查看结算信息 +5. 管理供应商资质信息 + +### 2.3 司机（司机小程序） +**主要场景**: +1. 接收运输任务 +2. 上传车辆信息和消毒证明 +3. 实时上报位置和牛只状态 +4. 上传运输过程视频 +5. 确认送达信息 + +### 2.4 内部员工（员工小程序） +**主要场景**: +1. 审核订单信息 +2. 监控运输过程 +3. 处理异常情况 +4. 查看业务数据统计 +5. 管理系统基础数据 \ No newline at end of file diff --git a/mini_program/需求文档-第2部分.md b/mini_program/需求文档-第2部分.md new file mode 100644 index 0000000..19cd446 --- /dev/null +++ b/mini_program/需求文档-第2部分.md @@ -0,0 +1,257 @@ +## 3. 功能需求 + +### 3.1 客户端小程序（采购人） + +#### 3.1.1 用户认证 +- **微信/支付宝授权登录** + - 支持微信/支付宝一键授权登录 + - 首次登录需完善企业信息和个人信息 + - 支持手机号码验证 + +- **账号管理** + - 个人信息维护 + - 企业信息维护 + - 密码修改 + - 安全设置 + +#### 3.1.2 订单管理 +- **订单创建** + - 选择供应商 + - 填写牛只品种、数量、重量要求 + - 设置单价和预付款比例 + - 设置交付地址和预计交付日期 + - 添加订单备注 + +- **订单列表** + - 按状态分类展示（待确认、已确认、运输中、已送达、已完成、已取消） + - 支持按订单号、供应商、日期等条件筛选 + - 支持订单状态实时更新提醒 + +- **订单详情** + - 展示订单基本信息 + - 展示订单状态流转记录 + - 展示牛只信息和检疫证明 + - 提供订单操作按钮（确认、取消、验收等） + +#### 3.1.3 运输跟踪 +- **地图实时跟踪** + - 在地图上实时显示运输车辆位置 + - 显示运输轨迹和预计到达时间 + - 支持查看历史轨迹回放 + +- **牛只状态监控** + - 查看牛只运输状态实时数据 + - 查看运输过程视频记录 + - 接收异常状态预警通知 + +#### 3.1.4 验收管理 +- **到货验收** + - 验收牛只数量和重量 + - 记录验收结果（合格/不合格） + - 上传验收照片和视频 + - 填写验收意见 + +- **异常处理** + - 记录异常情况（死亡、受伤等） + - 上传异常证明材料 + - 提交异常处理申请 + +#### 3.1.5 结算支付 +- **结算单查看** + - 查看系统自动生成的结算单 + - 核对结算金额明细 + - 确认结算单 + +- **在线支付** + - 支持微信支付、支付宝支付 + - 支持银行转账凭证上传 + - 查看支付记录和凭证 + +#### 3.1.6 数据统计 +- **采购概览** + - 展示采购总量、总金额等关键指标 + - 展示采购趋势图表 + - 按品种、供应商等维度统计 + +- **质量分析** + - 牛只质量合格率统计 + - 供应商质量评分对比 + - 异常情况分析 + +### 3.2 供应商小程序 + +#### 3.2.1 用户认证 +- **账号登录** + - 手机号+验证码登录 + - 账号密码登录 + - 微信/支付宝授权登录 + +- **资质管理** + - 营业执照信息维护 + - 资质证书上传和管理 + - 联系人信息维护 + +#### 3.2.2 订单管理 +- **订单接收** + - 接收新订单通知 + - 查看订单详情 + - 确认接单或拒绝 + - 设置预计发货时间 + +- **订单列表** + - 按状态分类展示 + - 支持按条件筛选和排序 + - 订单状态实时更新 + +#### 3.2.3 牛只管理 +- **牛只信息录入** + - 录入牛只基本信息（品种、数量、重量等） + - 上传牛只照片 + - 批量导入牛只信息 + +- **检疫证明管理** + - 上传《动物检疫合格证明》 + - 上传疫苗接种记录 + - 管理检疫相关文件 + +#### 3.2.4 装车管理 +- **装车准备** + - 确认空水空槽时间 + - 上传装车前准备证明 + - 联系司机确认装车时间 + +- **装车监控** + - 记录装车过程 + - 上传装车视频和照片 + - 填写装车信息（实际数量、重量等） + +#### 3.2.5 结算管理 +- **结算单查看** + - 查看结算单详情 + - 核对结算金额 + - 确认结算单 + +- **收款记录** + - 查看收款记录 + - 下载电子回单 + - 开具发票管理 + +### 3.3 司机小程序 + +#### 3.3.1 用户认证 +- **账号登录** + - 手机号+验证码登录 + - 账号密码登录 + - 微信授权登录 + +- **车辆信息管理** + - 车辆基本信息维护 + - 驾驶证和行驶证上传 + - 车辆照片上传 + +#### 3.3.2 任务管理 +- **任务接收** + - 接收运输任务通知 + - 查看任务详情 + - 确认接受任务 + +- **任务列表** + - 按状态分类展示（待接受、进行中、已完成） + - 任务提醒和倒计时 + - 历史任务查询 + +#### 3.3.3 装车确认 +- **装车前准备** + - 上传空车过磅视频 + - 上传车辆消毒证明 + - 确认装车地点和时间 + +- **装车监控** + - 记录装车过程 + - 确认牛只数量和状态 + - 签署电子装车单 + +#### 3.3.4 运输管理 +- **位置上报** + - 自动定时上报GPS位置（每10分钟） + - 手动上报当前位置 + - 设置位置共享权限 + +- **状态上报** + - 定时上报牛只状态 + - 上传运输过程视频 + - 记录休息和加油等事件 + +- **异常上报** + - 上报交通事故、车辆故障等异常 + - 上报牛只异常状况 + - 紧急联系功能 + +#### 3.3.5 交付确认 +- **到达确认** + - 确认到达目的地 + - 上传到达照片 + - 记录到达时间 + +- **交接管理** + - 电子交接单生成 + - 采购方签字确认 + - 完成交付流程 + +### 3.4 内部员工小程序 + +#### 3.4.1 用户认证 +- **账号登录** + - 账号密码登录 + - 企业微信单点登录 + - 双因素认证 + +- **权限管理** + - 基于角色的权限控制 + - 功能模块访问权限 + - 数据访问权限 + +#### 3.4.2 订单监控 +- **订单审核** + - 审核新创建的订单 + - 查看订单详情 + - 修改订单信息 + - 确认或驳回订单 + +- **订单跟踪** + - 全流程订单状态监控 + - 订单异常预警 + - 订单延期管理 + +#### 3.4.3 运输监控 +- **实时监控** + - 查看所有运输中车辆位置 + - 监控运输异常情况 + - 远程指导处理问题 + +- **视频监控** + - 查看实时上传的视频 + - 调阅历史视频记录 + - 标记关键视频片段 + +#### 3.4.4 数据管理 +- **基础数据维护** + - 牛只品种管理 + - 价格区间设置 + - 区域信息管理 + +- **用户管理** + - 管理采购人账号 + - 管理供应商账号 + - 管理司机账号 + +#### 3.4.5 统计分析 +- **业务统计** + - 订单量和交易额统计 + - 供应商绩效分析 + - 运输效率分析 + +- **异常分析** + - 异常事件统计 + - 异常原因分析 + - 改进措施跟踪 \ No newline at end of file diff --git a/mini_program/需求文档-第3部分.md b/mini_program/需求文档-第3部分.md new file mode 100644 index 0000000..3234c71 --- /dev/null +++ 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 \ No newline at end of file diff --git a/mini_program/需求文档-第4部分.md b/mini_program/需求文档-第4部分.md new file mode 100644 index 0000000..2eeed47 --- /dev/null +++ b/mini_program/需求文档-第4部分.md @@ -0,0 +1,164 @@ +## 6. 技术实现 + +### 6.1 数据同步机制 +- **实时数据更新** + - 使用WebSocket实现实时数据推送 + - 关键业务状态变更实时通知 + - 运输位置数据实时同步 + +- **离线数据处理** + - 本地数据缓存策略 + - 网络恢复后自动同步 + - 断点续传机制 + +### 6.2 位置服务实现 +- **位置采集** + - 使用uni.getLocation API获取位置 + - 后台定时采集机制 + - 低功耗模式优化 + +- **地图展示** + - 腾讯地图SDK集成 + - 自定义地图标记 + - 轨迹绘制算法 + +### 6.3 媒体处理 +- **视频录制与上传** + - 视频压缩处理 + - 分片上传大文件 + - 上传进度显示 + +- **图片处理** + - 图片压缩 + - 水印添加 + - 批量上传 + +### 6.4 安全机制 +- **数据加密** + - 传输层加密(HTTPS) + - 敏感数据加密存储 + - Token认证机制 + +- **权限控制** + - 基于角色的权限控制 + - 操作审计日志 + - 敏感操作二次验证 + +### 6.5 性能优化 +- **首屏加载优化** + - 关键资源预加载 + - 组件懒加载 + - 图片资源优化 + +- **列表性能优化** + - 虚拟列表实现 + - 数据分页加载 + - 列表项缓存 + +## 7. 测试计划 + +### 7.1 功能测试 +- **测试范围** + - 核心业务流程测试 + - 界面功能测试 + - 角色权限测试 + +- **测试方法** + - 黑盒测试 + - 用例测试 + - 回归测试 + +### 7.2 性能测试 +- **测试指标** + - 页面加载时间 < 3秒 + - 操作响应时间 < 1秒 + - 位置上报延迟 < 5秒 + +- **测试环境** + - 弱网环境测试 + - 高并发测试 + - 长时间运行测试 + +### 7.3 兼容性测试 +- **设备兼容性** + - 不同品牌手机测试 + - 不同系统版本测试 + - 不同屏幕尺寸测试 + +- **平台兼容性** + - 微信小程序 + - 支付宝小程序 + - H5应用 + +### 7.4 安全测试 +- **认证与授权测试** + - 登录安全测试 + - 权限控制测试 + - 会话管理测试 + +- **数据安全测试** + - 数据传输加密测试 + - 敏感信息保护测试 + - 数据完整性测试 + +## 8. 开发计划 + +### 8.1 开发阶段 +| 阶段 | 时间 | 主要任务 | +|------|------|----------| +| 需求分析 | 2周 | 需求调研、用户访谈、需求文档编写 | +| 原型设计 | 2周 | UI设计、交互设计、原型评审 | +| 技术方案 | 1周 | 技术选型、架构设计、开发规范制定 | +| 开发阶段 | 8周 | 功能开发、单元测试、集成测试 | +| 测试阶段 | 2周 | 功能测试、性能测试、兼容性测试 | +| 上线准备 | 1周 | 文档完善、培训、预发布测试 | +| 正式上线 | 1周 | 灰度发布、监控、问题修复 | + +### 8.2 里程碑计划 +1. **需求确认** - 完成需求文档并获得各方确认 +2. **原型评审** - 完成UI设计和交互原型并通过评审 +3. **技术方案确认** - 完成技术方案设计并通过评审 +4. **开发完成** - 完成所有功能开发和单元测试 +5. **测试通过** - 完成所有测试并修复关键问题 +6. **正式发布** - 小程序上线并稳定运行 + +### 8.3 风险管理 +- **技术风险** + - 实时位置跟踪在弱网环境下的稳定性 + - 视频上传和存储的性能问题 + - 多端兼容性问题 + +- **业务风险** + - 用户接受度和使用习惯适应 + - 业务流程变更导致的需求变更 + - 法规政策变化的影响 + +- **项目风险** + - 开发资源不足 + - 时间进度延误 + - 第三方服务依赖风险 + +## 9. 附录 + +### 9.1 术语表 +| 术语 | 定义 | +|------|------| +| 采购人 | 发起采购需求，验收确认，支付审批的角色 | +| 贸易商 | 订单转发，供应商管理，资金结算的角色 | +| 供应商 | 牛只准备，装车管理，单据提供的角色 | +| 司机 | 运输执行，状态上报，单据交接的角色 | +| 检疫证明 | 《动物检疫合格证明》，证明牛只健康状况的官方文件 | +| 空水空槽 | 牛只装车前不喂水不喂食的时间，确保称重准确 | + +### 9.2 参考文档 +1. 《活牛采购智能数字化系统 - 产品需求文档》 +2. 《活牛采购智能数字化系统 - 系统详细设计文档》 +3. 《uni-app开发文档》 +4. 《微信小程序开发指南》 +5. 《支付宝小程序开发指南》 + +### 9.3 版本计划 +- **v1.0** - 基础版本，实现核心业务流程 +- **v1.1** - 优化用户体验，完善异常处理 +- **v1.2** - 增加数据分析功能，提升系统智能化 +- **v2.0** - 增加AI辅助决策，优化业务流程 \ No newline at end of file