欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

品优购电商系统开发 第 6 章 五

程序员文章站 2024-03-25 22:37:28
...

5.商品录入【SKU 商品信息】
5.1 需求分析
基于上一步我们完成的规格选择,根据选择的规格录入商品的 SKU 信息,当用户选择相应的规格,下面的 SKU 列表就会自动生成,如下图:
品优购电商系统开发 第 6 章 五
实现思路:实现思路:
1)我们先定义一个初始的不带规格名称的集合,只有一条记录。

2)循环用户选择的规格,根据规格名称和已选择的规格选项对原集合进行扩充,添加规格名称和值,新增的记录数与选择的规格选项个数相同生成的顺序如下图:

品优购电商系统开发 第 6 章 五
5.2 前端代码
5.2.1 生成 SKU 列表(深克隆)
1)在 goodsController.js 实现创建 sku 列表的方法

//创建 SKU 列表
$scope.createItemList=function(){
$scope.entity.itemList=[{spec:{},price:0,num:99999,status:'0',isDefault:'0' } ]
;//初始
var items= $scope.entity.goodsDesc.specificationItems;
for(var i=0;i< items.length;i++){
$scope.entity.itemList =
 addColumn( $scope.entity.itemList,items[i].attributeName,items[i].attributeValue );
}
}
//添加列值
addColumn=function(list,columnName,conlumnValues){
var newList=[];//新的集合
for(var i=0;i<list.length;i++){
var oldRow= list[i];
for(var j=0;j<conlumnValues.length;j++){
var newRow= JSON.parse( JSON.stringify( oldRow ) );//深克隆
newRow.spec[columnName]=conlumnValues[j];
newList.push(newRow);
}
}
return newList;
}

2)在更新规格属性后调用生成 SKU 列表的方法

<input type="checkbox"
ng-click="updateSpecAttribute($event,pojo.text,option.optionName);createItemList()"
>{{option.optionName}}

3)在页面上添加表达式,进行测试

{{entity.itemList}}

显示效果如下:

品优购电商系统开发 第 6 章 五
5.2.2 显示 SKU 列表
goods_edit.html 页面上绑定 SKU 列表

<table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="sorting" ng-repeat="item in
entity.goodsDesc.specificationItems">{{item.attributeName}}</th>
<th class="sorting">价格</th>
<th class="sorting">库存</th>
<th class="sorting">是否启用</th>
<th class="sorting">是否默认</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pojo in entity.itemList">
<td ng-repeat="item in entity.goodsDesc.specificationItems">
{{pojo.spec[item.attributeName]}}
</td>
<td>
<input class="form-control" ng-model="pojo.price" placeholder="价格
">
</td>
<td>
<input class="form-control" ng-model="pojo.num" placeholder="库存数量">
</td>
<td>
<input type="checkbox" ng-model="pojo.status" ng-true-value="1"
ng-false-value="0" >
</td>
<td>
<input type="checkbox" ng-model="pojo.isDefault" ng-true-value="1"
ng-false-value="0">
</td>
</tr>
</tbody>
</table>

删除掉原来的测试用的表达式

相关标签: 技术文章