chenhao
a29d0f589b
feat(components, types, views): 添加付款方式和现金折扣率相关功能 在`components.d.ts`中添加了VanRadio和VanRadioGroup组件的类型定义。 在`src/types/index.ts`中新增了PayMethod类型，用于表示不同的付款方式。 在`src/views/Detail/index.vue`中增加了付款方式、付款比例、付款说明以及现金折扣率选择的相关UI和逻辑处理。具体包括： - 在订单详情中显示付款方式、付款比例和付款说明。 - 当任务名称包含“商务”且审批状态不为待审批时，显示现金折扣率选择区域。 - 新增getPayMethod函数，用于根据付款方式返回相应的描述。 - 在提交审批前检查是否选择了现金折扣率，并在需要时将其作为参数传递给后端。 - 更新样式文件以支持新的现金折扣率选择区域的样式。 ``` |
||
|---|---|---|
| .claude | ||
| docs/ui-mockups | ||
| src | ||
| .env | ||
| .env.development | ||
| .env.production | ||
| README.md | ||
| auto-imports.d.ts | ||
| components.d.ts | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| tsconfig.json | ||
| vite.config.ts | ||
| 概要设计文档.md | ||
README.md
微信小程序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
安装依赖
npm install
# 或
yarn install
启动开发服务器
npm run dev
# 或
yarn dev
构建生产版本
npm run build
# 或
yarn build
预览构建结果
npm run preview
# 或
yarn preview
环境配置
项目支持多环境配置，通过.env文件管理：
.env- 通用环境变量.env.development- 开发环境.env.production- 生产环境
主要配置项：
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进行代码规范检查和格式化。
npm run lint # 代码检查
npm run type-check # 类型检查
Git提交规范
建议使用Angular提交信息规范：
feat: 新增功能
fix: 修复问题
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建/工具链更新
部署说明
生产构建
npm run build
构建完成后，dist目录包含所有静态资源文件。
服务器配置
由于是SPA应用，需要配置服务器将所有路由指向index.html。
Nginx配置示例
location / {
try_files $uri $uri/ /index.html;
}
微信小程序配置
- 在微信小程序管理后台配置业务域名
- 确保HTTPS协议部署
- 配置webview组件的src属性
浏览器兼容性
- Chrome >= 64
- Firefox >= 78
- Safari >= 12
- 微信内置浏览器
- 各主流移动端浏览器
许可证
MIT License