电商之发布商品

  对于电商来说，商品是基础。无商品则不能称之为电商，发布商品这个环节是必不可少的，可谓是重中之重。

  商品一般分为两种情况：

　　1.无规格商品（现在的电商基本已经没有无规格商品，基本可以忽略）

　　2.规格商品:什么叫多规格那？下面来举个例子

　　　　 手机   内存：64G，128G   颜色：白色，红色   颜色，内存叫规格；64G，128G，白色，红色叫规格值 

　　　　 鞋子   尺码：38尺，40尺   颜色：黑色，蓝色   尺码，颜色叫规格；38尺，40尺， 黑色，蓝色叫规格值

      　　  通过这两个小例子，大家应该知道了什么叫规格 ，什么叫规格值。

　　 这样有的朋友就会问，不同规格组合起来价钱不一样，这个价钱是怎么算的那？ 重点来了，这就是这篇文章的主要内从，发布商品！

　　拿上面那个手机例子来说：内存和颜色组合会分为四种情况，分别为 64G-红色，64G-白色，128G白色，128G红色

        在后台发布商品的时候，你选择每组应的规格值组合后，这样会出来一列数据让你填写，根据你选择的规格组合数，出来对应的列数，在每列不同的组合上填写价钱就行了。

所以，重中之中就是你要知道应该有多少条数据。比如：

　　　　你在内存上选择了64G，128G，256G，在颜色上选择了白色，这时会出现三条组合数据才对。

　　　　你在内存上选择了64G，128G，256G，在颜色上选择了白色，红色这时会出现6条组合数据才对。　

　　　　你在内存上选择了64G，128G，256G，在颜色上选择了白色，红色，蓝色这时会出现9条组合数据才对。　

    在这个发布商品当中，我们用到了笛卡尔积算法。神马叫笛卡尔积那？直白的说 就是不同值之间的各种组合。

下面看下效果图

　　

 

　　这样就是最终的效果，连条数都，规格值组合都知道了，那么价钱就是一个输入框而已，对吧？话不多说，下面上代码：

  1 var item = {};
  2 $(document).ready(function(){
  3     item.init();    
  4     //获取矩阵按钮
  5     function getBtn(ele){
  6         var arr=[];
  7         var contain = $(ele);
  8         for(var i=0;i<contain.length;i++){
  9             arr.push($.makeArray(contain[i].children));
 10         }
 11         return arr;
 12     }
 13     //生成二维数组
 14     var data = getBtn(".container .row");    
 15     //判断点击的元素是否在二维数组中
 16     function getIndex(ele,map){
 17         var res=[];
 18         for(var i=0;i<map.length;i++){
 19             for(var j=0;j<map[i].length;j++){
 20                 if(map[i][j] == ele){
 21                     res = [i,j];
 22                 }
 23             }
 24         }
 25         return res;            
 26     }    
 27     //生成结果二维数组
 28     var checked=[];
 29     for(var i = 0;i<data.length;i++){
 30         checked[i] = []; 
 31     }           
 32     //处理结果二维数组中的断层
 33     //如果有中间一行没数据，就截断阵列
 34     function deal(checked){
 35         //优化不能从下往上选择属性
 36         var index = 0;
 37         var array  = new Array();
 38         for(var i=0;i<checked.length;i++){         
 39             if(checked[i].length > 0){
 40                 array[index] = checked[i];
 41                 index =index + 1;
 42             }
 43         }
 44         return array;
 45     }
 46                      
 47     //删除数组的元素
 48     function removeByValue(arr, val) {
 49         for(var i=0; i<arr.length; i++) {
 50             if(arr[i] == val) {
 51                 arr.splice(i, 1);
 52                 break;
 53             }
 54         }
 55         //做笛卡尔积的结果
 56         var r = multiDicar(deal(checked));
 57         for(var i=0;i<r.length;i++){  
 58             $(".box").append("第"+(i+1)+"个规格组合:&nbsp&nbsp&nbsp("+r[i]+")"+"<br>");
 59         }  
 60     }    
 61     $(".container input").on("click",function(){
 62         $(this).toggleClass("checked");
 63         $(".box").empty();
 64         var _this=$(this);
 65         //判断在哪行那列
 66         var res = getIndex(_this[0],data);
 67         
 68         //判断是否是取消
 69         //如果数据已经存在，就把它删除 ，bug在于按钮的文字不能重复
 70         if(($.inArray(_this.val(),checked[res[0]])) !==-1){
 71             removeByValue(checked[res[0]],_this.val());
 72         }else{
 73             checked[res[0]].push(_this.val());
 74             //做笛卡尔积的结果
 75             var r = multiDicar(deal(checked));
 76             for(var i=0;i<r.length;i++){  
 77                 $(".box").append("第"+(i+1)+"个规格组合:&nbsp&nbsp&nbsp("+r[i]+")"+"<br>");
 78             }  
 79         }
 80     });
 81 }); 
 82 
 83 
 84 
 85 item = {
 86     init : function (){
 87         item.bindEvent();
 88     },
 89     //笛卡尔积初始化
 90     bindEvent:function(){
 91         //两个数组的笛卡尔积
 92         var Dicar = function(a,b){  
 93              var ret=[];  
 94              for(var i=0;i<a.length;i++){  
 95                  for(var j=0;j<b.length;j++){  
 96                      ret.push(multi(a[i],b[j]));  
 97                  }  
 98              }  
 99              return ret;  
100          }  
101          var multi = function(a,b){  
102              if(!(a instanceof Array))  
103                 a = [a];  
104                  var ret = Array.call(null,a);  
105                  ret.push(b);  
106                  return ret;  
107              }  
108          //递归求笛卡尔最后结果  
109          multiDicar = function(data){  
110              debugger;
111              var len = data.length;  
112              if(len == 0) {
113                  return []; 
114              }else if(len == 1){
115                  return data[0];    
116              }else{  
117                  var r=data[0];  
118                  for(var i=1;i<len;i++){
119                      var s = Dicar(r,data[i])
120                      if(s.length>0){
121                          r=s;
122                      }
123                  }  
124                  return r;  
125              }  
126          }  
127     }
128 }

 

很早之前就想整理一下电商的发布商品了，心里都知道，但是就是懒得写。业精于勤荒于嬉，要养成经常写东西的习惯，就从比较喜欢的电商做起吧。

本篇文章参考了 https://www.cnblogs.com/chengyunshen/p/7246966.html 的代码，

不过那位博主的代码有一些bug，我已经在代码中全部改了过来，比如最大的一个bug，只能自上而下选择才会有效果

改好之后非常完美

 

　　其实有时候看别人的代码也是一种进步，能看懂，并且能改掉别人没有发现或者解决不了的bug是非常有成就的。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　十八哥

 

  

 

转载于:https://www.cnblogs.com/gblw/p/8298861.html