'shop-category'

@@ -351,6 +351,30 @@ const favoriteBrand = (req, res, next) => {
     }
     }
 };
 };
 
 
+/**
+ * 店铺品类页面
+ * @param req
+ * @param res
+ * @param next
+ */
+const shopCategory = (req, res, next) => {
+
+    listModel.getShopCategory({
+        shopId: req.query.shop_id,
+        channel: req.yoho.channel,
+        gender: req.query.gender || '1,3'
+    }).then(result => {
+        res.render('shop/category', {
+            content: result,
+            module: 'product',
+            page: 'category',
+            pageHeader: headerModel.setNav({
+                navTitle: '品类'
+            }),
+        });
+    }).catch(next);
+};
+
 module.exports = {
 module.exports = {
     category,
     category,
     brand,
     brand,
@@ -362,4 +386,5 @@ module.exports = {
     shopAppCookie,
     shopAppCookie,
     shopFav,
     shopFav,
     baseShopFav,
     baseShopFav,
+    shopCategory
 };
 };

@@ -119,12 +119,13 @@ const _getShopInfo = (shopId, uid) => {
  * @param {string} channel 频道
  * @param {string} channel 频道
  * @return array
  * @return array
  */
  */
-const _getShopCategory = (shopId, channel) => {
+const _getShopCategory = (shopId, channel, gender) => {
     return api.get('', {
     return api.get('', {
         method: 'app.shop.getSortInfo',
         method: 'app.shop.getSortInfo',
         yh_channel: channel,
         yh_channel: channel,
+        gender: gender || '1,3',
         shop_id: shopId
         shop_id: shopId
-    }).then((result) => {
+    }).then(result => {
         if (result && result.code === 200) {
         if (result && result.code === 200) {
             return camelCase(result.data);
             return camelCase(result.data);
         } else {
         } else {
@@ -652,6 +653,47 @@ const getShopIntro = (shopId) => {
     });
     });
 };
 };
 
 
+/**
+ * 处理店铺品类
+ * @param params
+ */
+const getShopCategory = (params) => {
+    let finalResult = {
+        class: [],
+        category: []
+    };
+
+    return _getShopCategory(params.shopId, params.channel, params.gender).then(result => {
+        let resultCopy  = _.cloneDeep(result);
+
+        _.forEach(resultCopy, value => {
+            finalResult.class.push({
+                name: value.categoryName
+            });
+
+            _.forEach(value.sub, (subValue, subKey) => {
+                value.sub[subKey].url = helpers.urlFormat({
+                    shop: params.shopId,
+                    categoryId: value.categoryId,
+                    subCategoryId: subValue.categoryId,
+                    title: subValue.categoryName,
+                    query: subValue.categoryName
+                });
+            });
+
+            finalResult.category.push({
+                subcategory: value.sub
+            });
+        });
+
+        finalResult.allproduct = helpers.urlFormat('/search/list', {
+            shop_id: params.shopId
+        });
+
+        return finalResult;
+    });
+};
+
 module.exports = {
 module.exports = {
     getBaseShopData,
     getBaseShopData,
     getShopData,
     getShopData,
@@ -662,5 +704,6 @@ module.exports = {
     setFavorite,
     setFavorite,
     setFavoriteCancel,
     setFavoriteCancel,
     getShopIntro,
     getShopIntro,
-    getShopBrands
+    getShopBrands,
+    getShopCategory
 };
 };

@@ -100,6 +100,7 @@ router.get('/index/brandFav', list.brandFav);
 router.get('/index/shopAppCookie', list.shopAppCookie);
 router.get('/index/shopAppCookie', list.shopAppCookie);
 router.get('/index/shopFav', list.shopFav);
 router.get('/index/shopFav', list.shopFav);
 router.get('/index/baseShopFav', list.baseShopFav);
 router.get('/index/baseShopFav', list.baseShopFav);
+router.get('/index/category', list.shopCategory);
 
 
 // 店铺介绍
 // 店铺介绍
 router.get('/index/intro', list.shopIntro);
 router.get('/index/intro', list.shopIntro);

+<div class="product-category yoho-page">
+
+    <div id="allproduct" class="allproduct">
+        <a href={{allproduct}}>
+        <p class="allproductParagaraph buriedpoint" data-bp-id ="shop_category_all_1">全部商品</p>
+        <i class="arrow-icon iconfont">&#xe614;</i>
+        </a>
+    </div>
+    <div class="margin-under-allproduct">
+    </div>
+    <div class="category-container clearfix">
+        <div class="content">
+            {{# content}}
+                <ul class="primary-level">
+                    {{# class}}
+                        <li class="p-level-item buriedpoint"   data-bp-id="shop_primarylevel_{{name}}_1">{{name}}
+                            <div class="primary-level-trilangle trilanglefont hide">&#xe64a;</div>
+                        </li>
+                    {{/ class}}
+                </ul>
+                <div class="sub-level-container hide">
+                    {{# category}}
+                    <ul class="sub-level">
+                        {{# subcategory}}
+                        <li class="buriedpoint" data-bp-id="shop_sublevel_{{categoryName}}_1">
+                            <a href={{url}}>
+                            {{categoryName}}
+                            </a>
+                        </li>
+                        {{/ subcategory}}
+                    </ul>
+                    {{/ category}}
+                </div>
+            {{/ content}}
+        </div>
+    </div>
+</div>

@@ -22,7 +22,7 @@
 {{^}}
 {{^}}
     <div class="banner-top-single">
     <div class="banner-top-single">
         <a href={{url}}>
         <a href={{url}}>
-            <img class="img" src="{{image src 450 600}}">
+            <img class="img" src="{{image img 450 600}}">
         </a>
         </a>
     </div>
     </div>
 {{/if}}
 {{/if}}

+/**
+ * 分类
+ * @author: berry<lixia.zhang@yoho.cn>
+ * @date: 2016/4/25
+ */
+var $ = require('yoho-jquery');
+
+var $allProductCell = $('.allproduct'),
+    $categoryContainer = $('.category-container'),
+    $contents = $categoryContainer.children('.content'),
+    $subLevelItem = $categoryContainer.find('.sub-level li'),
+    $trilangle = $categoryContainer.find('.primary-level-trilangle');
+
+//初始化container高度
+(function() {
+    var $header = $('.yoho-header');
+    var h = $(window).height() - $header.outerHeight() - $allProductCell.outerHeight();
+    var trilangleRightMargin = $(window).width() * 0.55;
+
+    $categoryContainer.css('min-height', h);
+    $trilangle.css('margin-right', trilangleRightMargin);
+    $contents.height(h);
+
+}());
+
+
+$categoryContainer.on('touchend', function(e) {
+    var $this = $(e.target),
+        $subLevel,
+        $cur, index,
+        $subLevelContainer, $trilangleItem;
+
+    $cur = $this.closest('.p-level-item');
+
+    $subLevelContainer = $this.closest('.content').find('.sub-level-container');
+    $subLevelContainer.removeClass('hide');
+
+    if ($cur.length > 0) {
+        index = $cur.index();
+        $subLevel = $this.closest('.content').find('.sub-level');
+        $trilangleItem = $this.closest('.content').find('.primary-level-trilangle');
+
+        if ($this.hasClass('focus')) {
+            return;
+        }
+
+        $subLevel.not('.hide').addClass('hide');
+        $subLevel.eq(index).removeClass('hide');
+
+        $trilangleItem.not('.hide').addClass('hide');
+        $trilangleItem.eq(index).removeClass('hide');
+    }
+});
+
+$categoryContainer.find('.sub-level').on('touchstart', 'li', function() {
+    $subLevelItem.removeClass('highlight');
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', 'li', function() {
+    $(this).removeClass('highlight');
+});
+
+$allProductCell.on('touchstart', function() {
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', function() {
+    $(this).removeClass('highlight');
+});

 @import "shop-index";
 @import "shop-index";
 @import "shop-prodfile";
 @import "shop-prodfile";
+@import "product-category";

+.product-category {
+    font-size: 30px;
+    background-color: #fff;
+
+    .allproduct {
+        padding: 0px 30px;
+        display: block;
+        height: 89px;
+        line-height: 89px;
+
+        &.highlight {
+            background: #dbdbdb;
+        }
+    }
+
+    .margin-under-allproduct{
+        width: 100%;
+        height: 30px;
+        background-color: #f0f0f0;
+    }
+
+    .category-container{
+        border-top: 1px solid #e6e6e6;
+    }
+    .arrow-icon {
+        position: relative;
+        float: right;
+        font-size: 30px;
+        top: 0px;
+        color: #e1e1e1;
+        padding: 0px 10px;
+    }
+
+    .allproductParagaraph {
+        font-size: 18px;
+        left: 20px;
+    }
+
+    .content {
+        background: #fff;
+
+        &.hide {
+            display: none;
+        }
+    }
+
+    .primary-level {
+        float: left;
+        box-sizing: border-box;
+        width: 100%;
+        position: absolute;
+        > li {
+            position:relative;
+            height: 89px;
+            line-height: 89px;
+            box-sizing: border-box;
+            border-bottom: 1px solid #e6e6e6;
+            background-color: #fff;
+            margin-left: 30px;
+        }
+    }
+
+    .primary-level-trilangle{
+        float: right;
+        background: url(/product/arrow.png) no-repeat;
+        margin-top: 22px;
+        width: 20px;
+        height: 46px;
+    }
+
+    .trilanglefont {
+        font-family: "iconfont" !important;
+        font-size: 30px;
+        font-style: normal;
+        text-decoration: none;
+        -webkit-font-smoothing: antialiased;
+        -webkit-text-stroke-width: 0.2px;
+        -moz-osx-font-smoothing: grayscale;
+        color: #f4f4f4;
+    }
+
+
+    .sub-level-container {
+        float: right;
+        box-sizing: border-box;
+        background: #f4f4f4;
+        width: 55%;
+        height: 100%;
+        position: relative;
+    }
+
+    .sub-level {
+        width: 100%;
+
+        &.hide {
+            display: none;
+        }
+
+        > li {
+            box-sizing: border-box;
+            height: 89px;
+            line-height: 89px;
+            border-bottom: 1px solid #e6e6e6;
+            margin-left: 30px;
+            padding-left: 0;
+
+            &.highlight {
+                background: #dbdbdb;
+                margin-left: 0;
+                padding-left: 30px;
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        a {
+            display: block;
+            height: 100%;
+            width: 100%;
+            color: #afafaf;
+        }
+    }
+}