全栈攻城狮

Appearance

电商前端 — 购物车与结算 ​

购物车是电商平台中用户选购商品的临时容器，结算页则是完成交易的最后一站。购物车与结算流程的前端实现涉及复杂的状态管理、多种优惠计算和地址选择等交互。本文将深入分析购物车系统的架构设计与实现。

购物车状态管理 ​

购物车是一个典型的需要全局状态管理的场景，因为用户可能在多个页面中修改购物车内容（商品详情页加入、购物车页面修改数量/删除等）。

状态结构设计 ​

购物车的核心状态通常包含：

javascript
const cartState = {
  items: [
    { id: 1, skuId: 'sku_001', name: '商品名称', price: 429, qty: 1, selected: true },
    // ...
  ],
  selectedIds: new Set([1, 2, 3]),
  coupon: null,
};

核心操作 ​

购物车需要支持以下操作：

  • 加入购物车：检查是否已存在相同 SKU，存在则数量 +1，否则新增项
  • 数量调整：加减数量，最小为 1，最大为库存上限
  • 选中/取消选中：支持单项选中切换和全选/取消全选
  • 删除商品：从购物车列表中移除
  • 清空失效商品：清理下架或库存不足的商品

模式选择 ​

在纯前端 Demo 中，可以使用简单的全局对象管理状态。在实际项目中，推荐以下模式：

  • Zustand：轻量级状态管理，API 简洁，适合中小型项目
  • Redux Toolkit：功能完善，中间件生态丰富，适合大型电商项目
  • Pinia (Vue3)：Vue 生态首选，TypeScript 友好

使用状态管理库的好处在于：跨组件状态同步、持久化（localStorage）、中间件（日志/持久化/撤销）等能力的开箱即用。

优惠券与满减计算 ​

优惠券类型 ​

电商系统常见的优惠券类型：

  • 满减券：满 X 元减 Y 元，如"满 300 减 30"
  • 折扣券：打 X 折，如"8 折券"
  • 无门槛券：直接减免固定金额
  • 指定商品券：仅对特定分类或商品生效

计算逻辑 ​

结算时价格计算顺序：

  1. 商品小计 = Σ(选中商品单价 × 数量)
  2. 优惠减免 = 优惠券/满减可减免金额（需判断门槛是否满足）
  3. 运费 = 根据金额或地区计算（通常满 X 元包邮）
  4. 应付总额 = 商品小计 - 优惠减免 + 运费（最低为 0）

前端需要实时展示每一项费用的明细，让用户清楚每一分钱的去向。

地址选择器（省市区级联） ​

省市区级联是结算页中交互复杂度较高的组件之一。

数据模型 ​

省市区采用三级层级结构：

javascript
const regions = {
  '广东省': {
    cities: {
      '广州市': ['天河区', '越秀区', '海珠区', ...],
      '深圳市': ['南山区', '福田区', '罗湖区', ...],
    }
  },
  // ...
};

级联逻辑 ​

三个下拉框联动：

  1. 用户选择省份 → 加载对应城市列表 → 重置城市和区县
  2. 用户选择城市 → 加载对应区县列表 → 重置区县
  3. 用户选择区县 → 完成选择，显示完整地址

交互优化 ​

  • 选择未完成时禁用下级选择框，避免空数据
  • 选中后显示地址摘要，方便用户确认
  • 支持地址管理（保存多个地址、设为默认）

结算页订单确认 ​

结算页的订单确认模块是用户提交订单前的最后审核环节，需要集中展示：

  • 商品清单：选中商品的缩略图、名称、规格、单价、数量
  • 收货地址：收件人姓名、电话、详细地址
  • 优惠信息：已使用的优惠券/积分
  • 费用明细：商品小计、运费、优惠减免
  • 应付总额：加粗高亮展示

点击"提交订单"后，前端需校验地址是否已选、库存是否充足等条件，通过后调用下单接口。在 Demo 中，我们模拟这一流程并给出成功 Toast 提示。

全选/反选与数量编辑 ​

全选/反选 ​

全选逻辑：

  • 所有商品均为选中状态时，"全选"勾选框高亮
  • 点击"全选"：如果当前未全选则选中所有，否则取消所有选中
  • 取消任一商品选中 → 自动取消全选状态

数量编辑 ​

数量加减组件需要注意：

  • 最小值限制为 1（不能为 0 或负数）
  • 最大值限制为当前 SKU 库存
  • 数量变化后立即更新小计和总价

总结 ​

购物车与结算页是电商前端中状态管理最密集、业务逻辑最复杂的模块之一。清晰的状态结构设计、流畅的交互反馈、准确的价格计算，是这一模块成功的关键。通过本 Demo，你可以直观地体验从选商品到提交订单的完整购物流程。