分类页面同步渲染

public/assets/js/common/config.js

@@ -3,6 +3,7 @@ seajs.config({
     alias: {
         'slide':"common/jquery.SuperSlide.2.1.3",//最强轮播 因为公共尾部有轮播 直接预加载
         'artTemplate':"common/artTemplate.js",
+        'pagination':"common/jquery.pagination.min.js",
         'tool':"common/tool",//工具
         'liexin_ajax':"common/liexin_ajax.js" ,
         'liexin_pop':"common/liexin_pop.js",

public/assets/js/common/jquery.pagination.min.js

+define(function(require, exports, module) {
+     //配置参数
+    var defaults = {
+        totalData: 0, //数据总条数
+        showData: 0, //每页显示的条数
+        pageCount: 9, //总页数,默认为9
+        current: 1, //当前第几页
+        prevCls: 'prev', //上一页class
+        nextCls: 'next', //下一页class
+        prevContent: '<', //上一页内容
+        nextContent: '>', //下一页内容
+        activeCls: 'active', //当前页选中状态
+        coping: false, //首页和尾页
+        isHide: false, //当前页数为0页或者1页时不显示分页
+        homePage: '', //首页节点内容
+        endPage: '', //尾页节点内容
+        keepShowPN: false, //是否一直显示上一页下一页
+        mode: 'unfixed', //分页模式，unfixed：不固定页码数量，fixed：固定页码数量
+        count: 4, //mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数
+        jump: false, //跳转到指定页数
+        jumpIptCls: 'jump-ipt', //文本框内容
+        jumpBtnCls: 'jump-btn', //跳转按钮
+        jumpBtn: '跳转', //跳转按钮文本
+        callback: function () {} //回调
+    };
+ 
+    var Pagination = function (element, options) {
+        //全局变量
+        var opts = options, //配置
+            current, //当前页
+            $document = $(document),
+            $obj = $(element); //容器
+ 
+        /**
+         * 设置总页数
+         * @param {int} page 页码
+         * @return opts.pageCount 总页数配置
+         */
+        this.setPageCount = function (page) {
+            return opts.pageCount = page;
+        };
+ 
+        /**
+         * 获取总页数
+         * 如果配置了总条数和每页显示条数，将会自动计算总页数并略过总页数配置，反之
+         * @return {int} 总页数
+         */
+        this.getPageCount = function () {
+            return opts.totalData && opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
+        };
+ 
+        /**
+         * 获取当前页
+         * @return {int} 当前页码
+         */
+        this.getCurrent = function () {
+            return current;
+        };
+ 
+        /**
+         * 填充数据
+         * @param {int} 页码
+         */
+        this.filling = function (index) {
+            var html = '';
+            current = parseInt(index) || parseInt(opts.current); //当前页码
+            var pageCount = this.getPageCount(); //获取的总页数
+            switch (opts.mode) { //配置模式
+                case 'fixed': //固定按钮模式
+                    html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
+                    if (opts.coping) {
+                        var home = opts.coping && opts.homePage ? opts.homePage : '1';
+                        html += '<a href="javascript:;" data-page="1">' + home + '</a>';
+                    }
+                    var start = current > opts.count - 1 ? current + opts.count - 1 > pageCount ? current - (opts.count - (pageCount - current)) : current - 2 : 1;
+                    var end = current + opts.count - 1 > pageCount ? pageCount : start + opts.count;
+                    for (; start <= end; start++) {
+                        if (start != current) {
+                            html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
+                        } else {
+                            html += '<span class="' + opts.activeCls + '">' + start + '</span>';
+                        }
+                    }
+                    if (opts.coping) {
+                        var _end = opts.coping && opts.endPage ? opts.endPage : pageCount;
+                        html += '<a href="javascript:;" data-page="' + pageCount + '">' + _end + '</a>';
+                    }
+                    html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
+                    break;
+                case 'unfixed': //不固定按钮模式
+                    if (opts.keepShowPN || current > 1) { //上一页
+                        html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
+                    } else {
+                        if (opts.keepShowPN == false) {
+                            $obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();
+                        }
+                    }
+                    if (current >= opts.count + 2 && current != 1 && pageCount != opts.count) {
+                        var home = opts.coping && opts.homePage ? opts.homePage : '1';
+                        html += opts.coping ? '<a href="javascript:;" data-page="1">' + home + '</a><span>...</span>' : '';
+                    }
+                    var start = (current - opts.count) <= 1 ? 1 : (current - opts.count);
+                    var end = (current + opts.count) >= pageCount ? pageCount : (current + opts.count);
+                    for (; start <= end; start++) {
+                        if (start <= pageCount && start >= 1) {
+                            if (start != current) {
+                                html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
+                            } else {
+                                html += '<span class="' + opts.activeCls + '">' + start + '</span>';
+                            }
+                        }
+                    }
+                    if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
+                        var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
+                        html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="' + pageCount + '">' + end + '</a>' : '';
+                    }
+                    if (opts.keepShowPN || current < pageCount) { //下一页
+                        html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
+                    } else {
+                        if (opts.keepShowPN == false) {
+                            $obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();
+                        }
+                    }
+                    break;
+                case 'easy': //简单模式
+                    break;
+                default:
+            }
+            html += opts.jump ? '<input type="text" class="' + opts.jumpIptCls + '"><a href="javascript:;" class="' + opts.jumpBtnCls + '">' + opts.jumpBtn + '</a>' : '';
+            $obj.addClass('m-style')
+            $obj.empty().html(html);
+        };
+ 
+        //绑定事件
+        this.eventBind = function () {
+            var that = this;
+            var pageCount = that.getPageCount(); //总页数
+            var index = 1;
+            $obj.off().on('click', 'a', function () {
+                if ($(this).hasClass(opts.nextCls)) {
+                    if ($obj.find('.' + opts.activeCls).text() >= pageCount) {
+                        $(this).addClass('disabled');
+                        return false;
+                    } else {
+                        index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;
+                    }
+                } else if ($(this).hasClass(opts.prevCls)) {
+                    if ($obj.find('.' + opts.activeCls).text() <= 1) {
+                        $(this).addClass('disabled');
+                        return false;
+                    } else {
+                        index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;
+                    }
+                } else if ($(this).hasClass(opts.jumpBtnCls)) {
+                    if ($obj.find('.' + opts.jumpIptCls).val() !== '') {
+                        index = parseInt($obj.find('.' + opts.jumpIptCls).val());
+                    } else {
+                        return;
+                    }
+                } else {
+                    index = parseInt($(this).data('page'));
+                }
+                that.filling(index);
+                typeof opts.callback === 'function' && opts.callback(that);
+            });
+            //输入跳转的页码
+            $obj.on('input propertychange', '.' + opts.jumpIptCls, function () {
+                var $this = $(this);
+                var val = $this.val();
+                var reg = /[^\d]/g;
+                if (reg.test(val)) $this.val(val.replace(reg, ''));
+                (parseInt(val) > pageCount) && $this.val(pageCount);
+                if (parseInt(val) === 0) $this.val(1); //最小值为1
+            });
+            //回车跳转指定页码
+            $document.keydown(function (e) {
+                if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
+                    var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
+                    that.filling(index);
+                    typeof opts.callback === 'function' && opts.callback(that);
+                }
+            });
+        };
+ 
+        //初始化
+        this.init = function () {
+            this.filling(opts.current);
+            this.eventBind();
+            if (opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') {
+                $obj.hide();
+            } else {
+                $obj.show();
+            }
+        };
+        this.init();
+    };
+ 
+    $.fn.pagination = function (parameter, callback) {
+        if (typeof parameter == 'function') { //重载
+            callback = parameter;
+            parameter = {};
+        } else {
+            parameter = parameter || {};
+            callback = callback || function () {};
+        }
+        var options = $.extend({}, defaults, parameter);
+        return this.each(function () {
+            var pagination = new Pagination(this, options);
+            callback(pagination);
+        });
+    };
+})

public/assets/js/common/liexin_ajax.js

@@ -29,7 +29,7 @@ define('liexin_ajax', ['liexin_pop'], function (require, exports, module) {
                 },
                 error: function () {
                     liexin_pop.LoadingHide();
-                    liexin_pop.Tip({title:"网络错误"});
+                    liexin_pop.Tip({title:"Error"});
                 }
             });
         }

