Skip to content

semour / semour_web

Go to a project
Commit 014d32aa by 肖康
Options

分类页面同步渲染

parent 368dcfef
Inline Side-by-side
Showing with 379 additions and 71 deletions
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 0 → 100644
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment