当前位置：首页 > JavaScript

JS编写购物车实现积分

2026-04-05 01:50:13JavaScript

实现购物车积分功能

购物车积分功能通常包括计算商品总价、积分累计和积分兑换等环节。以下是一个基于JavaScript的实现方案：

1. 定义商品数据结构

const products = [
  { id: 1, name: '商品A', price: 100, points: 10 },
  { id: 2, name: '商品B', price: 200, points: 20 }
];

2. 创建购物车对象

class ShoppingCart {
  constructor() {
    this.items = [];
    this.totalPoints = 0;
  }

  addItem(productId, quantity) {
    const product = products.find(p => p.id === productId);
    this.items.push({ ...product, quantity });
    this.calculatePoints();
  }

  calculatePoints() {
    this.totalPoints = this.items.reduce(
      (sum, item) => sum + (item.points * item.quantity), 0
    );
  }

  usePoints(pointsToUse) {
    if (pointsToUse <= this.totalPoints) {
      this.totalPoints -= pointsToUse;
      return true;
    }
    return false;
  }
}

3. 积分兑换逻辑

JS编写购物车实现积分

// 假设100积分可抵扣1元
function applyPointsDiscount(cart, pointsToUse) {
  const discountAmount = pointsToUse / 100;
  const totalPrice = cart.items.reduce(
    (sum, item) => sum + (item.price * item.quantity), 0
  );

  return Math.max(0, totalPrice - discountAmount);
}

4. 示例用法

const cart = new ShoppingCart();
cart.addItem(1, 2); // 添加2件商品A
cart.addItem(2, 1); // 添加1件商品B

console.log(`当前积分: ${cart.totalPoints}`); // 输出40积分

if (cart.usePoints(20)) {
  const finalPrice = applyPointsDiscount(cart, 20);
  console.log(`折后价格: ${finalPrice}`); // 输出280元
}

积分规则扩展方案

1. 动态积分规则

JS编写购物车实现积分

const pointRules = {
  standard: (price) => Math.floor(price / 10),
  premium: (price) => Math.floor(price / 5)
};

function calculateDynamicPoints(product) {
  return product.isPremium ? pointRules.premium(product.price) 
                          : pointRules.standard(product.price);
}

2. 积分有效期处理

class PointSystem {
  constructor() {
    this.points = [];
    this.expiryDays = 30;
  }

  addPoints(amount) {
    const expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + this.expiryDays);
    this.points.push({ amount, expiryDate });
  }

  getValidPoints() {
    const now = new Date();
    return this.points.filter(p => p.expiryDate > now)
                      .reduce((sum, p) => sum + p.amount, 0);
  }
}

前端界面交互示例

1. 更新积分显示

function updatePointsDisplay() {
  document.getElementById('points-counter').textContent = 
    `可用积分: ${cart.totalPoints}`;
}

2. 积分兑换按钮事件

document.getElementById('use-points').addEventListener('click', () => {
  const pointsInput = document.getElementById('points-input').value;
  if (cart.usePoints(parseInt(pointsInput))) {
    updatePointsDisplay();
    updateTotalPrice();
  } else {
    alert('积分不足');
  }
});