品牌一览优化

@@ -20,23 +20,28 @@ let index = (req, res, next) => {
     let responseData = {
         module: 'channel',
         page: 'brand',
+        localCss: true,
 
         // title: '品牌一览 | Yoho!Buy有货 | 潮流购物逛不停',
         showFooterTab: footerModel.getUrlData('category')
     };
 
     let param = {
-
         channel: req.query.channel || '1',
-
         gender: req.query.gender || '1,3'
-
     };
 
     indexModel.getBrandByChannel(param.channel).then(result => {
         res.render('brand/index', Object.assign(responseData, result));
     }).catch(next);
+};
 
+let brandList = (req, res, next) => {
+    var channel = req.query.channel || '1';
+
+    indexModel.getBrandListByChannel(channel).then(result => {
+        res.json(result);
+    }).catch(next);
 };
 
 /**
@@ -46,7 +51,6 @@ let index = (req, res, next) => {
  * @param int channel 1表示男生频道, 2表示女生频道, 3表示潮童频道, 4表示创意生活频道
  */
 let search = (req, res, next) => {
-
     let headerData = headerModel.setNav({
         navTitle: '品牌一览'
     });
@@ -55,6 +59,7 @@ let search = (req, res, next) => {
         pageHeader: headerData,
         module: 'channel',
         page: 'brand',
+        localCss: true,
         isWechat: req.yoho.isWechat,
         title: '品牌一览 | Yoho!Buy有货 | 潮流购物逛不停',
         pageFooter: true
@@ -143,6 +148,7 @@ let searchAsync = (req, res, next) => {
 module.exports = {
     index,
     search,
+    brandList,
     delBrandHistory,
     addBrandSearch,
     searchAsync

@@ -30,7 +30,6 @@ let CODE_TOPPOS_LIFESTYLE = 'f1aa914fd23cbcda71a87de6f5416c75';
  */
 
 const _packageAd = (params) => {
-
     return service.get('/operations/api/v5/resource/get', {
         content_code: params.contentCode,
         gender: 1,
@@ -38,71 +37,48 @@ const _packageAd = (params) => {
         page: 1
     }, {
         cache: true
-    }).then(result => {
-
-        return result;
-
     });
-
 };
 
-const _packageList = (params) => {
+const _packageList = (channel) => {
     return api.get('', {
         method: 'app.brand.newBrandList',
-        yh_channel: params.channel
-
+        yh_channel: channel
     }, {
         cache: true,
         code: 200
-    }).then(result => {
-
-        return result;
-
     });
 };
 
 const getBrandByChannel = (channel) => {
-
     let params = {};
 
     /* 根据频道调用接口 */
     switch (channel) {
         case '1': // 男生
             params = {
-                contentCode: CODE_TOPPOS_BOYS,
-                channel: 1
+                contentCode: CODE_TOPPOS_BOYS
             };
             break;
         case '2': // 女生
             params = {
-                contentCode: CODE_TOPPOS_GIRLS,
-                channel: 2
+                contentCode: CODE_TOPPOS_GIRLS
             };
             break;
         case '3': // 潮童
             params = {
-                contentCode: CODE_TOPPOS_KIDS,
-                channel: 3
+                contentCode: CODE_TOPPOS_KIDS
             };
             break;
         case '4': // 创意生活
             params = {
-                contentCode: CODE_TOPPOS_LIFESTYLE,
-                channel: 4
+                contentCode: CODE_TOPPOS_LIFESTYLE
             };
             break;
         default:
-
-
     }
 
-    return api.all([
-
-        _packageAd(params),
-        _packageList(params)
-
-    ]).then(result => {
-
+    return _packageAd(params).then(result => {
         let resu = {
             channel: {
                 channels: [{
@@ -120,24 +96,17 @@ const getBrandByChannel = (channel) => {
                 },
                 searchUrl: helpers.urlFormat('/brands/search', null),
                 brandPage: true,
-
                 brandType: '全部品牌',
                 secondBrandType: '新入驻品牌',
-                thirdBrandType: '热门品牌',
-                brandList: [],
-                newBrandWall: [],
-                recommandBrandWall: []
+                thirdBrandType: '热门品牌'
             }
         };
 
         resu.channel.channels[channel - 1].active = true;
-
-        if (result && result[0] && result[0].data) {
-
-            if (result[0].data[0] && result[0].data[0].data) {
+        if (result && result.data) {
+            if (result.data[0] && result.data[0].data) {
                 // 轮播图资源位
-                let adList = result[0].data[0].data;
-
+                let adList = result.data[0].data;
                 let build = [];
 
                 adList.forEach(ad => {
@@ -146,15 +115,12 @@ const getBrandByChannel = (channel) => {
                         url: ad.url
                     });
                 });
-
                 resu.channel.topData.bannerTop.list = build;
-
             }
 
-            if (result[0].data[1] && result[0].data[1].data) {
+            if (result.data[1] && result.data[1].data) {
                 // 推荐品牌资源位
-                let brandList = result[0].data[1].data.list;
-
+                let brandList = result.data[1].data.list || [];
                 let brand = [];
 
                 brandList.forEach(ad => {
@@ -165,106 +131,76 @@ const getBrandByChannel = (channel) => {
                     });
                 });
 
-                resu.channel.topData.hotBrandsScroll.name = result[0].data[1].data.title.title;
-
+                resu.channel.topData.hotBrandsScroll.name = result.data[1].data.title.title;
                 resu.channel.topData.hotBrandsScroll.list = brand;
-
             }
-
         }
+        return resu;
+    });
+};
 
-        /* 按字母'A-Z'分组的品牌列表 */
-        if (result && result[1] && result[1].data) {
-
-            let allList = result[1].data.all_list;
-
-            for (let key in allList) {
-
-                let obj = {};
-
-                obj = Object.assign(obj, {
-                    title: key
-                });
-
-                let list = [];
-
-                allList[key].forEach(row => {
+const getBrandListByChannel = (channel) => {
+    return _packageList(channel).then(result => {
+        let resu = {
+            brandList: [],
+            newBrandWall: [],
+            recommandBrandWall: []
+        };
 
-                    list.push({
-                        name: row.brand_name,
-                        isHot: row.is_hot === 'Y' ? true : false,
-                        isNew: row.is_show_new === 'Y' ? true : false,
-                        url: helpers.urlFormat('/product/index/brand?domain=' + row.brand_domain)
-                    });
+        if (!result || !result.data) {
+            return resu;
+        }
 
-                });
+        /* 按字母'A-Z'分组的品牌列表 */
+        let allList = result.data.all_list;
+        for (let key in allList) {
+            let obj = {
+                title: key,
+                list: []
+            };
 
-                obj = Object.assign(obj, {
-                    list
+            allList[key].forEach(row => {
+                obj.list.push({
+                    name: row.brand_name,
+                    isHot: row.is_hot === 'Y' ? true : false,
+                    isNew: row.is_show_new === 'Y' ? true : false,
+                    url: helpers.urlFormat('/product/index/brand?domain=' + row.brand_domain)
                 });
-
-                resu.channel.brandList.push(obj);
-
-            }
-
+            });
+            resu.brandList.push(obj);
         }
 
         // 新入驻品牌
-        if (result && result[1] && result[1].data) {
-
-            let newList = result[1].data.new_list;
-
-            for (let key in newList) {
-
-                let obj = {};
-
-                let list = [];
-
-                list.push({
-                    brandName: newList[key].brand_name,
-                    url: helpers.urlFormat('/product/index/brand?domain=' + newList[key].brand_domain),
-                    img: helpers.image(newList[key].brand_ico, 186, 115),
-                });
-
-                obj = Object.assign(obj, {
-                    list
-                });
-
-                resu.channel.newBrandWall.push(obj);
-
-            }
+        let newList = result.data.new_list;
+        for (let key in newList) {
+            let obj = {
+                list: []                    
+            };
 
+            obj.list.push({
+                brandName: newList[key].brand_name,
+                url: helpers.urlFormat('/product/index/brand?domain=' + newList[key].brand_domain),
+                img: helpers.image(newList[key].brand_ico, 186, 115),
+            });
+            resu.newBrandWall.push(obj);
         }
 
         // 推荐品牌
-        if (result && result[1] && result[1].data) {
-
-            let hotList = result[1].data.hot_list;
-
-            for (let key in hotList) {
-
-                let obj = {};
-
-                let list = [];
-
-                list.push({
-                    brandName: hotList[key].brand_name,
-                    url: helpers.urlFormat('/product/index/brand?domain=' + hotList[key].brand_domain),
-                    img: helpers.image(hotList[key].brand_ico, 186, 115),
-                });
-
-                obj = Object.assign(obj, {
-                    list
-                });
-
-                resu.channel.recommandBrandWall.push(obj);
-
-            }
+        let hotList = result.data.hot_list;
+        for (let key in hotList) {
+            let obj = {
+                list: []
+            };
 
+            obj.list.push({
+                brandName: hotList[key].brand_name,
+                url: helpers.urlFormat('/product/index/brand?domain=' + hotList[key].brand_domain),
+                img: helpers.image(hotList[key].brand_ico, 186, 115),
+            });
+            resu.recommandBrandWall.push(obj);
         }
 
         return resu;
-
     });
 };
 
@@ -602,6 +538,7 @@ const branchSearchHistoryAsync = (uid) => {
 
 module.exports = {
     getBrandByChannel,
+    getBrandListByChannel,
     branchSearch,
     delBrandSearchHistory,
     addSearchHistory,

@@ -26,6 +26,7 @@ router.get('/(:channel)/bottomBanner', channel.bottomBanner);
 router.get('/cate', cate.index);
 router.get('/brands', brandController.index); // 品牌首页
 router.get('/brands/search', brandController.search); // 品牌搜索页
+router.get('/brands/getBrandList', brandController.brandList); // 获取品牌列表
 router.post('/brands/searchAsync', brandController.searchAsync); // 品牌搜索异步数据
 router.post('/brands/addBrandSearch', brandController.addBrandSearch); // 添加品牌搜索记录
 router.get('/brands/delBrandHistory', brandController.delBrandHistory); // 删除品牌搜索记录

@@ -20,7 +20,7 @@
             </a>
         </div>
     </div>
-    <div class="hide-when-loading">
+    <div>
         {{# topData}}
             {{! 头部banner}}
             {{# bannerTop}}
@@ -49,56 +49,11 @@
                 </li>
             </ul>
         </div>
-        <div class="second-level-brand">
-            {{# brandList}}
-            <div class="brand-list bar-{{@index}}">
-                <div class="title-bar">
-                    <h2 style="position: static;">{{title}}</h2>
-                </div>
-                {{# list}}
-                <p>
-                    <a href="{{url}}">{{name}}
-                        {{# isHot}}
-                        <i class="icon-hot">HOT</i>
-                        {{/ isHot}}
-                        {{# isNew}}
-                        <i class="icon-new">NEW</i>
-                        {{/ isNew}}
-                    </a>
-                </p>
-                {{/ list}}
-            </div>
-            {{/ brandList}}
 
-            {{# newBrandWall}}
-                <div class="new-brand-wall branding-wall hide">
-                    {{# list}}
-                        <div class="brand-wall-box">
-                            <a href="{{url}}">
-                                <img class="lazy" data-original="{{img}}"></img>
-                                <div class="brand-name">{{brandName}}</div>
-                            </a>
-                        </div>
-                    {{/ list}}
-                </div>
-            {{/ newBrandWall}}
-
-            {{# recommandBrandWall}}
-            <div class="recommand-brand-wall branding-wall hide">
-                {{# list}}
-                    <div class="brand-wall-box">
-                        <a href="{{url}}">
-                            <img class="lazy" data-original="{{img}}"></img>
-                            <div class="brand-name">{{brandName}}</div>
-                        </a>
-                    </div>
-                {{/ list}}
-            </div>
-            {{/ recommandBrandWall}}
+        {{!--占位: 品牌列表部分--}}
+        <div id="placeholder-brandlist">
         </div>
     </div>
-
-
     {{/channel}}
 </div>
 {{> footer-tab}}
\ No newline at end of file

+ <div class="second-level-brand">
+    {{# brandList}}
+    <div class="brand-list bar-{{@index}}">
+        <div class="title-bar">
+            <h2 style="position: static;">{{title}}</h2>
+        </div>
+        {{# list}}
+        <p>
+            <a href="{{url}}">{{name}}
+                {{# isHot}}
+                <i class="icon-hot">HOT</i>
+                {{/ isHot}}
+                {{# isNew}}
+                <i class="icon-new">NEW</i>
+                {{/ isNew}}
+            </a>
+        </p>
+        {{/ list}}
+    </div>
+    {{/ brandList}}
+
+    {{# newBrandWall}}
+        <div class="new-brand-wall branding-wall hide">
+            {{# list}}
+                <div class="brand-wall-box">
+                    <a href="{{url}}">
+                        <img class="lazy" data-original="{{img}}"></img>
+                        <div class="brand-name">{{brandName}}</div>
+                    </a>
+                </div>
+            {{/ list}}
+        </div>
+    {{/ newBrandWall}}
+
+    {{# recommandBrandWall}}
+    <div class="recommand-brand-wall branding-wall hide">
+        {{# list}}
+            <div class="brand-wall-box">
+                <a href="{{url}}">
+                    <img class="lazy" data-original="{{img}}"></img>
+                    <div class="brand-name">{{brandName}}</div>
+                </a>
+            </div>
+        {{/ list}}
+    </div>
+    {{/ recommandBrandWall}}
+</div>
\ No newline at end of file

@@ -3,64 +3,77 @@
  * @author: liangzhifeng<zhifeng.liang@yoho.cn>
  * @date: 2015/10/23
  */
+require('../../scss/channel/_brand.css');
 
 var $ = require('yoho-jquery'),
-    Hammer = require('yoho-hammer'),
+    Hammer = require('../common/toy-hammer'),
     Swiper = require('yoho-swiper'),
-    loading = require('../plugin/loading'),
     lazyLoad = require('yoho-jquery-lazyload');
 
 var ranToken = ' ??++ ';
 var ranToken2 = ' ???--- ';
 
-var swiper,
-    $fixTitleBar,
-    $brandList = $('.brand-list'),
+var $brandList,
+    $newBrandWall,
+    $recommandBrandWall,
     $icon = $('.search-icon'),
     $genderItem = $('.genderNav li'),
     $brandItem = $('.brandNav li'),
-    $newBrandWall = $('.new-brand-wall'),
-    $recommandBrandWall = $('.recommand-brand-wall'),
     $searchAction = $('.search-action'),
     $homebuttom = $('.homebuttom'),
-    $genderNav = $('.genderNav'),
     $newSearch = $('.newbrand-search'),
     $netHistory = $('.net-history'),
-    $navBtn = $('.nav-home'),
-    hotBrandsSwiper;
-
-var searchH = $('.newbrand-search').outerHeight(),
-    headerH = $('.yoho-header').outerHeight(),
-    brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
-    minBrandListTop;
+    $searchResult = $('.search-result'),
+    $navBtn = $('.nav-home');
 
 var brandsData,
-    $keyword = $('#keyword'),
-    clearTextHammer;
+    $keyword = $('#keyword');
 
 var $history = $('.local-history');
 var $searchPage = $('.search-brand-page');
 var $historySearch = $('.history-search');
 var $hotSearch = $('.hot-search');
-
 var $clearHistory = $('#clear-history');
-
-var chHammer;
+var isSearchPage = $('.brand-search-page').length > 0;
 
 require('../common');
 require('../footer');
 
+function getBrandList() {
+    var listHbs = require('channel/brandlist.hbs');
+
+    $.ajax({
+        url: '/brands/getBrandList',
+        data: {
+            channel: window.queryString.channel
+        },
+        success: function(data) {
+            $('#placeholder-brandlist').replaceWith(listHbs(data));
+
+            lazyLoad($('img.lazy'));
+
+            // 改变背景色
+            changeBackground();
+
+            $brandList = $('.brand-list');
+            $newBrandWall = $('.new-brand-wall');
+            $recommandBrandWall = $('.recommand-brand-wall');
+        },
+        error: function() {
+        }
+    });
+}
+
 function changeBackground() {
-    var $brandList = $('.brand-list').find('p');
+    var brandList = $('.brand-list').find('p');
 
-    $brandList.on('touchstart', function() {
-        $brandList.css('background', '#fff');
+    brandList.on('touchstart', function() {
+        brandList.css('background', '#fff');
         $(this).css('background', '#eee');
     }).on('touchend touchcancel', function() {
         $(this).css('background', '#fff');
     });
 }
-changeBackground();
 
 /**
  * 增加单条记录
@@ -70,7 +83,7 @@ function addHistory(brandName) {
         type: 'POST',
         url: '/brands/addBrandSearch',
         data: 'brandName=' + encodeURIComponent(brandName),
-        success: function(data) {
+        success: function() {
         },
         error: function() {
         }
@@ -91,15 +104,16 @@ function sequence(a, b) {
 function searchInput() {
     if ($keyword.val().length) {
         $icon.css('color', '#444');
+        $searchResult.css('margin-bottom', '6rem');
 
         // $(this).closest('.search-box').css('width', '11.25rem');
         $searchAction.show().find('.clear-text').show();
     } else {
         $icon.css('color', '#b2b2b2');
+        $searchResult.css('margin-bottom', '0');
 
         // $(this).closest('.search-box').css('width', '12.5rem');
         $searchAction.find('.clear-text').hide();
-
     }
     searchResult();
 }
@@ -241,47 +255,20 @@ function searchResult() {
     }
 
     // 插入 dom，绑定事件
-    $('.search-result').html(html);
+    $searchResult.html(html);
     changeBackground();
     bindWriteLocal($('.brand-list'), true);
 }
 
-loading.showLoadingMask();
-
-lazyLoad($('img.lazy'));
-$('.yoho-header').css({
-    'z-index': 2,
-    position: 'fixed',
-    top: 0
-});
-
-$homebuttom.css('top', '47px');
-$homebuttom.css('position', 'fixed');
-
-$navBtn.on('touchstart', function() {
-    if ($homebuttom.hasClass('hide')) {
-        $genderNav.css('top', '47px');
-        $newSearch.css('margin-top', '0px');
-        $searchPage.css('margin-top', '0px');
-        $('.banner-top').css('margin-top', '0px');
-    } else {
-        $genderNav.css('top', '97px');
-        $newSearch.css('margin-top', '47px');
-        $searchPage.css('margin-top', '47px');
-        $('.banner-top').css('margin-top', '47px');
-    }
-});
-
 (function() {
-    if ($('.banner-top').length > 0) {
-        $('.hot-brands').css('padding-top', '0');
+    if ($('.banner-top').length === 0) {
+        var h1 = $('.genderNav').height();
+        var h2 = $('.newbrand-search').height();
+        $('.hot-brands').css('padding-top', (h1 + h2) + 'px');
     }
 
-    $('.hide-when-loading').show();
-    loading.hideLoadingMask();
-
     // banner滑动
-    swiper = new Swiper('.swiper-container', {
+    new Swiper('.swiper-container', {
         lazyLoading: true,
         loop: true,
         autoplay: 3000,
@@ -289,60 +276,67 @@ $navBtn.on('touchstart', function() {
     });
 
     // 热门品牌滑动
-    hotBrandsSwiper = new Swiper('.brands-swiper', {
+    new Swiper('.brands-swiper', {
         grabCursor: true,
         slidesPerView: 'auto',
         wrapperClass: 'brands-list',
         slideElement: 'li'
     });
-}());
 
-$fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
-$fixTitleBar.css({
-    position: 'fixed',
-    top: brandSwipe
-}).hide();
-minBrandListTop = brandSwipe + $('.hot-brands').outerHeight() + $('.banner-top').outerHeight();
-$brandList.last().append($fixTitleBar);
+    $genderItem.on('touchstart', function() {
+        var index = $(this).data('id') + 1;
+        window.location.search = 'channel=' + index;
+    });
 
-function scrollHandler() {
-    var scrTop = $(window).scrollTop();
+    $brandItem.on('click', function() {
+        var index = $(this).data('id');
+        $('.brandNav ul .active').removeClass('active');
+        $(this).addClass('active');
+        if (index === 0) {
+            $recommandBrandWall.not('.hide').addClass('hide');
+            $newBrandWall.not('.hide').addClass('hide');
+            $brandList.removeClass('hide');
+        } else if (index === 1) {
+            $newBrandWall.removeClass('hide');
+            $brandList.not('.hide').addClass('hide');
+            $recommandBrandWall.not('.hide').addClass('hide');
+        } else {
+            $recommandBrandWall.removeClass('hide');
+            $brandList.not('.hide').addClass('hide');
+            $newBrandWall.not('.hide').addClass('hide');
+        }
+    });
 
-    if ($brandList.eq(0).offset().top < minBrandListTop) {
-        $fixTitleBar.hide();
+    if (!isSearchPage) {
+        setTimeout(getBrandList, 50);
     }
+}());
 
-    $brandList.each(function() {
-        var offTop = $(this).offset().top - brandSwipe;
-
-        if (scrTop >= offTop) {
-            $fixTitleBar.css({
-                display: 'block'
-            }).find('h2').html($(this).find('.title-bar').text());
-        }
-
+// 搜索页面
+if (isSearchPage) {
+    $('.yoho-header').css({
+        'z-index': 2,
+        position: 'fixed',
+        top: 0
     });
-}
 
-if ($('.brand-index-page').length > 0) {
-    /**
-     * srcoll to load more
-     */
-    $(window).scroll(function() {
-        window.requestAnimationFrame(scrollHandler);
+    $homebuttom.css('top', '45px');
+    $homebuttom.css('position', 'fixed');
+    $navBtn.on('touchstart', function() {
+        if ($homebuttom.hasClass('hide')) {
+            $searchResult.css('margin-top', '0px');
+            $newSearch.css('margin-top', '0px');
+            $searchPage.css('margin-top', '0px');
+        } else {
+            $searchResult.css('margin-top', '45px');
+            $newSearch.css('margin-top', '45px');
+            $searchPage.css('margin-top', '45px');
+        }
     });
-}
-
 
-if ($('.history-search').length > 0) {
-    bindWriteLocal($('.history-search'), false);
-}
-
-if ($('.hot-search').length > 0) {
-    bindWriteLocal($('.hot-search'), false);
-}
+    bindWriteLocal($historySearch, false);
+    bindWriteLocal($hotSearch, false);
 
-if ($('.brand-search-page').length > 0) {
     brandsData = $.parseJSON($('#brands-data').html());
 
     $keyword.on('input', function() {
@@ -354,86 +348,35 @@ if ($('.brand-search-page').length > 0) {
     $keyword.closest('.search-box').css('width', '13rem');
     $searchAction.show().find('.clear-text').hide();
 
-    clearTextHammer = new Hammer($('.clear-text')[0]);
+    var clearTextHammer = new Hammer($('.clear-text')[0]);
     clearTextHammer.on('tap', function(e) {
-        $('.search-result').html('');
+        $searchResult.html('');
         $('#keyword').val('').trigger('input');
-        e.preventDefault();
+        e.srcEvent.preventDefault();
         e.srcEvent.stopPropagation();
     });
 
     $('form.search-box').on('submit', function() {
         return false;
     });
-
 }
 
-if ($genderItem.length > 0) {
-    $genderItem.on('touchstart', function() {
-        var index = $(this).data('id') + 1;
-
-        $('.genderNav ul .active').removeClass('active');
-        $(this).addClass('active');
-        $('.hide-when-loading').hide();
-        loading.showLoadingMask();
-        function reload() {
-            window.location.search = 'channel=' + index;
-        }
-        setTimeout(reload.bind(this), 100);
-    });
-}
-
-if ($brandItem.length > 0) {
-    $brandItem.on('click', function() {
-        var index = $(this).data('id');
-
-        $('.brandNav ul .active').removeClass('active');
-        $(this).addClass('active');
-
-
-        if (index === 0) {
-
-            $recommandBrandWall.not('.hide').addClass('hide');
-            $newBrandWall.not('.hide').addClass('hide');
-            $brandList.removeClass('hide');
-
-        } else if (index === 1) {
-
-            $newBrandWall.removeClass('hide');
-            $brandList.not('.hide').addClass('hide');
-            $recommandBrandWall.not('.hide').addClass('hide');
-
-        } else {
-
-            $recommandBrandWall.removeClass('hide');
-            $brandList.not('.hide').addClass('hide');
-            $newBrandWall.not('.hide').addClass('hide');
-
-        }
-
-    });
-}
-
-/**
- * 清除记录
- */
-function removeHistory() {
-    $.ajax({
-        type: 'GET',
-        url: '/brands/delBrandHistory',
-        data: '',
-        success: function(data) {
-        },
-        error: function() {
+// 初始化历史搜索的内容
+if (isSearchPage) {
+    require('./brand-render')(function() {
+        // 清除记录
+        function removeHistory() {
+            $.ajax({
+                type: 'GET',
+                url: '/brands/delBrandHistory',
+                data: '',
+                success: function() {},
+                error: function() {}
+            });
         }
-    });
-}
 
-// 初始化历史搜索的内容
-require('./brand-render')(function() {
-    $netHistory = $('.net-history');
-    if ($('.brand-search-page').length > 0) {
-        chHammer = new Hammer($clearHistory[0]);
+        $netHistory = $('.net-history');
+        var chHammer = new Hammer($clearHistory[0]);
         chHammer.on('tap', function() {
             if (isLocalStorageSupported()) {
                 localStorage.removeItem('historys-brand');
@@ -450,7 +393,6 @@ require('./brand-render')(function() {
         });
 
         // 搜索页面
-
         (function() {
             var html = '',
                 history,
@@ -465,7 +407,6 @@ require('./brand-render')(function() {
             netArr = [];
 
             $netHistory.find('li').each(function() {
-
                 brand = $(this).find('a').attr('brandName');
                 time = $(this).find('a').attr('collectTime');
                 dict = {
@@ -568,9 +509,6 @@ require('./brand-render')(function() {
             } else {
                 $history.addClass('hide');
             }
-
         }());
-
-    }
-});
-
+    });
+}

 @import "search";
+@import "floor-header";
+@import "footer-tab";
+@import "hot-brands";
+@import "../layout/_swiper.css";
 .brand-page {
     .re-pos-search {
         top: 80px !important;
     }
 
-    .hide-when-loading {
-        display: none;
+    .banner-top {
+        position: relative;
+        margin-bottom: -2PX;
+
+        .swiper-pagination {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 20px;
+          text-align: center;
+          z-index: 1;
+
+          .pagination-inner {
+            display: inline-block;
+            padding: 0 8px 4px;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 50px;
+            line-height: 1.2;
+
+            span {
+              display: inline-block;
+              width: 14px;
+              height: 14px;
+              background: #fff;
+              opacity: 0.5;
+              margin: 0 9px;
+              border-radius: 50%;
+
+              &.swiper-pagination-bullet-active {
+                background: #fff;
+                opacity: 1;
+              }
+            }
+          }
+        }
     }
 
     .genderNav {
@@ -212,13 +249,17 @@
         }
     }
 
+    .second-level-brand {
+        overflow: hidden;
+        margin-bottom: 100px;
+    }
+
     .banner-top {
         padding-top: 168px;
         background-color: #f8f8f8;
     }
 
     .hot-brands {
-        padding-top: 178px;
         border-top: 30px solid #f4f4f4;
 
         .floor-header {
@@ -371,7 +412,7 @@
         padding-top: 178px;
 
         &.wechat {
-            padding-top: 88px;            
+            padding-top: 88px;
         }
     }
 }