fe / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit 67b7729e66394d102a2c16008a6bb72971c11b82 1 parent 88a2fe34

商品列表左侧分类导航/数据结构

Inline Side-by-side
Showing 6 changed files with 378 additions and 6 deletions
@@ -251,6 +251,66 @@ @@ -251,6 +251,66 @@
251 preHref: '', //若当前为第一页，不传此参数 251 preHref: '', //若当前为第一页，不传此参数
252 nexHref: '' //若当前为最后一页，不传此参数 252 nexHref: '' //若当前为最后一页，不传此参数
253 }, 253 },
  254 + // 商品导航列表
  255 + allSort: {
  256 + //全部品类
  257 + updateNum: 2, //更新总数
  258 + list: [
  259 + {
  260 + name: 'AA', //一级分类
  261 + num: 12 //一级分类更新数目
  262 + childList: [
  263 + {
  264 + name: 'AAA', //二级分类
  265 + href: '##', //二级分类跳转链接
  266 + num: 12 //二级分类更新数目
  267 + }
  268 + ]
  269 + }
  270 + ]
  271 + },
  272 + advNav: {
  273 + //图片导航
  274 + advNavTitle: 'AA', 图片导航标题
  275 + list: [
  276 + {
  277 + href: '',
  278 + src: '' // 图片地址
  279 + }
  280 + ]
  281 + },
  282 + advPic: {
  283 + //图片banner
  284 + advPicTitle: 'AA', 图片banner标题
  285 + list: [
  286 + {
  287 + href: '',
  288 + src: '' // 图片地址
  289 + }
  290 + ]
  291 + },
  292 + newSales: {
  293 + //一周新品上架
  294 + updateNum: 123,
  295 + list: [
  296 + {
  297 + name: 'AAA',
  298 + href: '',
  299 + num: 12,
  300 + }
  301 + ]
  302 + },
  303 + allDiscount: {
  304 + //全部折扣
  305 + updateNum: 111,
  306 + list: [
  307 + {
  308 + name: 'VVV',
  309 + href: '##',
  310 + num: 11
  311 + }
  312 + ]
  313 + }
