电商前端 — 商品系统

商品系统是电商平台的核心模块，它承载了商品信息的展示、多规格 SKU 的选择与库存计算、图片展示、评价系统等功能。本文将深入讲解商品详情页的前端架构设计，以及关键的 SPU/SKU 选择器原理与实现。

SPU 与 SKU 概念

在电商系统中，SPU（Standard Product Unit，标准化产品单元） 和 SKU（Stock Keeping Unit，库存量单位） 是两个核心概念。

• SPU：代表一个商品品类，例如"X 系列智能耳机 Pro Max"就是一个 SPU。它包含商品标题、描述、品牌等共性信息。
• SKU：代表一个具体的可售卖商品。例如"曜石黑 + M 码 + 高级版"就是一个 SKU。SKU 包含了具体的规格组合，决定了价格和库存。

一个 SPU 下通常包含多个 SKU。前端需要根据用户选择的规格组合，实时计算对应的价格、库存等信息。

多规格 SKU 选择器设计

SKU 选择器是商品详情页最具挑战性的组件之一，核心难点在于规格组合算法。

数据结构设计

SKU 数据通常以"规格维度 + 组合映射表"的方式组织：

// 规格维度
const colors = ['曜石黑', '陶瓷白', '星云蓝'];
const sizes = ['S', 'M', 'L', 'XL'];
const plans = ['基础版', '高级版', '尊享版'];

// SKU 组合映射表
const combos = {
  'black-m-premium': { price: 429, stock: 25 },
  'white-l-basic': { price: 369, stock: 30 },
  // ... 更多组合
};

不可用规格的禁用逻辑

当用户选中部分规格后，需要计算出哪些规格选项是"不可用"的（即该规格下没有有效的 SKU 组合），并置灰禁用。

算法思路：

1. 如果用户已选中部分规格（例如尺寸选了 M、套餐选了高级版），则遍历颜色选项时，只需构造 colorId + M + premium 的 key，检查 combos 中是否存在且库存 > 0。
2. 如果用户尚未选择其他维度，则遍历该维度下的所有选项，检查是否存在至少一个与其他维度组合的有效 SKU。

这种算法保证了用户在任意选择步骤中，都能直观地看到哪些选项是可行的。实际工业级实现中，还会引入邻接矩阵来优化大规模式（4+ 维度）的性能。

实时价格与库存更新

选完所有规格后，前端根据组合 key 查询映射表，更新展示价格和库存数量。当库存低于阈值时（如 < 20），显示"库存紧张"；库存为 0 时置灰并显示"库存不足"。

商品详情页架构

一个完整的商品详情页通常包含以下模块：

图片放大镜与缩略图轮播

商品图片是用户决策的第一要素。前端通常实现：

• 缩略图导航：用户点击缩略图切换主图
• 图片放大镜：鼠标悬停时，通过 CSS transform 或 Canvas 放大图片局部区域，让用户查看细节
• 左右箭头切换：支持在移动端左右滑动切换图片

商品信息区

展示商品标题、价格（划线价 + 实际价）、促销标签（限时秒杀、满减等）、已售数量等信息。价格区域需要随 SKU 选择实时刷新。

规格选择区

如上所述的多规格选择器，含禁用逻辑。每个规格维度需要清晰的视觉区分，当前选中项使用高亮样式，禁用项使用置灰+删除线。

数量选择器

用户可增减购买数量，上限不能超过当前 SKU 的库存。

加入购物车

点击加入购物车按钮，需携带完整的 SKU 信息（规格组合 + 数量）提交到购物车接口。在 Demo 中通过 Toast 反馈用户。

相关推荐与评价模块

相关推荐

基于商品画像或用户行为，展示 3-6 个推荐商品。常见推荐策略包括：

• 协同过滤：购买此商品的用户也购买了...
• 内容推荐：同品类 / 同品牌商品
• 热门排行：按照销量或评分排序

商品评价

评价模块展示用户购买后的真实反馈，包含：

• 评分统计：展示平均分和评分分布
• 评价列表：头像、昵称（脱敏）、星级、内容、购买时间
• 有图评价：支持图片评价，可信度更高

前端实现时需要注意图片懒加载、星级评分组件的封装，以及长列表虚拟滚动等性能优化。

总结

商品系统的前端实现涉及数据结构设计、复杂交互逻辑和性能优化。SPU/SKU 模型是电商的基础设施，掌握其选择器算法是电商前端开发的必备技能。结合良好的组件化设计和用户体验细节，才能打造出让用户满意的商品详情页。