商城项目-页面展示选择的过滤项
5.页面展示选择的过滤项
5.1.商品分类面包屑
当用户选择一个商品分类以后，我们应该在过滤模块的上方展示一个面包屑，把三级商品分类都显示出来。
用户选择的商品分类就存放在search.filter中，但是里面只有第三级分类的id：cid3
我们需要根据它查询出所有三级分类的id及名称
5.1.1.提供查询分类接口
我们在商品微服务中提供一个根据三级分类id查询1~3级分类集合的方法：
Controller
/**
* 根据3级分类id，查询1~3级的分类
* @param id
* @return
*/
@GetMapping("all/level")
public ResponseEntity<List<Category>> queryAllByCid3(@RequestParam("id") Long id){
List<Category> list = this.categoryService.queryAllByCid3(id);
if (list == null || list.size() < 1) {
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
return ResponseEntity.ok(list);
}Service
public List<Category> queryAllByCid3(Long id) {
Category c3 = this.categoryMapper.selectByPrimaryKey(id);
Category c2 = this.categoryMapper.selectByPrimaryKey(c3.getParentId());
Category c1 = this.categoryMapper.selectByPrimaryKey(c2.getParentId());
return Arrays.asList(c1,c2,c3);
}测试：
5.1.2.页面展示面包屑
后台提供了接口，下面的问题是，我们在哪里去查询接口？
大家首先想到的肯定是当用户点击以后。
但是我们思考一下：用户点击以后，就会重新发起请求，页面刷新，那么你渲染的结果就没了。
因此，应该是在页面重新加载完毕后，此时因为过滤条件中加入了商品分类的条件，所以查询的结果中只有1个分类。
我们判断商品分类是否只有1个，如果是，则查询三级商品分类，添加到面包屑即可。
渲染：
刷新页面：
5.2.其它过滤项
接下来，我们需要在页面展示用户已选择的过滤项，如图：
我们知道，所有已选择过滤项都保存在search.filter中，因此在页面遍历并展示即可。
但这里有个问题，filter中数据的格式：
基本有四类数据：
- 商品分类：这个不需要展示，分类展示在面包屑位置
- 品牌：这个要展示，但是其key和值不合适，我们不能显示一个id在页面。需要找到其name值
- 数值类型规格：这个展示的时候，需要把单位查询出来
- 非数值类型规格：这个直接展示其值即可
因此，我们在页面上这样处理：
<!--已选择过滤项-->
<ul class="tags-choose">
<li class="tag" v-for="(v,k) in search.filter" v-if="k !== 'cid3'" :key="k">
{{k === 'brandId' ? '品牌' : k}}:<span style="color: red">{{getFilterValue(k,v)}}</span></span>
<i class="sui-icon icon-tb-close"></i>
</li>
</ul>- 判断如果
k === 'cid3'说明是商品分类，直接忽略 - 判断
k === 'brandId'说明是品牌，页面显示品牌，其它规格则直接显示k的值 - 值的处理比较复杂，我们用一个方法
getFilterValue(k,v)来处理，调用时把k和v都传递
方法内部：
getFilterValue(k,v){
// 如果没有过滤参数，我们跳过展示
if(!this.filters || this.filters.length === 0){
return null;
}
let filter = null;
// 判断是否是品牌
if(k === 'brandId'){
// 返回品牌名称
return this.filters.find(f => f.k === 'brandId').options[0].name;
}
return v;
}然后刷新页面，即可看到效果：
5.3.隐藏已经选择的过滤项
现在，我们已经实现了已选择过滤项的展示，但是你会发现一个问题：
已经选择的过滤项，在过滤列表中依然存在：
这些已经选择的过滤项，应该从列表中移除。
怎么做呢？
你必须先知道用户选择了什么。用户选择的项保存在search.filter中：
我们可以编写一个计算属性，把filters中的 已经被选择的key过滤掉：
computed:{
remainFilters(){
const keys = Object.keys(this.search.filter);
if(this.search.filter.cid3){
keys.push("cid3")
}
if(this.search.filter.brandId){
keys.push("brandId")
}
return this.filters.filter(f => !keys.includes(f.k));
}
}然后页面不再直接遍历filters，而是遍历remainFilters
刷新页面：
最后发现，还剩下一堆没选过的。但是都只有一个可选项，此时再过滤没有任何意义，应该隐藏，所以，在刚才的过滤条件中，还应该添加一条：如果只剩下一个可选项，不显示
