美文网首页
商城上传商品sku线上项目任意层级!!!

商城上传商品sku线上项目任意层级!!!

作者: 罗宾船长 | 来源:发表于2018-06-11 16:07 被阅读0次
    线上项目示例GIF
    $(".spec-content").on("change",function () {
        //当.spec-content中的内容发生改变的时候执行 sku.createTable()方法。
        sku.createTable();
    });
    
    var sku = {
        createTable: function () {...},//创建表格
        getSkuTr: function () {...},//获取sku
        dosku: function () {...},//生成sku
        mergeTable: function () {...}//合并表格
    }
    

    GitHub地址: https://github.com/songsongZhou/skuUpload。(线上用的layerui,GitHub上的demo是一个简化版,但是功能是一样)
    你能看到这篇文章说明你对sku已经有了一定的了解,这里就不做过多说明,这篇文章主要带你实现任意层级的规格组合,图中只有三级是因为做了限制。

    布局结构.png
    整个规格数据包含在.spec-content中,表格生成在#createTable中。这里有4个规格颜色、套餐、存储、版本,当然也可以是n个,熟悉完布局下面我们来分析代码。
    选则规格.png
    原始数据—specArray
    处理后数据—sku
    处理后的数组长度 length=2,因为sku的生成规则是n * n * ... 也就是 1 * 1 * 2=2。拿到这个数组你就可以生成对应的表格了。主要方法 duSku(),getSkuTr()。

    下次会写Android 和 js 实现商城购买的规格匹配方法,效果参考淘宝商品详情购物逻辑,可实现库存0判断自动灰,选中一个规格时自动计算对应sku的库存区间,价格区间

    相关文章

      网友评论

          本文标题:商城上传商品sku线上项目任意层级!!!

          本文链接:https://www.haomeiwen.com/subject/lrbzlftx.html