SKU的使用

原创于 2025-04-02 16:13:31 发布 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

该文章已生成可运行项目，

一、什么是 SKU？

SKU（Stock Keeping Unit，存货单位）是库存管理中的最小可用单元，通常被称为“单品”。在电商领域，SKU 用于唯一标识商品的特定规格组合，例如：

一件红色、M 码的 T 恤
一台 256GB、银色的手机
前端工程师的核心关注点：SKU 算法和用户交互体验。

二、如何在页面中使用SKU

1. 下载并安装 SKU 插件

在 uni-app 项目中，可以通过插件市场获取现成的 SKU 组件，直接搜索SKU组件，根据需要选择合适的SKU组件，安装到自己的目录中，仔细阅读文档，讲组件放到合适的位置

2. 准备数据格式

下面以常见的SKU组件为例

const localdata = ref<SkuPopupLocaldata>({
  __id: '商品ID',
  name: '商品名称',
  goods_thumb: '商品主图URL',
  spec_list: [
    {
      name: '颜色',
      list: [{ name: '红色' }, { name: '蓝色' }]
    },
    {
      name: '尺寸',
      list: [{ name: 'S' }, { name: 'M' }]
    }
  ],
  sku_list: [
    {
      __id: 'SKUID1',
      goods_id: '商品ID',
      goods_name: '商品名称',
      image: 'SKU图片URL',
      price: 10000, // 注意：价格需要乘以100
      stock: 100,
      sku_name_arr: ['红色', 'S']
    }
    // 更多SKU...
  ]
})

3. 基本使用

<script setup lang="ts">
const isShowSku = ref(false)
const localdata = ref<SkuPopupLocaldata>(/* 数据 */)
</script>

<template>
  <vk-data-goods-sku-popup v-model="isShowSku" :localdata="localdata" />
  <button @click="isShowSku = true">选择规格</button>
</template>

4. 高级功能

按钮模式控制

enum SkuMode {
  Both = 1,    // 显示购物车和立即购买
  Cart = 2,    // 只显示购物车
  Buy = 3      // 只显示立即购买
}

const mode = ref<SkuMode>(SkuMode.Both)

事件处理

<vk-data-goods-sku-popup
  @add-cart="handleAddCart"
  @buy-now="handleBuyNow"
/>

<script>
const handleAddCart = (event) => {
  console.log('加入购物车', event.selectShop)
}
</script>

获取选中值

<template>
  <text>{{ selectArrText }}</text>
</template>

<script>
const skuPopupRef = ref<SkuPopupInstance>()
const selectArrText = computed(() => {
  return skuPopupRef.value?.selectArr?.join(' ') || '请选择规格'
})
</script>