148 lines
3.8 KiB
Markdown
148 lines
3.8 KiB
Markdown
# 核销端 H5
|
||
|
||
Vue 3 + Vite + TypeScript + Vant 的移动端核销工作台。当前包含 mock 数据，可直接预览完整流程。
|
||
|
||
## 启动
|
||
|
||
```bash
|
||
yarn -i
|
||
yarn dev
|
||
```
|
||
|
||
本地预览地址默认是 `http://127.0.0.1:5173/`。
|
||
|
||
本地开发环境后端网关：
|
||
|
||
```bash
|
||
VITE_PROXY_TARGET=http://192.168.3.211:9999
|
||
```
|
||
|
||
## 环境变量
|
||
|
||
复制 `.env.example` 后按实际网关配置调整：
|
||
|
||
```bash
|
||
cp .env.example .env.local
|
||
```
|
||
|
||
关键配置：
|
||
|
||
- `VITE_USE_MOCK=true`：使用前端 mock 数据。
|
||
- `VITE_USE_MOCK=false`：调用真实后端接口。
|
||
- `VITE_PROXY_TARGET=http://192.168.3.211:9999`：本地 Vite 代理到后端网关。
|
||
- `VITE_API_BASE_URL`：打包后的接口网关地址。为空时使用当前站点同源地址。
|
||
- `VITE_AUTH_BASE=/auth`：登录服务前缀。
|
||
- `VITE_ADMIN_BASE=/admin`：用户与验证码服务前缀。
|
||
- `VITE_STAFF_BASE=/hotelStaff`：核销端使用的员工业务接口前缀，后端路由仍为 `/hotelStaff`。
|
||
- `VITE_HOTEL_BIZ_BASE=/hotelBiz`：酒店业务通用接口前缀。
|
||
- `VITE_CLIENT_ID`、`VITE_CLIENT_SECRET`、`VITE_CLIENT_CONFIG_ID`：短信登录所需客户端配置。
|
||
|
||
## 环境文件
|
||
|
||
| 文件 | 用途 |
|
||
|---|---|
|
||
| `.env.local` | 本地开发配置，不提交到仓库 |
|
||
| `.env.test` | 测试环境打包配置 |
|
||
| `.env.production` | 生产环境打包配置 |
|
||
|
||
测试环境和生产环境推荐使用同源代理：
|
||
|
||
```bash
|
||
VITE_API_BASE_URL=
|
||
```
|
||
|
||
部署时由 Nginx 把 `/auth`、`/admin`、`/hotelStaff`、`/hotelBiz` 等接口前缀反向代理到后端网关。只有在确认后端网关允许跨域时，才建议把 `VITE_API_BASE_URL` 改成完整网关域名。
|
||
|
||
## 页面
|
||
|
||
- `/login`：手机号验证码登录。
|
||
- `/home`：工作台。
|
||
- `/orders`：订单列表。
|
||
- `/orders/:id`：订单详情，可进入核销。
|
||
- `/verify`：核销入口。
|
||
- `/verify/confirm`：核销确认。
|
||
- `/verify/result`：核销结果。
|
||
- `/events`：事件列表。
|
||
- `/events/create`：发布事件。
|
||
- `/mine`：我的。
|
||
|
||
## 文档
|
||
|
||
- [H5页面规划.md](./H5页面规划.md)：页面结构、核心流程和 MVP 范围。
|
||
- [docs/frontend-practices.md](./docs/frontend-practices.md)：接口接入、移动端兼容、扫码核销和部署经验。
|
||
|
||
## 校验
|
||
|
||
```bash
|
||
yarn typecheck
|
||
yarn build:test
|
||
yarn build:prod
|
||
```
|
||
|
||
## 打包
|
||
|
||
```bash
|
||
# 测试环境
|
||
yarn build:test
|
||
|
||
# 生产环境
|
||
yarn build:prod
|
||
|
||
# 默认生产打包
|
||
yarn build
|
||
```
|
||
|
||
## Docker 部署
|
||
|
||
镜像内使用 Nginx 托管前端静态资源，并代理 `/auth`、`/admin`、`/hotelStaff`、`/hotelBiz` 到后端网关。前端环境文件中的 `VITE_API_BASE_URL` 保持为空即可。
|
||
|
||
构建生产镜像：
|
||
|
||
```bash
|
||
docker build --build-arg BUILD_MODE=prod -t hotel-biz-h5:prod .
|
||
```
|
||
|
||
构建测试镜像：
|
||
|
||
```bash
|
||
docker build --build-arg BUILD_MODE=test -t hotel-biz-h5:test .
|
||
```
|
||
|
||
直接运行：
|
||
|
||
```bash
|
||
docker run -d \
|
||
--name hotel-biz-h5 \
|
||
-p 10086:10086 \
|
||
-e BACKEND_GATEWAY=http://192.168.3.211:9999 \
|
||
hotel-biz-h5:prod
|
||
```
|
||
|
||
使用 compose：
|
||
|
||
```bash
|
||
docker compose up -d --build
|
||
```
|
||
|
||
测试环境使用独立 compose 文件：
|
||
|
||
```bash
|
||
docker compose -f docker-compose.test.yml up -d --build
|
||
```
|
||
|
||
测试环境默认后端网关是：
|
||
|
||
```bash
|
||
BACKEND_GATEWAY=http://8.138.234.141/ingress
|
||
```
|
||
|
||
如果测试服务器上的网关地址不同，可以启动时覆盖：
|
||
|
||
```bash
|
||
BACKEND_GATEWAY=http://测试网关地址 H5_PORT=10086 docker compose -f docker-compose.test.yml up -d --build
|
||
```
|
||
|
||
`BACKEND_GATEWAY` 是容器内 Nginx 代理到的后端网关地址，不要以 `/` 结尾。生产环境如果前面还有宿主机 Nginx，宿主机 Nginx 只需要负责域名、HTTPS 证书，并把流量转发到 `127.0.0.1:10086`。
|
||
|
||
生产扫码建议通过 HTTPS 访问，否则部分移动浏览器或微信内置浏览器可能无法打开摄像头。
|