Forráskód Böngészése

搜索商品列表 多选品牌

zhengjinyi 3 éve
szülő
commit
d61e0a4f7e

+ 21 - 7
src/main/resources/static/css/product/instruement-list.css

@@ -3,21 +3,35 @@
 @media screen and (min-width:768px){
     #productList{width: 1184px;margin:32px auto;position: relative;}
     .crumbs-nav{height: 40px}
-    .crumbs-nav .crumbs-link{color:#4a4f58 }
+    .search-text{float: left;}
+    .crumbs-nav-main{float: left;}
+    .crumbs-nav .crumbs-link{color:#4a4f58;float: left;}
+    .search-text-brand{float: left;position: relative; height: 24px;padding: 0 24px 0 12px;line-height: 24px;box-sizing: border-box;border: 1px solid #DDDDDD;border-radius: 2px;text-align: center;font-size: 14px;color: #4A4F58;}
+    .search-text-brand a{color: #E15621;}
+    .search-text-brand .icon:before{background-position: -120px -657px;width: 24px;height: 24px;right: 0;position: absolute;cursor: pointer;}
     .product-brand{width:1184px;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;cursor: pointer;}    .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{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.disabled{background-color: #E2E7EF;}
+    .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{float: left;}
     .sortBox li:before,.sortBox li:after{position:absolute;right:35px;content:'';width:0;height:0;border-style:solid}
@@ -40,7 +54,7 @@
     .classification .class-nav-main{width:1040px;display:inline-block;border-left:1px solid #f7f7f7;font-size:0}
     .classification .class-nav-main div.on,.classification .class-nav-main div.on a{color:#e15616}
     .crumbs-nav >div{display:inline-block}
-    .crumbs-nav-item{display:inline-block;padding:0 12px;border:1px solid #cccccc;line-height:24px;margin-right:16px;color:#909090;border-radius:2px;cursor:pointer}
+    .crumbs-nav-item{display:inline-block;height: 24px;padding:0 12px;border:1px solid #DDDDDD;line-height:24px;margin-right:16px;color:#909090;border-radius:2px;cursor:pointer;box-sizing: border-box;}
     .crumbs-nav-item.on{color:#e15616;border:1px solid #e15616}
     .sortBox .on{background:#ffe6dc}
     .classification.sortBox .class-nav-main li{border-right:1px solid #f7f7f7;width:127px;padding:0;position:relative}

+ 6 - 1
src/main/resources/static/css/product/list.css

@@ -4,6 +4,10 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
+    .search-text{float: left;margin-right: 20px;}
+    .search-text-brand{float: left;position: relative; height: 24px;padding: 0 24px 0 12px;line-height: 24px;box-sizing: border-box;border: 1px solid #DDDDDD;border-radius: 2px;text-align: center;font-size: 14px;color: #4A4F58;}
+    .search-text-brand a{color: #E15621;}
+    .search-text-brand .icon:before{background-position: -120px -657px;width: 24px;height: 24px;right: 0;position: absolute;cursor: pointer;}
     .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;}
@@ -11,7 +15,7 @@ li{list-style:none}
     .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-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;cursor: pointer;}
     .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;}
@@ -23,6 +27,7 @@ li{list-style:none}
     .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.disabled{background-color: #E2E7EF;}
     .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;}

BIN
src/main/resources/static/img/base/icon.png


+ 15 - 6
src/main/resources/static/js/product/list.js

@@ -66,6 +66,8 @@ var productList = new Vue({
         isShowAllBrandsButton:false,
         isAllcheckedBrand:false,
         isListEmpty:false,
+        isChoiceBrandText:false,
+        choiceBrandText:''
     },
     filters: {
         NumFormat:function(value) {
@@ -190,7 +192,7 @@ var productList = new Vue({
                         }
                         return el;
                     })
-                    _self.brandLists = _self.defaultBrandLists.slice(0,7)
+                    _self.brandLists = _self.defaultBrandLists.slice(0,6)
                 }else {
                     console.log('查询品牌列表异常')
                 }
@@ -198,7 +200,6 @@ var productList = new Vue({
         },
         choiceBrandHref: function (brand, index) {// PC端跳转链接
             if(this.isShowAllBrandsButton){
-                console.log('brand',brand)
                 var _self = this;
                 brand.isChecked = !brand.isChecked;
                 if (brand.isChecked) {
@@ -208,9 +209,7 @@ var productList = new Vue({
                 }
                 _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 +
@@ -259,10 +258,14 @@ var productList = new Vue({
             this.isShowAllBrandsButton = false
         },
         handleConfirm:function () {// 确认查询多选
+            if(this.checkedBrandList.length == 0){return;}
             window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
                 '&bpn=' + this.params.brandIds + '&pro=' + this.params.promotionFlag +
                 '&newg='+ this.params.newFlag;
         },
+        handleDeleteBrands:function () {// 删除选择的品牌
+            window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword)+ '&pro=' + this.params.promotionFlag +'&newg='+this.params.newFlag;
+        },
         hanldCheckedActivi:function(){// 选择促销商品选项
             this.isActiviChecked = !this.isActiviChecked;
             if(this.isActiviChecked){
@@ -301,6 +304,7 @@ var productList = new Vue({
         }
     },
     created: function () {
+        var _self = this
         if(isPC){
             this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 20;
             this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
@@ -308,8 +312,14 @@ var productList = new Vue({
             this.params.promotionFlag = getUrlParam("pro") ? getUrlParam("pro")*1 : 0; // pro 促销商品链接参数
             this.params.newFlag = getUrlParam("newg") ? getUrlParam("newg")*1 : 0; // newg 新品链接参数
             if(this.hrefBrandId){
+                const brandIdsArray = this.hrefBrandId.split(',')
                 this.params.brandIds = this.hrefBrandId +',';
-                console.log('brandIds',this.params.brandIds)
+                this.isChoiceBrandText = true
+                const names = brandIdsArray.map(function (item) {
+                    const find = _self.defaultBrandLists.find(el => el.id === item*1)
+                    return find && find.name
+                })
+                this.choiceBrandText = names.join(',').slice(0,15)
             }
             if(this.params.promotionFlag == 1){
                 this.isActiviChecked = true;
@@ -348,7 +358,6 @@ var productList = new Vue({
         // 获取对应品牌列表
         // this.getCommoditySearchQUeryBrand();
         this.brandLists = this.defaultBrandLists.slice(0,6)
-        console.log('this.brandLists==>',this.brandLists)
     },
     mounted: function () {
         var _self = this;

+ 66 - 6
src/main/resources/static/js/product/produce-list.js

@@ -34,14 +34,35 @@ var productList = new Vue({
         },
         hrefBrandId:'',
         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,
-        isAllcheckedBrand:false
+        isShowAllBrandsButton:false,
+        isAllcheckedBrand:false,
+        isChoiceBrandText:false,
+        choiceBrandText:''
     },
      filters:{
          NumFormat:function(value) {//处理金额
@@ -153,8 +174,21 @@ var productList = new Vue({
             });
         },
         choiceBrandHref: function (brand, index) {// PC端品牌跳转链接
-            var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn=' + brand.id + '&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
-            window.location.href =  url;
+            if(this.isShowAllBrandsButton){
+                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;
+                _self.params.brandIds = this.checkedBrandList.join(',');
+            }else {
+                var url = '/product/classify-' + this.typeSort + '-' + this.bigTypeId + '-' + this.smallTypeId + '-' + this.tinyTypeId + '-1-' + this.params.pageSize + '-' + this.params.sortField + '-' + this.params.sortType + '.html?bpn=' + brand.id + '&pro=' + this.params.promotionFlag + '&newg=' + this.params.newFlag;
+                window.location.href = url;
+            }
         },
         choiceBrandAllHref:function(){// PC全部品牌跳转链接
             var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn=&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
@@ -184,9 +218,26 @@ 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 () {// 确认查询多选
+            if(this.checkedBrandList.length == 0){return;}
+            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.params.brandIds+ '&pro='+ this.params.promotionFlag +'&newg='+ this.params.newFlag;
+            window.location.href = url;
+        },
+        handleDeleteBrands:function () {// 删除选择的品牌
+            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?pro='+ this.params.promotionFlag +'&newg='+ this.params.newFlag;
+            window.location.href = url;
+        },
         hanldCheckedActivi:function(){// 选择促销商品选项
             this.isActiviChecked = !this.isActiviChecked;
             if(this.isActiviChecked){
@@ -230,6 +281,7 @@ var productList = new Vue({
         }
     },
     created:function () {
+        var _self = this;
         var userInfo = localStorage.getItem('userInfo');
         if(userInfo){
             this.userId = JSON.parse(userInfo).userId;
@@ -246,7 +298,14 @@ var productList = new Vue({
         this.params.promotionFlag = getUrlParam("pro") ? getUrlParam("pro")*1 : 0; // pro 促销商品链接参数
         this.params.newFlag = getUrlParam("newg") ? getUrlParam("newg")*1 : 0; // newg 新品链接参数
         if(this.hrefBrandId){
+            const brandIdsArray = this.hrefBrandId.split(',')
             this.params.brandIds = this.hrefBrandId +',';
+            this.isChoiceBrandText = true
+            const names = brandIdsArray.map(function (item) {
+                const find = _self.defaultBrandLists.find(el => el.id === item*1)
+                return find && find.name
+            })
+            this.choiceBrandText = names.join(',').slice(0,15)
         }
         if(this.params.promotionFlag == 1){
             this.isActiviChecked = true;
@@ -282,7 +341,8 @@ var productList = new Vue({
             });
         }
         // 获取对应品牌列表
-        this.getCommoditySearchQUeryBrand();
+        // this.getCommoditySearchQUeryBrand();
+        this.brandLists = this.defaultBrandLists.slice(0,6)
         if(!isPC){
             $('footer').addClass("noneImportant");
             //移动端上垃加载更多

+ 26 - 9
src/main/resources/templates/product/instruelist.html

@@ -20,12 +20,19 @@
     </div>
     <template v-else>
         <div class="crumbs-nav" v-if="isPC">
-            <div class="crumbs-link"> 筛选条件: </div>
-            <div  class="crumbs-nav-main">
-                <div class="crumbs-nav-item" th:if="not${#strings.isEmpty(bigTypeName)}" th:text="${bigTypeName}"></div>
-                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(smallTypeName)}" th:text="${smallTypeName}"></div>
-                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
-                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
+            <div class="search-text">
+                <div class="crumbs-link"> 筛选条件: </div>
+                <div  class="crumbs-nav-main">
+                    <div class="crumbs-nav-item" th:if="not${#strings.isEmpty(bigTypeName)}" th:text="${bigTypeName}"></div>
+                    <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(smallTypeName)}" th:text="${smallTypeName}"></div>
+                    <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
+                    <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
+                </div>
+            </div>
+            <div class="search-text-brand" v-if="isChoiceBrandText">
+                品牌:
+                <a href="javascript:void(0);">{{ choiceBrandText }}</a>
+                <i class="icon icon-del" @click="handleDeleteBrands"></i>
             </div>
         </div>
         <div id="listClassify">
@@ -62,14 +69,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" v-for="(brand,index) in brandLists" :key="index"
                          @click="choiceBrandHref(brand, 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" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirm">确定</div>
+                        <div class="btn cancel" @click="handleCancel">取消</div>
+                    </div>
+                </div>
             </div>
         </template>
         <template v-else>

+ 9 - 5
src/main/resources/templates/product/list.html

@@ -15,11 +15,15 @@
 <div id="productList">
     <!-- 面包屑 -->
     <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>
-        <div class="seach-nav-item">
+        <div class="search-text">
+            <span>搜索结果</span>
+            <span>&gt;</span>
+            <a href="javascript:void(0);" @click="toPagination(1)" v-text="params.keyword"></a>
+        </div>
+        <div class="search-text-brand" v-if="isChoiceBrandText">
             品牌:
+            <a href="javascript:void(0);">{{ choiceBrandText }}</a>
+            <i class="icon icon-del" @click="handleDeleteBrands"></i>
         </div>
     </div>
     <div v-if="listLoading" class="loading">
@@ -55,7 +59,7 @@
                     </div>
                     <div class="product-brand-button" v-if="isShowAllBrandsButton">
                         <div class="brand-button">
-                            <div class="btn confirm" @click="handleConfirm">确定</div>
+                            <div class="btn confirm" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirm">确定</div>
                             <div class="btn cancel" @click="handleCancel">取消</div>
                         </div>
                     </div>