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

2.6 读取商品规格属性
修改 goodsController

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

 //查询实体
$scope.findOne=function(){
......
goodsService.findOne(id).success(
function(response){
$scope.entity= response;
editor.html($scope.entity.goodsDesc.introduction);//商品介绍
$scope.entity.goodsDesc.itemImages=
JSON.parse($scope.entity.goodsDesc.itemImages);//图片列表
//扩展属性列表
$scope.entity.goodsDesc.customAttributeItems
=JSON.parse($scope.entity.goodsDesc.customAttributeItems);
//规格
$scope.entity.goodsDesc.specificationItems=JSON.parse($scope.entity.goodsDesc.s
pecificationItems);
}
);
}

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

//根据规格名称和选项名称返回是否被勾选
$scope.checkAttributeValue=function(specName,optionName){
var items= $scope.entity.goodsDesc.specificationItems;
var object= $scope.searchObjectByKey(items,'attributeName',specName);
if(object==null){
return false;
}else{
if(object.attributeValue.indexOf(optionName)>=0){
return true;
}else{
return false;
}
}
}

修改页面上规格面板的复选框,运用 ng-checked 指令控制复选框的勾选状态

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

<input type="checkbox"
ng-click="updateSpecAttribute($event,pojo.text,p.optionName);createSKUTable()"
ng-checked="checkAttributeValue(pojo.text,p.optionName)">{{p.optionName}}

2.7 读取 SKU 数据
显示 SKU 商品列表，并自动读取价格、库存等数据加载到列表中


2.7.1 后端代码
在 GoodsServiceImpl 的 findOne 方法中加载 SKU 商品数据

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

//查询 SKU 商品列表
TbItemExample example=new TbItemExample();
com.pinyougou.pojo.TbItemExample.Criteria criteria =
example.createCriteria();
criteria.andGoodsIdEqualTo(id);//查询条件：商品 ID
List<TbItem> itemList = itemMapper.selectByExample(example);
goods.setItemList(itemList); 

2.7.2 前端代码
在 goodsController.js 修改 findOne 方法的代码

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

//查询实体
$scope.findOne=function(){
........
goodsService.findOne(id).success(
function(response){
$scope.entity= response;
.........
//SKU 列表规格列转换
for( var i=0;i<$scope.entity.itemList.length;i++ ){
$scope.entity.itemList[i].spec =
JSON.parse( $scope.entity.itemList[i].spec);
}
}
);
}

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

2.6 读取商品规格属性
修改 goodsController

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

 //查询实体
$scope.findOne=function(){
......
goodsService.findOne(id).success(
function(response){
$scope.entity= response;
editor.html($scope.entity.goodsDesc.introduction);//商品介绍
$scope.entity.goodsDesc.itemImages=
JSON.parse($scope.entity.goodsDesc.itemImages);//图片列表
//扩展属性列表
$scope.entity.goodsDesc.customAttributeItems
=JSON.parse($scope.entity.goodsDesc.customAttributeItems);
//规格
$scope.entity.goodsDesc.specificationItems=JSON.parse($scope.entity.goodsDesc.s
pecificationItems);
}
);
}

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

//根据规格名称和选项名称返回是否被勾选
$scope.checkAttributeValue=function(specName,optionName){
var items= $scope.entity.goodsDesc.specificationItems;
var object= $scope.searchObjectByKey(items,'attributeName',specName);
if(object==null){
return false;
}else{
if(object.attributeValue.indexOf(optionName)>=0){
return true;
}else{
return false;
}
}
}

修改页面上规格面板的复选框,运用 ng-checked 指令控制复选框的勾选状态

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

<input type="checkbox"
ng-click="updateSpecAttribute($event,pojo.text,p.optionName);createSKUTable()"
ng-checked="checkAttributeValue(pojo.text,p.optionName)">{{p.optionName}}

2.7 读取 SKU 数据
显示 SKU 商品列表，并自动读取价格、库存等数据加载到列表中


2.7.1 后端代码
在 GoodsServiceImpl 的 findOne 方法中加载 SKU 商品数据

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

//查询 SKU 商品列表
TbItemExample example=new TbItemExample();
com.pinyougou.pojo.TbItemExample.Criteria criteria =
example.createCriteria();
criteria.andGoodsIdEqualTo(id);//查询条件：商品 ID
List<TbItem> itemList = itemMapper.selectByExample(example);
goods.setItemList(itemList); 

2.7.2 前端代码
在 goodsController.js 修改 findOne 方法的代码

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

//查询实体
$scope.findOne=function(){
........
goodsService.findOne(id).success(
function(response){
$scope.entity= response;
.........
//SKU 列表规格列转换
for( var i=0;i<$scope.entity.itemList.length;i++ ){
$scope.entity.itemList[i].spec =
JSON.parse( $scope.entity.itemList[i].spec);
}
}
);
}