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

6.过滤条件构建
6.1 需求分析
点击搜索面板上的分类、品牌和规格，实现查询条件的构建。查询条件以面包屑的形式显示。
当面包屑显示分类、品牌和规格时，要同时隐藏搜索面板对应的区域。
用户可以点击面包屑上的 X 撤销查询条件。撤销后显示搜索面包相应的区域。
6.2 添加搜索项
6.2.1 添加搜索项方法
修改 pinyougou-search-web 的 searchController.js

$scope.searchMap={'keywords':'','category':'','brand':'','spec':{}};//搜索对象
//添加搜索项
$scope.addSearchItem=function(key,value){
if(key=='category' || key=='brand'){//如果点击的是分类或者是品牌
$scope.searchMap[key]=value;
}else{
$scope.searchMap.spec[key]=value;
}
}

6.2.2 点击搜索项
修改 pinyougou-search-web 的 search.html ，为搜索面板添加点击事件
点击商品分类标签

<a href="#" ng-click="addSearchItem('category',category)">{{category}}</a>

点击品牌标签

<a href="#" ng-click="addSearchItem('brand',brand.text)">{{brand.text}}</a>

点击规格标签

<a href="#" ng-click="addSearchItem(spec.text,pojo.optionName)">
{{pojo.optionName}}</a>

6.2.3 显示面包屑
修改 pinyougou-search-web 的 search.html，用面包屑形式显示搜索条件

<ul class="fl sui-breadcrumb">搜索条件：</ul>
<ul class="tags-choose">
<li class="tag" ng-if="searchMap.category!=''">商品分类：{{searchMap.category}}<i
class="sui-icon icon-tb-close"></i></li>
<li class="tag" ng-if="searchMap.brand!=''">品牌：{{searchMap.brand}}<i
class="sui-icon icon-tb-close"></i></li>
<li class="tag" ng-repeat="(key,value) in searchMap.spec">{{key}}:{{value}}<i
class="sui-icon icon-tb-close"></i></li>
</ul>

6.3 撤销搜索项
6.3.1 撤销搜索项的方法
修改 pinyougou-search-web 工程 searchController.js

//移除复合搜索条件
$scope.removeSearchItem=function(key){
if(key=="category" || key=="brand"){//如果是分类或品牌
$scope.searchMap[key]="";
}else{//否则是规格
delete $scope.searchMap.spec[key];//移除此属性
}
}

6.3.2 页面调用方法
pinyougou-search-web 工程的 search.html

<ul class="tags-choose">
<li class="tag" ng-if="searchMap.category!=''"
ng-click="removeSearchItem('category')">商品分类：{{searchMap.category}}<i
class="sui-icon icon-tb-close"></i></li>
<li class="tag" ng-if="searchMap.brand!=''" ng-click="removeSearchItem('brand')">
品牌：{{searchMap.brand}}<i class="sui-icon icon-tb-close"></i></li>
<li class="tag" ng-repeat="(key,value) in searchMap.spec"
ng-click="removeSearchItem(key)">{{key}}:{{value}}<i class="sui-icon
icon-tb-close"></i></li>
</ul>

6.4 隐藏查询面板
6.4.1 隐藏分类面板
修改 search.html

<div class="type-wrap" ng-if="resultMap.categoryList!=null && searchMap.category==''">
<div class="fl key">商品分类</div>
......
</div>

6.4.2 隐藏品牌面板
修改 search.html

<div class="type-wrap logo" ng-if="resultMap.brandList!=null && searchMap.brand==''">
<div class="fl key brand">品牌</div>
.......
</div>

6.4.3 隐藏规格面板
修改 search.html

<div class="type-wrap" ng-repeat="spec in resultMap.specList"
ng-if="searchMap.spec[spec.text]==null">
<div class="fl key">{{spec.text}}</div>
......
</div>

6.5 提交查询
修改 searchController.js 在添加和删除筛选条件时自动调用搜索方法

//添加复合搜索条件
$scope.addSearchItem=function(key,value){
if(key=="category" || key=="brand"){//如果是分类或品牌
$scope.searchMap[key]=value;
}else{//否则是规格
$scope.searchMap.spec[key]=value;
}
$scope.search();//执行搜索
}
//移除复合搜索条件
$scope.removeSearchItem=function(key){
if(key=="category" || key=="brand"){//如果是分类或品牌
$scope.searchMap[key]="";
}else{//否则是规格
delete $scope.searchMap.spec[key];//移除此属性
}
$scope.search();//执行搜索
}