收银台模块 (POS System)

一个基于 Vue.js + Axios 的轻量级前端收银系统

🚀 快速启动

方式一：使用 Python 服务器（推荐）

# 进入项目目录
cd /Users/hexiaodong/Desktop/git/erp2025/Antis.Erp.Plat/sy

# 启动 Python HTTP 服务器（端口 8888）
python3 -m http.server 8888

# 或指定其他端口
python3 -m http.server 9000

然后访问：http://localhost:8888

方式二：使用 Node.js http-server

# 全局安装
npm install -g http-server

# 启动服务器
http-server . -p 8888 -c-1

# -c-1 参数禁用缓存

方式三：使用 Live Server（VS Code 插件）

1. 在 VS Code 中安装 Live Server 插件
2. 右键 index.html → Open with Live Server

---

📋 系统流程

┌────────────────┐
│  login.html    │  ← 登录页
│  (8888/login)  │
└────────┬────────┘
         │ 登录成功，存储 token + userId
         ↓
┌────────────────────────────────┐
│  home.html                     │  ← 商品列表页
│  (8888/home)                   │
│  - 展示所有商品                 │
│  - 选择会员（可选）             │
│  - 加入购物车                   │
└────────┬────────────────────────┘
         │ 点击结算
         ↓
┌────────────────────────────────┐
│  settlement.html               │  ← 收银台
│  (8888/settlement)             │
│  - 商品清单 + 计算              │
│  - 应用折扣/改价/抹零           │
│  - 选择支付方式                 │
│  - 提交订单                     │
└────────┬────────────────────────┘
         │ 支付成功
         ↓
  ┌──────────────┐
  │ 返回 home    │
  │ 清空购物车    │
  └──────────────┘

---

🔐 登录信息

系统需要访问后端 API（https://www.ponggame.cn）

登录必填项：

• 用户名：需要从系统中查询
• 密码：MD5加密后传输
• 门店：从数据库动态加载

localStorage 存储：

{
  "token": "授权令牌",
  "userId": "用户ID",
  "username": "用户名",
  "selectedStore": "门店信息JSON",
  "addgoodlist": "购物清单JSON",
  "hyinfo": "会员信息JSON",
  "ckinfo": "仓库信息JSON"
}

---

📱 主要功能模块

1. 商品管理 (home.html)

• ✅ 商品列表展示
• ✅ 商品搜索/分类
• ✅ 加入购物车
• ✅ 会员选择

2. 收银台 (settlement.html)

• ✅ 购物清单显示
• ✅ 整单折扣 (E键) - 9.8折、9.5折等
• ✅ 整单改价 (R键) - 灵活调价
• ✅ 抹零功能 (U键) - 处理小数位
• ✅ 数字键盘 - 快速输入金额
• ✅ 多种支付方式 - 微信、支付宝、现金、余额、积分、标记收款

3. 会员管理 (member.html)

• ✅ 会员查询
• ✅ 会员信息显示

4. 订单记录 (from.html)

• （待开发）

---

🎮 快捷键

快捷键	功能	说明
E	整单折扣	打开折扣/立减弹窗
R	整单改价	直接改价
U	抹零	处理小数位（可反复切换）
SPACE	收款	提交订单
ESC	返回	返回上一页

---

🔧 API 接口说明

后端 API 地址

基础URL: https://www.ponggame.cn

关键接口

1. 登录 POST /api/oauth/Login
2. 获取当前用户 GET /api/oauth/CurrentUser
3. 获取用户列表 GET /api/permission/Users
4. 获取门店列表 GET /api/Extend/WtMd
5. 获取商品列表 GET /api/Extend/WtSp
6. 获取会员信息 GET /api/Extend/wthy/{id}
7. 获取数据字典 GET /api/system/DictionaryData/{id}
8. 提交订单 POST /api/Extend/wtxsckd

---

📁 项目结构

sy/
├── login.html           # 登录页
├── home.html            # 商品列表
├── settlement.html      # 收银台（核心）
├── member.html          # 会员管理
├── from.html            # 订单记录（预留）
├── css/
│   └── style.css        # 全局样式
├── js/
│   ├── vue.min.js       # Vue 2.x
│   └── jquery.min.js    # jQuery
├── axios-1.x/           # Axios HTTP库
└── images/              # 图标资源
    ├── wechatpay.png    # 微信支付
    ├── alipay.png       # 支付宝
    └── ... (其他图标)

---

💡 使用示例

完整操作流程

Step 1: 登录

1. 访问 http://localhost:8888/login.html
2. 输入用户名和密码
3. 选择门店
4. 点击登录

Step 2: 选购商品

1. 浏览商品列表
2. 可选：选择会员（扫码）
3. 点击商品或使用条码扫描器
4. 商品添加到购物车
5. 重复添加其他商品

Step 3: 结算

1. 点击「结算」按钮
2. 进入收银台

3. 【应用优惠】
   - 按 E 键 → 选择折扣或立减
   或
   - 按 R 键 → 输入改价金额

4. 【处理小数】
   - 按 U 键 → 自动抹零
   - 再按 U 键 → 恢复原值

5. 【选择支付方式】
   - 微信、支付宝、现金、余额、积分、标记收款

6. 【输入收款金额】
   - 使用数字键盘输入
   - 或点击快捷金额（¥20、¥50、¥100）

7. 【完成支付】
   - 按 SPACE 或点击「收款」按钮
   - 订单提交成功
   - 自动返回商品列表

---

🐛 常见问题

Q1: 访问时出现 CORS 错误？

A: 这是跨域请求问题。后端需要配置 CORS 头。检查：

Access-Control-Allow-Origin: http://localhost:8888
Access-Control-Allow-Credentials: true

Q2: 登录失败？

A: 检查：

• 用户名/密码是否正确
• 是否选择了门店
• 后端服务是否在线

Q3: 添加商品后找不到？

A: 商品保存在 localStorage['addgoodlist']，检查：

• 浏览器是否禁用了 localStorage
• 存储空间是否不足（通常 5MB）

Q4: 小数位显示不正确？

A: 这是浮点数精度问题。可使用 toFixed(2) 处理。

---

🚀 性能优化

建议：

1. 图片优化 - 使用 WebP 格式压缩
2. 懒加载 - 商品列表使用虚拟滚动
3. 缓存策略 - 静态资源使用 Service Worker
4. 请求合并 - 减少 API 调用次数

---

📝 开发计划

• [ ] 集成硬件设备（扫码枪、小票打印机）
• [ ] 支付网关对接（微信/支付宝 SDK）
• [ ] 离线模式支持
• [ ] 数据同步与备份
• [ ] Vue 3 升级
• [ ] TypeScript 重构

---

📞 技术支持

• 后端 API: https://www.ponggame.cn
• 存储库: localStorage（单机模式）
• 框架: Vue 2.x + Axios

---

最后更新: 2025-01-01
维护者: ERP 开发团队