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 多维属性状态判断算法

  • 相关阅读:
    SQL 函数以及SQL 编程
    查询练习(四十五道题)
    SQL server 高级查询
    SQL server 数据库 操作及简单查询
    T-SQL 语句
    SQL
    表单验证、实则表达式、事件
    视频插入代码
    插入地图
    网页布局小练
  • 原文地址:https://www.cnblogs.com/soul-wonder/p/9732921.html
Copyright © 2011-2022 走看看