黑马程序员技术交流社区

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

---

作者: 我是楠楠    时间: 2020-6-11 09:49
标题: 【郑州校区】品优购电商系统开发第 10 章 五

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

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

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

$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 ，为搜索面板添加点击事件
点击商品分类标签

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

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

点击品牌标签

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

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

点击规格标签

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

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

{{pojo.optionName}}</a>

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

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

<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

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

//移除复合搜索条件

$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

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

<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

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

<div class="type-wrap" ng-if="resultMap.categoryList!=null && searchMap.category==''">

<div class="fl key">商品分类</div>

......

</div> 

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

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

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

<div class="fl key brand">品牌</div>

.......

</div>

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

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

<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 在添加和删除筛选条件时自动调用搜索方法

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

//添加复合搜索条件

$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();//执行搜索

}

---

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

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