前端angular 实现sku商品

HTML：

<div class="shopSelectedBox" ng-click="showParameterSelected(1)" ng-if="isshowSelected">
已选
<span>{{formatNowSKUattr}} ， {{numbercode}}件</span>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>

<!--选择规格参数-->
<div class="backdrop active ParameterSelected" ng-click="hideParameterSelected()">
<ion-scroll delegate-handle="ParameterSelected" direction="y" ng-click="$event.stopPropagation();">
<div id="panel">
<div id="panel_sku_list">
<pre></pre>
</div>
<div id="panel_sel"></div>
</div>
<div class="shopCountBox">
<label>数量</label>
<div>
<i class="icon ion-android-add" ng-click="changeNumber(1)"></i>
<span>{{numbercode}}</span>
<i class="icon ion-android-remove" ng-click="changeNumber(0)"></i>
</div>
</div>
</ion-scroll>
<div>
<button ng-click="addshoppingcart(lbxq.productid,lbxq.mainpicid)">加入购物车</button>
<button ng-click="confirmChangeGoods($event)">确定</button>
</div>
</div>

CSS：

.shopSelectedBox{
width:100%;
height:40px;
line-height:40px;
padding: 0px 18px;
background-color:#fff;
margin:10px 0px;
color:#aaa;
font-size:12px;
}


.shopSelectedBox >i{
float: right;
}


.shopSelectedBox >span{
margin-left:20px;
color:#cb9c58;
font-size:14px;
}


.ParameterSelected >.scroll-view{
width:100%;
height:60%;
background-color:#fff;
bottom:50px;
position: absolute;
left:0px;
padding:18px 18px;
}


.ParameterSelected .shopCountBox{
width:100%;
border-top:1px solid #eee;
padding-top:10px;
margin-top:10px;
overflow: hidden;
}

.ParameterSelected .shopCountBox>label{
width:100px;
float: left;
height:30px;
line-height:30px;
font-size: 12px;
color: #888;
}


.ParameterSelected .shopCountBox>div{
width:102px;
border-radius:4px;
float: right;
border:1px solid #eee;
box-sizing: border-box;
}


.ParameterSelected .shopCountBox>div>i{
width:30px;
height:30px;
line-height:30px;
text-align: center;
font-size:14px;
float: left;
}


.ParameterSelected .shopCountBox>div>i:nth-child(1){
border-right:1px solid #eee;
}


.ParameterSelected .shopCountBox>div>i:nth-child(3){
border-left:1px solid #eee;
}




.ParameterSelected .shopCountBox>div>span{
width:40px;
height:30px;
line-height:30px;
float: left;
text-align: center;
}


.ParameterSelected>div{
background-color:#fff;
width:100%;
height:50px;
bottom:0px;
position: absolute;
left:0px;
text-align: center;
}


.ParameterSelected>div>button:nth-child(1){
background-color:#e6b861;
}


.ParameterSelected>div>button{
display:inline-block;
width:200px;
height:40px;
background-color:#c49845;
color:#fff;
border-radius:4px;
border:none;
font-size:14px;
}

#panel{
width:100%;
}

JS：

//显示商品参数选择
$scope.showParameterSelected = function() {
show_attr_item();
$('.goods_attr li').click(function() {
if($(this).hasClass('b')) {
return; //被锁定了
}
if($(this).hasClass('sel')) {
$(this).removeClass('sel');
} else {
$(this).siblings().removeClass('sel');
$(this).addClass('sel');
}


var select_ids = _getSelAttrId();


//已经选择了的规格
var $_sel_goods_attr = $('li.sel').parents('.goods_attr');
// step 1
var all_ids = filterAttrs(select_ids);
//获取未选择的
var $other_notsel_attr = $('.goods_attr').not($_sel_goods_attr);
//设置为选择属性中的不可选节点
$other_notsel_attr.each(function() {
set_block($(this), all_ids);
});


//step 2


//设置已选节点的同级节点是否可选
$_sel_goods_attr.each(function() {
update_2($(this));
});
});
shopAddAttrs();
numbercode = $scope.numbercode;
$('.ParameterSelected').addClass('visible');


};
//隐藏商品参数选择
$scope.hideParameterSelected = function() {
$scope.numbercode = numbercode;
$('.ParameterSelected').removeClass('visible');
};
//减少或增加商品参数里的购物车数量
$scope.numbercode = 1;
var numbercode = 1;
$scope.changeNumber = function(type) {
//type  0:减少  1:增加
if(type == 1) {
$scope.numbercode += 1;
} else {
if($scope.numbercode == 1) {
return;
};
$scope.numbercode -= 1;
};
};

