zan-sku

zan-sku

这是一个规格选择

使用场景

创建有多种规格的商品、服务的编辑页面

代码演示

:::demo 基础用法

import SKU from 'zan-sku';
 
const skuTree = [
  {
    id: 10740,
    text: '颜色'
  },
  {
    id: 40732,
    text: '尺寸'
  }
];
 
const sku = [{
  id: 3,
  text: '蓝色'
}, {
  id: 10,
  text: '红色'
}, {
  id: 30,
  text: '土豪金'
}, {
  id: 137,
  text: '黑色'
}, {
  id: 138,
  text: '灰色'
}];
 
class Simple extends Component {
  fetchSKUTree() {
    return new Promise(resolve => {
      resolve(skuTree);
    });
  }
 
  fetchSKU() {
    return new Promise(resolve => {
      resolve(sku);
    });
  }
 
  render() {
    return (
      <SKU
        maxLeafSize={3}
        onFetchGroup={this.fetchSKUTree}
        onFetchSKU={this.fetchSKU}
        uploadConfig={{
          tokenUrl: '//materials.youzan.com/dock/token.json',
          fetchUrl: '//materials.youzan.com/dock/fetch.json'
        }}
      />
    );
  }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

:::demo 禁用

import SKU from 'zan-sku';
 
const skuTree = [
  {
    id: 10740,
    text: '颜色'
  },
  {
    id: 40732,
    text: '尺寸'
  }
];
 
const sku = [{
  id: 3,
  text: '蓝色'
}, {
  id: 10,
  text: '红色'
}, {
  id: 30,
  text: '土豪金'
}, {
  id: 137,
  text: '黑色'
}, {
  id: 138,
  text: '灰色'
}];
 
class Simple extends Component {
  fetchSKUTree() {
    return new Promise(resolve => {
      resolve(skuTree);
    });
  }
 
  fetchSKU() {
    return new Promise(resolve => {
      resolve(sku);
    });
  }
 
  render() {
    return (
      <SKU
        onFetchGroup={this.fetchSKUTree}
        onFetchSKU={this.fetchSKU}
        disabled
        disablePopConfig={{
          content: '当前商品启用了门店网店库存同步，需要关闭同步才能修改库存。',
          position: 'top-left',
          trigger: 'hover'
        }}
        uploadConfig={{
          tokenUrl: '//materials.youzan.com/dock/token.json',
          fetchUrl: '//materials.youzan.com/dock/fetch.json'
        }}
      />
    );
  }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

API

参数	说明	类型	默认值	备选值
className	自定义额外类名	string	''
value	当前选中的sku列表	array	[]
maxSize	最大规格名称数	number	3
maxLeafSize	最大可添加规格值数，0为不限制	number	0
maxSKUTextLength	规格名称文字最大长度	number	4
maxLeafTextLength	规格值文字最大长度	number	20
skuTree	可选的规格列表	array	[]
disabled	禁用操作规格列表	boolean	false
disablePopConfig	自定义规格列表禁用状态下提示气泡	object	{}	参考 pop 的文档
uploadConfig	自定义上传图片参数	object	{}	参考 upload 的文档
optionValue	自定义sku的id的key值	string	'id'
optionText	自定义sku的文案的key值	string	'text'
onFetchGroup	异步获取可选的规格列表，如“颜色”、“尺寸”	function	Promise
onFetchSKU	异步获取单个规格可选的值，如“红色”、“蓝色”	function	Promise
onCreateGroup	创建新的规格名，如“星座”	function	Promise
onCreateSKU	创建新的规格值，如“处女座”	function	Promise
onChange	当sku发生改变时的回调，返回值为sku当前value	function	noop
prefix	自定义前缀	string	'rc-sku'	null

工具API

为了更方便操作规格数据，SKU组件提供了一些工具方法

SKU.flatten(sku, items, options)

通过计算笛卡尔积，将树形的value变成扁平的数组

参数	说明	类型	默认值	备选值
sku	当前选中规格的value	array	[]
items	当前已存在的数据	array	[]
options	可配置参数	object	{}	optionValue: 'id', optionText: 'text'

:::demo flatten

import { flatten } from 'zan-sku';
 
let skus = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 2, text: '尺寸', leaf: [{id: 21, text: '大'}, {id: 22, text: '小'}] }
];
 
console.log(flatten(skus));
/**
 * output: 
 * [
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]},
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 * ]
 */
 
let items = [
  {
    "price": "10.00",
    "code": "AE86",
    "skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]
  }
];
console.log(flatten(skus, items));
 
/**
 * output: 
 * [
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]},
 *   {
 *    "price":"10.00",
 *    "code":"AE86",
 *    "skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]
 *   },
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 * ]
 */
 
ReactDOM.render(
    <span />
    , mountNode
);
 

:::

SKU.isSame(prevSKU, nextSKU)

判断两个sku的结构是否完全相同，包括子节点的顺序

:::demo isSame

import { isSame } from 'zan-sku';
 
let skuA = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 2, text: '尺寸', leaf: [{id: 21, text: '大'}, {id: 22, text: '小'}] }
];
 
let skuB = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 2, text: '尺寸', leaf: [{id: 21, text: '大'}, {id: 22, text: '小'}] }
];
 
let skuC = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 2, text: '尺寸', leaf: [{id: 22, text: '小'}, {id: 21, text: '大'}] }
];
 
let skuD = [
  { id: 1, text: '颜色', leaf: [{id: 11, text: '红色'}, {id: 12, text: '蓝色'}] },
  { id: 3, text: '尺寸', leaf: [{id: 21, text: '大'}, {id: 22, text: '小'}] }
];
 
console.log(isSame(skuA, skuB));
console.log(isSame(skuA, skuC));
console.log(isSame(skuA, skuD));
 
/**
 * output: 
 * 
 * true
 * false
 * false
 */
 
ReactDOM.render(
    <span />
    , mountNode
);
 

:::

更新日志

5.0.0 (2017-11-16)

• 升级upload版本，新增uploadConfig来配置上传图片的参数
• sku图片地址改为原图地址

5.2.0 (2018-01-08)

• 优化禁用状态逻辑，增加 disablePopConfig 属性配置禁用状态下的气泡提示