JavaScript购物车删除商品未撤销折扣导致负余额的问题咨询

问题根源 #

你当前的代码存在两个核心逻辑错误：

• 没有存储折扣的生效状态，无法判断当前订单是否已经享受过满减优惠，删除商品时每次都重复扣减20元折扣
• 删除商品后没有重新校验满减门槛，满减优惠的生效前提是订单金额满50，删除后金额不满足条件时应该撤销折扣

改造方案 #

第一步：新增折扣状态存储

在localStorage中新增discountApplied标记，记录当前订单是否已经使用满减优惠，避免重复扣减，修改discountCart函数：

// 改造后折扣功能
function discountCart() {
    const discount = 20;
    // localStorage取出的内容为字符串，计算前需转成数字
    let cartCost = Number(localStorage.getItem('totalCost'));
    let discountApplied = localStorage.getItem('discountApplied') === 'true';

    // 仅当订单满50且未使用折扣时执行扣减
    if (cartCost >= 50 && !discountApplied) {
        localStorage.setItem("totalCost", cartCost - discount);
        localStorage.setItem("discountApplied", "true");
        console.log('折扣已生效，实付金额：', cartCost - discount);
    }
};

第二步：改造商品删除逻辑

删除商品时先扣除对应商品金额，再重新校验是否还满足满减条件，不满足则恢复折扣金额并更新优惠状态：

function deleteButtons() {
    let deleteButtons = document.querySelectorAll('.product ion-icon');
    const discount = 20;

    for(let i=0; i < deleteButtons.length; i++) {
        deleteButtons[i].addEventListener('click', () => {
            let productName = deleteButtons[i].parentElement.textContent.trim().toLowerCase().replace(/ /g, '');
            let productNumbers = Number(localStorage.getItem('cartNumbers'));
            let cartItems = JSON.parse(localStorage.getItem('productsInCart'));
            let cartCost = Number(localStorage.getItem('totalCost'));
            let discountApplied = localStorage.getItem('discountApplied') === 'true';

            // 先扣除删除商品的对应金额，不要在此处扣减折扣
            const deleteProductTotal = cartItems[productName].price * cartItems[productName].inCart;
            let newCartCost = cartCost - deleteProductTotal;
            let newProductNumbers = productNumbers - cartItems[productName].inCart;

            // 校验折扣是否还符合生效条件
            if (discountApplied && newCartCost < 50) {
                // 删除后不满50，恢复折扣金额，标记为未使用优惠
                newCartCost = newCartCost + discount;
                localStorage.setItem("discountApplied", "false");
            }

            // 更新本地存储数据
            localStorage.setItem('cartNumbers', newProductNumbers);
            localStorage.setItem('totalCost', newCartCost);
            delete cartItems[productName];
            localStorage.setItem('productsInCart', JSON.stringify(cartItems));

            displayCart();
            onLoadCartNumbers();
        });
    }
}

额外优化建议 #

• 后续可以调整逻辑，在每次购物车商品变动（新增/删除/修改数量）后统一调用discountCart自动计算优惠，不用在各个业务逻辑中单独处理折扣，降低代码耦合度
• 所有从localStorage取出的数值类数据都要先转成数字再做计算，避免字符串拼接导致的计算错误

内容的提问来源于stack exchange，提问作者Amy Smith