# pd-admin-h5

**Repository Path**: oneonly/pd-admin-h5

## Basic Information

- **Project Name**: pd-admin-h5
- **Description**: pd-admin-h5 是 拼豆门店管理系统 的商家移动端 H5 应用，面向店员日常运营场景。采用 Vue 3 + Vant 4 构建，界面简洁、按钮大、适合手机操作，只保留运营刚需功能。

与 PC 后台管理端（pd-admin-web）共享同一后端 API，让店员随时随地处理门店运营事务。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-27
- **Last Updated**: 2026-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 拼豆店商家移动端 H5

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.4-4FC08D?logo=vue.js" alt="Vue 3.4" />
  <img src="https://img.shields.io/badge/Vite-5.4-646CFF?logo=vite" alt="Vite 5.4" />
  <img src="https://img.shields.io/badge/Vant-4.9-07C160?logo=vant" alt="Vant 4.9" />
  <img src="https://img.shields.io/badge/Pinia-2.1-FFD859" alt="Pinia 2.1" />
  <img src="https://img.shields.io/badge/license-MIT-green" alt="MIT" />
</p>

> 📱 拼豆手工体验馆商家移动端管理工具，轻量化设计，专注门店运营刚需场景。

---

## 📖 项目简介

`pd-admin-h5` 是 [拼豆门店管理系统](https://gitee.com/yourname/pd-shop-root) 的商家移动端 H5 应用，面向店员日常运营场景。采用 Vue 3 + Vant 4 构建，界面简洁、按钮大、适合手机操作，只保留运营刚需功能。

与 PC 后台管理端（`pd-admin-web`）共享同一后端 API，让店员随时随地处理门店运营事务。

---

## ✨ 功能特性

| 功能 | 说明 |
|------|------|
| 📊 今日看板 | 今日营业额、订单数、客单价、桌台使用率一目了然 |
| 🪑 桌台状态 | 实时查看所有桌台状态（空闲/使用中/已预定/锁定），点击查看详情 |
| 🎫 券码核销 | 扫码或手动输入团购券码，一键核销 |
| 👤 会员充值 | 手机号搜索会员，快速充值，支持固定金额和自定义金额 |
| 📋 订单查询 | 按日期筛选订单，查看订单详情 |
| ⚠️ 库存预警 | 低库存商品列表，库存进度条直观展示，及时补货提醒 |
| 📈 营收报表 | 日/月营收数据切换，核心指标卡片展示 |

---

## 🎨 界面预览

```
┌─────────────────────────────┐
│         拼豆店               │
│       商家移动管理端          │
│                             │
│   ┌─────────┐ ┌─────────┐  │
│   │ ¥1,280  │ │   32    │  │
│   │ 今日营业额│ │ 今日订单数│  │
│   └─────────┘ └─────────┘  │
│   ┌─────────┐ ┌─────────┐  │
│   │  ¥85    │ │   75%   │  │
│   │ 客单价   │ │ 桌台使用率│  │
│   └─────────┘ └─────────┘  │
│                             │
│  🎫核销券  🪑桌台  ⚠️库存  👤充值 │
│                             │
│  ┌── 看板 ── 桌台 ── 核销 ── 我的 ──┐
└─────────────────────────────┘
```

---

## 🛠 技术栈

| 类别 | 技术 | 版本 | 说明 |
|------|------|------|------|
| 框架 | Vue 3 | 3.4.x | Composition API + `<script setup>` |
| 构建 | Vite | 5.4.x | 极速开发体验 |
| UI 组件库 | Vant 4 | 4.9.x | 轻量可靠的移动端组件库 |
| 状态管理 | Pinia | 2.1.x | Vue 3 官方推荐 |
| 路由 | Vue Router | 4.3.x | SPA 路由管理 |
| HTTP | Axios | 1.7.x | 请求封装，JWT 鉴权 |
| 移动端适配 | postcss-px-to-viewport | 1.2.x | px → vw 自动转换 |

---

## 📁 项目结构

```
pd-admin-h5/
├── index.html                          # 入口 HTML
├── package.json                        # 依赖管理
├── vite.config.js                      # Vite 配置
├── postcss.config.cjs                  # PostCSS 移动端适配
├── src/
│   ├── main.js                         # 应用入口
│   ├── App.vue                         # 根组件 + 底部 TabBar
│   ├── router/
│   │   └── index.js                    # 路由配置（9条路由）
│   ├── store/
│   │   └── user.js                     # 用户登录状态管理
│   ├── api/
│   │   ├── request.js                  # Axios 封装（拦截器、Token）
│   │   ├── auth.js                     # 登录 API
│   │   ├── dashboard.js                # 看板数据 API
│   │   ├── table.js                    # 桌台状态 API
│   │   ├── voucher.js                  # 团购券核销 API
│   │   ├── member.js                   # 会员充值 API
│   │   ├── order.js                    # 订单查询 API
│   │   └── stock.js                    # 库存预警 API
│   ├── views/
│   │   ├── login/index.vue             # 登录页
│   │   ├── dashboard/index.vue         # 今日营收看板
│   │   ├── table/index.vue             # 实时桌台状态
│   │   ├── voucher/index.vue           # 快速核销团购券
│   │   ├── mine/index.vue              # 我的（功能入口）
│   │   ├── member/index.vue            # 会员充值
│   │   ├── order/index.vue             # 订单查询
│   │   ├── stock/index.vue             # 库存预警
│   │   └── report/index.vue            # 日/月营收报表
│   └── styles/
│       └── global.css                  # 全局样式
```

---

## 🚀 快速开始

### 环境要求

- Node.js 20+
- npm 或 pnpm

### 安装与运行

```bash
# 克隆项目
git clone https://gitee.com/yourname/pd-shop-root.git
cd pd-shop-root/code/pd-admin-h5

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 浏览器访问（建议使用手机模式调试）
# http://localhost:5174
```

### 构建部署

```bash
# 构建生产版本
npm run build

# 产物输出到 dist/ 目录，可直接部署到 Nginx 等静态服务器
```

### 接口代理

开发环境默认代理到 `http://localhost:8080`，可在 `vite.config.js` 中修改：

```js
server: {
  port: 5174,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',  // 后端服务地址
      changeOrigin: true
    }
  }
}
```

---

## 🔌 后端 API 对接

本项目与 [拼豆门店管理系统](https://gitee.com/yourname/pd-shop-root) 后端共享接口，主要 API 端点：

| 模块 | 端点 | 说明 |
|------|------|------|
| 登录 | `POST /common/login` | 店员登录 |
| 看板 | `GET /dashboard/today` | 今日营收摘要 |
| 桌台 | `GET /table/list` | 桌台列表 |
| 桌台 | `GET /table/:id` | 桌台详情 |
| 核销 | `GET /voucher/info` | 查询券信息 |
| 核销 | `POST /voucher/verify` | 确认核销 |
| 会员 | `GET /member/search` | 手机号搜索 |
| 会员 | `POST /member/recharge` | 会员充值 |
| 订单 | `GET /order/list` | 订单列表 |
| 库存 | `GET /stock/warning` | 库存预警 |
| 报表 | `GET /report/summary` | 营收汇总 |

---

## 📐 设计规范

- **适配基准**：375px 设计稿，自动 px → vw 转换
- **颜色体系**：Vant 默认蓝色主题 `#1989fa`
- **圆角规范**：卡片 8px，按钮圆形
- **间距规范**：4/8/12/16px 倍数体系
- **字体层级**：标题 18px/正文 15px/辅助 12px

---

## 🗺️ 路线图

- [x] 登录与今日看板
- [x] 实时桌台状态
- [x] 团购券核销
- [x] 会员充值
- [x] 订单查询
- [x] 库存预警
- [x] 日/月营收报表
- [ ] 扫码枪硬件适配
- [ ] 暗黑模式支持
- [ ] 推送通知集成

---

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建功能分支 `git checkout -b feature/AmazingFeature`
3. 提交代码 `git commit -m 'feat: add some amazing feature'`
4. 推送分支 `git push origin feature/AmazingFeature`
5. 创建 Pull Request

---

## 📄 许可证

MIT License © 2024 拼豆手工体验馆

---

## 🔗 相关项目

| 项目 | 说明 | 地址 |
|------|------|------|
| 拼豆门店管理系统 | 完整项目仓库 | [Gitee](https://gitee.com/yourname/pd-shop-root) |
| pd-admin-web | PC 后台管理端 | `code/pd-admin-web` |
| pd-admin-mini-program | 顾客微信小程序 | `code/pd-admin-mini-program` |

---

<p align="center">
  ⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！
</p>