zoukankan      html  css  js  c++  java
  • 前端实现商品sku属性选择

    一、效果图

    二、后台返回的数据格式

    [{
        "saleName": "颜色",
        "dim": 1,
        "saleAttrList": [{
                "imagePath": null,
                "saleValue": "白色",
                "skuIds": [
                    1, 2, 3
                ]
            },
            {
                "imagePath": null,
                "saleValue": "黑色",
                "skuIds": [
                    5, 6
                ]
            }
        ]
    }]

    dim:代表维度,saleAttrList:代表该维度下商品标签的集合,skuIds:代表当前标签下同类商品skuId。

    三、实现

    一、进入商品详情页面

      1.获取后台数据,添加状态,当前sku为选中状态

      2.遍历计算出,同类sku对应的标签数组

        

      3.求所有存在的路径的组合的子集,生成所有存在的路径表

    /**
             * 求幂积
             * @param {Object} arr
             */
            function powerset(arr) {
                var ps = [[]];
                for (var i=0; i < arr.length; i++) {
                    for (var j = 0, len = ps.length; j < len; j++) {
                        ps.push(ps[j].concat(arr[i]));
                    }
                }
                return ps;
            }
    View Code

      

       4.把已选择的元素添加到一个数组,当用户所有维度都选择后,才进行跳转sku,否则提示,有未选择的维度。

    二、用户选择商品属性的点击事件

      1.如果不可选,return

      2.选中

        至同一dim其他为未选中

        不同dim中如果选中,则不改变转态,其他设置为未选中

      3.未选中

        重置所有dim中如果选中,则不改变转态,其他设置为未选中

      4.用户所选路径,去查询路径表,如果当前路径不存在,则将当前元素置灰为不可选状态

      5.确定唯一sku,跳转

    参考:Sku 多维属性状态判断算法

  • 相关阅读:
    Lotus Sametime Server R8.x 标准版部署排错
    group by的测试
    了解lpk.dll是什么病毒以及lpk.dll病毒专杀方法
    jquery练习5
    win7中配置iis
    jquery的动画
    lamp下mysql安全加固
    jquery的冒泡事件
    MySQL性能优化的最佳20+条经验
    MySQL数据库服务器优化详细
  • 原文地址:https://www.cnblogs.com/soul-wonder/p/9732921.html
Copyright © 2011-2022 走看看