//*******处理sku商品可选规格逻辑开始*******


//获取当前url的商品id信息
var pid = $location.search()['pid'];
//存储该商品下的可有属性
var keys = [];
//sku商品列表
var sku_list = [];
//当前选择的SKU索引  直接靠此索引取当前商品数据
$scope.nowSKUindex = 0;
//当前的SKU商品的属性
$scope.nowSKUattr = '';
//当前的SKU商品id
$scope.nowSKUid = '';
//格式化后当前的SKU商品的属性
$scope.formatNowSKUattr = '';
//** 返回格式参考
//** var keys = {
//** '颜色': ['金色', '深空灰色', '中国红'],
//** '版本': ['公开版', '原厂延保版', '白条版', '双网通版'],
//** '内存': ['64GB', '256GB'],
//** '购买方式': ['官方标配', '在线支付', '线下支付']
//** };
//** SKU，Stock Keeping Uint(库存量单位)
//** var sku_list = [{
//** 'attrs': '金色|公开版|64GB|官方标配',
//** 'proid': "123",
//** 'num': 120
//** },
//** {
//** 'attrs': '金色|原厂延保版|64GB|官方标配',
//** 'proid': "234",
//** 'num': 10
//** }
//** ];
//获取sku商品详情
(function() {
var promisegift = Convert.getproductskudetail(pid); //同步调用，获取承诺接口
promisegift.then(function(data) {
//调用承诺接口resolove()
if(data.status.code == '0') {
keys = eval("(" + data.result.keys + ")");
sku_list = data.result.goods;
//判断是否为空对象 是便隐藏可选规格
if(!$.isEmptyObject(keys)) {
$scope.isshowSelected = true;
};
//当前商品详情内容
$scope.lbxq = sku_list[0];
//当前的SKU商品的属性
$scope.nowSKUattr = sku_list[0].attrs;
//格式化当前SKU商品(只为展示用)
$scope.formatNowSKUattr = $scope.nowSKUattr.replace(/\|/g,' ， ');
//给当前商品添加已选属性
shopAddAttrs();
if($scope.lbxq.moneyprice == "0.00" || $scope.lbxq.moneyprice == "0" || $scope.lbxq.moneyprice == null) {
$scope.lbxq.display2 = {
"display": "none"
};
} else {
$scope.lbxq.display2 = {
"display": "block"
};
};
//分享朋友圈
$hcwxshare.getshare(data.result.mainpicid, data.result.productname, data.result.shareremark);
$ionicSlideBoxDelegate.update(); //避免轮播图不出来
$ionicSlideBoxDelegate.loop(true); //避免轮播到最后一张不轮播
// console.log(keys);
// console.log(sku_list);
} else {
$learunTopAlert.show({
text: "获取失败！"
});
};
});
})();
//显示html结构
function show_attr_item() {
var html = '';
for(k in keys) {
html += '<div class="goods_attr" > <span class="label">' + k + '</span>';
html += '<ul>'
for(k2 in keys[k]) {
//该商品下所有属性之一
var _attr_id = keys[k][k2];
html += '<li class="" val="' + _attr_id + '" >';
html += '<span>' + _attr_id + '</span>';
html += '</li>'
}
html += '</ul>';
html += '</div>';
}
$('#panel_sel').html(html);
}
show_attr_item()


