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
170
171
172
|
# 预售出库单功能实现总结
## 功能需求
- 缺货商品（库存=0）仍然可以添加到购物车
- 缺货商品应通过**预售出库单**方式处理
- 普通商品正常创建**销售出库单**
- 系统需要自动判断并调用正确的API端点
## 实现方案
### 1. 收银台前端逻辑修改 (`sy/home.html`)
#### 1.1 商品选择逻辑
**原来的限制**：缺货商品禁止添加
```javascript
// ❌ 旧逻辑
if (!item.mdkc || item.mdkc <= 0) {
alert('库存不足，无法添加');
return;
}
```
**新的逻辑**：允许缺货商品添加，但标记为预售
```javascript
// ✅ 新逻辑
const isPresale = !item.mdkc || item.mdkc <= 0;
this.addgoodlist.push({
quantity: 1,
isPresale: isPresale, // 标记是否为预售商品
...item
});
if (isPresale) {
alert('该商品库存不足，将作为预售商品处理');
}
```
#### 1.2 套装商品逻辑
**原来的限制**：套装中有任何商品缺货，整个套装禁止添加
```javascript
// ❌ 旧逻辑
if (insufficientStock.length > 0) {
alert('套装中以下商品库存不足，无法添加到购物车：...');
return;
}
```
**新的逻辑**：允许套装添加，标记其中的缺货商品
```javascript
// ✅ 新逻辑
let hasPresaleItem = false;
packageItem.wtSptzMxList.forEach((item) => {
if (!product || !product.mdkc || product.mdkc < requiredQty) {
hasPresaleItem = true; // 标记该套装包含预售商品
}
});
// 即使有缺货商品也允许添加
if (hasPresaleItem) {
alert('套装中存在库存不足的商品，将作为预售单处理');
}
```
#### 1.3 购物车显示优化
为预售商品显示视觉提示：
```html
<!-- 预售标记 -->
<span v-if="item.isPresale"
style="background-color: #ff6b6b; color: white; padding: 2px 6px;">
预售
</span>
<!-- 预售商品用不同背景色 -->
<div :style="{
backgroundColor: item.isPresale ? '#fff3cd' : '#fff',
borderLeft: item.isPresale ? '4px solid #ff6b6b' : 'none'
}">
```
### 2. 结算逻辑修改 (`sy/settlement.html`)
#### 2.1 普通支付流程
在 `settlementPay()` 方法中：
```javascript
// ✅ 检查是否有预售商品
const hasPresaleItem = this.addgoodlist.some(item => item.isPresale);
const apiEndpoint = hasPresaleItem ? "/api/Extend/wtysckd" : "/api/Extend/wtxsckd";
const documentType = hasPresaleItem ? '预售出库单' : '销售出库单';
if (hasPresaleItem) {
alert('购物车中存在库存不足的商品，将创建' + documentType);
}
// 调用正确的API端点
axios({
url: this.baseUrl + apiEndpoint,
method: 'POST',
data: this.info
}).then((res) => {
if (res.data.code == 200) {
window.alert(documentType + '创建成功');
window.location = 'home.html';
}
});
```
#### 2.2 组合支付流程
在 `finalizeComboPayment()` 方法中实现相同的预售判断逻辑。
### 3. API端点映射
| 商品类型 | 调用端点 | 说明 |
|---------|---------|------|
| 全部有货 | `/api/Extend/wtxsckd` | 销售出库单 |
| 存在缺货 | `/api/Extend/wtysckd` | 预售出库单 |
## 用户体验流程
```
用户操作流程：
1. 选择商品（包括缺货商品）
↓
2. 系统自动检测库存并标记
- 有货商品 → 正常显示
- 缺货商品 → 显示"预售"标签，黄色背景，红色左边框
↓
3. 确认收款
↓
4. 系统自动判断：
- 全部有货 → 创建销售出库单 (wtXsckd)
- 存在缺货 → 创建预售出库单 (wtYsckd)
↓
5. 返回首页，订单已创建
```
## 数据结构
购物车商品对象新增字段：
```javascript
{
id: "product_id",
spmc: "商品名称",
quantity: 2,
lsj: 99.99,
mdkc: 0, // 库存
isPresale: true, // ✅ 新增：标记是否为预售商品
...otherFields
}
```
## 前后端兼容性
- ✅ 后端 `/api/Extend/wtysckd` 和 `/api/Extend/wtxsckd` API 已存在
- ✅ 两个API的数据结构完全相同
- ✅ 前端只是根据商品类型选择调用不同的端点
- ✅ `isPresale` 标记仅用于前端显示，不发送到后端
## 测试场景
| 场景 | 预期行为 |
|------|---------|
| 全部商品有货 | 创建销售出库单 |
| 部分商品缺货 | 缺货商品标记为"预售"，创建预售出库单 |
| 套装包含缺货商品 | 套装允许添加，缺货商品标记为预售 |
| 组合支付 + 缺货商品 | 调用预售API创建预售出库单 |
## 优势
1. **提升用户体验**：用户无需被库存限制，可以预售缺货商品
2. **流程自动化**：系统自动判断和调用正确的API
3. **数据清晰**：预售商品通过后台预售出库单管理，易于追踪
4. **视觉友好**：预售商品有明显标记，用户一目了然
5. **零对接成本**：完全利用现有的预售出库单API，无需修改后端
|
