展商名录

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"> <title>展商名录</title> <link rel="icon" href="/images/favicon.png" type=" image/png" > <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2850189_4onm36i88hx.css?spm=a313x.7781069.1998910419.40&file=font_2850189_4onm36i88hx.css" /> <link rel="stylesheet" type="text/css" href="/css/reset.css" /> <link rel="stylesheet" type="text/css" href="/css/one.css"> <link rel="stylesheet" type="text/css" href="/css/site.css"> <link href="https://themes.asp.events/_base/1-2-0/includes/fonts/fontawesome/fontawesome-all.min.css" rel="stylesheet"> <link href="https://themes.asp.events/_base/1-2-0/includes/fonts/fontawesome/v4-shims.min.css" rel="stylesheet"> </head> <body>  <div class="wrap"> <div class="zsearch"> <span class="iconfont icon-sousuo"></span> <input type="text" id="wd" placeholder="输入展商品牌名字/展位号"> <input type="hidden" id="year"> <input type="hidden" id="brandType"> <button id="search">搜索</button> </div> <div class="selectType_box"> <div class="selectType_content"> <div class="selectType_title"> <div class="item"> 年份选择 <view class="arrow-box"> <span class="up-arrow"> </span> <span class="down-arrow"></span> </view> </div> <div class="item"> 品类选择 <view class="arrow-box"> <span class="up-arrow"> </span> <span class="down-arrow"></span> </view> </div> </div> <ul class="select-item select-item-a" style="display: none"></ul> <ul class="select-item select-item-b" style="display: none"></ul> <ul class="list_btn" style="display: none"> <li class="first reset">重置</li> <li class="last sure-btn">确定</li> </ul> </div> </div> </div>  <div class="wrap"> <div class="zonewrap" id="brandlist"> </div> </div> <div class="wrap pagewrap m-exhibitors-list m-exhibitors-list--grid"> <div class="m-exhibitors-list__pagination m-exhibitors-list__pagination--bottom has-sidebar"> <div class="pagination pagination--default js-pagination js-library-pagination"> <ul class="pagination__list"> </ul> </div> </div> </div> <div class="wrap zpage" style="display: none"> <button id="pre" style="display: none">上一页</button> <button id="next" style="display: none">下一页</button> </div> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onresize = window.onload = function() { updateSize(); } function updateSize() { var hei = $('.zonewrap .zone .zoneimg').width(); console.log(hei); $('.zonewrap .zone .zoneimg').height(hei*7/10); } $(function() { $('#search').click(function(){ search(1); }); getInitData(); search(1); // setYears(); $('.select-item-a').on('click', 'li', function () { $(this).addClass('active').siblings('li').removeClass('active'); $(this).children('.selct-icon').show(); $(this).siblings('li').children('.selct-icon').hide(); let select = $(this).children('.show-text').text(); console.log('a选中的值是' + select); $('#year').val(select); }); $('.select-item-b').on('click', 'li', function () { $(this).addClass('active').siblings('li').removeClass('active'); $(this).children('.selct-icon').show(); $(this).siblings('li').children('.selct-icon').hide(); let select = $(this).children('.show-text').text(); console.log('b选中的值是' + select); $('#brandType').val(select); }); $('.selectType_title .item').click(function () { $('ul.list_btn').show(); $(this).addClass('active').siblings('.item').removeClass('active'); let index = $(this).index(); console.log(index); $('.select-item') .eq(index) .stop() .show() .siblings('.select-item') .hide(); }); $('.show-input').click(function () { $('.selectType_content').show(); }); // 重置 $('.reset').click(function () { // $('.selectType_content').hide(); $('.select-item-a li').removeClass('active'); $('.select-item-b li').removeClass('active'); $('.selct-icon').hide(); $('ul.select-item').hide(); $('.selectType_title .item').removeClass('active'); $('ul.list_btn').hide(); $('#year').val(''); $('#brandType').val(''); search(1); }); $('.sure-btn').click(function () { $('ul.select-item').hide(); $('ul.list_btn').hide(); search(1); }); }); function search(pageNum) { var wd = $.trim($('#wd').val()); var year = $.trim($('#year').val()); var brandType = $.trim($('#brandType').val()); $.ajax({ url : '/brand/search', type : 'get', dataType : 'json', // contentType: 'application/json;charset=UTF-8', data: {page: pageNum, wd: wd, year: year, brandType: brandType}, success : function(data) { console.log(data); if (data.status == 200) { updateList(data.data); // alert("保存成功"); } else { console.log(data.message); } }, error : function(data) { console.error(data); } }); } function updateList(data) { var pageNum = data.pageNo; var totalPage = data.totalPage; var phtml = ''; if(totalPage <= 1) { } else { // 处理异常页码 if(pageNum < 1) { pageNum = 1; } if(pageNum > totalPage) { pageNum = totalPage; } if(pageNum > 1) { // 页码大于1就显示上一页和第一页 phtml += '<li class="pagination__list__item"><a element="first" href="javascript:search(1)" title="第一页" class="pagination__list__item__link pagination__list__item__link--first"></a></li>'; phtml += '<li class="pagination__list__item"><a element="previous" href="javascript:search(' + (pageNum-1) + ')" title="上一页" class="pagination__list__item__link pagination__list__item__link--previous"></a></li>'; } // 1 和 ... var one = pageNum-4; if(one == 1) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+one+');" class="pagination__list__item__link" data-page="'+one+'">'+one+'</a></li>'; } else if(one > 1) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search(1);" class="pagination__list__item__link" data-page="1">1</a></li>'; phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:null" class="pagination__list__item__link pagination__list__item__link--ellipsis">...</a></li>'; } // 前后各3个 one = pageNum-3; if(one > 0) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+one+');" class="pagination__list__item__link" data-page="'+one+'">'+one+'</a></li>'; } one = pageNum-2; if(one > 0) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+one+');" class="pagination__list__item__link" data-page="'+one+'">'+one+'</a></li>'; } one = pageNum-1; if(one > 0) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+one+');" class="pagination__list__item__link" data-page="'+one+'">'+one+'</a></li>'; } phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+pageNum+');" class="pagination__list__item__link is-active" data-page="'+pageNum+'">'+pageNum+'</a></li>'; one = pageNum+1; if(one <= totalPage) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+one+');" class="pagination__list__item__link" data-page="'+one+'">'+one+'</a></li>'; } one = pageNum+2; if(one <= totalPage) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+one+');" class="pagination__list__item__link" data-page="'+one+'">'+one+'</a></li>'; } one = pageNum+3; if(one <= totalPage) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+one+');" class="pagination__list__item__link" data-page="'+one+'">'+one+'</a></li>'; } // ... 和尾页 one = pageNum+4; console.log("one=="+ one); console.log("totalPage=="+ totalPage); if(one == totalPage) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+totalPage+');" class="pagination__list__item__link" data-page="'+totalPage+'">'+totalPage+'</a></li>'; } else if(one < totalPage) { phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:null" class="pagination__list__item__link pagination__list__item__link--ellipsis">...</a></li>'; phtml += '<li class="pagination__list__item"><a element="pages" href="javascript:search('+totalPage+');" class="pagination__list__item__link" data-page="'+totalPage+'">'+totalPage+'</a></li>'; } if(pageNum < totalPage) { phtml += '<li class="pagination__list__item"><a element="next" href="javascript:search(' + (pageNum + 1) + ')" title="下一页" class="pagination__list__item__link pagination__list__item__link--next"></a></li>'; phtml += '<li class="pagination__list__item"><a element="last" href="javascript:search(' + totalPage + ')" title="最后一页" class="pagination__list__item__link pagination__list__item__link--last"></a></li>'; } } $('.pagination__list').html(phtml); var html = ''; data.data.forEach(e => { html += '<div class="zone"><a href="detail.html?id=' + e.id + '"><div class="zoneimg"><img src="' + e.picture1 + '"></div><div class="zcontent"><p style="font-weight: bold;color: #222;">品牌：'; html += e.name + '</p><p>展位号：' + e.boothNo + '</p></div></a></div>'; }); $('#brandlist').html(html); updateSize(); } function getInitData() { $.ajax({ url : '/brand/brandTypes', type : 'get', dataType : 'json', success : function(data) { console.log(data); if (data.status == 200) { var years = data.data.years; var options = ''; for (var i = 0; i < years.length; i++) { options += '<li class="labelClass"><p class="radio"><span class="circle"></span></p>'; options += '<p class="show-text">' + years[i] + '</p>'; options += '<p class="selct-icon" style="display: none"><img src="image/select-icon.png" /></p></li>'; } $('.select-item').html(options); //根据选择器设置其html var brandTypes = data.data.brandTypes; let html = ''; for (var i = 0; i < brandTypes.length; i++) { html += '<li class="labelClass"><p class="radio"><span class="circle"></span></p>'; html += '<p class="show-text">' + brandTypes[i] + '</p>'; html += '<p class="selct-icon" style="display: none"><img src="image/select-icon.png" /></p></li>'; } $('.select-item-b').html(html); } else { console.log(data.message); } }, error : function(data) { console.error(data); } }); } </script> </body> </html>

CINXE.COM

展商名录