Authored by 毕凯

搜索页面筛选框 根据分类读取尺寸信息

@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 <div class="attr-content"> 55 <div class="attr-content">
56 <ul class="sort-pre clearfix"> 56 <ul class="sort-pre clearfix">
57 {{#each sort}} 57 {{#each sort}}
58 - <li> 58 + <li data-id="{{id}}">
59 <span class="attr {{#if checked}}checked{{/if}}"> 59 <span class="attr {{#if checked}}checked{{/if}}">
60 {{name}} 60 {{name}}
61 <div class="sort-up-icon"></div> 61 <div class="sort-up-icon"></div>
@@ -179,8 +179,7 @@ @@ -179,8 +179,7 @@
179 </div> 179 </div>
180 {{/if}} 180 {{/if}}
181 181
182 - {{#if size}}  
183 - <div class="size section"> 182 + <div class="size section hide">
184 <span class="title">尺码:</span> 183 <span class="title">尺码:</span>
185 184
186 <div class="attr-content clearfix"> 185 <div class="attr-content clearfix">
@@ -189,7 +188,6 @@ @@ -189,7 +188,6 @@
189 {{/ size}} 188 {{/ size}}
190 </div> 189 </div>
191 </div> 190 </div>
192 - {{/if}}  
193 191
194 {{#if seniorChose}} 192 {{#if seniorChose}}
195 <div class="senior section"> 193 <div class="senior section">
@@ -4,7 +4,8 @@ @@ -4,7 +4,8 @@
4 * @date: 2015/12/4 4 * @date: 2015/12/4
5 */ 5 */
6 6
7 -var $ = require('yoho.jquery'); 7 +var $ = require('yoho.jquery'),
  8 + Handlebars = require('yoho.handlebars');
8 9
9 var checkUnicode = { 10 var checkUnicode = {
10 unchecked: '&#xe613;', 11 unchecked: '&#xe613;',
@@ -38,6 +39,13 @@ var $seniorSubWrap = $('.senior-sub-wrap'), @@ -38,6 +39,13 @@ var $seniorSubWrap = $('.senior-sub-wrap'),
38 39
39 var seniorHoverTime, hoveredIndex; 40 var seniorHoverTime, hoveredIndex;
40 41
  42 +// 尺寸 handlebars 模板
  43 +var sizeTmpl = '{{# size}}<a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">{{name}}</a>{{/ size}}',
  44 + sizeCache = {}, // 缓存一下尺寸信息
  45 + $sizeWrap = $('.filter-box .size');
  46 +
  47 +sizeTmpl = Handlebars.compile(sizeTmpl);
  48 +
41 //清除checkbox选中状态 49 //清除checkbox选中状态
42 function clearChecked($checkbox) { 50 function clearChecked($checkbox) {
43 $checkbox.removeClass('checked').html(checkUnicode.unchecked); 51 $checkbox.removeClass('checked').html(checkUnicode.unchecked);
@@ -85,13 +93,36 @@ $('.filter-box').on('selectstart', '.attr, .brands-index span', function() { @@ -85,13 +93,36 @@ $('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
85 //【分类】 93 //【分类】
86 $('.sort-pre').on('click', 'li', function() { 94 $('.sort-pre').on('click', 'li', function() {
87 var $this = $(this), 95 var $this = $(this),
88 - index = $this.index(); 96 + index = $this.index(),
  97 + id = $this.data('id');
89 98
90 $this.siblings('.active').removeClass('active'); 99 $this.siblings('.active').removeClass('active');
91 $this.addClass('active'); 100 $this.addClass('active');
92 101
93 $sortSub.children(':not(.hide)').addClass('hide'); 102 $sortSub.children(':not(.hide)').addClass('hide');
94 $sortSub.children(':eq(' + index + ')').removeClass('hide'); 103 $sortSub.children(':eq(' + index + ')').removeClass('hide');
  104 +
  105 + if (sizeCache[id]) {
  106 + $sizeWrap.find('.attr-content').html(sizeCache[id]);
  107 + $sizeWrap.removeClass('hide');
  108 + } else {
  109 + $.ajax({
  110 + url: '/product/search/sortSize',
  111 + data: {
  112 + msort: id
  113 + }
  114 + }).then(function(res) {
  115 + if ($.type(res) === 'array' && res.length) {
  116 + sizeCache[id] = sizeTmpl({
  117 + size: res
  118 + });
  119 + $sizeWrap.find('.attr-content').html(sizeCache[id]);
  120 + $sizeWrap.removeClass('hide');
  121 + } else {
  122 + $sizeWrap.addClass('hide');
  123 + }
  124 + });
  125 + }
95 }); 126 });
96 127
97 //【品牌】 128 //【品牌】