fe / YOHOBUYWAP · Commits

Go to a project

Authored by 郭成尧
Commit 521e074c65db8c2a5a143b4fd0291af65d75530a 2 parents a4536805 a442e145

对接店铺前端页面

Inline Side-by-side
Showing 15 changed files with 460 additions and 16 deletions
No preview for this file type
@@ -2,8 +2,8 @@ @@ -2,8 +2,8 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Thu Mar 24 15:08:07 2016  
6 - By Ads 5 +Created by FontForge 20120731 at Fri Apr 22 09:51:41 2016
  6 + By admin
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
9 <font id="iconfont" horiz-adv-x="1024" > 9 <font id="iconfont" horiz-adv-x="1024" >
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Mar 24 15:08:07 2016 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Mar 24 15:08:07 2016
19 bbox="-0.75 -224 3943 896" 19 bbox="-0.75 -224 3943 896"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E647" 22 + unicode-range="U+0078-E649"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 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 @@ -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
260 <glyph glyph-name="uniE647" unicode="&#xe647;" 260 <glyph glyph-name="uniE647" unicode="&#xe647;"
261 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 261 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
262 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" /> 262 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" />
  263 + <glyph glyph-name="uniE648" unicode="&#xe648;"
  264 +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
  265 +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" />
  266 + <glyph glyph-name="uniE649" unicode="&#xe649;"
  267 +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
  268 +t-22 15.5zM751 552v83h-473v-83h206v-298h-72v237h-87v-237h-66v-84h506v84h-193v119h151v83h-151v96h179z" />
263 </font> 269 </font>
264 </defs></svg> 270 </defs></svg>
No preview for this file type
No preview for this file type
@@ -10,4 +10,5 @@ require('./list'); @@ -10,4 +10,5 @@ require('./list');
10 require('./detail/detail'); 10 require('./detail/detail');
11 require('./detail/consultform'); 11 require('./detail/consultform');
12 require('./newsale/hot-rank'); 12 require('./newsale/hot-rank');
  13 +require('./product-category');
13 14
  1 +/**
  2 + * 分类
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/14
  5 + */
  6 +
  7 +var $ = require('jquery');
  8 +
  9 +var $categoryContainer = $('.category-container'),
  10 + $contents = $categoryContainer.children('.content'),
  11 + $subLevelItem = $categoryContainer.find('.sub-level li'),
  12 + $primaryItem = $categoryContainer.find('.primary-level li');
  13 +
  14 +
  15 +var $curContent = $contents.not('.hide');
  16 +
  17 +//初始化container高度
  18 +(function() {
  19 + var $header = $('.yoho-header'),
  20 + $search = $('#search-input');
  21 +
  22 + var h = $(window).height() - $header.outerHeight() - $search.outerHeight() - $nav.outerHeight();
  23 +
  24 + $categoryContainer.css('min-height', h);
  25 +
  26 + $contents.height(h);
  27 +}());
  28 +
  29 +$('.category-container').bind('contextmenu', function(e) {
  30 + return false;
  31 +});
  32 +
  33 +$categoryContainer.on('touchend', function(e) {
  34 + var $this = $(e.target),
  35 + $subLevel,
  36 + $cur, index;
  37 +
  38 + $cur = $this.closest('.p-level-item');
  39 + if ($cur.length > 0) {
  40 + index = $cur.index();
  41 + $subLevel = $this.closest('.content').find('.sub-level');
  42 +
  43 + if ($this.hasClass('focus')) {
  44 + return;
  45 + }
  46 +
  47 +
  48 + $this.closest('.primary-level').children('.focus').removeClass('focus');
  49 + $this.addClass('focus');
  50 +
  51 + $subLevel.not('.hide').addClass('hide');
  52 + $subLevel.eq(index).removeClass('hide');
  53 + }
  54 +});
  55 +
  56 +$categoryContainer.find('.primary-level').on('touchstart touchend touchcancel', 'li', function() {
  57 + $primaryItem.removeClass('highlight');
  58 + $(this).addClass('highlight');
  59 +}).on('touchend touchcancel', 'li', function() {
  60 + $(this).removeClass('highlight');
  61 +});
  62 +
  63 +$categoryContainer.find('.sub-level').on('touchstart', 'li', function() {
  64 + $subLevelItem.removeClass('highlight');
  65 + $(this).addClass('highlight');
  66 +}).on('touchend touchcancel', 'li', function() {
  67 + $(this).removeClass('highlight');
  68 +});
