petstore/petstore-frontend

Fork 0

malei f192d89534 feat: align phase A customer flows

2026-08-01 19:58:10 +08:00

7.1 KiB

Raw Blame History

宠小它 - 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. 安装依赖

cd /Users/wac/Desktop/www/_src/petstore/frontend
npm install

2. 安装图标（自动创建 tabBar 图标）

bash setup-icons.sh

这会生成 6 个 PNG 图标文件到 static/ 目录。

注意： 如果 bash 脚本执行失败（Python3 找不到），手动将 static/ 下的 .svg 文件改名为 .png 并替换。

3. 配置 manifest.json

打开 manifest.json，填写你的微信小程序 AppID：

"mp-weixin": {
  "appid": "your-appid-here"
}

4. 启动开发服务器

# 微信小程序开发
npm run dev:mp-weixin

# H5 开发（浏览器预览）
npm run dev:h5

微信小程序编译产物在 dist/dev/mp-weixin/，用微信开发者工具打开该目录。

5. 配置后端域名

开发阶段：在微信开发者工具中勾选「不校验合法域名」（设置 → 项目设置）

生产阶段：在微信公众平台后台添加以下合法域名：

http://localhost:8080（开发用）
你的实际后端域名

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' 时，显示员工管理/服务类型/店铺设置菜单

生产发版清单（小程序）

后端发版、只更新服务器代码不会自动更新用户手机上的小程序界面；必须单独走微信侧上传与提审（或发布体验版）。

建议每次发版按下面核对：

本地构建小程序
```
npm --prefix frontend run build:mp-weixin
```
产物目录：dist/build/mp-weixin/（以构建日志为准）。
用微信开发者工具打开上述目录，确认能正常编译、关键页面自测通过。
上传：开发者工具 → 上传 → 填写版本号与项目备注（建议写本次前端变更摘要，便于回溯）。
公众平台：在小程序后台将本次上传设为体验版或提交审核/发布（按你们流程）。
易漏项：仅部署后端或 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 天。

前端 RC 发布门禁

发布前必须依次执行并全部通过：

# 1. 安装依赖
npm --prefix frontend install

# 2. H5 构建
npm --prefix frontend run build:h5
# 期望：DONE Build complete.

# 3. 微信小程序构建
npm --prefix frontend run build:mp-weixin
# 期望：DONE Build complete. + [verify-mp-app-json] OK

前端 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 报告页域名（用于报告分享链接与二维码）

7.1 KiB Raw Blame History Unescape Escape