【商品】商品 SPU 与 SKU

> 参考 [《产品 SKU 是什么意思？与之相关的还有哪些？》 **(opens new window)**](https://www.zhihu.com/question/19841574)整理

## [#](https://doc.iocoder.cn/mall/product-spu-sku/#_1-%E8%A1%A8%E7%BB%93%E6%9E%84)1. 表结构

商品 SPU 与 SKU，由 `yudao-module-product-biz` 后端模块的 `spu`、`sku` 包实现，分成商品 SPU 和商品 SKU 两个表。

![表结构](/media/202404/2024-04-26_1622270.6265007310451637.png)

### [#](https://doc.iocoder.cn/mall/product-spu-sku/#_1-1-%E5%95%86%E5%93%81-sku)1.1 商品 SKU

**SKU：Stock Keeping Unit**

中文翻译为库存单位。SKU 从库存视角，以库存进出为单位，可以是件、瓶、箱等等。

例如，iPhone 手机，按照规格( 颜色 + 内存 )可以组合出如下多个 SKU ：

| SKU | 颜色 | 内存 |
| ----- | ------ | ------ |
| A   | 白色 | 16G  |
| B   | 白色 | 64G  |
| C   | 黑色 | 16G  |
| D   | 黑色 | 64G  |

可以看出，颜色（白色、黑色）与内存（16G、64G）组合排列出四种 iPhone SKU。

最终 SKU 表结构如下：

> 省略 creator/create_time/updater/update_time/deleted/tenant_id 等通用字段

```sql
CREATE TABLE `product_sku` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
  
  `spu_id` bigint NOT NULL COMMENT 'spu编号',
  
  `properties` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '属性数组，JSON 格式 [{propertId: , valueId: }, {propertId: , valueId: }]',
  
  `price` int NOT NULL DEFAULT '-1' COMMENT '商品价格，单位：分',
  `market_price` int DEFAULT NULL COMMENT '市场价，单位：分',
  `cost_price` int NOT NULL DEFAULT '-1' COMMENT '成本价，单位： 分',
  `bar_code` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'SKU 的条形码',
  `pic_url` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '图片地址',
  `stock` int DEFAULT NULL COMMENT '库存',
  `weight` double DEFAULT NULL COMMENT '商品重量，单位：kg 千克',
  `volume` double DEFAULT NULL COMMENT '商品体积，单位：m^3 平米',
  
  `first_brokerage_price` int DEFAULT NULL COMMENT '一级分销的佣金，单位：分',
  `second_brokerage_price` int DEFAULT NULL COMMENT '二级分销的佣金，单位：分',
  
  `sales_count` int DEFAULT NULL COMMENT '商品销量',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=30 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品sku';
```

① `spu_id` 字段：商品 SPU 的编号，关联 `product_spu` 表的 `id` 字段。

② `properties` 字段：商品属性，JSON 格式，例如：

![SKU 信息](/media/202404/2024-04-26_1622270.3791423830433365.png)

```json
[
  {
    "propertyId": 1,
    "propertyName": "颜色",
    "valueId": 5,
    "valueName": "黑色"
  },
  {
    "propertyId": 3,
    "propertyName": "版本",
    "valueId": 8,
    "valueName": "CH510"
  }
]
```

很明显，`property_id` 对应 `product_property` 表的 `id` 字段，`value_id` 对应 `product_property_value` 表的 `id` 字段。

那么为什么要冗余 `propertyName`、`valueName` 字段呢？主要是为了方便查询，不用再关联 `product_property`、`product_property_value` 表，嘿嘿~

③ `price`、`market_price`、`cost_price`、`bar_code`、`weight`、`volume`、`pic_url` 字段，都是商品 SKU 的基本信息。

④ `sales_count` 字段：商品销量，每次用户下单时，更新该字段。

⑤ `first_brokerage_price`、`second_brokerage_price` 字段：一级分销、二级分销的佣金，可能未来会挪到【营销】模块下，目前不用特别关注。

### [#](https://doc.iocoder.cn/mall/product-spu-sku/#_1-2-%E5%95%86%E5%93%81-spu)1.2 商品 SPU

**SPU：Standard Product Unit**

中文翻译为标准产品单位。SPU 从产品视角，是产品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以被称为一个 SPU。

例如 iPhone 14 就是一个 SPU，iPhone 14 Plus 也是一个 SPU ，这个与商家无关，与颜色、款式、套餐等规格无关。

商家出售某个 SPU，那么这就是一个商品。商品在 SPU 之上，增加了销售价格、运费等等信息。 **另外，一个商品可以包含多个 SKU** 。

最终 SPU 表结构如下：

> 省略 creator/create_time/updater/update_time/deleted/tenant_id 等通用字段

```sql
CREATE TABLE `product_spu` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '商品 SPU 编号，自增',
  `name` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '商品名称',
  `keyword` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '关键字',
  `introduction` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '商品简介',
  `description` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci COMMENT '商品详情',
  `category_id` bigint NOT NULL COMMENT '商品分类编号',
  `brand_id` int DEFAULT NULL COMMENT '商品品牌编号',
  `pic_url` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '商品封面图',
  `slider_pic_urls` varchar(2000) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '商品轮播图地址\n 数组，以逗号分隔\n 最多上传15张',
  
  `status` tinyint NOT NULL COMMENT '商品状态: 0 上架（开启） 1 下架（禁用）-1 回收',
  
  `spec_type` bit(1) DEFAULT NULL COMMENT '规格类型：0 单规格 1 多规格',
  `price` int NOT NULL DEFAULT '-1' COMMENT '商品价格，单位使用：分',
  `market_price` int DEFAULT NULL COMMENT '市场价，单位使用：分',
  `cost_price` int NOT NULL DEFAULT '-1' COMMENT '成本价，单位： 分',
  `stock` int NOT NULL DEFAULT '0' COMMENT '库存',
  
  `delivery_types` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '配送方式数组',
  `delivery_template_id` bigint DEFAULT NULL COMMENT '物流配置模板编号',
  
  `give_integral` int NOT NULL DEFAULT '0' COMMENT '赠送积分',
  `sales_count` int DEFAULT '0' COMMENT '商品销量',
  `virtual_sales_count` int DEFAULT '0' COMMENT '虚拟销量',
  `browse_count` int DEFAULT '0' COMMENT '商品点击量',
  `sort` int NOT NULL DEFAULT '0' COMMENT '排序字段',

`sub_commission_type` bit(1) DEFAULT NULL COMMENT '分销类型',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=640 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品spu';
```

① 【基础设置】`name`、`keyword`、`introduction`、`description`、`category_id`、`brand_id`、`pic_url`、`slider_pic_urls` 字段：商品 SPU 的基本信息。

![基础设置](/media/202404/2024-04-26_1622270.1753900454919345.png)

② `status` 字段：商品状态，1 上架（开启）、0 下架（禁用）、-1 回收，用户在 uni-app 看到的商品，只有 `status` 为 1 的商品。

③ 【库存价格】`spec_type` 字段：规格类型，`false` 单规格、`true` 多规格。要注意，即使是单规格，也会创建一个 SKU，这个 SKU 的 `properties` 字段为“默认”数组 `[{"propertyId":0,"propertyName":"默认","valueId":0,"valueName":"默认"}]`。

`price`、`market_price`、`cost_price` 字段：取对应 SKU 的最小值。`stock` 字段：取对应 SKU 库存的累加值。

![库存价格](/media/202404/2024-04-26_1622270.3791423830433365.png)

④ 【物流设置】`delivery_types` 字段：配送方式数组，目前有 1 快递发货、2 门店自提。

`delivery_template_id` 字段：物流配置模板编号，仅当 `delivery_types` 为 1 时，才会有值。

![物流设置](/media/202404/2024-04-26_1622270.34490494510807335.png)

⑤ 【其它设置】`give_integral` 字段：赠送积分，用户购买该商品，赠送的积分。

`sales_count` 字段：商品销量，每次用户下单时，更新该字段。`virtual_sales_count` 字段：虚拟销量，最终展示给用户的销量是 `sales_count` + `virtual_sales_count` 。

`browse_count` 字段：商品点击量，每次用户点击商品时，更新该字段。另外，也会往 `product_browse_history` 插入一条浏览记录。

![其它设置](/media/202404/2024-04-26_1622270.3745301972233306.png)

## [#](https://doc.iocoder.cn/mall/product-spu-sku/#_2-%E7%AE%A1%E7%90%86%E5%90%8E%E5%8F%B0)2. 管理后台

### [#](https://doc.iocoder.cn/mall/product-spu-sku/#_2-1-%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8)2.1 商品列表

对应 [商城系统 -> 商品中心 -> 商品列表] 菜单，对应 `yudao-ui-admin-vue3` 项目的 `@/views/mall/product/spu` 目录。

![商品列表](/media/202404/2024-04-26_1622270.22223444210473264.png)

### [#](https://doc.iocoder.cn/mall/product-spu-sku/#_2-2-%E5%95%86%E5%93%81%E5%8F%91%E5%B8%83)2.2 商品发布

商品的新增、修改、详情界面，都对应 `yudao-ui-admin-vue3` 项目的 `@/views/mall/product/spu/form` 目录。

![商品发布](/media/202404/2024-04-26_1622270.6832315333547967.png)

考虑到前端代码的维护性，每个 Tab 对应一个组件，这样修改某个 Tab 的代码，不会影响到其它 Tab 的代码。如下图所示：

![前端代码](/media/202404/2024-04-26_1622270.4088031008808479.png)

* 基础设置：`views/mall/product/spu/form/InfoForm.vue`
* 库存价格：`views/mall/product/spu/form/SkuForm.vue`
* 物流设置：`views/mall/product/spu/form/DeliveryForm.vue`
* 商品描述：`views/mall/product/spu/form/DescriptionForm.vue`
* 其它设置：`views/mall/product/spu/form/OtherForm.vue`

## [#](https://doc.iocoder.cn/mall/product-spu-sku/#_3-%E7%A7%BB%E5%8A%A8%E7%AB%AF)3. 移动端

商品在 uni-app 的代码，主要在 `yudao-ui-uniapp` 项目的 `@/pages/goods` 目录。如下图所示：

![前端代码](/media/202404/2024-04-26_1622270.18270010657705016.png)

### [#](https://doc.iocoder.cn/mall/product-spu-sku/#_3-1-%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8)3.1 商品列表

商品列表，对应 `@/pages/goods/list.vue` 文件。界面效果如下图所示：

![商品列表](/media/202404/2024-04-26_1622270.6764412716115165.png)

### [#](https://doc.iocoder.cn/mall/product-spu-sku/#_3-2-%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85)3.2 商品详情

商品详情，对应 `@/pages/goods/index.vue` 文件。界面效果如下图所示：

![商品详情](/media/202404/2024-04-26_1622270.5527320978356214.png)

考虑到商品详情界面的复杂性，所以将其拆分成多个组件，如下图所示：

![商品详情](/media/202404/2024-04-26_1622270.7404389122916766.png)

另外，如果你想看商品 SKU 选择的代码，可以看 `/sheep/components/s-select-sku/s-select-sku.vue` 文件。

注意，拼团、秒杀商品的界面展示不同，所以单独分别对应了 `@/pages/goods/groupon.vue`、`@/pages/goods/seckill.vue` 文件。