# 微信小程序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