zan-sku v6.0.0

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

工具API

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

SKU.flatten(sku, items, options)

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

:::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 属性配置禁用状态下的气泡提示