# 💳 组合支付功能 - 弹窗模式实现

## 🎯 功能说明

组合支付功能已升级为**模态框（弹窗）模式**，避免了样式错乱问题。

## 📋 使用流程

### 1. **点击组合支付按钮**
   - 在支付方式按钮区域点击 "💳 组合支付" 按钮
   - 触发 `showComboPaymentModal = true`，弹出组合支付模态框

### 2. **组合支付模态框功能**
   
   #### 📊 支付信息摘要
   - **应收金额**: 显示订单总金额（红色）
   - **已支付**: 显示已组合支付的总金额（匹配时绿色，不匹配时红色）
   - **剩余金额**: 显示还需支付的金额（完全匹配时绿色）

   #### 🔧 添加支付方式
   - **支付方式选择器**: 下拉菜单选择支付方式
     - 微信支付
     - 支付宝
     - 现金
     - 会员余额
     - 积分抵扣
   - **金额输入**: 输入本次支付金额
   - **+ 添加按钮**: 将支付方式和金额添加到列表

   #### ✅ 验证规则
   - ✓ 金额必须 > 0
   - ✓ 金额不能超过剩余金额
   - ✓ 支付方式不能重复

   #### 📝 已添加支付列表
   - 显示所有已添加的支付方式
   - 每行显示：支付方式名称、金额、删除按钮
   - 可以随时删除已添加的项目

### 3. **确认支付**
   - **条件**: 组合支付总金额 = 应收金额
   - **状态**:
     - ✅ 金额匹配时: "✅ 确认支付" 按钮可用（绿色）
     - ❌ 金额不匹配时: "❌ 金额未匹配" 按钮禁用（灰色）
   - **点击确认**: 保存组合支付信息到 `info.skmx` 字段（JSON格式），然后生成订单

## 🔄 数据结构

### Vue Data 新增字段
```javascript
showComboPaymentModal: false,         // 是否显示组合支付模态框
paymentCombinations: [],              // 已添加的支付组合数组
selectedPaymentMethod: '',            // 当前选择的支付方式
selectedPaymentAmount: '',            // 当前输入的支付金额
```

### 支付组合对象结构
```javascript
{
  method: 'wechat',        // 支付方式代码
  label: '微信支付',        // 支付方式显示名称
  amount: '100.00'         // 支付金额
}
```

### 订单保存数据
```javascript
info.skzh = '组合支付'      // 支付方式设为组合支付
info.skmx = JSON.stringify([
  { method: 'wechat', label: '微信支付', amount: '100.00' },
  { method: 'cash', label: '现金', amount: '50.00' }
])  // 收款明细（JSON字符串）
```

## 🎨 UI 样式

### 模态框外观
- **背景**: 半透明黑色遮罩 (rgba(0,0,0,0.6))
- **宽度**: 80% / 最大 600px
- **阴影**: 0 8px 24px rgba(0,0,0,0.3)
- **圆角**: 12px
- **z-index**: 9999

### 信息摘要区域
- **背景**: #f5f7fa
- **应收金额**: 红色 (#de532c)
- **已支付/剩余**: 条件色（绿色✅ 或 红色❌）

### 支付方式列表
- **背景**: #fafafa
- **左边框**: 3px solid #1890ff
- **圆角**: 6px
- **滚动**: max-height 250px，超出自动滚动

## 🔌 核心方法

### `addPaymentMethod()`
```javascript
// 添加支付方式到组合支付列表
// 验证: 金额有效、不超过剩余额、支付方式有效
// 成功后: 清空输入框，更新 paymentCombinations
```

### `removePaymentMethod(index)`
```javascript
// 从组合支付列表移除指定支付方式
// 如果移除后列表为空，组合支付模态框保持打开
```

### `confirmComboPayment()`
```javascript
// 确认组合支付
// 1. 验证 canSaveOrder = true
// 2. 设置 info.skzh = '组合支付'
// 3. 保存组合信息到 info.skmx (JSON)
// 4. 关闭模态框
// 5. 调用 settlementPay() 生成订单
```

### `settlementPay()`
```javascript
// 生成销售出库单订单
// 如果是组合支付：已通过 confirmComboPayment() 设置数据
// 如果是单一支付：直接使用 info.skzh 值
```

## 📱 支付方式参考

| 代码 | 名称 | 备注 |
|------|------|------|
| wechat | 微信支付 | 需要验证余额 |
| alipay | 支付宝 | 需要验证余额 |
| cash | 现金 | 无需验证 |
| balance | 会员余额 | 需要验证会员账户 |
| points | 积分抵扣 | 需要验证积分 |

## 🚀 后端集成

### 数据库字段
- **skmx** (LONGTEXT): 存储支付明细 JSON
- **skzh** (VARCHAR): 支付方式，值为 "组合支付" 时表示组合支付

### 示例查询
```sql
SELECT * FROM wt_xsckd WHERE skzh = '组合支付';
```

### 示例返回数据
```json
{
  "id": "CHD20251027001",
  "skzh": "组合支付",
  "skmx": "[{\"method\":\"wechat\",\"label\":\"微信支付\",\"amount\":\"100.00\"},{\"method\":\"cash\",\"label\":\"现金\",\"amount\":\"50.00\"}]",
  "skje": 150.00
}
```

## ✨ 特性亮点

✅ **现代化界面** - 使用模态框避免样式错乱  
✅ **实时验证** - 金额实时计算和验证  
✅ **灵活配置** - 支持多种支付方式组合  
✅ **易操作** - 清晰的 UI 和交互流程  
✅ **完整记录** - 所有支付方式和金额都被记录  

---

**版本**: 1.0  
**最后更新**: 2025-10-27