商品列表品牌多选

src/main/resources/static/css/product/list.css

@@ -7,17 +7,24 @@ li{list-style:none}
     .product-brand{width:1184px;margin:16px auto;box-sizing:border-box;min-height: 88px;padding:24px 12px 12px 12px;font-size:0;text-align:center;background:#FFF;position: relative;}
     .product-brand .product-brand-name{width: 116px;float: left;border-right: 1px solid #F7F7F7;line-height: 44px;text-align: center;font-size: 16px;color: #4A4F58;}
     .product-brand .product-brand-name.show{line-height: 88px;}
-    .product-brand-more{width: 50px;height: 32px;line-height: 32px;font-size: 14px;margin: 0 auto;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;box-sizing: border-box;position: absolute;right: 24px;top: 24px;}
-    .product-brand-more .icon:before{background-position: -93px 7px;width: 20px;height: 32px;right: 0;position: absolute;}
-    .product-brand-more.show .icon:before{background-position: -123px 7px;width: 20px;height: 32px;right: 0;position: absolute;}
-    .product-brand-list{width: 970px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
-    .product-brand-list.show{height: 88px;}
+    .product-brand-oper{width: 110px;height: 32px;position: absolute;right: 24px;top: 24px;}
+    .product-brand-more{width: 50px;height: 24px;line-height: 24px;font-size: 14px;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;box-sizing: border-box;float: left;position: relative;}
+    .product-brand-more .icon:before{background-position: -93px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-more.show .icon:before{background-position: -123px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-add{width: 56px;height: 24px;box-sizing: border-box;border: 1px solid #E2E7EF;float: right;font-size: 14px;color: #9AA5B5;line-height: 24px;text-align: center}
+    .product-brand-list{width: 900px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
+    .product-brand-list.show{height: 150px;}
     .product-brand-list .brand-list{width: 90px;height: 32px;padding: 0 12px;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 32px;font-size: 16px;color: #4A4F58;border-radius: 2px;margin-right: 24px;margin-bottom: 12px;}
     .product-brand-list .brand-list.checked{border-color: #E15621;}
     .product-brand-list .brand-list.checked a{color: #E15621;}
     .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
     .product-brand-list .brand-list a:hover{color: #4A4F58;}
     .product-brand-list .brand-list.checked a:hover{color: #E15621;}
+    .product-brand-button{width: 100%;height: 32px;float: left;}
+    .product-brand-button .brand-button{width: 160px;height: 32px;margin: 0 auto;}
+    .product-brand-button .brand-button .btn{width: 64px;height: 32px;float: left;margin: 0 8px;border-radius: 2px; line-height: 32px;text-align: center;font-size: 14px;box-sizing: border-box;color: #FFFFFF;}
+    .product-brand-button .brand-button .btn.confirm{background-color: #E15621;}
+    .product-brand-button .brand-button .btn.cancel{background-color: #FFFFFF;border: 1px solid #E2E7EF;color: #4A4F58;}
     .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;text-align:center;background:#FFFFFF;position: relative;}
     .sortBox li{display:inline-block;cursor:pointer;width:128px;height:64px;line-height:64px;font-size:16px;background:#FFFFFF;color:#93979F;position:relative;float: left;border-right: 1px solid #F7F7F7;}
     .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}

src/main/resources/static/js/product/list.js

@@ -38,13 +38,32 @@ var productList = new Vue({
         },
         hrefBrandId:null,
         brandLists: [],
-        defaultBrandLists:[],
+        defaultBrandLists:[
+            {isChecked:false,name:'测试',id:21},
+            {isChecked:false,name:'测试',id:22},
+            {isChecked:false,name:'测试',id:23},
+            {isChecked:false,name:'测试',id:24},
+            {isChecked:false,name:'测试',id:25},
+            {isChecked:false,name:'测试',id:26},
+            {isChecked:false,name:'测试',id:27},
+            {isChecked:false,name:'测试',id:28},
+            {isChecked:false,name:'测试',id:29},
+            {isChecked:false,name:'测试',id:30},
+            {isChecked:false,name:'测试',id:31},
+            {isChecked:false,name:'测试',id:32},
+            {isChecked:false,name:'测试',id:33},
+            {isChecked:false,name:'测试',id:34},
+            {isChecked:false,name:'测试',id:35},
+            {isChecked:false,name:'测试',id:36},
+            {isChecked:false,name:'测试',id:37},
+        ],
         checkedBrandList:[],
         checkedBrandLength:0,
         isProductScreen:false,
         isActiviChecked:false,
         isNewsChecked:false,
         isShowAllBrands:false,
+        isShowAllBrandsButton:false,
         isAllcheckedBrand:false,
         isListEmpty:false,
     },
@@ -178,9 +197,25 @@ var productList = new Vue({
             });
         },
         choiceBrandHref: function (brand, index) {// PC端跳转链接
-            window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
-                                    '&bpn=' + brand.id + '&pro=' + this.params.promotionFlag +
-                                    '&newg='+ this.params.newFlag;
+            if(this.isShowAllBrandsButton){
+                console.log('brand',brand)
+                var _self = this;
+                brand.isChecked = !brand.isChecked;
+                if (brand.isChecked) {
+                    _self.checkedBrandList.push(brand.id);
+                } else {
+                    _self.checkedBrandList.splice(index, 1);
+                }
+                _self.isAllcheckedBrand = false;
+                _self.checkedBrandLength = _self.checkedBrandList.length;
+                console.log('=======>', _self.checkedBrandList)
+                _self.params.brandIds = this.checkedBrandList.join(',');
+                console.log('=========>',_self.params.brandIds)
+            }else{
+                window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
+                    '&bpn=' + brand.id + '&pro=' + this.params.promotionFlag +
+                    '&newg='+ this.params.newFlag;
+            }
         },
         choiceBrandAllHref:function(){// PC全部品牌跳转链接
             window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
@@ -212,9 +247,22 @@ var productList = new Vue({
             if( this.isShowAllBrands){
                 this.brandLists = this.defaultBrandLists;
             }else{
-                this.brandLists = this.defaultBrandLists.slice(0,7)
+                this.brandLists = this.defaultBrandLists.slice(0,6)
             }
         },
+        showMoreItemCheckedAll:function () {//点击多选按钮
+            this.isShowAllBrands = true;
+            this.isShowAllBrandsButton = true
+            this.brandLists = this.defaultBrandLists;
+        },
+        handleCancel:function () {//取消多选
+            this.isShowAllBrandsButton = false
+        },
+        handleConfirm:function () {// 确认查询多选
+            window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
+                '&bpn=' + this.params.brandIds + '&pro=' + this.params.promotionFlag +
+                '&newg='+ this.params.newFlag;
+        },
         hanldCheckedActivi:function(){// 选择促销商品选项
             this.isActiviChecked = !this.isActiviChecked;
             if(this.isActiviChecked){
@@ -261,6 +309,7 @@ var productList = new Vue({
             this.params.newFlag = getUrlParam("newg") ? getUrlParam("newg")*1 : 0; // newg 新品链接参数
             if(this.hrefBrandId){
                 this.params.brandIds = this.hrefBrandId +',';
+                console.log('brandIds',this.params.brandIds)
             }
             if(this.params.promotionFlag == 1){
                 this.isActiviChecked = true;
@@ -297,7 +346,9 @@ var productList = new Vue({
         // 获取列表数据
         this.getListByKeyword();
         // 获取对应品牌列表
-        this.getCommoditySearchQUeryBrand();
+        // this.getCommoditySearchQUeryBrand();
+        this.brandLists = this.defaultBrandLists.slice(0,6)
+        console.log('this.brandLists==>',this.brandLists)
     },
     mounted: function () {
         var _self = this;

src/main/resources/templates/product/list.html

@@ -16,7 +16,11 @@
     <!-- 面包屑 -->
     <div v-if="isPC && listData && listData.length>0" class="crumbs">
         <span>搜索结果</span>
-        <span>&gt;</span> <a href="javascript:void(0);" @click="toPagination(1)" v-text="params.keyword"></a>
+        <span>&gt;</span>
+        <a href="javascript:void(0);" @click="toPagination(1)" v-text="params.keyword"></a>
+        <div class="seach-nav-item">
+            品牌：
+        </div>
     </div>
     <div v-if="listLoading" class="loading">
         <img src="/img/base/loading.gif">
@@ -37,15 +41,24 @@
                         <p class="title">品牌</p>
                     </div>
                     <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
-                        <div class="brand-list" @click="choiceBrandAllHref" :class="hrefBrandId ? '' : 'checked'"><a href="javascript:void(0)">全部</a></div>
+                        <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAllHref" :class="hrefBrandId ? '' : 'checked'"><a href="javascript:void(0)">全部</a></div>
                         <div class="brand-list" @click="choiceBrandHref(brand, index)" v-for="(brand,index) in brandLists"
                              :key="index" :class="brand.isChecked ? 'checked' : ''">
                             <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
                         </div>
                     </div>
-                    <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''"
-                         @click="showMoreItem">{{
-                        isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
+                    <div class="product-brand-oper" v-if="!isShowAllBrandsButton">
+                        <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''"
+                             @click="showMoreItem">{{
+                            isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
+                        <div class="product-brand-add" @click="showMoreItemCheckedAll">+多选</div>
+                    </div>
+                    <div class="product-brand-button" v-if="isShowAllBrandsButton">
+                        <div class="brand-button">
+                            <div class="btn confirm" @click="handleConfirm">确定</div>
+                            <div class="btn cancel" @click="handleCancel">取消</div>
+                        </div>
+                    </div>
                 </div>
             </template>
             <template v-else>