README.md 6.98 KB

Edit Raw Blame History


收银台模块 (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 插件）

在 VS Code 中安装 Live Server 插件
右键 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

关键接口

登录 POST /api/oauth/Login
获取当前用户 GET /api/oauth/CurrentUser
获取用户列表 GET /api/permission/Users
获取门店列表 GET /api/Extend/WtMd
获取商品列表 GET /api/Extend/WtSp
获取会员信息 GET /api/Extend/wthy/{id}
获取数据字典 GET /api/system/DictionaryData/{id}
提交订单 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) 处理。


🚀 性能优化
建议：

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


📝 开发计划

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


📞 技术支持

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


最后更新: 2025-01-01

维护者: ERP 开发团队