# 收银台模块 (POS System)

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

## 🚀 快速启动

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

```bash
# 进入项目目录
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

```bash
# 全局安装
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 存储：
```javascript
{
  "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 开发团队