85 lines
1.5 KiB
Markdown
85 lines
1.5 KiB
Markdown
|
# 购物卡审批系统
|
|||
|
|
|
|||
|
|
基于 Vue 3 + Vite 开发的移动端购物卡审批系统。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- Vue 3
|
|||
|
|
- Vite
|
|||
|
|
- Element Plus
|
|||
|
|
- Vue Router
|
|||
|
|
- Axios
|
|||
|
|
- PostCSS
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- 移动端自适应布局
|
|||
|
|
- iOS 安全区域适配
|
|||
|
|
- 审批详情展示
|
|||
|
|
- 审批通过/驳回操作
|
|||
|
|
- 审批结果页面
|
|||
|
|
|
|||
|
|
## 开发环境要求
|
|||
|
|
|
|||
|
|
- Node.js >= 16.0.0
|
|||
|
|
- npm >= 7.0.0
|
|||
|
|
|
|||
|
|
## 安装和运行
|
|||
|
|
|
|||
|
|
1. 安装依赖
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. 启动开发服务器
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. 构建生产版本
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
├── src/
|
|||
|
|
│ ├── api/ # API 接口
|
|||
|
|
│ ├── assets/ # 静态资源
|
|||
|
|
│ ├── pages/ # 页面组件
|
|||
|
|
│ ├── router/ # 路由配置
|
|||
|
|
│ ├── utils/ # 工具函数
|
|||
|
|
│ ├── App.vue # 根组件
|
|||
|
|
│ └── main.js # 入口文件
|
|||
|
|
├── public/ # 公共资源
|
|||
|
|
├── index.html # HTML 模板
|
|||
|
|
├── vite.config.js # Vite 配置
|
|||
|
|
└── package.json # 项目配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用说明
|
|||
|
|
|
|||
|
|
1. 审批详情页面
|
|||
|
|
- 访问路径：`/approval-detail?id=xxx`
|
|||
|
|
- 显示申请信息
|
|||
|
|
- 可进行通过/驳回操作
|
|||
|
|
|
|||
|
|
2. 审批结果页面
|
|||
|
|
- 访问路径：`/approval-result?id=xxx`
|
|||
|
|
- 显示审批结果和详情
|
|||
|
|
|
|||
|
|
## 环境变量配置
|
|||
|
|
|
|||
|
|
在 `.env` 文件中配置以下环境变量：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
VITE_API_URL=接口基础地址
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 移动端适配
|
|||
|
|
|
|||
|
|
- 使用 postcss-pxtorem 进行单位转换
|
|||
|
|
- 使用 amfe-flexible 进行 rem 适配
|
|||
|
|
- 基准值：37.5px = 1rem
|