30. 购物车 / 询盘计算器综合练习

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

询盘清单

三、知识点提醒

综合项目要先设计数据结构，再写渲染和事件。
数量增减可以通过 step 统一处理。
购物车本质是数组的增删改查和统计。

四、练习建议

把购物车保存到 localStorage。
增加清空购物车和提交询盘按钮。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/30-shopping-cart.js，下面同步展示，方便学习和复制。

// 页面 30：购物车 / 询盘计算器综合练习
const shopProducts = [
  { id: 1, name: 'Decking Board', price: 58 },
  { id: 2, name: 'Wall Panel', price: 79 },
  { id: 3, name: 'Fence Board', price: 66 }
];
let cart = [];
const productBox = document.querySelector('#p30-products');
const cartBox = document.querySelector('#p30-cart');
const summaryBox = document.querySelector('#p30-summary');

function addToCart(productId) {
  const existing = cart.find((item) => item.id === productId);
  if (existing) {
    existing.qty += 1;
  } else {
    const product = shopProducts.find((item) => item.id === productId);
    cart.push({ ...product, qty: 1 });
  }
  renderCart();
}

function changeQty(productId, step) {
  cart = cart.map((item) => item.id === productId ? { ...item, qty: item.qty + step } : item)
    .filter((item) => item.qty > 0);
  renderCart();
}

function renderProducts() {
  productBox.innerHTML = shopProducts.map((product) => `
    <article class="item-card">
      <h4>${product.name}</h4>
      <p>$${product.price}</p>
      <button data-add="${product.id}">加入询盘</button>
    </article>
  `).join('');
}

function renderCart() {
  cartBox.innerHTML = cart.map((item) => `
    <div class="item-card demo-row" data-id="${item.id}">
      <strong style="flex:1;">${item.name}</strong>
      <button class="secondary" data-step="-1">-</button>
      <span>${item.qty}</span>
      <button class="secondary" data-step="1">+</button>
      <span>$${item.price * item.qty}</span>
    </div>
  `).join('') || '<p class="small">暂时没有产品。</p>';

  const totalQty = cart.reduce((sum, item) => sum + item.qty, 0);
  const totalPrice = cart.reduce((sum, item) => sum + item.qty * item.price, 0);
  summaryBox.textContent = `产品数量：${totalQty}\n预估总价：$${totalPrice.toFixed(2)}`;
}

productBox.addEventListener('click', (event) => {
  const button = event.target.closest('[data-add]');
  if (button) addToCart(Number(button.dataset.add));
});

cartBox.addEventListener('click', (event) => {
  const row = event.target.closest('[data-id]');
  const button = event.target.closest('[data-step]');
  if (!row || !button) return;
  changeQty(Number(row.dataset.id), Number(button.dataset.step));
});

renderProducts();
renderCart();