# 宠伴生活馆 - 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. 配置后端域名

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

生产阶段：在微信公众平台后台添加以下合法域名：
- `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' 时，显示员工管理/服务类型/店铺设置菜单