JavaScript/jQuery实现表单提交积分抵扣购物车金额

需求说明 #

我有一个结账页面，希望实现一项新功能：根据输入框中填入的数值，从购物车总金额中扣减对应额度。

示例：购物车内有1件价值10.00$的商品，若用户在该输入框中填入100，即可获得1$的折扣（本示例兑换规则为100 pts = 1$），购物车最终金额为9.00$。由于使用了多款集成应用来获取/计算商品价值、购物车总金额等数据，需要通用代码示例，后续可自行调整对接现有代码、函数。

待实现功能 #

• 创建积分抵扣表单
• 获取输入框内用户填写的积分数值
• 从用户总积分中扣减已使用的积分（示例总积分 totalPts = 1000）
• 将已使用的积分按规则换算为美元（100pts = 1$）后，从购物车总金额中扣减对应抵扣额

原有问题代码 #

function appendRefferalPoints() {
    const totalPts = 1000;

    // creating form - ok
    $form = $('<form id="refForm" class="coupon-form" action></form>');
    $form.append(
        '<input type="text" id="refValue" name="refInput" class="coupon-value input-small" >'
    );
    $form.append('<button type="submit" class="btn">Aplica</button>');
    $("body").append($form);

    // get input value - not ok
    $("#refForm").submit(function () {
        let value = 0;
        $.each($("#refForm").serializeArray(), function (i, field) {
            value[field.name] = field.value;
        });
    });

    // subtraction from totalPts logic - not ok
    let rez = totalPts - value;
    console.log("Final Rez: " + rez);


    // subtraction converted pts from cart value logic


} 

故障表现 #

提交表单时URL仅从 /checkout#/cart 变为 /checkout/?refInput=512#/cart，积分扣减、金额抵扣逻辑均未正常执行。

问题原因 #

1. 未阻止表单默认提交行为，触发原生GET提交把参数拼到URL上跳转
2. 变量作用域错误：value 定义在submit回调内部，外部无法访问；且初始值设为数字0，却尝试给数字类型添加属性，取值逻辑完全失效
3. 积分扣减、金额计算逻辑写在submit回调外部，页面加载时就会执行，无法获取用户提交时的输入值
4. 缺少输入值类型转换、合法性校验，直接计算容易出现NaN、精度等异常

修复后通用代码 #

所有业务对接点都加了注释，可直接替换为现有系统的对应逻辑：

function appendRefferalPoints() {
    // ========== 配置项 - 可根据自身业务替换 ==========
    const USER_TOTAL_PTS = 1000; // 替换为现有接口/方法获取的用户真实总积分
    const PTS_EXCHANGE_RATE = 100; // 兑换比例：100积分抵1美元
    let currentCartTotal = 10.00; // 替换为现有方法获取的购物车实时总金额
    const formMountSelector = "body"; // 替换为页面上实际要挂载表单的位置选择器


    // 1. 创建表单
    const $form = $('<form id="refForm" class="coupon-form"></form>');
    $form.append(
        '<input type="number" min="0" id="refValue" name="refInput" class="coupon-value input-small" placeholder="输入抵扣积分">'
    );
    $form.append('<button type="submit" class="btn">应用</button>');
    $(formMountSelector).append($form);


    // 2. 绑定提交事件
    $("#refForm").submit(function (e) {
        // 阻止表单默认跳转，解决URL带参数的问题
        e.preventDefault();

        // 获取输入值并转成数字类型
        const usedPts = Number($("#refValue").val().trim());

        // 基础校验
        if (isNaN(usedPts) || usedPts <= 0) {
            alert("请输入有效的正整数积分数值");
            return;
        }
        if (usedPts > USER_TOTAL_PTS) {
            alert(`积分不足，当前可用积分：${USER_TOTAL_PTS}`);
            return;
        }

        // 3. 扣减用户积分
        const remainPts = USER_TOTAL_PTS - usedPts;
        console.log("剩余积分：", remainPts);
        // 在此处插入现有更新用户积分的逻辑（比如调用后端接口同步）

        // 4. 计算抵扣金额，更新购物车总价
        const discountAmount = usedPts / PTS_EXCHANGE_RATE;
        const finalPayAmount = currentCartTotal - discountAmount;
        console.log("抵扣金额：$", discountAmount, "最终应付：$", finalPayAmount);
        // 在此处插入现有更新购物车金额、重新渲染结算页的逻辑
    })
}

// 页面DOM加载完成后初始化
$(function () {
    appendRefferalPoints();
})

适配说明 #

• 输入框默认用number类型，自带基础数字输入限制，如需兼容其他格式可改回text类型自行加校验
• 所有和现有系统对接的位置都做了标记，不需要改动核心逻辑，直接替换对应变量、调用现有方法即可
• 可根据业务需求扩展校验规则，比如限制积分抵扣上限、不允许超过订单金额等

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