# 小程序点单

**Repository Path**: lai-teng/mini-program-ordering

## Basic Information

- **Project Name**: 小程序点单
- **Description**: 小程序扫码点单支持堂食外带
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-07-08
- **Last Updated**: 2026-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🍞 餐饮 SaaS 在线下单系统

> 面包店 / 咖啡店多租户在线下单平台，含微信扫码点餐小程序、PC 商户控制台（纯 HTML）、Java 后端。

---

## 一、项目结构

```
order-platform/
├── sql/                         # 数据库脚本
│   ├── schema.sql               # 建表 + 初始数据
│   └── test_orders.sql          # 测试订单数据
├── order-common/                # 公共模块（实体/DTO/枚举/工具）
├── order-server/                # 业务模块（控制器/服务/安全/配置）
│   └── src/main/resources/
│       ├── application.yml      # 主配置
│       ├── application-dev.yml  # 开发环境配置
│       └── static/              # PC 控制台静态文件（部署到此处）
├── web-console-html/            # PC 控制台源码（纯 HTML+CSS+jQuery）
├── miniapp/                     # 微信小程序源码
└── README.md
```

---

## 二、环境配置

### 2.1 技术栈

| 层 | 技术 | 版本 |
|----|------|------|
| 后端框架 | Spring Boot | 2.7.18 |
| ORM | MyBatis Plus | 3.5.3.1 |
| 数据库 | MySQL | 8.0+ |
| JDK | OpenJDK | 11+ |
| PC 前端 | HTML + CSS + jQuery | — |
| 小程序 | 微信原生框架 | — |

### 2.2 数据库配置

`order-server/src/main/resources/application.yml`：

```yaml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/orderplatform?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password: '!qaz@wsx'
    driver-class-name: com.mysql.cj.jdbc.Driver
```

### 2.3 JWT 配置

```yaml
jwt:
  secret: order-platform-jwt-secret-key-2024-very-long-secret
  customer-expire: 604800    # C端用户 7 天
  merchant-expire: 86400     # 商户端 24 小时
```

### 2.4 微信配置

```yaml
wechat:
  miniapp:
    appid: your-appid        # 替换为真实 AppID
    secret: your-secret      # 替换为真实 Secret
```

> **开发阶段**：appid/secret 未配置时，系统自动使用 mock openid，不影响联调。

### 2.5 OSS 配置（可选）

```yaml
oss:
  endpoint: oss-cn-hangzhou.aliyuncs.com
  access-key: your-access-key
  secret-key: your-secret-key
  bucket: order-platform
```

---

## 三、数据库表

| 表名 | 说明 | 核心字段 |
|------|------|----------|
| `tenant` | SaaS 租户（商户） | id, name, contact_name, contact_phone, status, expire_time |
| `store` | 门店 | id, tenant_id, name, address, phone, business_hours, logo, banner, status |
| `dining_table` | 桌子 | id, store_id, table_number, qr_code_url, capacity, area, status (1空闲/2使用中) |
| `category` | 商品分类 | id, tenant_id, store_id, name, sort_order, status |
| `product` | 商品 | id, tenant_id, category_id, name, description, image, price, original_price, unit, stock, status, is_recommend |
| `product_spec` | 商品规格 | id, product_id, name, price, stock |
| `customer` | C端客户 | id, openid, nickname, avatar, phone |
| `order` | 订单 | id, order_no, tenant_id, store_id, table_id, table_number, customer_id, order_type(1堂食/2外带), total_amount, final_amount, status, pay_status |
| `order_item` | 订单明细 | id, order_id, product_id, product_name, price, quantity, amount |
| `merchant_user` | 商户用户 | id, tenant_id, username, password(BCrypt), role(1管理员/2店员), status |
| `printer` | 厨房打印机 | id, tenant_id, store_id, name, type, config |
| `system_config` | 系统配置 | id, tenant_id, config_key, config_value |

### 初始化测试账号

| 用户名 | 密码 | 角色 |
|--------|------|------|
| `admin` | `123456` | 管理员 |
| `staff01` | `123456` | 店员 |

---

## 四、部署上线

### 4.1 数据库初始化

```sql
CREATE DATABASE IF NOT EXISTS orderplatform DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE orderplatform;
SOURCE F:/AutoClaw/order-platform/sql/schema.sql;
```

### 4.2 后端构建与启动

```bash
cd order-platform
mvn clean install -DskipTests
# IDEA 运行 com.orderplatform.server.OrderServerApplication
# 或: cd order-server && mvn spring-boot:run
```

端口：`8080`

### 4.3 PC 控制台部署

控制台文件已内置在后端 `static/` 目录，随 Spring Boot 一起启动。

访问地址：`http://localhost:8080/index.html`

> 如需单独部署，将 `web-console-html/` 整个目录放到 Nginx/Apache 并配置 `/api` 反向代理到 `8080`。

### 4.4 微信小程序

1. 微信开发者工具 → 导入 `miniapp/` 目录
2. 修改 `project.config.json` 中的 `appid` 为你的 AppID
3. 开发阶段：小程序后台 → 开发管理 → 开发设置 → 关闭"域名校验"
4. 正式上线：在小程序后台配置 `request 合法域名` 为你的服务器域名

---

## 五、PC 控制台操作

