对接店铺前端页面

@@ -2,8 +2,8 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Thu Mar 24 15:08:07 2016
- By Ads
+Created by FontForge 20120731 at Fri Apr 22 09:51:41 2016
+ By admin
 </metadata>
 <defs>
 <font id="iconfont" horiz-adv-x="1024" >
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Mar 24 15:08:07 2016
     bbox="-0.75 -224 3943 896"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E647"
+    unicode-range="U+0078-E649"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -260,5 +260,11 @@ t39 -192.5t-39 -192.5t-105.5 -158t-158 -105.5t-192.5 -39t-192.5 39t-158 105.5t-1
     <glyph glyph-name="uniE647" unicode="&#xe647;" 
 d="M512 -92q-97 0 -185 37.5t-152 101.5t-101.5 152t-37.5 185t37.5 185t101.5 152t152 101.5t185 37.5t185 -37.5t152 -101.5t101.5 -152t37.5 -185t-37.5 -185t-101.5 -152t-152 -101.5t-185 -37.5zM512 828q-90 0 -172.5 -35t-142 -94.5t-94.5 -142t-35 -172.5t35 -172.5
 t94.5 -142t142 -94.5t172.5 -35t172.5 35t142 94.5t94.5 142t35 172.5t-35 172.5t-94.5 142t-142 94.5t-172.5 35z" />
+    <glyph glyph-name="uniE648" unicode="&#xe648;" 
+d="M512 798q-101 0 -193.5 -39.5t-159 -106t-106 -159t-39.5 -193.5t39.5 -193.5t106 -159t159 -106t193.5 -39.5t193.5 39.5t159 106t106 159t39.5 193.5t-39.5 193.5t-106 159t-159 106t-193.5 39.5zM512 -166q-95 0 -181 37t-148.5 99.5t-99.5 148.5t-37 181t37 181
+t99.5 148.5t148.5 99.5t181 37t181 -37t148.5 -99.5t99.5 -148.5t37 -181t-37 -181t-99.5 -148.5t-148.5 -99.5t-181 -37zM420 133l-156 155l-22 -22l178 -179l361 361l-23 23z" />
+    <glyph glyph-name="uniE649" unicode="&#xe649;" 
+d="M875 126l-363 -164l-363 164v610q247 75 363 75t363 -75v-610zM930 808q-34 11 -84.5 26t-159.5 38.5t-174 23.5t-174 -23.5t-159.5 -38.5t-84.5 -26q-14 -4 -22 -15.5t-8 -25.5v-669q0 -27 25 -39l405 -183q9 -3 18 -3t18 3l405 183q25 12 25 39v669q0 14 -8 25.5
+t-22 15.5zM751 552v83h-473v-83h206v-298h-72v237h-87v-237h-66v-84h506v84h-193v119h151v83h-151v96h179z" />
   </font>
 </defs></svg>

@@ -10,4 +10,5 @@ require('./list');
 require('./detail/detail');
 require('./detail/consultform');
 require('./newsale/hot-rank');
+require('./product-category');
 

+/**
+ * 分类
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/14
+ */
+
+var $ = require('jquery');
+
+var $categoryContainer = $('.category-container'),
+    $contents = $categoryContainer.children('.content'),
+    $subLevelItem = $categoryContainer.find('.sub-level  li'),
+    $primaryItem = $categoryContainer.find('.primary-level li');
+
+
+var $curContent = $contents.not('.hide');
+
+//初始化container高度
+(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);
+}());
+
+$('.category-container').bind('contextmenu', function(e) {
+    return false;
+});
+
+$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');
+});
\ No newline at end of file

