petstore-frontend/README.md
2026-04-12 22:57:48 +08:00

3.5 KiB
Raw Permalink 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 配置

  • 后端 baseURLhttp://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_userpetstore_store 存入本地存储
  • 用户 ID 决定能看到哪些数据(员工看自己,老板看全店)
  • role = 'boss' 时,显示员工管理/服务类型/店铺设置菜单