cate

+/**
+ * 分类页面
+ */
+'use strict';
+const cateModel = require('../models/cate');
+const helpers = global.yoho.helpers;
+
+let index = (req, res, next) => {
+    let channel = req.yoho.channel;
+
+    // 根据频道设置默认的焦点
+    // if (!empty($classes)) {
+    //     $classes[$channel - 1]['focus'] = true;
+    // }
+    cateModel.getCateData().then((result) => {
+        console.log(result);
+        res.render('cate', {
+            module: 'channel',
+            page: 'cate',
+            title: '商品分类',
+            category: {
+                cate: {},
+                searchUrl: helpers.urlFormat('/search', null, 'search')
+            }
+        });
+    }).catch(next);
+};
+
+module.exports = {
+    index
+};

+/**
+ * 分类页面 model
+ * @author: Bi Kai<kai.bi@yoho.cn>
+ * @date: 2016/07/06
+ */
+'use strict';
+
+const api = global.yoho.API;
+
+let getCateData = () => {
+    return api.get('', {
+        method: 'app.sort.get'
+    }, {
+        cache: true
+    });
+};
+
+module.exports = {
+    getCateData
+};

@@ -9,6 +9,7 @@
 const express = require('express');
 const cRoot = './controllers';
 const channel = require(cRoot);
+const cate = require(cRoot + '/cate');
 
 const router = express.Router(); // eslint-disable-line
 
@@ -20,4 +21,6 @@ router.get('/lifestyle', channel.switchChannel, channel.lifestyle);
 
 router.get('/channel/bottomBanner', channel.bottomBanner);
 
+router.get('/cate', cate.index);
+
 module.exports = router;

+test

@@ -47,6 +47,8 @@
             <script src="//cdn.yoho.cn/m-yohobuy-node/{{version}}/libs.js"></script>
             <script src="//cdn.yoho.cn/m-yohobuy-node/{{version}}/{{module}}.{{page}}.js"></script>
         {{/if}}
+        {{#unless devEnv}}
         {{> analysis}}
+        {{/unless}}
     </body>
 </html>

+/**
+ * 分类
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/14
+ */
+
+var $ = require('yoho-jquery');
+
+var $nav = $('.category-nav'),
+    $categoryContainer = $('.category-container'),
+    $contents = $categoryContainer.children('.content'),
+    $subLevelItem = $categoryContainer.find('.sub-level li'),
+    $primaryItem = $categoryContainer.find('.primary-level li');
+
+var $curContent = $contents.not('.hide');
+
+(function() {
+    var $header = $('.yoho-header'),
+        $search = $('#search-input');
+
+    var h = $(window).height() - $header.outerHeight() - $search.outerHeight() - $nav.outerHeight();
+
+    $categoryContainer.css('min-height', h);
+
+    $contents.height(h);
+}());
+
+$('#search-input').focus(function() {
+    $(this).blur();
+});
+$nav.bind('contextmenu', function() {
+    return false;
+});
+$('.category-container').bind('contextmenu', function() {
+    return false;
+});
+
+$nav.on('touchend touchcancel', function(e) {
+    var $this = $(e.target).closest('li'),
+        index = $this.index();
+
+    if ($this.hasClass('focus')) {
+        return;
+    }
+
+    $nav.find('li.focus').removeClass('focus');
+    $this.addClass('focus');
+
+    $curContent.addClass('hide');
+    $curContent = $contents.eq(index).removeClass('hide');
+});
+
+$categoryContainer.on('touchend', function(e) {
+    var $this = $(e.target),
+        $subLevel,
+        $cur, index;
+
+    $cur = $this.closest('.p-level-item');
+    if ($cur.length > 0) {
+        index = $cur.index();
+        $subLevel = $this.closest('.content').find('.sub-level');
+
+        if ($this.hasClass('focus')) {
+            return;
+        }
+
+        $this.closest('.primary-level').children('.focus').removeClass('focus');
+        $this.addClass('focus');
+
+        $subLevel.not('.hide').addClass('hide');
+        $subLevel.eq(index).removeClass('hide');
+    }
+});
+
+$categoryContainer.find('.primary-level').on('touchstart touchend touchcancel', 'li', function() {
+    $primaryItem.removeClass('highlight');
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', 'li', function() {
+    $(this).removeClass('highlight');
+});
+
+$categoryContainer.find('.sub-level').on('touchstart', 'li', function() {
+    $subLevelItem.removeClass('highlight');
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', 'li', function() {
+    $(this).removeClass('highlight');
+});
+
+$nav.on('touchstart', 'li', function() {
+    $nav.find('li').removeClass('bytouch');
+    $(this).addClass('bytouch');
+}).on('touchend touchcancel', 'li', function() {
+    $nav.find('li').removeClass('bytouch');
+});

+.category-page {
+    font-size: 30px;
+
+    .search-input {
+        position: relative;
+        background-color: #f8f8f8;
+        padding: 13px 20px;
+
+        p {
+            box-sizing: border-box;
+            width: 100%;
+            height: 60px;
+            line-height: 60px;
+            border: none;
+            padding-left: 66px;
+            border-radius: 60px;
+            font-size: 26px;
+            background: #fff;
+            color: #999;
+        }
+    }
+
+    .search-icon {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 43px;
+        line-height: 86px;
+        color: #999;
+    }
+
+    .category-nav {
+        height: 70px;
+        border-bottom: 1px solid #e6e6e6;
+
+        li {
+            display: block;
+            box-sizing: border-box;
+            float: left;
+            height: 100%;
+            padding: 20px 0;
+            width: 25%;
+            text-align: center;
+            color: #999;
+
+            &:last-child {
+                border-right: none;
+            }
+
+            &.focus {
+                color: #000;
+            }
+
+            &.bytouch{
+                background:#eee;
+            }
+        }
+
+
+
+        span {
+            display: block;
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            font-size: 30px;
+            border-right: 1px solid #e6e6e6;
+        }
+
+        li:last-child span {
+            border-right: 0;
+        }
+    }
+
+    .content {
+        background: #f8f8f8;
+
+        &.hide {
+            display: none;
+        }
+    }
+
+    .primary-level {
+        float: left;
+        box-sizing: border-box;
+        width: 45%;
+
+        > li {
+            height: 89px;
+            line-height: 89px;
+            padding: 0 32px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &.focus {
+                background-color: #fff;
+            }
+
+            &.highlight {
+                background-color: #eee;
+            }
+        }
+    }
+
+    .sub-level-container {
+        float: left;
+        box-sizing: border-box;
+        background: #fff;
+        width: 55%;
+        height: 100%;
+    }
+
+    .sub-level {
+        width: 100%;
+
+        &.hide {
+            display: none;
+        }
+
+        > li {
+            box-sizing: border-box;
+            height: 89px;
+            line-height: 89px;
+            border-bottom: 1px solid #e6e6e6;
+            padding-left: 20px;
+
+            &.highlight {
+                background: #eee;
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        a {
+            display: block;
+            height: 100%;
+            width: 100%;
+            color: #000;
+        }
+    }
+}

@@ -21,6 +21,7 @@
 @import "notice";
 @import "fresh-only";
 @import "coupon";
+@import "cate";
 
 .mobile-container {
     margin-left: auto;