黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发 第 6 章 五 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-26 14:19
标题: 【郑州校区】品优购电商系统开发 第 6 章 五

【郑州校区】品优购电商系统开发 第 6 章 五

5.商品录入【SKU 商品信息】
5.1 需求分析
基于上一步我们完成的规格选择，根据选择的规格录入商品的 SKU 信息，当用户选择相应的规格，下面的 SKU 列表就会自动生成，如下图：

实现思路：实现思路：
（1）我们先定义一个初始的不带规格名称的集合，只有一条记录。

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


5.2 前端代码
5.2.1 生成 SKU 列表(深克隆)
（1）在 goodsController.js 实现创建 sku 列表的方法

[AppleScript] 纯文本查看 复制代码

//创建 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.attributeName,items.attributeValue );

}

}

//添加列值

addColumn=function(list,columnName,conlumnValues){

var newList=[];//新的集合

for(var i=0;i<list.length;i++){

var oldRow= list;

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 列表的方法

[AppleScript] 纯文本查看 复制代码

<input type="checkbox"

ng-click="updateSpecAttribute($event,pojo.text,option.optionName);createItemList()"

>{{option.optionName}}

（3）在页面上添加表达式，进行测试

[AppleScript] 纯文本查看 复制代码

{{entity.itemList}}

显示效果如下：


5.2.2 显示 SKU 列表
goods_edit.html 页面上绑定 SKU 列表

[AppleScript] 纯文本查看 复制代码

<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> 

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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2