diff --git a/pages/detail/serviceDetail.vue b/pages/detail/serviceDetail.vue index eeaa919..ab8bf0a 100644 --- a/pages/detail/serviceDetail.vue +++ b/pages/detail/serviceDetail.vue @@ -42,10 +42,15 @@ - + @@ -75,17 +80,21 @@ - {{ item.quantity || 0 }} - + + 库存不足,不可选择 @@ -275,6 +284,10 @@ export default { // 切换菜单项选择状态 toggleMenuItem(index) { const item = this.menuList[index]; + // 库存不足时不可选择 + if (item && item.stock === 0) { + return; + } item.selected = !item.selected; if (!item.selected) { item.quantity = 0; @@ -287,6 +300,10 @@ export default { // 增加数量 increaseQuantity(index) { const item = this.menuList[index]; + // 库存不足时不可增加数量 + if (item && item.stock === 0) { + return; + } // 如果未选中,先选中 if (!item.selected) { item.selected = true; @@ -298,6 +315,10 @@ export default { // 减少数量 decreaseQuantity(index) { const item = this.menuList[index]; + // 库存不足时不处理数量变化 + if (item && item.stock === 0) { + return; + } const currentQuantity = item.quantity || 0; // 确保数量不能小于0 if (currentQuantity > 0) { @@ -579,6 +600,10 @@ export default { align-items: center; position: relative; + &.out-of-stock { + opacity: 0.6; + } + .checkbox { width: 30rpx; height: 30rpx; @@ -590,6 +615,11 @@ export default { margin-right: 19rpx; flex-shrink: 0; + &.disabled { + border-color: #dddddd; + background-color: #f5f5f5; + } + &.checked { background-color: #004294; border-color: #004294; @@ -694,6 +724,12 @@ export default { font-weight: 500; background-color: #ffffff; border-radius: 4rpx; + + &.disabled { + color: #bbbbbb; + border-color: #dddddd; + background-color: #f5f5f5; + } } .quantity-number { @@ -706,6 +742,11 @@ export default { } } } + .stock-tip { + margin-top: 10rpx; + font-size: 20rpx; + color: #999999; + } } } }