司机端小程序
活牛运输司机小程序,用于活牛采购智能数字化系统中的运输环节管理。
项目介绍
司机端小程序是活牛采购智能数字化系统的重要组成部分,主要服务于活牛运输司机,提供任务接收、位置上报、状态监控、交付确认等功能。
功能特性
- 用户认证:手机号验证码登录
- 任务管理:查看、接受、拒绝运输任务
- 运输监控:实时位置上报、牛只状态监控
- 车辆管理:车辆信息维护
- 交付确认:完成运输任务并确认交付
技术栈
- 框架:uni-app + Vue 3
- 状态管理:Pinia
- 语言:JavaScript/TypeScript
- 构建工具:Vite
- UI:uni-ui
目录结构
src/
├── components/ # 公共组件
├── pages/ # 页面
│ ├── auth/ # 认证相关页面
│ ├── index/ # 首页
│ ├── task/ # 任务相关页面
│ ├── transport/ # 运输相关页面
│ ├── delivery/ # 交付相关页面
│ └── vehicle/ # 车辆相关页面
├── static/ # 静态资源
├── stores/ # 状态管理
├── utils/ # 工具函数
├── App.vue # 根组件
├── main.js # 入口文件
├── manifest.json # 项目配置
└── pages.json # 页面配置
开发环境
环境要求
- Node.js >= 16.0.0
- 微信开发者工具
安装依赖
npm install
启动开发服务器
# 启动微信小程序开发环境
npm run dev
# 启动H5开发环境
npm run dev:h5
构建生产版本
# 构建微信小程序生产版本
npm run build
# 构建H5生产版本
npm run build:h5
页面说明
| 页面路径 | 功能说明 |
|---|---|
| /pages/auth/login | 登录页面 |
| /pages/index/index | 首页 |
| /pages/task/task-list | 任务列表 |
| /pages/task/task-detail | 任务详情 |
| /pages/transport/location-report | 位置上报 |
| /pages/transport/status-report | 状态上报 |
| /pages/delivery/delivery-confirm | 交付确认 |
| /pages/vehicle/vehicle-info | 车辆信息 |
状态管理
使用 Pinia 进行状态管理,包含以下模块:
- user: 用户信息管理
- task: 任务信息管理
网络请求
封装了统一的网络请求模块,包含:
- request.js: 基础请求封装
- api.js: 接口封装
工具函数
包含常用的工具函数:
- formatDate: 时间格式化
- debounce: 防抖函数
- throttle: 节流函数
- deepClone: 深拷贝
- validatePhone: 手机号验证
- validatePlateNumber: 车牌号验证
注意事项
- 开发时请遵循项目代码规范
- 新增页面需要在 pages.json 中注册
- 接口请求统一使用封装的 request 模块
- 状态管理使用 Pinia,避免直接操作全局数据