203 lines
3.8 KiB
Markdown
203 lines
3.8 KiB
Markdown
# 微信小程序H5审批系统
|
||
|
||
基于Vue 3 + TypeScript + Vant 4开发的移动端H5应用，主要用于在微信小程序WebView中运行的订单审批系统。
|
||
|
||
## 项目特性
|
||
|
||
- 🚀 Vue 3 + TypeScript + Vite 开发
|
||
- 📱 Vant 4 移动端组件库
|
||
- 🎯 专为微信小程序WebView优化
|
||
- 📋 订单列表查看和搜索
|
||
- 📄 订单详情展示
|
||
- ✅ 审批操作功能
|
||
- 📊 审批历史记录
|
||
- 📎 附件预览功能
|
||
|
||
## 技术栈
|
||
|
||
- **前端框架**: Vue 3
|
||
- **开发语言**: TypeScript
|
||
- **构建工具**: Vite
|
||
- **UI组件库**: Vant 4
|
||
- **路由管理**: Vue Router 4
|
||
- **状态管理**: Pinia
|
||
- **HTTP客户端**: Axios
|
||
- **样式预处理**: Sass
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
oms_h5/
|
||
├── public/ # 静态资源
|
||
├── src/
|
||
│ ├── api/ # API接口
|
||
│ ├── components/ # 公共组件
|
||
│ ├── views/ # 页面组件
|
||
│ │ ├── List/ # 列表页面
|
||
│ │ └── Detail/ # 详情页面
|
||
│ ├── store/ # 状态管理
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── types/ # TypeScript类型定义
|
||
│ ├── styles/ # 全局样式
|
||
│ └── router/ # 路由配置
|
||
├── docs/ # 文档和设计稿
|
||
│ └── ui-mockups/ # UI设计图
|
||
├── package.json
|
||
└── vite.config.ts
|
||
```
|
||
|
||
## 开发环境搭建
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 16
|
||
- npm >= 7 或 yarn >= 1.22
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
# 或
|
||
yarn install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
# 或
|
||
yarn dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
# 或
|
||
yarn build
|
||
```
|
||
|
||
### 预览构建结果
|
||
|
||
```bash
|
||
npm run preview
|
||
# 或
|
||
yarn preview
|
||
```
|
||
|
||
## 环境配置
|
||
|
||
项目支持多环境配置，通过`.env`文件管理：
|
||
|
||
- `.env` - 通用环境变量
|
||
- `.env.development` - 开发环境
|
||
- `.env.production` - 生产环境
|
||
|
||
主要配置项：
|
||
|
||
```bash
|
||
VITE_API_BASE_URL=http://localhost:8080 # API基础URL
|
||
VITE_APP_TITLE=订单审批系统 # 应用标题
|
||
VITE_FILE_BASE_URL=http://localhost:8080 # 文件服务URL
|
||
```
|
||
|
||
## 主要功能
|
||
|
||
### 1. 订单列表
|
||
- ✅ 订单列表展示
|
||
- ✅ 下拉刷新和上拉加载
|
||
- ✅ 搜索功能
|
||
- ✅ 状态筛选
|
||
- ✅ 订单状态标识
|
||
|
||
### 2. 订单详情
|
||
- ✅ 订单基本信息展示
|
||
- ✅ 产品信息列表（软件/硬件/维保）
|
||
- ✅ 合同附件展示和预览
|
||
- ✅ 审批历史时间线
|
||
|
||
### 3. 审批操作
|
||
- ✅ 审批通过/驳回
|
||
- ✅ 审批意见输入
|
||
- ✅ 操作结果反馈
|
||
|
||
### 4. 微信小程序适配
|
||
- ✅ WebView环境检测
|
||
- ✅ 移动端样式适配
|
||
- ✅ 触摸手势支持
|
||
|
||
## API接口
|
||
|
||
### 订单列表接口
|
||
```
|
||
POST /project/order/list
|
||
```
|
||
|
||
### 订单详情接口
|
||
```
|
||
GET /project/order/h5/approve/:id
|
||
```
|
||
|
||
### 审批操作接口
|
||
```
|
||
POST /project/order/order/approve
|
||
```
|
||
|
||
## 开发规范
|
||
|
||
### 代码风格
|
||
项目使用ESLint + Prettier进行代码规范检查和格式化。
|
||
|
||
```bash
|
||
npm run lint # 代码检查
|
||
npm run type-check # 类型检查
|
||
```
|
||
|
||
### Git提交规范
|
||
建议使用Angular提交信息规范：
|
||
|
||
```
|
||
feat: 新增功能
|
||
fix: 修复问题
|
||
docs: 文档更新
|
||
style: 代码格式调整
|
||
refactor: 代码重构
|
||
test: 测试相关
|
||
chore: 构建/工具链更新
|
||
```
|
||
|
||
## 部署说明
|
||
|
||
### 生产构建
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建完成后，`dist`目录包含所有静态资源文件。
|
||
|
||
### 服务器配置
|
||
由于是SPA应用，需要配置服务器将所有路由指向`index.html`。
|
||
|
||
#### Nginx配置示例
|
||
```nginx
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
```
|
||
|
||
### 微信小程序配置
|
||
1. 在微信小程序管理后台配置业务域名
|
||
2. 确保HTTPS协议部署
|
||
3. 配置webview组件的src属性
|
||
|
||
## 浏览器兼容性
|
||
|
||
- Chrome >= 64
|
||
- Firefox >= 78
|
||
- Safari >= 12
|
||
- 微信内置浏览器
|
||
- 各主流移动端浏览器
|
||
|
||
## 许可证
|
||
|
||
MIT License |