Vue中JavaScript商品购物车价格计算错误修复咨询

问题描述 #

在Vue应用中编写的calculatePartial函数依赖大量特定重量值的if/else分支，导致非预设重量的商品无法正确计算成本。原代码如下：

calculatePartial(productInfo, productPrice, productCode, productUnit){            
    let val = productInfo.match(/[0-9]/g)
    let portion
    let multiplier
    //
    if( val.length > 2 ){
        portion = `${val[0]}${val[1]}${val[2]}`
    } else if( val.length === 1 ) { 
        portion = `${val[0]}`
    } else {
        portion = `${val[0]},${val[1]}`
    }
    if( portion === '500' ){
        return (parseFloat(productPrice) * parseInt(this.quantita[productCode]) / 2 ).toFixed(2)
    } else if( portion === '300' ){ 
        return (parseFloat(productPrice) * parseInt(this.quantita[productCode]) / 1000 * 300 ).toFixed(2)
    } else if( portion === '600' ){
        return (parseFloat(productPrice) * parseInt(this.quantita[productCode]) / 1000 * 600 ).toFixed(2)
    } else if( portion === '800' ){
        return (parseFloat(productPrice) * parseInt(this.quantita[productCode]) / 1000 * 800 ).toFixed(2)
    } else if( portion === '1' ) {
        return (parseFloat(productPrice) * parseInt(this.quantita[productCode])).toFixed(2)
    } else {
            multiplier = portion.replace(',', '.')
        if( productUnit === 'al pz' ){
            return (parseFloat(productPrice) * parseInt(this.quantita[productCode])).toFixed(2)
        } else if( productUnit === "all'etto" ){
            return (parseFloat(productPrice) * parseInt(this.quantita[productCode]) / 100 * multiplier ).toFixed(2)
        } else {     
            if( multiplier.length > 2 && !multiplier.includes('.') ){
                return (parseFloat(productPrice) * parseInt(this.quantita[productCode]) / 1000 * multiplier).toFixed(2) 
            } else {   
                return (parseFloat(productPrice) * parseInt(this.quantita[productCode]) * multiplier).toFixed(2)
            }
        }
    }
}

优化方案 #

核心思路是统一数值提取逻辑和基于基准单位的比例计算，彻底移除特定值的分支判断：

1. 修复规格数值提取 #

原代码通过拆分数字数组拼接数值，容易丢失小数或多位数字。改用正则提取完整的数值字符串（支持逗号作为小数点），直接转换为浮点数：

2. 统一单位换算比例 #

根据商品单位（productUnit）确定基准单位，计算当前商品规格相对于基准单位的比例，所有重量/数量的计算都通过该比例统一处理：

• al pz：基准为1件，比例=规格数值/1
• all'etto：基准为100克，比例=规格数值/100
• 其他单位（默认按公斤）：基准为1000克，比例=规格数值/1000

3. 通用成本计算 #

基于基准单位价格、购买数量和换算比例，统一计算总成本，无需针对特定值写分支。

重构后的完整代码 #

calculatePartial(productInfo, productPrice, productCode, productUnit) {
    // 提取商品规格中的数值（支持带逗号的小数，如"1,5"、"500"）
    const numMatch = productInfo.match(/\d+(?:,\d+)?/);
    if (!numMatch) return '0.00'; // 处理无有效数值的边界情况
    const portionNum = parseFloat(numMatch[0].replace(',', '.'));

    // 确定基准单位，计算换算比例
    let baseUnit = 1;
    if (productUnit === "all'etto") {
        baseUnit = 100; // 按百克计价，基准单位为100克
    } else if (productUnit !== 'al pz') {
        baseUnit = 1000; // 默认按公斤计价，基准单位为1000克
    }
    const ratio = portionNum / baseUnit;

    // 获取购买数量，处理非数字情况
    const quantity = parseInt(this.quantita[productCode]) || 0;
    // 获取基准单位价格，处理非数字情况
    const unitPrice = parseFloat(productPrice) || 0;

    // 计算总成本并保留两位小数
    const totalCost = unitPrice * quantity * ratio;
    return totalCost.toFixed(2);
}

优化点说明 #

• 移除所有特定重量的if/else分支，支持任意规格数值的计算
• 数值提取逻辑更健壮，支持整数、带逗号的小数（如"1,5"）
• 增加边界情况处理（无有效数值、数量/价格为非数字），避免报错
• 逻辑清晰易维护，新增单位只需修改基准单位配置

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