js 面向对象编程 - 商品筛选

 function Products(){
    this.filters = [];
    this.data = [];
    this.myFilters=[];
    this.pageSize =15;
    this.pageNO = 1;
    this.totalPage=0;
 }
 Products.prototype.updateProducts = function(productList,isLoadMore){
    let htmlStr = '';
    for(let i=0;i<productList.length;i++){
        let product = productList[i];
        product.url = `/plus/view.php?aid=${product.id}`;
        htmlStr += `<div class="cbp-item theme-portfolio-item-v2">
            <div class="cbp-caption">
                <a href="${product.url}" style="position: absolute; z-index:9;width:100%;height:100%;display: block"></a>
                <div class="cbp-caption-defaultWrap theme-portfolio-active-wrap">
                    <img src="${product.litpic}" alt="${product.title}">
                </div>
            </div>
            <div class="theme-portfolio-title-heading">
                <h4 class="theme-portfolio-title" style="font-size: 14px;"><a href="${product.url}">${product.title}</a></h4>
                <span class="theme-portfolio-subtitle"></span>
            </div>
        </div>`
    }
    if(isLoadMore){
        $("#portfolio-3-col-grid").cubeportfolio('appendItems',htmlStr,function(){
            products.checkDataIsEmpty();
        });
    }else{
        $("#portfolio-3-col-grid").cubeportfolio('destroy',function(){
            $("#portfolio-3-col-grid").html("");
            Portfolio.init();
            $("#portfolio-3-col-grid").on('initComplete.cbp',function(){
                $("#portfolio-3-col-grid").cubeportfolio('appendItems',htmlStr,function(){
                    products.checkDataIsEmpty();
                });
            });
            jQuery("#grid-container").off('initComplete.cbp');
        });
    }
 }
 Products.prototype.checkDataIsEmpty = function(){
    let that = this;
    if(that.totalPage <= that.pageNO){
        $("#loadMoreData").html("暂无更多数据")
    }else{
        $("#loadMoreData").html(`<button type="button" id="products-loadMore" class="button-load-more">加载更多</button>`);
        $(document).on("click","#products-loadMore",function(){
            that.getProductList(that.pageNO +1,true)
        });
    }
 }
 Products.prototype.getProductList = function(pageIndex,isLoadMore){
    let that = this;
    if(!pageIndex){
        that.totalPage = 0
    }
    if(that.totalPage&&that.totalPage <= that.pageNO){
        $("#loadMoreData").html("暂无更多数据");
        return
    }
    $("#loadMoreData").html("数据加载中...")
    let navId = $("#nav-id").val();
    let minPrice = $("#minPrice").val();
    let maxPrice = $("#maxPrice").val();
    let obj ={};
    for(let i=0;i<that.myFilters.length;i++){
       let item = that.myFilters[i];
       if(!obj[item.field]){
        obj[item.field]="";
       };
       obj[item.field] += (obj[item.field]? ",":"=") + item.name;
    }
    let dataStr =""
    for(let key in obj){
        console.log(key);
        dataStr += '&' + key + obj[key];
    }
    this.pageNO = pageIndex?pageIndex:1;
    let data = `action=list&tid=${navId}&pageSize=${this.pageSize}&pageNO=${this.pageNO}&check_price_min=${minPrice}&check_price_max=${maxPrice}${dataStr}`;
    // console.log(data);
    let options = {
        url: '/plus/goods.php',
        type: 'GET',
        dataType: 'json',
        data: data,
        success: function (data) {
            if(data.status){
                that.totalPage = data.data.totalPage;
                that.pageNO = Number(data.data.pageNO);
                that.updateProducts(data.data.list,isLoadMore);
            }else{
                notice.updateNotice("notice-error",`获取商品列表失败：${data.message}`);
                console.error(`获取商品列表失败：${data.message}`);
            }
        },
        error:function(xhr){
            notice.updateNotice("notice-error",`操作发生错误：${xhr.status} ${xhr.statusText}`);
            console.error(`操作发生错误：${xhr.status} ${xhr.statusText}`);
        }
    };
    $.ajax(options);
 }
 Products.prototype.deleteMyFilter = function (filterId,item){
    let index = products.myFilters.indexOf(item);
    products.myFilters.splice(index,1);
    $(`#filter_${item.name}`).remove();
    item.checked = false;
    document.getElementById(`filter_${filterId}_${item.id}`).checked = false;
    //更新产品列表
    products.getProductList();
},
 Products.prototype.updateMyFilter = function (filterId,item){
    if(item.checked){
        item.field = filterId,
        this.myFilters.unshift(item);
        $("#myFilters").prepend(`<p class="select-val" id="filter_${item.name}">
            <span>${item.name}</span>
            <span class="filter-del-btn"> x </span>
            </p>`);
         // 动态添加事件
        $(document).on('click', `#filter_${item.name} .filter-del-btn`, function(event){
            products.deleteMyFilter(filterId,item);
        });
    }else{
        this.deleteMyFilter(filterId,item);
    }
 }
 Products.prototype.updateFilter = function(){
    let $filter = $("#product-filter");
    for(let i=0;i<this.filters.length;i++){
        let filter = this.filters[i];
        $filter.append(`<p class="selected-catalog-item">${filter.name}</p>`);
        if(filter.field == "check_price"){//价格范围
            $filter.append(`<div class="input-group input-group-addon check_price" id="check_price">
            <input type="text" value="" id="minPrice" placeholder="最低价" class="border-1 input-sm">
            <span>-</span>
            <input type="text" value="" id="maxPrice" placeholder="最高价" class="border-1 input-sm">
            <button type="button" class="btn-base">确定</button>
        </div>`);
        $(document).on("click","#check_price button.btn-base",function(){
            products.getProductList();
        })
        }else{//多选
            for(let i=0;i<filter.items.length;i++){
                let item = filter.items[i];
                $filter.append(`<p class="pro_filter_item">
                    <label for="filter_${filter.id}_${item.id}">
                        <span class="filterName">${item.name}</span>
                        <span>
                            <input id="filter_${filter.id}_${item.id}" name="filterItem" type="checkbox" value="${item.name}"/>
                        </span>
                    </label>
                </p>`);
                // 动态添加事件
                $(document).on('change', `#filter_${filter.id}_${item.id}`, function(event){
                    item.checked=event.target.checked;
                    products.updateMyFilter(filter.id,item);
                    //更新产品列表
                    products.getProductList();
                });
            }
        }
    }
 }
 Products.prototype.getFilter = function(){
    let that = this;
    let options = {
        url: '/plus/goods.php?action=category',
        type: 'GET',
        dataType: 'json',
        data: '',
        success: function (data) {
        if(data.status){
            that.filters = data.data.map(function(item,i){
                item.id = item.field;
                if(item.value) {
                    item.items = [];
                    for(let k = 0; k< item.value.length;k++){
                        item.items.push({
                            id:k+1,
                            name:item.value[k],
                            checked:false
                        })
                    }
                }
                return item;
            });
            that.updateFilter()
            // that.filters = [{
            //     id:1,
            //     name:'系列',
            //     items:[ 
            //         {id:1,name:'亮片系列',checked:false},
            //         {id:2,name:'编织系列',checked:false},
            //         {id:3,name:'格纹系列',checked:false},
            //         {id:4,name:'水晶系列',checked:false},
            //         {id:5,name:'丝绒系列',checked:false},
            //         {id:6,name:'印花系列',checked:false},
            //         {id:7,name:'珠绣系列',checked:false},
            //         {id:8,name:'星耀系列',checked:false}
            //     ]
            // }]
        }else{
            notice.updateNotice("notice-error",`获取筛选项目失败：${data.message}`);
            console.error(`获取筛选项目失败：${data.message}`);
        }
        },
        error:function(xhr){
            notice.updateNotice("notice-error",`操作发生错误：${xhr.status} ${xhr.statusText}`);
            console.error(`操作发生错误：${xhr.status} ${xhr.statusText}`);
        }
    };
    $.ajax(options);
 }
 let products = new Products();
 $(document).ready(function() {
     products.getFilter();
     products.getProductList();
     $("#filter-btn").on("click",function(){
         $("#portfolio-3-col-grid-filter").css({
            "right": 0
         });
     });
     $(".finish-filter-btn").on("click",function(){
         $("#portfolio-3-col-grid-filter").css({
            "right": "-999px"
         });
     });
 })

