基于商品编码与数量实现阶梯式自动优惠计算的技术求助

Alright, let's fix this automatic offer update issue for your web POS system. The key here is to tie quantity changes directly to a re-calculation of the offer, using consistent logic across frontend and backend. Here's a step-by-step solution:

First, we need a single source of truth for calculating the offer value—this should live in your backend (or database query) to avoid frontend/backend logic mismatches.

Database Query to Calculate Offers #

Use this SQL query to fetch the base quantity for a product and compute the阶梯式优惠 in one step:

SELECT 
  CASE 
    WHEN o.quantity IS NULL THEN 0
    ELSE FLOOR(:input_quantity / o.quantity)
  END AS calculated_offer
FROM offers o
WHERE o.item_code = :input_item_code
UNION ALL
SELECT 0
WHERE NOT EXISTS (SELECT 1 FROM offers WHERE item_code = :input_item_code)

• This query returns 0 if the product has no offer rules, or if the input quantity is less than the base quantity.
• For quantities meeting/exceeding the base, it calculates how many full "offer tiers" the quantity qualifies for (e.g., 25 units of item 1 = FLOOR(25/12) = 2 offers).

Backend Function Example (Node.js/Express) #

Wrap the logic in a reusable API endpoint so your frontend can call it whenever quantity changes:

// Assume we're using a MySQL pool connection
async function calculateOffer(req, res) {
  const { itemCode, quantity } = req.body;
  const parsedQty = parseInt(quantity) || 0;

  try {
    const [rows] = await pool.query(`
      SELECT quantity AS base_qty FROM offers WHERE item_code = ?
    `, [itemCode]);

    let offer = 0;
    if (rows.length > 0) {
      const baseQty = rows[0].base_qty;
      offer = Math.max(0, Math.floor(parsedQty / baseQty));
    }

    res.json({ offer });
  } catch (err) {
    console.error(err);
    res.status(500).json({ offer: 0 });
  }
}

// Register the endpoint
app.post('/api/calculate-offer', calculateOffer);

Your frontend needs to listen for manual quantity edits and fire the offer calculation automatically. Here's a vanilla JS implementation:

HTML Structure Example #

<div class="product-line-item">
  <input type="hidden" class="item-code" value="1">
  <label>Quantity:</label>
  <input type="number" class="quantity-input" value="10" min="0">
  <span class="offer-display">Offer: <span class="offer-value">0</span></span>
</div>

JavaScript to Listen for Changes #

// Initialize offers on page load (optional, for cache)
let offerRules = {};
async function loadOfferRules() {
  const res = await fetch('/api/offers');
  const rules = await res.json();
  offerRules = rules.reduce((acc, rule) => {
    acc[rule.item_code] = rule.quantity;
    return acc;
  }, {});
}

// Run on page load
window.addEventListener('load', loadOfferRules);

// Listen for quantity input changes
document.querySelectorAll('.quantity-input').forEach(input => {
  input.addEventListener('input', async function() {
    const itemCode = this.closest('.product-line-item').querySelector('.item-code').value;
    const quantity = parseInt(this.value) || 0;
    
    // Option 1: Calculate via backend (most reliable)
    const res = await fetch('/api/calculate-offer', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ itemCode, quantity })
    });
    const result = await res.json();
    
    // Option 2: Calculate locally (if rules are cached)
    // let offer = 0;
    // if (offerRules[itemCode]) {
    //   offer = Math.max(0, Math.floor(quantity / offerRules[itemCode]));
    // }

    // Update the UI
    this.closest('.product-line-item').querySelector('.offer-value').textContent = result.offer;
  });
});

• Non-numeric quantity inputs: Parse values to integers and default to 0 if invalid.
• Negative quantities: Enforce a min="0" attribute on input fields and cap calculations at 0.
• Products with no offer rules: Always return 0 for these items.
• Bulk quantity updates: If your POS supports bulk edits, loop through all line items and trigger the offer calculation for each.

The root cause is almost certainly that your code only calculates the offer once (on initial load or when selecting a product) and doesn't re-run the calculation when the quantity is manually edited. By binding the offer calculation to the input or change event of the quantity field, you ensure updates happen in real-time.

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