@@ -160,3 +160,4 @@ a { @@ -160,3 +160,4 @@ a {
160 @import "index/index"; 160 @import "index/index";
161 @import "cart/index"; 161 @import "cart/index";
162 @import "me/index"; //个人中心 162 @import "me/index"; //个人中心
  163 +@import "shop/index";
  1 +@import "product-category", "shop-prodfile";
  1 +.product-category {
  2 + font-size: 30rem / $pxConvertRem;
  3 +
  4 + .category-nav {
  5 + height: 70rem / $pxConvertRem;
  6 + border-bottom: 1px solid #e6e6e6;
  7 +
  8 + li {
  9 + display: block;
  10 + box-sizing: border-box;
  11 + float: left;
  12 + height: 100%;
  13 + padding: 20rem / $pxConvertRem 0;
  14 + width: 25%;
  15 + text-align: center;
  16 + color: #999;
  17 +
  18 + &:last-child {
  19 + border-right: none;
  20 + }
  21 +
  22 + &.focus {
  23 + color: #000;
  24 + }
  25 +
  26 + &.bytouch{
  27 + background:#eee;
  28 + }
  29 + }
  30 +
  31 +
  32 +
  33 + span {
  34 + display: block;
  35 + width: 100%;
  36 + height: 30rem / $pxConvertRem;
  37 + line-height: 30rem / $pxConvertRem;
  38 + font-size: 30rem / $pxConvertRem;
  39 + border-right: 1px solid #e6e6e6;
  40 + }
  41 +
  42 + li:last-child span {
  43 + border-right: 0;
  44 + }
  45 + }
  46 +
  47 + .content {
  48 + background: #f8f8f8;
  49 +
  50 + &.hide {
  51 + display: none;
  52 + }
  53 + }
  54 +
  55 + .primary-level {
  56 + float: left;
  57 + box-sizing: border-box;
  58 + width: 100%;
  59 + position: absolute;
  60 + > li {
  61 + height: 89rem / $pxConvertRem;
  62 + line-height: 89rem / $pxConvertRem;
  63 + padding-left: 32rem / $pxConvertRem;
  64 + box-sizing: border-box;
  65 + border-bottom: 1px solid #e6e6e6;
  66 +
  67 + &.focus {
  68 + background-color: #fff;
  69 + }
  70 +
  71 + &.highlight {
  72 + background-color: #eee;
  73 + }
  74 + }
  75 + }
  76 +
  77 + .sub-level-container {
  78 + float: right;
  79 + box-sizing: border-box;
  80 + background: #f4f4f4;
  81 + width: 55%;
  82 + height: 100%;
  83 + position: relative;
  84 + }
  85 +
  86 + .sub-level {
  87 + width: 100%;
  88 +
  89 + &.hide {
  90 + display: none;
  91 + }
  92 +
  93 + > li {
  94 + box-sizing: border-box;
  95 + height: 89rem / $pxConvertRem;
  96 + line-height: 89rem / $pxConvertRem;
  97 + border-bottom: 1px solid #e6e6e6;
  98 + padding-left: 2rem / $pxConvertRem;
  99 + //border-left: 50rem / $pxConvertRem;
  100 + margin-left: 30rem / $pxConvertRem;
  101 +
  102 + &.highlight {
  103 + background: #dbdbdb;
  104 + }
  105 +
  106 + &:last-child {
  107 + border-bottom: none;
  108 + }
  109 + }
  110 +
  111 + a {
  112 + display: block;
  113 + height: 100%;
  114 + width: 100%;
  115 + color: #afafaf;
  116 + }
  117 + }
  118 +}
  1 +.banner {
  2 + margin: 30px auto;
  3 + width: auto;
  4 + height: auto;
  5 + display: block;
  6 + background-size: 100%;
  7 +}
  8 +
  9 +.descripition {
  10 + margin: 40px 20px 0px 20px;
  11 + font-size: 16px;
  12 + line-height: 22px;
  13 + padding: 20px 0;
  14 + border-top: 1px solid #e6e6e6;
  15 + border-bottom: 1px solid #e6e6e6;
  16 + text-indent:2em;
  17 +}
  18 +
  19 +.fo {
  20 + font-size: 20px;
  21 + height: 40px;
  22 + line-height: 40px;
  23 + text-align: center;
  24 + font-weight: 100;
  25 +}
  26 +
  27 +.fo > span {
  28 + width:auto;
  29 +}
  1 +{{> layout/header}}
  2 +<div class="discount-page yoho-page">
  3 + <ul id="list-nav" class="list-nav clearfix">
  4 + <li class="new active">
  5 + <a href="javascript:void(0);">
  6 + <span class="spanTest">最新</span>
  7 + <span class="iconfont cur">&#xe616;</span>
  8 + </a>
  9 + </li>
  10 + <li class="price">
  11 + <a href="javascript:void(0);">
  12 + <span class="spanTest">价格</span>
  13 + <span class="icon">
  14 + <i class="iconfont up cur">&#xe615;</i>
  15 + <i class="iconfont down">&#xe616;</i>
  16 + </span>
  17 + </a>
  18 + </li>
  19 + <li class="discount">
  20 + <a href="javascript:void(0);">
  21 + <span class="spanTest">折扣</span>
  22 + <span class="icon">
  23 + <i class="iconfont up cur">&#xe615;</i>
  24 + <i class="iconfont down">&#xe616;</i>
  25 + </span>
  26 + </a>
  27 + </li>
  28 + <li class="filter">
  29 + <a href="javascript:void(0);">
  30 + <span class="spanTest">筛选</span>
  31 + <span class="iconfont cur">&#xe613;</span>
  32 + </a>
  33 + </li>
  34 + </ul>
  35 +
  36 + <div id="goods-container" class="goods-container">
  37 + <div class="new-goods container clearfix">
  38 + {{# goods}}
  39 + {{> good}}
  40 + {{/ goods}}
  41 + </div>
  42 + <div class="price-goods container hide clearfix"></div>
  43 + <div class="discount-goods container hide clearfix"></div>
  44 +
  45 + {{> filter}}
  46 + </div>
  47 +
  48 + {{> product/query-param}}
  49 +
  50 +</div>
  51 +{{> layout/footer}}
  52 +
1 -<div>HH</div>  
  1 +{{> layout/header}}
  2 +<style>
  3 + .allproduct {
  4 + position: relative;
  5 + padding: 15px 0px;
  6 + background: #f8f8f8;
  7 + border-top: 15px;
  8 + border-bottom: 15px;
  9 + }
  10 +
  11 + .arrow-icon {
  12 + position: absolute;
  13 + font-size: 12px;
  14 + top: 15px;
  15 + right: 20px;
  16 + }
  17 +
  18 + .allproductParagaraph {
  19 + font-size: 18px;
  20 + left: 20px;
  21 + }
  22 +</style>
  23 +
  24 +
  25 +
  26 +<div class="product-category yoho-page">
  27 +
  28 + <div id="allproduct" class="allproduct">
  29 + <a href={{allproduct}}>
  30 + <p class="allproductParagaraph">全部商品</p>
  31 + <i class="arrow-icon iconfont">&#xe614;</i>
  32 + </a>
  33 + </div>
  34 + <div class="category-container clearfix">
  35 + <div class="content">
  36 + {{# content}}
  37 + <ul class="primary-level">
  38 + {{# class}}
  39 + <li class="p-level-item{{#if @first}} focus{{/if}}">{{name}}</li>
  40 + {{/ class}}
  41 +
  42 + </ul>
  43 + <div class="sub-level-container">
  44 + {{# category}}
  45 + <ul class="sub-level">
  46 + {{# subcategory}}
  47 + <li>
  48 + <a href={{url}}>
  49 + {{name}}
  50 + </a>
  51 + </li>
  52 + {{/ subcategory}}
  53 + </ul>
  54 + {{/ category}}
  55 + </div>
  56 + {{/ content}}
  57 + </div>
  58 +</div>
  59 +
  60 +</div>
  61 +{{> layout/footer}}
1 -<div>你好</div>  
  1 +{{> layout/header}}
  2 +<div>
  3 + <a class="banner">
  4 + <img src="{{content.shop_logo}}">
  5 + </a>
  6 +
  7 + <div class="descripition">
  8 + {{content.shop_intro}}
  9 + </div>
  10 +
  11 + <p class="fo">
  12 + <span class="iconfont">&#xe649;</span>
  13 + 100%品牌授权正品
  14 + </p>
  15 +</div>
  16 +{{> layout/footer}}
@@ -341,3 +341,9 @@ @@ -341,3 +341,9 @@
341 </script> 341 </script>
342 {{/if}} 342 {{/if}}
343 343
  344 +{{!-- 品牌分类 --}}
  345 +{{#if productCategoryPage}}
  346 +<script>
  347 + seajs.use('js/prodcut/product-category');
  348 +</script>
  349 +{{/if}}
@@ -43,18 +43,23 @@ class IndexController extends AbstractAction @@ -43,18 +43,23 @@ class IndexController extends AbstractAction
43 if (empty($requestData['shopId'])) { 43 if (empty($requestData['shopId'])) {
44 $this->go(SITE_MAIN); 44 $this->go(SITE_MAIN);
45 } 45 }
46 - $result = array();  
47 - $resource = array();  
48 - $resource['category'] = ShopData::getShopCategory($requestData['shopId'], Helpers::getChannelByCookie(), Helpers::getGenderByCookie());  
49 - $resource['brands'] = ShopData::getShopBrands($requestData['shopId']);  
50 - if($resource['category']['code'] === 200){  
51 - $result['category'] = $resource['category']['data'];  
52 - }  
53 - if($resource['brands']['code'] === 200){  
54 - $result['brands'] = $resource['brands']['data'];  
55 - }  
56 - ShopData::debugOut($result); 46 +// $result = array();
  47 +// $resource = array();
  48 +// $resource['category'] = ShopData::getShopCategory($requestData['shopId'], Helpers::getChannelByCookie(), Helpers::getGenderByCookie());
  49 +// $resource['brands'] = ShopData::getShopBrands($requestData['shopId']);
  50 +// if ($resource['category']['code'] === 200) {
  51 +// $result['category'] = $resource['category']['data'];
  52 +// }
  53 +// if ($resource['brands']['code'] === 200) {
  54 +// $result['brands'] = $resource['brands']['data'];
  55 +// }
  56 + //$result = array();
  57 + // 假数据
  58 + $result = $this->getCategoryContent();
  59 +// ShopData::debugOut($result);
  60 + //$result2 = IntroData::getShopIntro(356);
57 return $this->_view->display('category', array( 61 return $this->_view->display('category', array(
  62 + 'productCategoryPage' => true,
58 'content' => $result, 63 'content' => $result,
59 )); 64 ));
60 } 65 }
@@ -92,6 +97,88 @@ class IndexController extends AbstractAction @@ -92,6 +97,88 @@ class IndexController extends AbstractAction
92 public function getCategoryContent() 97 public function getCategoryContent()
93 { 98 {
94 return array(// 数据模拟 99 return array(// 数据模拟
  100 + 'class' => array(
  101 + array(
  102 + 'name' => '上衣',
  103 + ),
  104 + array(
  105 + 'name' => '裤装',
  106 + ),
  107 + array(
  108 + 'name' => '鞋靴',
  109 + ),
  110 + array(
  111 + 'name' => '包类',
  112 + )
  113 + ),
  114 + 'category' => array(
  115 + array(
  116 + 'subcategory' => array(
  117 + array(
  118 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  119 + 'name' => '上衣衣1'
  120 + ),
  121 + array(
  122 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  123 + 'name' => '上衣衣2'
  124 + ),
  125 + array(
  126 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  127 + 'name' => '上衣衣3'
  128 + ),
  129 +
  130 + )
  131 + ),
  132 + array(
  133 + 'subcategory' => array(
  134 + array(
  135 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  136 + 'name' => '裤装1'
  137 + ),
  138 + array(
  139 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  140 + 'name' => '裤装2'
  141 + ),
  142 + array(
  143 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  144 + 'name' => '裤装3'
  145 + ),
  146 + )
  147 + ),
  148 + array(
  149 + 'subcategory' => array(
  150 + array(
  151 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  152 + 'name' => '鞋靴1'
  153 + ),
  154 + array(
  155 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  156 + 'name' => '鞋靴2'
  157 + ),
  158 + array(
  159 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  160 + 'name' => '鞋靴3'
  161 + )
  162 + )
  163 + ),
  164 + array(
  165 + 'subcategory' => array(
  166 + array(
  167 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  168 + 'name' => '包类1'
  169 + ),
  170 + array(
  171 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  172 + 'name' => '包类2'
  173 + ),
  174 + array(
  175 + 'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
  176 + 'name' => '包类3'
  177 + )
  178 + )
  179 + )
  180 +
  181 + )
95 ); 182 );
96 } 183 }
97 184