254 //商品列表 314 //商品列表
255 goods: [ 315 goods: [
256 //商品信息 316 //商品信息
@@ -30,7 +30,75 @@ @@ -30,7 +30,75 @@
30 {{{brandIntro}}} 30 {{{brandIntro}}}
31 </div> 31 </div>
32 {{^}} 32 {{^}}
33 - <div class="list-left pull-left"></div> 33 + <div class="list-left pull-left">
  34 + {{# allDiscount}}
  35 + <div class="sort-container">
  36 + <ul class="sort-child-list new-sale">
  37 + <li><a href="{{href}}">全部折扣</a><span>{{updateNum}}</span></li>
  38 + {{#each list}}
  39 + <li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
  40 + {{/each}}
  41 + </ul>
  42 + </div>
  43 + {{/ allDiscount}}
  44 +
  45 + {{# newSales}}
  46 + <div class="sort-container">
  47 + <h2>一周新品上架<span>{{updateNum}}</span></h2>
  48 + <ul class="sort-child-list new-sale">
  49 + {{#each list}}
  50 + <li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
  51 + {{/each}}
  52 + </ul>
  53 + </div>
  54 + {{/ newSales}}
  55 +
  56 + {{# allSort}}
  57 + <div class="sort-container">
  58 + <h2>全部品类<span>{{updateNum}}</span></h2>
  59 + <ul>
  60 + {{#each list}}
  61 + <li class="product-list-nav">
  62 + <h3>
  63 + <span class="icon-triangle"></span>
  64 + {{name}}<span>{{num}}</span>
  65 + </h3>
  66 + <ul class="sort-child-list">
  67 + {{#each childList}}
  68 + <li>
  69 + <a href="{{href}}">{{name}}</a>
  70 + <span>{{num}}</span>
  71 + </li>
  72 + {{/each}}
  73 + </ul>
  74 + </li>
  75 + {{/each}}
  76 + </ul>
  77 + </div>
  78 + {{/ allSort}}
  79 +
  80 + {{# advNav}}
  81 + {{# advNavTitle}}
  82 + <h2 class="nav-pic-title">{{.}}</h2>
  83 + {{/advNavTitle}}
  84 + <ul class="pic-nav">
  85 + {{#each list}}
  86 + <li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
  87 + {{/each}}
  88 + </ul>
  89 + {{/advNav}}
  90 +
  91 + {{#advPic}}
  92 + {{# advPicTitle}}
  93 + <h2 class="nav-pic-title">{{.}}</h2>
  94 + {{/ advPicTitle}}
  95 + <ul class="pic-nav">
  96 + {{#each list}}
  97 + <li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
  98 + {{/each}}
  99 + </ul>
  100 + {{/advPic}}
  101 + </div>
34 <div class="list-right pull-right"> 102 <div class="list-right pull-right">
35 {{# shopEntry}} 103 {{# shopEntry}}
36 <div class="shop-entry clearfix"> 104 <div class="shop-entry clearfix">
@@ -14,7 +14,7 @@ fonts_dir = "font" @@ -14,7 +14,7 @@ fonts_dir = "font"
14 output_style = :expanded 14 output_style = :expanded
15 # To enable relative paths to assets via compass helper functions. Uncomment: 15 # To enable relative paths to assets via compass helper functions. Uncomment:
16 relative_assets = true 16 relative_assets = true
17 -# sourcemap = true 17 +sourcemap = true
18 18
19 # To disable debugging comments that display the original location of your selectors. Uncomment: 19 # To disable debugging comments that display the original location of your selectors. Uncomment:
20 line_comments = false 20 line_comments = false
@@ -11,9 +11,10 @@ var $goodsContainer = $('.goods-container'), @@ -11,9 +11,10 @@ var $goodsContainer = $('.goods-container'),
11 $goodItem = $goodsContainer.find('.good-info'), 11 $goodItem = $goodsContainer.find('.good-info'),
12 $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'), 12 $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
13 $goodInfoMain = $goodsContainer.find('.good-info-main'), 13 $goodInfoMain = $goodsContainer.find('.good-info-main'),
14 - $goodSelectColor = $goodsContainer.find('.good-select-color'); 14 + $goodSelectColor = $goodsContainer.find('.good-select-color'),
  15 + $productListNav = $('.product-list-nav');
15 16
16 -var MouseOver = productEvent($goodItem, 5); 17 +var productList = productEvent($goodItem, 5);
17 18
18 /** 19 /**
19 * @description 构造商品颜色列表的html结构 20 * @description 构造商品颜色列表的html结构
@@ -59,7 +60,7 @@ function createColorList(data) { @@ -59,7 +60,7 @@ function createColorList(data) {
59 }; 60 };
60 } 61 }
61 62
62 -MouseOver.addHandler('MouseEnter', function(event) { 63 +productList.addHandler('MouseEnter', function(event) {
63 64
64 var itemMr = 10, //list的右边距 65 var itemMr = 10, //list的右边距
65 itemMb = 35, //list的下边距 66 itemMb = 35, //list的下边距
@@ -88,7 +89,7 @@ MouseOver.addHandler('MouseEnter', function(event) { @@ -88,7 +89,7 @@ MouseOver.addHandler('MouseEnter', function(event) {
88 $goodSelectColor.append($(ulStr)); 89 $goodSelectColor.append($(ulStr));
89 wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth; 90 wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
90 91
91 - // 92 + //todo
92 diffWidth = event.offsetR - ((15 + 50) * ulNum + 25); 93 diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
93 if (diffWidth <= 0) { 94 if (diffWidth <= 0) {
94 wrapperX = wrapperX + diffWidth; 95 wrapperX = wrapperX + diffWidth;
@@ -110,3 +111,12 @@ $goodItemWrapper.mouseleave(function() { @@ -110,3 +111,12 @@ $goodItemWrapper.mouseleave(function() {
110 display: 'none' 111 display: 'none'
111 }); 112 });
112 }); 113 });
  114 +
  115 +// 左侧导航
  116 +$productListNav.click(function() {
  117 + if ($(this).hasClass('active')) {
  118 + $(this).removeClass('active');
  119 + } else {
  120 + $(this).addClass('active');
  121 + }
  122 +});
1 .product-list-page { 1 .product-list-page {
2 .list-left { 2 .list-left {
3 width: 160px; 3 width: 160px;
  4 +
  5 + .sort-container {
  6 + width: 100%;
  7 + font-size: 12px;
  8 + border-bottom: 1px solid #ebebeb;
  9 + padding-bottom: 10px;
  10 + margin-bottom: 10px;
  11 +
  12 + h2 {
  13 + height: 28px;
  14 + line-height: 28px;
  15 + color: #222;
  16 + font-weight: bold;
  17 + position: relative;
  18 +
  19 + span {
  20 + color: #bbb;
  21 + padding-left: 5px;
  22 + }
  23 + }
  24 +
  25 + .product-list-nav {
  26 + h3 {
  27 + height: 28px;
  28 + line-height: 28px;
  29 + color: #222;
  30 + font-weight: bold;
  31 + position: relative;
  32 + text-indent: 10px;
  33 + cursor: pointer;
  34 +
  35 + span {
  36 + color: #bbb;
  37 + padding-left: 5px;
  38 +
  39 + &.icon-triangle {
  40 + display: inline-block;
  41 + padding-left: 0;
  42 + width: 0;
  43 + height: 0;
  44 + border-top: 6px solid #fff;
  45 + border-left: 6px solid #000;
  46 + border-bottom: 6px solid #fff;
  47 + position: absolute;
  48 + top: 50%;
  49 + margin-top: -6px;
  50 + left: 0;
  51 + @include transition(transform .3s)
  52 + }
  53 + }
  54 + }
  55 +
  56 + &.active {
  57 + h3 {
  58 + span {
  59 + &.icon-triangle {
  60 + @include rotate(90deg)
  61 + }
  62 + }
  63 + }
  64 + ul.sort-child-list {
  65 + display: block;
  66 + }
  67 + }
  68 + }
  69 +
  70 + ul.sort-child-list {
  71 + display: none;
  72 +
  73 + &.new-sale {
  74 + display: block;
  75 + }
  76 + li {
  77 + color: #bbb;
  78 +
  79 + span {
  80 + padding-left: 5px;
  81 + }
  82 + }
  83 + a {
  84 + color: #666;
  85 + padding-left: 10px;
  86 + height: 22px;
  87 + line-height: 22px;
  88 + }
  89 + }
  90 + }
  91 +
  92 + .nav-pic-title {
  93 + height: 35px;
  94 + line-height: 35px;
  95 + color: #000;
  96 + font-weight: bold;
  97 + border-bottom: 1px solid #ebebeb;
  98 + font-size: 12px;
  99 + }
  100 +
  101 + .pic-nav {
  102 + display: block;
  103 +
  104 + li, img {
  105 + display: block;
  106 + width: 100%;
  107 + overflow: hidden;
  108 + }
  109 + }
4 } 110 }
5 111
6 .list-right { 112 .list-right {
@@ -763,6 +763,134 @@ class IndexController extends AbstractAction @@ -763,6 +763,134 @@ class IndexController extends AbstractAction
763 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', 763 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
764 'salePrice' => '899' 764 'salePrice' => '899'
765 ) 765 )
  766 + ),
  767 + 'allSort' => array(
  768 + 'updateNum' => 145,
  769 + 'list' => array(
  770 + array(
  771 + 'name' => '裙装',
  772 + 'num' => '10',
  773 + 'childList' => array(
  774 + array(
  775 + 'name' => '全身裙装',
  776 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  777 + 'num' => '5'
  778 + ),
  779 + array(
  780 + 'name' => '全身裙装',
  781 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  782 + 'num' => '5'
  783 + ),
  784 + array(
  785 + 'name' => '全身裙装',
  786 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  787 + 'num' => '5'
  788 + ),
  789 + array(
  790 + 'name' => '全身裙装',
  791 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  792 + 'num' => '5'
  793 + )
  794 + )
  795 + ),
  796 + array(
  797 + 'name' => '裙装BBB',
  798 + 'num' => '10',
  799 + 'childList' => array(
  800 + array(
  801 + 'name' => '全身裙装',
  802 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  803 + 'num' => '5'
  804 + ),
  805 + array(
  806 + 'name' => '全身裙装',
  807 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  808 + 'num' => '5'
  809 + ),
  810 + array(
  811 + 'name' => '全身裙装',
  812 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  813 + 'num' => '5'
  814 + ),
  815 + array(
  816 + 'name' => '全身裙装',
  817 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  818 + 'num' => '5'
  819 + )
  820 + )
  821 + )
  822 + )
  823 + ),
  824 + 'advNav' => array(
  825 + 'advNavTitle' => 'AAAA',
  826 + 'list' => array(
  827 + array(
  828 + 'href' => 'http://adidas.yohobuy.com/?folder=1366',
  829 + 'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
  830 + ),
  831 + array(
  832 + 'href' => 'http://adidas.yohobuy.com/?folder=1366',
  833 + 'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
  834 + )
  835 + )
  836 + ),
  837 + 'advPic' => array(
  838 + 'advPicTitle' => false,
  839 + 'list' => array(
  840 + array(
  841 + 'href' => 'http://adidas.yohobuy.com/?folder=1366',
  842 + 'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
  843 + ),
  844 + array(
  845 + 'href' => 'http://adidas.yohobuy.com/?folder=1366',
  846 + 'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
  847 + )
  848 + )
  849 + ),
  850 + 'newSales' => array(
  851 + 'updateNum' => 130,
  852 + 'list' => array(
  853 + array(
  854 + 'name' => '12月03日',
  855 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  856 + 'num' => '5'
  857 + ),
  858 + array(
  859 + 'name' => '12月03日',
  860 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  861 + 'num' => '5'
  862 + ),
  863 + array(
  864 + 'name' => '12月03日',
  865 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  866 + 'num' => '5'
  867 + ),
  868 + array(
  869 + 'name' => '12月03日',
  870 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  871 + 'num' => '5'
  872 + )
  873 + )
  874 + ),
  875 + 'allDiscount' => array(
  876 + 'updateNum' => 130,
  877 + 'list' => array(
  878 + array(
  879 + 'name' => '1~3折',
  880 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  881 + 'num' => '5'
  882 + ),
  883 + array(
  884 + 'name' => '4~6折',
  885 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  886 + 'num' => '5'
  887 + ),
  888 + array(
  889 + 'name' => '7折',
  890 + 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
  891 + 'num' => '5'
  892 + )
  893 + )
766 ) 894 )
767 ) 895 )
768 ); 896 );