码迷,mamicode.com
首页 > 其他好文 > 详细

前端实现商品属性选择

时间:2018-09-30 19:57:15      阅读:525      评论:0      收藏:0      [点我收藏+]

标签:判断   for   uid   dimens   返回   格式   target   数组   tps   

一、效果图

技术分享图片

二、后台返回的数据格式

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

前端实现商品属性选择

标签:判断   for   uid   dimens   返回   格式   target   数组   tps   

原文地址:https://www.cnblogs.com/soul-wonder/p/9732921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!