f946e9dd
 hexiaodong
hhh
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
# 💳 组合支付功能 - 弹窗模式实现
## 🎯 功能说明
组合支付功能已升级为**模态框（弹窗）模式**，避免了样式错乱问题。
## 📋 使用流程
### 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
|