<div id="portfolio-3-col-grid-filter" class="col-md-2 col-md-offset-1 cbp-l-filters-alignCenter pro-filter-wrapper">
        <input type="hidden" id="nav-id" value="id">
    <div class="finish-filter-btn" style="display: none;"> 返回 </div>
    <p class="selected-title">您的选择 <span class="finish-filter-btn sure visible-xs">确定</span> </p>
    <div id="myFilters">
    </div>
    <p class="selected-title">筛选条件</p>
    <div id="product-filter">
    </div>
</div>
<div class="filter-btn" style="display: none;" id="filter-btn">筛选 <span>
    <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>
</span>
</div>

/* 商品筛选 */
.pro-filter-wrapper{
  text-align:left;
}
.pro-filter-wrapper .selected-title{
  font-size: 20px;
  padding-top: 16px;
  color: #727272;
  margin-bottom: 15px;
}
.pro-filter-wrapper .select-val{
  font-size:14px;
  padding: 5px;
  color:#000;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  margin-bottom: 0px;
}
.pro-filter-wrapper .select-val span.filter-del-btn{
  display: inline-block;
  width:20px;
  height: 20px;
  text-align: center;
  line-height: 17px;
}
.pro-filter-wrapper #myFilters{
  border-bottom: 1px solid #999;
}
.pro-filter-wrapper .selected-catalog-item{
  font-size:18px;
  padding: 5px 0px;
  border-bottom: 1px solid #999;
  color: #000;
  font-weight: bold;
  clear: both;
}
.pro-filter-wrapper .pro_filter_item label{
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
}
.pro-filter-wrapper .pro_filter_item label span.filterName{
  color: #666;
  font-size: 15px;
  padding-left: 10px;
  font-weight: normal;
}
.pro-filter-wrapper .pro_filter_item input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #b8b7b6;
  cursor: pointer;
  margin: 0;
  position: relative;
  vertical-align: middle;
  height: 22px;
  width: 22px;
}
.pro-filter-wrapper .pro_filter_item input[type='checkbox']:checked::after {
  background: url(/moke8/img/right.svg) no-repeat center;
  background-size: contain;
  content: '';
  left: 25%;
  height: 50%;
  position: absolute;
  top: 25%;
  width: 50%;
}

 

js 面向对象编程 - 商品筛选