//获取所有包含指定节点的路线
function filterProduct(ids) {
var result = [];
$(sku_list).each(function(k, v) {
_attr = '|' + v['attrs'] + '|';
_all_ids_in = true;
for(k in ids) {
if(_attr.indexOf('|' + ids[k] + '|') == -1) {
_all_ids_in = false;
break;
}
}
if(_all_ids_in) {
result.push(v);
}
});
return result;
}


//获取 经过已选节点 所有线路上的全部节点


// 根据已经选择得属性值，得到余下还能选择的属性值
function filterAttrs(ids) {
var products = filterProduct(ids);
//console.log(products);
var result = [];
$(products).each(function(k, v) {
result = result.concat(v['attrs'].split('|'));
});
return result;
}


//已选择的节点数组
function _getSelAttrId() {
var list = [];
$('.goods_attr li.sel').each(function() {
list.push($(this).attr('val'));
});
return list;
}


//给当前商品添加已选属性
function shopAddAttrs() {
//当前商品的默认属性
var arr = sku_list[$scope.nowSKUindex].attrs.split("|");
//属性索引
var attrindex = -1;
//所有属性数组
var allarr = [];
for(k in keys) {
for(k2 in keys[k]) {
allarr.push(keys[k][k2]);
};
};
for(var j = 0; j < arr.length; j++) {
attrindex = -1;
for(var i = 0; i < allarr.length; i++) {
attrindex += 1;
if(arr[j] == allarr[i]) {
//为匹配值增加选中
$('#panel_sel li').eq(attrindex).click();
break;
};
};
}


};
// 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选
function update_2($goods_attr) {
var select_ids = _getSelAttrId();
var $li = $goods_attr.find('li.sel');
var select_ids2 = del_array_val(select_ids, $li.attr('val'));
var all_ids = filterAttrs(select_ids2);
set_block($goods_attr, all_ids);
}
//根据 $goods_attr下的所有节点是否在可选节点中（all_ids） 来设置可选状态
function set_block($goods_attr, all_ids) {
$goods_attr.find('li').each(function(k2, li2) {
if($.inArray($(li2).attr('val'), all_ids) == -1) {
$(li2).addClass('b');
} else {
$(li2).removeClass('b');
}
});
}
//去除 数组 arr中的 val ，返回一个新数组
function del_array_val(arr, val) {
var a = [];
for(k in arr) {
if(arr[k] != val) {
a.push(arr[k]);
}
}
return a;
}
//获取对象长度
function ObjLength(obj) {
var count = 0;
for(var i in obj) {
if(obj.hasOwnProperty(i)) {
count++;
};
};
return count;
}
//确认切换商品
$scope.confirmChangeGoods = function($event) {
//当前商品的属性集合
var attrgather = '';
//获取所有属性节点
var attrdom = $('#panel_sel li');
for(var i = 0; i < attrdom.length; i++) {
if(attrdom.eq(i).hasClass('sel')) {
attrgather += attrdom.eq(i).text() + "|";
};
};
attrgather = attrgather.substr(0, attrgather.length - 1);
if(attrgather.split("|").length != ObjLength(keys)) {
$learunTopAlert.show({
text: "请选择完整的规格"
});
$event.stopPropagation();
return;
};
for(var i = 0; i < sku_list.length; i++) {
if(sku_list[i].attrs == attrgather) {
$scope.nowSKUindex = i;
$scope.nowSKUid = sku_list[i].productid;
$scope.nowSKUattr = sku_list[i].attrs;
$scope.formatNowSKUattr = $scope.nowSKUattr.replace(/\|/g,' ， ');
break;
};
};
$scope.lbxq = sku_list[$scope.nowSKUindex];
$ionicSlideBoxDelegate.update(); //避免轮播图不出来
$ionicSlideBoxDelegate.loop(true); //避免轮播到最后一张不轮播
$event.stopPropagation();
$('.ParameterSelected').removeClass('visible');
};