1 function Products(){ 2 this.filters = []; 3 this.data = []; 4 this.myFilters=[]; 5 this.pageSize =15; 6 this.pageNO = 1; 7 this.totalPage=0; 8 } 9 Products.prototype.updateProducts = function(productList,isLoadMore){ 10 let htmlStr = ''; 11 for(let i=0;i<productList.length;i++){ 12 let product = productList[i]; 13 product.url = `/plus/view.php?aid=${product.id}`; 14 htmlStr += `<div class="cbp-item theme-portfolio-item-v2"> 15 <div class="cbp-caption"> 16 <a href="${product.url}" style="position: absolute; z-index:9;100%;height:100%;display: block"></a> 17 <div class="cbp-caption-defaultWrap theme-portfolio-active-wrap"> 18 <img src="${product.litpic}" alt="${product.title}"> 19 </div> 20 </div> 21 <div class="theme-portfolio-title-heading"> 22 <h4 class="theme-portfolio-title" style="font-size: 14px;"><a href="${product.url}">${product.title}</a></h4> 23 <span class="theme-portfolio-subtitle"></span> 24 </div> 25 </div>` 26 } 27 if(isLoadMore){ 28 $("#portfolio-3-col-grid").cubeportfolio('appendItems',htmlStr,function(){ 29 products.checkDataIsEmpty(); 30 }); 31 }else{ 32 $("#portfolio-3-col-grid").cubeportfolio('destroy',function(){ 33 $("#portfolio-3-col-grid").html(""); 34 Portfolio.init(); 35 $("#portfolio-3-col-grid").on('initComplete.cbp',function(){ 36 $("#portfolio-3-col-grid").cubeportfolio('appendItems',htmlStr,function(){ 37 products.checkDataIsEmpty(); 38 }); 39 }); 40 jQuery("#grid-container").off('initComplete.cbp'); 41 }); 42 } 43 } 44 Products.prototype.checkDataIsEmpty = function(){ 45 let that = this; 46 if(that.totalPage <= that.pageNO){ 47 $("#loadMoreData").html("暂无更多数据") 48 }else{ 49 $("#loadMoreData").html(`<button type="button" id="products-loadMore" class="button-load-more">加载更多</button>`); 50 $(document).on("click","#products-loadMore",function(){ 51 that.getProductList(that.pageNO +1,true) 52 }); 53 } 54 } 55 Products.prototype.getProductList = function(pageIndex,isLoadMore){ 56 let that = this; 57 if(!pageIndex){ 58 that.totalPage = 0 59 } 60 if(that.totalPage&&that.totalPage <= that.pageNO){ 61 $("#loadMoreData").html("暂无更多数据"); 62 return 63 } 64 $("#loadMoreData").html("数据加载中...") 65 let navId = $("#nav-id").val(); 66 let minPrice = $("#minPrice").val(); 67 let maxPrice = $("#maxPrice").val(); 68 let obj ={}; 69 for(let i=0;i<that.myFilters.length;i++){ 70 let item = that.myFilters[i]; 71 if(!obj[item.field]){ 72 obj[item.field]=""; 73 }; 74 obj[item.field] += (obj[item.field]? ",":"=") + item.name; 75 } 76 let dataStr ="" 77 for(let key in obj){ 78 console.log(key); 79 dataStr += '&' + key + obj[key]; 80 } 81 this.pageNO = pageIndex?pageIndex:1; 82 let data = `action=list&tid=${navId}&pageSize=${this.pageSize}&pageNO=${this.pageNO}&check_price_min=${minPrice}&check_price_max=${maxPrice}${dataStr}`; 83 // console.log(data); 84 let options = { 85 url: '/plus/goods.php', 86 type: 'GET', 87 dataType: 'json', 88 data: data, 89 success: function (data) { 90 if(data.status){ 91 that.totalPage = data.data.totalPage; 92 that.pageNO = Number(data.data.pageNO); 93 that.updateProducts(data.data.list,isLoadMore); 94 }else{ 95 notice.updateNotice("notice-error",`获取商品列表失败：${data.message}`); 96 console.error(`获取商品列表失败：${data.message}`); 97 } 98 }, 99 error:function(xhr){ 100 notice.updateNotice("notice-error",`操作发生错误：${xhr.status} ${xhr.statusText}`); 101 console.error(`操作发生错误：${xhr.status} ${xhr.statusText}`); 102 } 103 }; 104 $.ajax(options); 105 } 106 Products.prototype.deleteMyFilter = function (filterId,item){ 107 let index = products.myFilters.indexOf(item); 108 products.myFilters.splice(index,1); 109 $(`#filter_${item.name}`).remove(); 110 item.checked = false; 111 document.getElementById(`filter_${filterId}_${item.id}`).checked = false; 112 //更新产品列表 113 products.getProductList(); 114 }, 115 Products.prototype.updateMyFilter = function (filterId,item){ 116 if(item.checked){ 117 item.field = filterId, 118 this.myFilters.unshift(item); 119 $("#myFilters").prepend(`<p class="select-val" id="filter_${item.name}"> 120 <span>${item.name}</span> 121 <span class="filter-del-btn"> x </span> 122 </p>`); 123 // 动态添加事件 124 $(document).on('click', `#filter_${item.name} .filter-del-btn`, function(event){ 125 products.deleteMyFilter(filterId,item); 126 }); 127 }else{ 128 this.deleteMyFilter(filterId,item); 129 } 130 } 131 Products.prototype.updateFilter = function(){ 132 let $filter = $("#product-filter"); 133 for(let i=0;i<this.filters.length;i++){ 134 let filter = this.filters[i]; 135 $filter.append(`<p class="selected-catalog-item">${filter.name}</p>`); 136 if(filter.field == "check_price"){//价格范围 137 $filter.append(`<div class="input-group input-group-addon check_price" id="check_price"> 138 <input type="text" value="" id="minPrice" placeholder="最低价" class="border-1 input-sm"> 139 <span>-</span> 140 <input type="text" value="" id="maxPrice" placeholder="最高价" class="border-1 input-sm"> 141 <button type="button" class="btn-base">确定</button> 142 </div>`); 143 $(document).on("click","#check_price button.btn-base",function(){ 144 products.getProductList(); 145 }) 146 }else{//多选 147 for(let i=0;i<filter.items.length;i++){ 148 let item = filter.items[i]; 149 $filter.append(`<p class="pro_filter_item"> 150 <label for="filter_${filter.id}_${item.id}"> 151 <span class="filterName">${item.name}</span> 152 <span> 153 <input id="filter_${filter.id}_${item.id}" name="filterItem" type="checkbox" value="${item.name}"/> 154 </span> 155 </label> 156 </p>`); 157 // 动态添加事件 158 $(document).on('change', `#filter_${filter.id}_${item.id}`, function(event){ 159 item.checked=event.target.checked; 160 products.updateMyFilter(filter.id,item); 161 //更新产品列表 162 products.getProductList(); 163 }); 164 } 165 } 166 } 167 } 168 Products.prototype.getFilter = function(){ 169 let that = this; 170 let options = { 171 url: '/plus/goods.php?action=category', 172 type: 'GET', 173 dataType: 'json', 174 data: '', 175 success: function (data) { 176 if(data.status){ 177 that.filters = data.data.map(function(item,i){ 178 item.id = item.field; 179 if(item.value) { 180 item.items = []; 181 for(let k = 0; k< item.value.length;k++){ 182 item.items.push({ 183 id:k+1, 184 name:item.value[k], 185 checked:false 186 }) 187 } 188 } 189 return item; 190 }); 191 that.updateFilter() 192 // that.filters = [{ 193 // id:1, 194 // name:'系列', 195 // items:[ 196 // {id:1,name:'亮片系列',checked:false}, 197 // {id:2,name:'编织系列',checked:false}, 198 // {id:3,name:'格纹系列',checked:false}, 199 // {id:4,name:'水晶系列',checked:false}, 200 // {id:5,name:'丝绒系列',checked:false}, 201 // {id:6,name:'印花系列',checked:false}, 202 // {id:7,name:'珠绣系列',checked:false}, 203 // {id:8,name:'星耀系列',checked:false} 204 // ] 205 // }] 206 }else{ 207 notice.updateNotice("notice-error",`获取筛选项目失败：${data.message}`); 208 console.error(`获取筛选项目失败：${data.message}`); 209 } 210 }, 211 error:function(xhr){ 212 notice.updateNotice("notice-error",`操作发生错误：${xhr.status} ${xhr.statusText}`); 213 console.error(`操作发生错误：${xhr.status} ${xhr.statusText}`); 214 } 215 }; 216 $.ajax(options); 217 } 218 let products = new Products(); 219 $(document).ready(function() { 220 products.getFilter(); 221 products.getProductList(); 222 $("#filter-btn").on("click",function(){ 223 $("#portfolio-3-col-grid-filter").css({ 224 "right": 0 225 }); 226 }); 227 $(".finish-filter-btn").on("click",function(){ 228 $("#portfolio-3-col-grid-filter").css({ 229 "right": "-999px" 230 }); 231 }); 232 })
1 <div id="portfolio-3-col-grid-filter" class="col-md-2 col-md-offset-1 cbp-l-filters-alignCenter pro-filter-wrapper"> 2 <input type="hidden" id="nav-id" value="id"> 3 <div class="finish-filter-btn" style="display: none;"> 返回 </div> 4 <p class="selected-title">您的选择 <span class="finish-filter-btn sure visible-xs">确定</span> </p> 5 <div id="myFilters"> 6 </div> 7 <p class="selected-title">筛选条件</p> 8 <div id="product-filter"> 9 </div> 10 </div> 11 <div class="filter-btn" style="display: none;" id="filter-btn">筛选 <span> 12 <svg t="1573987416432" class="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="65858" width="30" height="30"><path d="M544.24 870.052a24.08 24.08 0 0 1-24.053-24.054V434.555c0-5.755 2.063-11.32 5.816-15.678l182.513-212.265H213.545l167.578 213.074a24.151 24.151 0 0 1 5.145 14.869v245.637l72.458 72.453a23.849 23.849 0 0 1 6.887 17.024 23.916 23.916 0 0 1-7.173 16.958c-4.532 4.464-10.527 6.922-16.881 6.922s-12.355-2.453-16.88-6.922l-79.463-79.468a23.92 23.92 0 0 1-7.045-17.014V442.88L145.126 197.422a24.08 24.08 0 0 1 4.025-33.777 24.151 24.151 0 0 1 14.868-5.145h596.885a23.884 23.884 0 0 1 17.003 7.05 23.875 23.875 0 0 1 7.04 17.014 24.054 24.054 0 0 1-5.811 15.672L568.284 443.47v402.524a24.074 24.074 0 0 1-24.043 24.059z" fill="#2c2c2c" p-id="65859"></path><path d="M660.951 805.99a23.885 23.885 0 0 1-16.998-7.055 23.905 23.905 0 0 1-7.03-17.019 24.084 24.084 0 0 1 24.033-24.033h186.117a24.084 24.084 0 0 1 24.028 24.074 24.084 24.084 0 0 1-24.033 24.033h0.005-186.122z m0-150.553a24.074 24.074 0 0 1-24.028-24.07 24.09 24.09 0 0 1 24.033-24.038h186.117a24.084 24.084 0 0 1 24.028 24.075 24.09 24.09 0 0 1-24.033 24.033h0.005-186.122z m0-148.823c-13.184-0.17-23.839-11.095-23.67-24.356a23.9 23.9 0 0 1 23.747-23.747h186.045c13.261 0 24.049 10.788 24.049 24.054s-10.788 24.054-24.049 24.054H660.951z" fill="#2c2c2c" p-id="65860"></path></svg> 13 </span> 14 </div>
1 /* 商品筛选 */ 2 .pro-filter-wrapper{ 3 text-align:left; 4 } 5 .pro-filter-wrapper .selected-title{ 6 font-size: 20px; 7 padding-top: 16px; 8 color: #727272; 9 margin-bottom: 15px; 10 } 11 .pro-filter-wrapper .select-val{ 12 font-size:14px; 13 padding: 5px; 14 color:#000; 15 display: flex; 16 align-items: center; 17 cursor: pointer; 18 justify-content: space-between; 19 margin-bottom: 0px; 20 } 21 .pro-filter-wrapper .select-val span.filter-del-btn{ 22 display: inline-block; 23 width:20px; 24 height: 20px; 25 text-align: center; 26 line-height: 17px; 27 } 28 .pro-filter-wrapper #myFilters{ 29 border-bottom: 1px solid #999; 30 } 31 .pro-filter-wrapper .selected-catalog-item{ 32 font-size:18px; 33 padding: 5px 0px; 34 border-bottom: 1px solid #999; 35 color: #000; 36 font-weight: bold; 37 clear: both; 38 } 39 .pro-filter-wrapper .pro_filter_item label{ 40 display: flex; 41 align-items: center; 42 cursor: pointer; 43 justify-content: space-between; 44 } 45 .pro-filter-wrapper .pro_filter_item label span.filterName{ 46 color: #666; 47 font-size: 15px; 48 padding-left: 10px; 49 font-weight: normal; 50 } 51 .pro-filter-wrapper .pro_filter_item input[type="checkbox"] { 52 -moz-appearance: none; 53 -webkit-appearance: none; 54 appearance: none; 55 border: 1px solid #b8b7b6; 56 cursor: pointer; 57 margin: 0; 58 position: relative; 59 vertical-align: middle; 60 height: 22px; 61 width: 22px; 62 } 63 .pro-filter-wrapper .pro_filter_item input[type='checkbox']:checked::after { 64 background: url(/moke8/img/right.svg) no-repeat center; 65 background-size: contain; 66 content: ''; 67 left: 25%; 68 height: 50%; 69 position: absolute; 70 top: 25%; 71 width: 50%; 72 }
js 面向对象编程 - 商品筛选