183 lines
8.1 KiB
Markdown
183 lines
8.1 KiB
Markdown
# 宠小它 - UniApp 项目
|
||
|
||
> 品牌：宠小它 · 用心宠小它，温暖伴一生 · 智慧宠物门店服务系统
|
||
|
||
从 H5 (Vite+Vue3+Vant) 迁移到 UniApp+Vue3，用于生成微信小程序。
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
frontend/
|
||
├── pages/
|
||
│ ├── login/login.vue # 登录注册页
|
||
│ ├── home/home.vue # 首页：预约列表
|
||
│ ├── report/report.vue # 填写洗美报告
|
||
│ ├── report-view/reportView.vue # 报告查看页（独立链接）
|
||
│ └── mine/
|
||
│ ├── mine.vue # 我的
|
||
│ ├── staff.vue # 员工管理
|
||
│ ├── service-type.vue # 服务类型管理
|
||
│ ├── store.vue # 店铺设置
|
||
│ ├── my-reports.vue # 我的报告列表
|
||
│ └── my-orders.vue # 我的订单
|
||
├── static/
|
||
│ └── tab-*.svg # tabBar 图标
|
||
├── utils/
|
||
│ └── api.js # API 封装（uni.request）
|
||
├── pages.json # 路由配置
|
||
├── manifest.json # 小程序配置
|
||
├── vite.config.js
|
||
├── package.json
|
||
└── uni.scss # 全局样式变量
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
cd /Users/wac/Desktop/www/_src/petstore/frontend
|
||
npm install
|
||
```
|
||
|
||
### 2. 安装图标（自动创建 tabBar 图标）
|
||
|
||
```bash
|
||
bash setup-icons.sh
|
||
```
|
||
|
||
这会生成 6 个 PNG 图标文件到 `static/` 目录。
|
||
|
||
> **注意：** 如果 bash 脚本执行失败（Python3 找不到），手动将 `static/` 下的 `.svg` 文件改名为 `.png` 并替换。
|
||
|
||
### 3. 配置 manifest.json
|
||
|
||
打开 `manifest.json`，填写你的微信小程序 AppID：
|
||
|
||
```json
|
||
"mp-weixin": {
|
||
"appid": "your-appid-here"
|
||
}
|
||
```
|
||
|
||
### 4. 启动开发服务器
|
||
|
||
```bash
|
||
# 微信小程序开发
|
||
npm run dev:mp-weixin
|
||
|
||
# H5 开发（浏览器预览）
|
||
npm run dev:h5
|
||
```
|
||
|
||
微信小程序编译产物在 `dist/dev/mp-weixin/`，用微信开发者工具打开该目录。
|
||
|
||
### 5. 配置后端域名
|
||
|
||
开发阶段：在微信开发者工具中勾选「不校验合法域名」（设置 → 项目设置）
|
||
|
||
生产阶段：仅在微信公众平台后台添加本项目实际 HTTPS 后端域名；localhost 只用于开发，不能进入体验版/正式版。
|
||
|
||
## API 配置
|
||
|
||
- 后端 baseURL：`http://localhost:8080/api`
|
||
- 图片路径拼接：`http://localhost:8080` + 数据库中的路径
|
||
- 本地存储：`uni.setStorageSync('petstore_user')` / `uni.setStorageSync('petstore_store')`
|
||
|
||
## 页面说明
|
||
|
||
| 页面 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| 登录 | /pages/login/login | Tab切换：员工登录/老板登录/注册老板/注册员工 |
|
||
| 首页 | /pages/home/home | 预约列表 Tab（待开始/进行中/已完成）+ 新建预约 |
|
||
| 洗美报告 | /pages/report/report | 填写报告；提交成功后弹出**发送给宠主**（复制链接 + 话术模板 + 二维码同屏） |
|
||
| 报告页 | /pages/report-view/reportView | 独立访问的报告页（token=xxx） |
|
||
| 我的 | /pages/mine/mine | 个人中心，老板有额外菜单 |
|
||
| 员工管理 | /pages/mine/staff | 老板功能：管理员工 |
|
||
| 服务类型 | /pages/mine/service-type | 老板功能：服务类型 CRUD |
|
||
| 店铺设置 | /pages/mine/store | 老板功能：店铺信息 |
|
||
| 我的报告 | /pages/mine/my-reports | 报告列表（相册网格） |
|
||
| 我的订单 | /pages/mine/my-orders | 订单列表 |
|
||
|
||
## 登录说明
|
||
|
||
- 登录成功后，`petstore_user` 和 `petstore_store` 存入本地存储
|
||
- 用户 ID 决定能看到哪些数据（员工看自己，老板看全店）
|
||
- role = 'boss' 时，显示员工管理/服务类型/店铺设置菜单
|
||
|
||
## 生产发版清单（小程序）
|
||
|
||
后端发版、只更新服务器代码**不会**自动更新用户手机上的小程序界面；**必须**单独走微信侧上传与提审（或发布体验版）。
|
||
|
||
建议每次发版按下面核对：
|
||
|
||
1. **本地构建小程序**
|
||
```bash
|
||
npm --prefix frontend run build:mp-weixin
|
||
```
|
||
产物目录：`dist/build/mp-weixin/`（以构建日志为准）。
|
||
|
||
2. **用微信开发者工具打开上述目录**，确认能正常编译、关键页面自测通过。
|
||
|
||
3. **上传**：开发者工具 → 上传 → 填写版本号与项目备注（建议写本次前端变更摘要，便于回溯）。
|
||
|
||
4. **公众平台**：在小程序后台将本次上传设为**体验版**或提交**审核**/**发布**（按你们流程）。
|
||
|
||
5. **易漏项**：仅部署后端或 H5、忘记本步骤时，线上小程序仍是旧包，容易出现「代码已改、真机还是旧交互」的误判。
|
||
|
||
### 报告分享链接与二维码（小程序）
|
||
|
||
「生成报告」弹层里的链接与二维码指向 **H5** `report.html?token=`，需与线上部署的静态站点一致。请在对应环境的 `.env` / `.env.production` 中配置 **`VITE_REPORT_PUBLIC_ORIGIN`**（例如 `https://www.example.com`，无尾斜杠）。未配置时仍可复制话术，但链接为空、二维码不展示，并会在弹层内提示。
|
||
|
||
### 宠主预约草稿（P0 C3）
|
||
|
||
当前实现：**提交时登录 + guest 草稿恢复**。未登录用户可填写预约表单，提交时跳转登录页（带 `redirect` 回预约页并保留 `storeId`），登录成功后回到预约页并恢复 guest 草稿（草稿 key 不依赖 `userInfo.id`，避免 `userId: undefined`）。登录态用户继续按 `userId` 维度保存草稿。草稿有效期 7 天。
|
||
|
||
### 门店代客预约身份
|
||
|
||
老板/员工在首页新建预约时必须填写宠主手机号，可选填宠主称呼。后端按手机号关联或创建 customer，并分别记录 `customerUserId` 与 `createdByUserId`；前端不得再把当前员工 `userId` 当作宠主提交。预约详情优先读取 `assignedStaffId`，兼容旧字段 `assignedUserId`。
|
||
|
||
## 前端 RC 发布门禁
|
||
|
||
发布前必须依次执行并全部通过：
|
||
|
||
```bash
|
||
# 1. 安装依赖
|
||
npm --prefix frontend install
|
||
|
||
# 2. 用权限受控的真实生产环境文件做门禁（不会打印变量值）
|
||
PETSTORE_FRONTEND_ENV_FILE=/secure/path/petstore-h5.env npm --prefix frontend run preflight:release
|
||
|
||
# 3. 让 Vite 使用同一份已通过门禁的配置并构建 H5
|
||
cp /secure/path/petstore-h5.env frontend/.env.production.local
|
||
npm --prefix frontend run build:h5
|
||
# 期望：DONE Build complete.
|
||
|
||
# 4. 小程序配置单独门禁并构建
|
||
PETSTORE_FRONTEND_ENV_FILE=/secure/path/petstore-mp.env npm --prefix frontend run preflight:release
|
||
cp /secure/path/petstore-mp.env frontend/.env.mp-weixin.local
|
||
npm --prefix frontend run build:mp-weixin
|
||
# 期望：DONE Build complete. + [verify-mp-app-json] OK
|
||
```
|
||
|
||
仓库内 `.env.production` / `.env.mp-weixin` 只含 `.invalid` 安全占位符，会被门禁主动拒绝。真实域名文件不得提交；发布结束后删除临时 `.env.*.local`。
|
||
|
||
### 前端 RC 检查项
|
||
|
||
- [ ] `VITE_API_ORIGIN` 已配置（宠小它专用后端 API 域名；**勿再用** `api.s-good.com`）
|
||
- [ ] `VITE_REPORT_PUBLIC_ORIGIN` 已配置（宠小它 H5 报告页域名，无尾斜杠；**勿再用** `www.s-good.com` 除非仍归属本项目）
|
||
- [ ] 微信小程序后台 **request 合法域名** 已加入 `VITE_API_ORIGIN`
|
||
- [ ] 微信小程序后台 **downloadFile 合法域名** 已加入 `VITE_API_ORIGIN`（成片下载）与 `VITE_REPORT_PUBLIC_ORIGIN`（H5 报告页资源，若需）
|
||
- [ ] 报告二维码链接检查：扫码后 H5 报告页可正常打开，token 匿名可访问
|
||
- [ ] 公开报告页 customer 登录态仍显示留资/预约 CTA；boss/staff 才显示内部分享/保存
|
||
- [ ] 未登录预约：填写 → 提交跳登录 → 登录后草稿恢复（门店、宠物、服务、时段、备注）
|
||
- [ ] 报告提交：无前图提示「请至少上传1张服务前照片」；无后图提示「请至少上传1张服务后照片」
|
||
- [ ] 小程序码 scene 解码：`scene=storeId%3D1` 可预填门店
|
||
|
||
## 环境变量
|
||
|
||
| 变量 | 必填 | 默认 | 说明 |
|
||
|------|------|------|------|
|
||
| `VITE_API_ORIGIN` | 生产必填 | `http://localhost:8080` | 后端 API 域名（用于 `uni.request` 与图片 URL 拼接）。**勿使用已挪作他用的 `api.s-good.com`** |
|
||
| `VITE_REPORT_PUBLIC_ORIGIN` | 生产必填 | 空 | H5 报告页域名（用于报告分享链接与二维码） |
|