乐优商城 Day8 （非教程，商品过滤实现）

最新推荐文章于 2021-08-31 20:28:54 发布

肉乎乎的鸭

最新推荐文章于 2021-08-31 20:28:54 发布

阅读量411

点赞数

文章标签：乐优商城商品过滤

本文链接：https://blog.csdn.net/zcylxzyh/article/details/100859210

版权

乐优商城Day08学习内容主要涉及商品过滤的实现，包括过滤分类、品牌及规格参数。通过分析，过滤信息应从搜索结果中聚合，新增类别以扩展返回结果。对于规格参数，需要判断何时显示过滤，获取可选值并格式化数据。最后在SearchService中进行相应修改。

摘要由CSDN通过智能技术生成

乐优商城学习Day08：

注意：此次代码都是在第七天的基础上
第七天的链接如下：
https://blog.csdn.net/zcylxzyh/article/details/100637514

此次笔记内容主要为：
1.给出完整的search.html代码
2.实现过滤分类和品牌和实现过滤规格参数（后台）

下面开始第八天的学习：

1.给出完整的search.html代码

此次页面为search.html，本次所有操作均在此页面进行，但我们主要关注后台就直接给出完整的search.html。
包括了过滤，分类等的页面渲染。
在这里插入图片描述

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
    
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
    
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
    
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
    
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
    
            margin-right: 10px;
        }

        .logo-list li {
    
            padding: 8px;
        }

        .logo-list li:hover {
    
            background-color: #f3f3f3;
        }

        .type-list a:hover {
    
            color: #1299ec;
        }

        .skus {
    
            list-style: none;
        }

        .skus li {
    
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
    
            border: 2px solid #dd1144;
        }

        .skus img {
    
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>


    <!--list-content-->
    <div class="main">
        <div class="py-container">

            <div class="bread">
                <!--面包屑-->
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li><a href="#">手机</a></li>
                    <li><span>手机通讯</span></li>
                </ul>
                <!--已选择过滤项-->
                <ul class="tags-choose">
                    <li class="tag" v-for="(v,k) in search.filter" :key="k">
                        {
  {k === 'brandId' ? '品牌' : k}}:<span style="color: red" v-text="findValue(k,v)">apple</span>
                        <i class="sui-icon icon-tb-close" @click="deleteFilter(k)"></i>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector-->
            <div class="clearfix selector">
                <div class="type-wrap" v-for="(f,i) in remainFilter" v-show="i <= 5 || showMore" :key="f.k"
                     v-if="f.k !== 'brandId'">
                    <div class="fl key" v-text="f.k === 'cid3' ? '分类' : f.k"></div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li v-for="(o,j) in f.options" :key="j" v-if="o" @click="selectFilter(f.k,o.id || o)">
                                <a v-text="o.name || o"></a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">品牌</div>
                    <div class="value logos">
                        <ul class="logo-list" v-for="(o,j) in f.options" :key="j">
                            <li v-if="o.image"><img :src="o.image" @click="selectFilter(f.k,o.id || o)"/></li>
                            <li v-else><a href="#" v-text="o.name" @click="selectFilter(f.k,o.id || o)"></a></li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>


                <div class="type-wrap" style="text-align: center">
                    <v-btn small flat v-show="!showMore" @click="showMore=true">
                        更多
                        <v-icon>arrow_drop_down</v-icon>
                    </v-btn>
                    <v-btn small="" flat v-show="showMore" @click="showMore=false">
                        收起
                        <v-icon>arrow_drop_up</v-icon>
                    </v-btn>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li class="active">