public/assets/js/common/tool.js

@@ -59,6 +59,7 @@ define(function (require, exports, module) {
     //无结果
     module.exports.NoData = function (ele) {
        $(ele).html('<div class="row verCenter rowCenter" style="height:150px;color:#555;">No Data</div>')
+       $(ele).next(".M-pagebox").hide();
     }
     
    

public/assets/js/search/search.js

-define('search', ['tool', 'liexin_pop'], function (require, exports, module) {
+define('search', ['tool', 'liexin_pop','artTemplate','pagination'], function (require, exports, module) {
     var tool = require("tool");
     var liexin_pop = require("liexin_pop");
+    var artTemplate = require("artTemplate");
+    var pagination = require('pagination');
     var search = {
         page:1,
+        limit:10,
         init: function () {
             search.handle();
             search.getData()
         },
         getData:function(){
-            var data={
-
+            var data_={
+                page:search.page,
+                page_size:search.limit
+            }
+            if($(".eqsort").hasClass("act")){
+                data_["goods_name/eq"]=$(".mallsearchvalx").val()
+            }else{
+                data_["goods_name/like"]=$(".mallsearchvalx").val()
+            }
+            if($(".stockSort").hasClass("act")){
+                data_["stock/gte"]=1
+            }
+            
+            if($(".storeitems").hasClass("act")){
+                if($(".storeitems").hasClass("top")){
+                    data_["stock/sort"]="asc"
+                }else{
+                    data_["stock/sort"]="desc"
+                }
             }
-            $.liexin_ajax(SO_URL+'/semour/skuLists', 'GET', {
-               
-            }, function (res) {
+            if($(".priceitems").hasClass("act")){
+                if($(".priceitems").hasClass("top")){
+                    data_["single_price/sort"]="asc"
+                }else{
+                    data_["single_price/sort"]="desc"
+                }
+            }
+            $.liexin_ajax(SO_URL+'/semour/skuLists', 'POST',data_, function (res) {
+                console.log(res)
                 if (res.code == 0) {
-                   
-
+                    var dataArr=res.data.lists||[];
+                    $(".searchCount").html(res.data.total||0)
+                    if(dataArr.length==0){
+                        tool.NoData(".data-td")
+                        return
+                    }
+                    var json_={
+                        data:dataArr
+                    }
+                    var html = template('DataTmp', json_);
+                    $(".data-td").html(html);
+                    //分页初始化
+                    $('.M-pagebox').pagination({
+                        coping: false,
+                        homePage: '<<',
+                        endPage: '>>',
+                        totalData: res.data.total,
+                        showData: res.data.page_size,
+                        current: res.data.page
+                    });
                 } else {
+                    tool.NoData(".data-td")
                     liexin_pop.Tip({ title: res.msg })
                 }
             })
         },
         handle: function () {
-          
+            //排序操作
+            $(".checksearchsz").click(function(){
+                $(this).toggleClass("act")
+                search.getData()
+            })
 
-        }
+            $(".sort-item").click(function(){
+                $(".sort-item").removeClass("act");
+                $(this).addClass("act");
+                if($(this).hasClass("topbomsd")){
+                    if($(this).hasClass("top")){
+                        $(this).removeClass("top")
+                        $(this).addClass("bottom")
+                    }else{
+                        $(this).addClass("top")
+                        $(this).removeClass("bottom")
+                    }
+                }
+                search.getData()
+            })
+        },
+        page: function () {
+            $(".M-pagebox a").unbind("click").click(function () {
+
+                if ($(this).attr("data-page")) {
+                    search.page = $(this).attr("data-page");
+                } else {
+                    if ($(this).hasClass("prev")) {
+                        search.page = search.page - 1;
+                    } else if ($(this).hasClass("next")) {
+                        search.page = search.page + 1;
+                    }
+                }
+                search.getData();
+            })
+
+        },
     }
     module.exports = search.init();
 })

resources/views/classification/index.blade.php

@@ -15,15 +15,16 @@
             <i>></i>
             <span>Diodes - Zener - Single</span>
         </div>
+        
         <div class="class-three-box boxsiz">
-            <div class="chead boxsiz">Discrete Semiconductor Products(100000)</div>
+            <div class="chead boxsiz">二级分类NAME(100000)</div>
             <div class="csec boxsiz clear">
-                <a href="">Diodes - Zener - Single(100000)</a>
+                <a href="">三积分类NAME(100000)</a>
                 <a href="">Diodes - Zener - Single(100000)</a>
 
             </div>
-
         </div>
+
         <div class="shit-box boxsiz">
             <p class="titletext">Manufacturer</p>
             <div class="shift-con row boxsiz">

resources/views/common/mallHeaderNav.blade.php

@@ -53,7 +53,7 @@
                                 <a class="p" title="{{$itemchild['class_name_en']}}" target="_blank" href="/class/{{$itemchild['class_id']}}">{{$itemchild['class_name_en']}}</a>
                                 <div class="threeClass boxsiz row">
                                     @foreach ($itemchild['children'] as $itemchild3)
-                                    <a target="_blank" href="/class/{{$itemchild3['class_name_en']??''}}" title="{{$itemchild3['class_name_en']??''}}">{{$itemchild3['class_name_en']??''}}<span>({{$itemchild3['sku_number']??''}})</span></a>
+                                    <a target="_blank" href="/class/{{$itemchild3['class_id']??''}}" title="{{$itemchild3['class_name_en']??''}}">{{$itemchild3['class_name_en']??''}}<span>({{$itemchild3['sku_number']??''}})</span></a>
                                     @endforeach
                                 </div>
                             </div>

resources/views/search/index.blade.php

@@ -11,45 +11,45 @@
         <div class="bread-menu row boxsiz">
             <a href="/mall">Home</a>
             <i>></i>
-            <span>SourceHanSansCN-Regular</span>
+            <span>{{request()->get('keyword')}}</span>
         </div>
         <div class="listcon boxsiz w1200">
             <div class="stbox">
-                <div>The Results of NXP Semiconductors <span class="searchCount">26</span></div>
+                <div>The Results of {{request()->get('keyword')}} Semiconductors <span class="searchCount">0</span></div>
                 <div class="row shifth">
                     <div class="sort-item">
                         <div>All Listings</div>
                     </div>
-                    <div class="sort-item act top">
+                    <div class="sort-item storeitems topbomsd ">
                         <div>Availability</div>
                         <span class="tp">
-                        <i class="icon iconfont icon-a-sanjiaoxing-xiantiaofan kx"></i>
-                        <span class="icon iconfont icon-sanjiaoxing-tianchong sx"></span>
+                            <i class="icon iconfont icon-a-sanjiaoxing-xiantiaofan kx"></i>
+                            <span class="icon iconfont icon-sanjiaoxing-tianchong sx"></span>
                         </span>
                         <span class="bt">
-                        <i class="icon iconfont icon-a-sanjiaoxing-xiantiaofan kx"></i>
-                        <span class="icon iconfont icon-sanjiaoxing-tianchong sx"></span>
+                            <i class="icon iconfont icon-a-sanjiaoxing-xiantiaofan kx"></i>
+                            <span class="icon iconfont icon-sanjiaoxing-tianchong sx"></span>
                         </span>
                     </div>
-                    
-                    <div class="sort-item act bottom">
+
+                    <div class="sort-item priceitems topbomsd  ">
                         <div>Prices</div>
                         <span class="tp">
-                        <i class="icon iconfont icon-a-sanjiaoxing-xiantiaofan kx"></i>
-                        <span class="icon iconfont icon-sanjiaoxing-tianchong sx"></span>
+                            <i class="icon iconfont icon-a-sanjiaoxing-xiantiaofan kx"></i>
+                            <span class="icon iconfont icon-sanjiaoxing-tianchong sx"></span>
                         </span>
                         <span class="bt">
-                        <i class="icon iconfont icon-a-sanjiaoxing-xiantiaofan kx"></i>
-                        <span class="icon iconfont icon-sanjiaoxing-tianchong sx"></span>
+                            <i class="icon iconfont icon-a-sanjiaoxing-xiantiaofan kx"></i>
+                            <span class="icon iconfont icon-sanjiaoxing-tianchong sx"></span>
                         </span>
                     </div>
-                    <div class="check-group row verCenter act">
+                    <div class="check-group eqsort row checksearchsz verCenter ">
                         <div class="check">
                             <i class="icon iconfont icon-gou"></i>
                         </div>
                         <p>Exact Match</p>
                     </div>
-                    <div class="check-group row verCenter ">
+                    <div class="check-group stockSort checksearchsz row verCenter ">
                         <div class="check">
                             <i class="icon iconfont icon-gou"></i>
                         </div>
@@ -68,48 +68,10 @@
                     <div class="th">Options</div>
                 </div>
                 <div class="data-td">
-                    <div class="td-group boxsiz row">
-                        <div class="td w180">
-                            <a href="" class="goodsname">RC0603JR-0710KL</a>
-                            <div class="copyname">
-                                <i class="icon iconfont icon-fuzhi"></i>
-                            </div>
-                        </div>
-                        <div class="td w180">
-                            Texas Instruments
-                            <div class="pdflink"> <i class="icon iconfont icon-PDF"></i></div>
-                        </div>
-                        <div class="td w280">
-                            <div> Availability：10000</div>
-                            <div> Min：100 <span class="mult">Mult：100</span></div>
-                            <div> Full Reel：2500</div>
-                        </div>
-                        <div class="td w140">2-5 Weeks</div>
-                        <div class="th w180">
-                            <div class="price-jt">
-                                <div class="price-group row">
-                                    <div class="jtpr">5000+</div>
-                                    <div class="jtpc">$22.2222</div>
-                                </div>
-                                <div class="price-group row">
-                                    <div class="jtpr">50+</div>
-                                    <div class="jtpc">$2222.2222</div>
-                                </div>
-                               
-                            </div>
-                        </div>
-                        <div class="td">
-                            <div class="input-box ">
-                                <input type="text" class="valuep" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
-                                <div class="addCar">Add</div>
-                            </div>
-                            <div class="total-price">
-                                Total：$144.5
-                            </div>
-                        </div>
-                    </div>
-                    
+
+
                 </div>
+                <div class="M-pagebox"></div>
             </div>
         </div>
     </div>
@@ -117,6 +79,57 @@
 </div>
 @endsection
 
+
+
+
+@verbatim
+<script id="DataTmp" type="text/html">
+{{each data value index}}
+<div class="td-group boxsiz row">
+    <div class="td w180">
+        <a href="" class="goodsname">RC0603JR-0710KL</a>
+        <div class="copyname">
+            <i class="icon iconfont icon-fuzhi"></i>
+        </div>
+    </div>
+    <div class="td w180">
+        Texas Instruments
+        <div class="pdflink"> <i class="icon iconfont icon-PDF"></i></div>
+    </div>
+    <div class="td w280">
+        <div> Availability：10000</div>
+        <div> Min：100 <span class="mult">Mult：100</span></div>
+        <div> Full Reel：2500</div>
+    </div>
+    <div class="td w140">2-5 Weeks</div>
+    <div class="th w180">
+        <div class="price-jt">
+            <div class="price-group row">
+                <div class="jtpr">5000+</div>
+                <div class="jtpc">$22.2222</div>
+            </div>
+            <div class="price-group row">
+                <div class="jtpr">50+</div>
+                <div class="jtpc">$2222.2222</div>
+            </div>
+
+        </div>
+    </div>
+    <div class="td">
+        <div class="input-box ">
+            <input type="text" class="valuep" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
+            <div class="addCar">Add</div>
+        </div>
+        <div class="total-price">
+            Total：$144.5
+        </div>
+    </div>
+</div>
+{{/each}}
+</script>
+@endverbatim
+
+
 @section('js')
 <script src="{{$public}}/assets/js/search/search.js?v={{time()}}"></script>
 @endsection
\ No newline at end of file