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

🎯 功能说明

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

📋 使用流程

1. 点击组合支付按钮

• 在支付方式按钮区域点击 "💳 组合支付" 按钮
• 触发 showComboPaymentModal = true，弹出组合支付模态框

2. 组合支付模态框功能

#### 📊 支付信息摘要

• 应收金额: 显示订单总金额（红色）
• 已支付: 显示已组合支付的总金额（匹配时绿色，不匹配时红色）
• 剩余金额: 显示还需支付的金额（完全匹配时绿色）

#### 🔧 添加支付方式

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

#### ✅ 验证规则

• ✓ 金额必须 > 0
• ✓ 金额不能超过剩余金额
• ✓ 支付方式不能重复

#### 📝 已添加支付列表

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

3. 确认支付

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

🔄 数据结构

Vue Data 新增字段

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

支付组合对象结构

{
  method: 'wechat',        // 支付方式代码
  label: '微信支付',        // 支付方式显示名称
  amount: '100.00'         // 支付金额
}

订单保存数据

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()

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

removePaymentMethod(index)

// 从组合支付列表移除指定支付方式
// 如果移除后列表为空，组合支付模态框保持打开

confirmComboPayment()

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

settlementPay()

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

📱 支付方式参考

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

🚀 后端集成

数据库字段

• skmx (LONGTEXT): 存储支付明细 JSON
• skzh (VARCHAR): 支付方式，值为 "组合支付" 时表示组合支付

示例查询

SELECT * FROM wt_xsckd WHERE skzh = '组合支付';

示例返回数据

{
  "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