### 登录
- 访问 `http://localhost:8080/index.html`
- 账号 `admin` / 密码 `123456`

### 功能清单

| 菜单 | 功能 |
|------|------|
| 数据概览 | 今日订单数/营收/本月营收 + 7天柱状图 + 热销 Top5 |
| 商品管理 | 搜索/筛选/新增/编辑/上下架/删除 + 规格管理 + 图片上传 |
| 分类管理 | 新增/编辑/删除分类 |
| 订单管理 | 按状态筛选/接单/完成/详情 |
| 桌位管理 | 新增/删除桌子 + 查看二维码 |
| 系统设置 | 修改门店名称/地址/电话/营业时间（保存后小程序自动同步） |

### 商品编辑注意事项
- 价格单位为**元**（如 38.00 表示 ¥38）
- 图片上传使用 FormData，调 `POST /api/merchant/upload`
- 规格管理支持动态增删行

---

## 六、小程序操作

### 6.1 入口模式

| 入口方式 | 行为 | 订单类型 |
|----------|------|----------|
| 扫桌码进入 | 自动进入点餐页，绑定桌号 | 堂食 |
| 扫无桌号的码 | 自动进入点餐页 | 打包外带 |
| 直接打开小程序 | 显示"扫码点餐"+"打包外带"按钮 | 手动选择 |
| 从 tab 进入点餐 | 默认打包外带 | 打包外带 |

### 6.2 点餐流程

1. 进入菜单 → 左侧选分类 → 右侧选商品 → 点击弹出规格/数量 → 加入购物车
2. 底部购物车栏实时显示数量和金额 → 点击"去结算"
3. 购物车页确认商品 → 填写备注 → 提交订单
4. 订单页查看状态 → 待支付 → 支付 → 制作中

### 6.3 授权登录
- 首次打开自动静默登录（`wx.login` → 后端 `code2session` → openid 匹配）
- "我的"页面可设置头像（圆形）、昵称（支持微信昵称）、绑定手机号
- 头像/昵称/手机号保存到后端数据库，下次打开自动恢复

### 6.4 开发调试注意事项
- 小程序需信任 `localhost` 域名（开发工具 → 详情 → 不校验合法域名）
- 真实手机预览需在同一 WiFi 下，且后端需改为局域网 IP
- TabBar 图标在部署前需要替换为设计稿

---

## 七、后端 API 概览

### C 端（小程序）`/api/customer`

| 方法 | 路径 | 说明 | 认证 |
|------|------|------|------|
| POST | `/login` | 微信登录 | 否 |
| GET | `/store/{id}` | 门店信息 | 否 |
| GET | `/categories/{storeId}` | 分类+商品 | 否 |
| GET | `/table/{id}` | 桌位信息 | 否 |
| POST | `/order` | 下单 | 是 |
| GET | `/order/list` | 订单列表 | 是 |
| GET | `/order/{id}` | 订单详情 | 是 |
| POST | `/order/{id}/cancel` | 取消订单 | 是 |
| POST | `/order/{id}/pay` | 支付 | 是 |
| POST | `/phone` | 绑定手机号 | 是 |
| PUT | `/profile` | 更新资料 | 是 |

### 商户端（PC 控制台）`/api/merchant`

| 方法 | 路径 | 说明 |
|------|------|------|
| POST | `/login` | 登录 |
| GET | `/statistics` | 数据统计 |
| GET/PUT | `/store` | 门店信息 |
| GET | `/products` | 商品列表 |
| POST/PUT | `/product` | 新增/编辑商品 |
| PUT | `/product/{id}/status` | 上下架 |
| GET/POST/PUT/DELETE | `/categor{y,ies}` | 分类管理 |
| GET | `/orders` | 订单列表 |
| GET | `/order/{id}` | 订单详情 |
| PUT | `/order/{id}/status` | 更新订单状态 |
| GET/POST/DELETE | `/table{,s}` | 桌位管理 |
| GET | `/table/{id}/qrcode` | 获取桌码 |
| POST | `/upload` | 文件上传 |

---

## 八、常见问题

| 问题 | 原因 | 解决 |
|------|------|------|
| 登录 500 | JWT 未初始化或数据库未连接 | 检查 `application.yml` 的数据库配置和 `jwt.secret` |
| 页面空白 | `style.css` `position:fixed` 遮挡 | 已修复为 `position:relative` |
| 小程序 401 | 拦截器未放行公开接口 | 检查 `WebMvcConfig` 的 `excludePathPatterns` |
| 价格显示不对 | 后端存元、前端 /100 | 已统一为元 |
| emoji 显示? | 小程序不支持部分 emoji | 已替换为纯文本 |
| 数据库中文乱码 | PowerShell 管道导入编码丢失 | 用 `mysql` 的 `SOURCE` 命令导入 |
| order 表 SQL 报错 | MySQL 保留字 | 已加反引号 `` \`order\` `` |


### 密码加密规则

商户用户密码使用 **BCrypt** 加密（cost factor = 10），格式：${'}2a10...

通过 Java 生成新密码：
`java
String hash = new org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder().encode("你的密码");
System.out.println(hash);
`
然后执行 UPDATE merchant_user SET password='生成的hash' WHERE username='admin';

在线工具：[https://bcrypt-generator.com](https://bcrypt-generator.com)（选 Rounds=10）