商城项目-页面展示选择的过滤项

cwl_java

发布于 2020-02-11 06:00:07

73000

代码可运行

文章被收录于专栏：cwl_Javacwl_Java

运行总次数：0

代码可运行

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));
    }
}