商品详细信息的代码html_品优购电商系统开发 第6章 商品录入「2」

课程目标

目标1：完成选择商品分类功能

目标2：完成品牌选择功能

目标3：完成扩展属性功能

目标4：完成规格选择功能

目标5：完成SKU商品信息功能

目标6：完成是否启用规格功能

1.商品录入【选择商品分类】

1.1需求分析

在商品录入界面实现商品分类的选择(三级分类)效果如下：

当用户选择一级分类后，二级分类列表要相应更新，当用户选择二级分类后，三级列表要相应更新。

1.2准备工作

(1)在pinyougou-shop-web工程中创建ItemCatController.(可拷贝运营商后台的代码)

(2)创建item_catService.js (可拷贝运营商后台的代码)

(3)修改goodsController.js，引入itemCatService

(4)修改goods_edit.html，添加引用

1.3代码实现

1.3.1一级分类下拉选择框

在goodsController增加代码

//读取一级分类$scope.selectItemCat1List=function(){ itemCatService.findByParentId(0).success(  function(response){  $scope.itemCat1List=response;   } );}

页面加载调用该方法

修改goods_edit.html一级分类下拉选择框

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。

运行效果如下：

1.3.2二级分类下拉选择框

在goodsController增加代码：

//读取二级分类$scope.$watch('entity.goods.category1Id', function(newValue, oldValue) {  //根据选择的值，查询二级分类 itemCatService.findByParentId(newValue).success( function(response){ $scope.itemCat2List=response;   } ); }); 

$watch方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。

修改goods_edit.html中二级分类下拉框

1.3.3三级分类下拉选择框

在goodsController增加代码：

//读取三级分类$scope.$watch('entity.goods.category2Id', function(newValue, oldValue) {  //根据选择的值，查询二级分类 itemCatService.findByParentId(newValue).success( function(response){ $scope.itemCat3List=response;   } );  });

修改goods_edit.html中三级分类下拉框

1.3.4读取模板ID

在goodsController增加代码：

 //三级分类选择后 读取模板ID $scope.$watch('entity.goods.category3Id', function(newValue, oldValue) {  itemCatService.findOne(newValue).success(  function(response){  $scope.entity.goods.typeTemplateId=response.typeId; //更新模板ID   } );  }); 

在goods_edit.html显示模板ID

模板ID:{{entity.goods.typeTemplateId}}

2.商品录入【品牌选择】

2.1需求分析

在用户选择商品分类后，品牌列表要根据用户所选择的分类进行更新。具体的逻辑是根据用户选择的三级分类找到对应的商品类型模板，商品类型模板中存储了品牌的列表json数据。

2.2代码实现

(1)在pinyougou-shop-web工程创建TypeTemplateController (可从运营商后台拷贝)

(2)在pinyougou-shop-web工程创建typeTemplateService.js (可从运营商后台拷贝)

(3)在goodsController引入typeTemplateService 并新增代码

//模板ID选择后 更新品牌列表$scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) {  typeTemplateService.findOne(newValue).success( function(response){  $scope.typeTemplate=response;//获取类型模板  $scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表 } ); }); 

在页面goods_edit.html 引入js

添加品牌选择框

3.商品录入【扩展属性】

3.1需求分析

在商品录入实现扩展属性的录入。

3.2代码实现

修改goodsController.js ，在用户更新模板ID时，读取模板中的扩展属性赋给商品的扩展属性。

 //模板ID选择后 更新模板对象 $scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) {  typeTemplateService.findOne(newValue).success(  function(response){  $scope.typeTemplate=response;//获取类型模板  $scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表$scope.entity.goodsDesc.customAttributeItems=JSON.parse( $scope.typeTemplate.customAttributeItems);//扩展属性  } );  });

修改goods_edit.html

{{pojo.text}}

4.商品录入【规格选择】

4.1需求分析

显示规格及选项列表(复选框)如下图，并保存用户选择的结果

4.2代码实现

4.2.1 显示规格选项列表

由于我们的模板中只记录了规格名称，而我们除了显示规格名称还是显示规格下的规格选项，所以我们需要在后端扩充方法。

(1)在pinyougou-sellergoods-interface的TypeTemplateService.java新增方法定义

/** * 返回规格列表 * @return */public List findSpecList(Long id);

(2)在pinyougou-sellergoods-service的TypeTemplateServiceImpl.java新增方法

@Autowiredprivate TbSpecificationOptionMapper specificationOptionMapper;@Overridepublic List findSpecList(Long id) {//查询模板TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey(id);List list = JSON.parseArray(typeTemplate.getSpecIds(), Map.class) ;for(Map map:list){//查询规格选项列表TbSpecificationOptionExample example=new TbSpecificationOptionExample();com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();criteria.andSpecIdEqualTo( new Long( (Integer)map.get("id") ) );List options = specificationOptionMapper.selectByExample(example);map.put("options