@@ -160,3 +160,4 @@ a {
 @import "index/index";
 @import "cart/index";
 @import "me/index"; //个人中心
+@import "shop/index";

+@import "product-category", "shop-prodfile";
\ No newline at end of file

+.product-category {
+    font-size: 30rem / $pxConvertRem;
+
+    .category-nav {
+        height: 70rem / $pxConvertRem;
+        border-bottom: 1px solid #e6e6e6;
+
+        li {
+            display: block;
+            box-sizing: border-box;
+            float: left;
+            height: 100%;
+            padding: 20rem / $pxConvertRem 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: 30rem / $pxConvertRem;
+            line-height: 30rem / $pxConvertRem;
+            font-size: 30rem / $pxConvertRem;
+            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: 100%;
+        position: absolute;
+        > li {
+            height: 89rem / $pxConvertRem;
+            line-height: 89rem / $pxConvertRem;
+            padding-left: 32rem / $pxConvertRem;
+            box-sizing: border-box;
+            border-bottom: 1px solid #e6e6e6;
+
+            &.focus {
+                background-color: #fff;
+            }
+
+            &.highlight {
+                background-color: #eee;
+            }
+        }
+    }
+
+    .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: 89rem / $pxConvertRem;
+            line-height: 89rem / $pxConvertRem;
+            border-bottom: 1px solid #e6e6e6;
+            padding-left: 2rem / $pxConvertRem;
+            //border-left: 50rem / $pxConvertRem;
+            margin-left: 30rem / $pxConvertRem;
+
+            &.highlight {
+                background: #dbdbdb;
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        a {
+            display: block;
+            height: 100%;
+            width: 100%;
+            color: #afafaf;
+        }
+    }
+}
\ No newline at end of file

+.banner {
+    margin: 30px auto;
+    width: auto;
+    height: auto;
+    display: block;
+    background-size: 100%;
+}
+
+.descripition {
+    margin: 40px 20px 0px 20px;
+    font-size: 16px;
+    line-height: 22px;
+    padding: 20px 0;
+    border-top: 1px solid #e6e6e6;
+    border-bottom: 1px solid #e6e6e6;
+    text-indent:2em;
+}
+
+.fo {
+    font-size: 20px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    font-weight: 100;
+}
+
+.fo > span {
+    width:auto;
+}
\ No newline at end of file

+{{> layout/header}}
+<div class="discount-page yoho-page">
+       <ul id="list-nav" class="list-nav clearfix">
+        <li class="new active">
+            <a href="javascript:void(0);">
+                <span class="spanTest">最新</span>
+                <span class="iconfont cur">&#xe616;</span>
+            </a>
+        </li>
+        <li class="price">
+            <a href="javascript:void(0);">
+                <span class="spanTest">价格</span>
+                <span class="icon">
+                    <i class="iconfont up cur">&#xe615;</i>
+                    <i class="iconfont down">&#xe616;</i>
+                </span>
+            </a>
+        </li>
+        <li class="discount">
+            <a href="javascript:void(0);">
+                <span class="spanTest">折扣</span>
+                <span class="icon">
+                    <i class="iconfont up cur">&#xe615;</i>
+                    <i class="iconfont down">&#xe616;</i>
+                </span>
+            </a>
+        </li>
+        <li class="filter">
+            <a href="javascript:void(0);">
+                <span class="spanTest">筛选</span>
+                <span class="iconfont cur">&#xe613;</span>
+            </a>
+        </li>
+    </ul>
+
+    <div id="goods-container" class="goods-container">
+        <div class="new-goods container clearfix">
+            {{# goods}}
+                {{> good}}
+            {{/ goods}}
+        </div>
+        <div class="price-goods container hide clearfix"></div>
+        <div class="discount-goods container hide clearfix"></div>
+
+        {{> filter}}
+    </div>
+
+    {{> product/query-param}}
+
+</div>
+{{> layout/footer}}
+

-<div>HH</div>
\ No newline at end of file
+{{> layout/header}}
+<style>
+    .allproduct {
+        position: relative;
+        padding: 15px 0px;
+        background: #f8f8f8;
+        border-top: 15px;
+        border-bottom: 15px;
+    }
+
+    .arrow-icon {
+        position: absolute;
+        font-size: 12px;
+        top: 15px;
+        right: 20px;
+    }
+
+    .allproductParagaraph {
+        font-size: 18px;
+        left: 20px;
+    }
+</style>
+
+
+
+<div class="product-category yoho-page">
+
+    <div id="allproduct" class="allproduct">
+        <a href={{allproduct}}>
+        <p class="allproductParagaraph">全部商品</p>
+        <i class="arrow-icon iconfont">&#xe614;</i>
+        </a>
+    </div>
+    <div class="category-container clearfix">
+        <div class="content">
+            {{# content}}
+            <ul class="primary-level">
+                {{# class}}
+                <li class="p-level-item{{#if @first}} focus{{/if}}">{{name}}</li>
+                {{/ class}}
+
+            </ul>
+            <div class="sub-level-container">
+                {{# category}}
+                <ul class="sub-level">
+                    {{# subcategory}}
+                    <li>
+                        <a href={{url}}>
+                        {{name}}
+                        </a>
+                    </li>
+                    {{/ subcategory}}
+                </ul>
+                {{/ category}}
+            </div>
+        {{/ content}}
+    </div>
+</div>
+
+</div>
+{{> layout/footer}}
\ No newline at end of file

-<div>你好</div>
\ No newline at end of file
+{{> layout/header}}
+<div>
+    <a class="banner">
+        <img src="{{content.shop_logo}}">
+    </a>
+
+    <div class="descripition">
+        {{content.shop_intro}}
+    </div>
+
+    <p class="fo">
+        <span class="iconfont">&#xe649;</span>
+        100%品牌授权正品
+    </p>
+</div>
+{{> layout/footer}}
\ No newline at end of file

@@ -341,3 +341,9 @@
 </script>
 {{/if}}
 
+{{!-- 品牌分类 --}}
+{{#if productCategoryPage}}
+<script>
+    seajs.use('js/prodcut/product-category');
+</script>
+{{/if}}
\ No newline at end of file

@@ -43,18 +43,23 @@ class IndexController extends AbstractAction
         if (empty($requestData['shopId'])) {
             $this->go(SITE_MAIN);
         }
-        $result = array();
-        $resource = array();
-        $resource['category'] = ShopData::getShopCategory($requestData['shopId'], Helpers::getChannelByCookie(), Helpers::getGenderByCookie());
-        $resource['brands'] = ShopData::getShopBrands($requestData['shopId']);
-        if($resource['category']['code'] === 200){
-            $result['category'] = $resource['category']['data'];
-        }
-        if($resource['brands']['code'] === 200){
-            $result['brands'] = $resource['brands']['data'];
-        }
-        ShopData::debugOut($result);
+//        $result = array();
+//        $resource = array();
+//        $resource['category'] = ShopData::getShopCategory($requestData['shopId'], Helpers::getChannelByCookie(), Helpers::getGenderByCookie());
+//        $resource['brands'] = ShopData::getShopBrands($requestData['shopId']);
+//        if ($resource['category']['code'] === 200) {
+//            $result['category'] = $resource['category']['data'];
+//        }
+//        if ($resource['brands']['code'] === 200) {
+//            $result['brands'] = $resource['brands']['data'];
+//        }
+        //$result = array();
+        // 假数据
+        $result = $this->getCategoryContent();
+//        ShopData::debugOut($result);
+        //$result2 = IntroData::getShopIntro(356);
         return $this->_view->display('category', array(
+            'productCategoryPage' => true,
             'content' => $result,
         ));
     }
@@ -92,6 +97,88 @@ class IndexController extends AbstractAction
     public function getCategoryContent()
     {
         return array(// 数据模拟
+            'class' => array(
+                array(
+                    'name' => '上衣',
+                ),
+                array(
+                    'name' => '裤装',
+                ),
+                array(
+                    'name' => '鞋靴',
+                ),
+                array(
+                    'name' => '包类',
+                )
+            ),
+            'category' => array(
+                array(
+                    'subcategory' => array(
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '上衣衣1'
+                        ),
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '上衣衣2'
+                        ),
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '上衣衣3'
+                        ),
+
+                    )
+                ),
+                array(
+                    'subcategory' => array(
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '裤装1'
+                        ),
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '裤装2'
+                        ),
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '裤装3'
+                        ),
+                    )
+                ),
+                array(
+                    'subcategory' => array(
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '鞋靴1'
+                        ),
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '鞋靴2'
+                        ),
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '鞋靴3'
+                        )
+                    )
+                ),
+                array(
+                    'subcategory' => array(
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '包类1'
+                        ),
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '包类2'
+                        ),
+                        array(
+                            'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
+                            'name' => '包类3'
+                        )
+                    )
+                )
+
+            )
         );
     }