/vue-sku

vue 实现的创建、展示商品 SKU 组件，提供了完整的mock请求上传 DEMO

Primary LanguageVue

vue-sku

  • 用 element-ui 实现了 zent 的 SKU 规格选择器组件
  • 后台编辑 SKU
  • 为每一种 SKU 设置额外的属性，如价格、库存等
  • 前端展示并选择 SKU

2019-11-03 更新内容

  • async 分支，实现了从模拟请求后端 mock 数据，到获取当前的 sku 参数传递给后端的完整 demo
  • 删除了合并单元格功能

在线 DEMO（master 分支）

注意：本项目只提供 DEMO 提供参考，并未打包成 npm package DEMO

参考实现

文档

Flatten、isSame 直接引用了 zent sku 官方文档

Flatten

SKU.flatten(sku, items, options) 通过计算笛卡尔积，将树形的 value 变成扁平的数组

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

let skus = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 2,
    value: "尺寸",
    leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
  }
];

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":"小"}]}
 * ]
 */

// 为某个 SKU 添加额外字段，例如标价、成本、工厂指导价等
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":"小"}]}
 * ]
 */

isSame

import { isSame } from "src/utils/sku";

let skuA = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 2,
    value: "尺寸",
    leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
  }
];

let skuB = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 2,
    value: "尺寸",
    leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
  }
];

let skuC = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 2,
    value: "尺寸",
    leaf: [{ id: 22, value: "小" }, { id: 21, value: "大" }]
  }
];

let skuD = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 3,
    value: "尺寸",
    leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
  }
];

console.log(isSame(skuA, skuB));
console.log(isSame(skuA, skuC));
console.log(isSame(skuA, skuD));

/**
 * output:
 *
 * true
 * false
 * false
 */

Flatten、isSame 函数如何在 Python 里使用

  1. 打开源代码
  2. 源代码有三个函数 getLevels flatten isEqual，依次复制三个函数到 ES6 转 ES5 网站（相当于 python3 转 python2）
  3. 注意，每个函数前的 export 语句要删除。即 export function => function
  4. 使用 Jiphy 把生成的 ES5 JS 代码转为 python

感谢第三方库

本地预览项目

git clone https://github.com/zaxlct/vue-sku
npm install
npm run serve

TODO

  • 库存为零时，选择 sku 的按钮 disabled

提问

  • 有问题可发起 issues，或加 QQ 群： 163801325
  • 有想法亦可发起 PR