fe / yohobuy-frontend · Commits

Go to a project

Authored by xuqi
Commit 691d64cb9339e165f4ee19f4a5bec94124b539e0 1 parent 3506b1b5

筛选逻辑

Inline Side-by-side
Showing 1 changed file with 286 additions and 20 deletions
@@ -5,6 +5,8 @@ @@ -5,6 +5,8 @@
5 */ 5 */
6 6
7 var $ = require('jquery'), 7 var $ = require('jquery'),
  8 + _ = require('underscore'),
  9 + Mustache = require('mustache'),
8 timer = null; 10 timer = null;
9 11
10 require('lazyload'); 12 require('lazyload');
@@ -15,40 +17,223 @@ require('lazyload'); @@ -15,40 +17,223 @@ require('lazyload');
15 exports.init = function() { 17 exports.init = function() {
16 $(function() { 18 $(function() {
17 var $navItem = $('#goods-nav .nav-item'), 19 var $navItem = $('#goods-nav .nav-item'),
18 - $goodsContainer = $('#goods-container'),  
19 - $goodList = $('#goods-container > div'), 20 + $goodsContainer = $('#goods-content'),
  21 + $goodList = $('#goods-content > div'),
20 $npc = $goodList.filter('.new-patterns-container'), 22 $npc = $goodList.filter('.new-patterns-container'),
21 $svc = $goodList.filter('.sales-volume-container'), 23 $svc = $goodList.filter('.sales-volume-container'),
22 - $pc = $goodList.filter('.price-container'); 24 + $pc = $goodList.filter('.price-container'),
  25 + tpl; //商品信息模板
23 26
24 - //img lazyload  
25 - $('img.lazy').lazyload({  
26 - skip_invisible : false 27 + //筛选相关变量
  28 + var curFilter = {
  29 + brand: 0,
  30 + msort: 0,
  31 + color: 0,
  32 + size: 0,
  33 + price: 0,
  34 + discount: 0
  35 + },
  36 + navInfo = {
  37 + newest: {
  38 + direction: 1, //排序方向;NOTE:最新保持升序排序
  39 + reload: false, //是否需要重新加载
  40 + deviation: $npc.children('.good-info').length,
  41 + end: false
  42 + },
  43 + sale: {
  44 + direction: 1,
  45 + reload: true,
  46 + deviation: 0,
  47 + end: false
  48 + },
  49 + price: {
  50 + direction: 1,
  51 + reload: true,
  52 + deviation: 0,
  53 + end: false
  54 + }
  55 + },
  56 + classifyItemTpl = '<li data-type="{{type}}" data-id="{{id}}"><span class="text">{{name}}</span></li>',
  57 + $screen = $('#screen-content, #screen-mask'),
  58 + $prevFocusNav = $navItem.filter('.focus'), //初始化为已选项
  59 + classification; //分类数据
  60 +
  61 + //read good-info template
  62 + $.get('/tpl/readTpl', function(data) {
  63 + if (data.success) {
  64 + tpl = data.data;
  65 + Mustache.parse(tpl);
  66 + }
27 }); 67 });
28 68
  69 + Mustache.parse(classifyItemTpl); //cache tpl
  70 +
29 /** 71 /**
30 - * 导航 touch/click处理句柄 72 + * Mustache 渲染数组数据
  73 + * @params data Array 数据数组
  74 + * @return html html字符串
31 */ 75 */
32 - function touchEvt(e) {  
33 - var $cur = $(e.currentTarget); 76 + function renderArrData(data) {
  77 + var i = 0,
  78 + html = '';
  79 + for (i = 0; i < data.length; i++) {
  80 + html += Mustache.render(classifyItemTpl, data[i]);
  81 + }
  82 + return html;
  83 + }
  84 +
  85 + /**
  86 + * 获取当前选中导航的类别
  87 + * @return string/undefined
  88 + */
  89 + function getFocusNavType() {
  90 + var type;
  91 + if ($prevFocusNav.hasClass('sales-volume-nav')) {
  92 + type = 'sale';
  93 + } else if ($prevFocusNav.hasClass('price-nav')) {
  94 + type = 'price';
  95 + } else if ($prevFocusNav.hasClass('new-patterns-nav')) {
  96 + type = 'newest';
  97 + }
  98 + return type;
  99 + }
  100 +
  101 + /**
  102 + * 查找当前状态下的商品列表并填充HTML
  103 + */
  104 + function search() {
  105 + var type = getFocusNavType(),
  106 + setting = {},
  107 + nav;
  108 +
  109 + nav = navInfo[type];
34 110
35 - if ($cur.hasClass('focus')) { 111 + //请求数据setting
  112 + $.extend(setting, curFilter, {
  113 + type: type,
  114 + direction: nav.direction,
  115 + deviation: nav.deviation
  116 + });
  117 +
  118 + if (nav.reload) {
  119 + setting.deviation = 0;
  120 + } else if (nav.end) {
  121 + //不需要重新加载并且数据请求结束
36 return; 122 return;
37 } 123 }
38 124
39 - $navItem.removeClass('focus');  
40 - $cur.addClass('focus'); 125 + $.ajax({
  126 + type: 'GET',
  127 + url: '/tpl/search',
  128 + data: setting
  129 + }).then(function(data) {
  130 + var html = '',
  131 + $container,
  132 + res,
  133 + goods,
  134 + len,
  135 + i;
  136 + if (data.success) {
  137 + res = data.data;
  138 + goods = res.goods;
  139 + len = goods.length;
  140 +
  141 + //插入HTML
  142 + switch (setting.type) {
  143 + case 'newest':
  144 + $container = $npc;
  145 + break;
  146 + case 'price':
  147 + $container = $pc;
  148 + break;
  149 + case 'sale':
  150 + $container = $svc;
  151 + break;
  152 + }
  153 + for (i = 0; i < len; i++) {
  154 + html += Mustache.render(tpl, goods[i]);
  155 + }
  156 + if (nav.reload) {
  157 + $container.html(html);
  158 + } else {
  159 + $container.append(html);
  160 + }
  161 +
  162 + //lazyload
  163 + $('img.lazy').lazyload({
  164 + container: $container
  165 + });
  166 + //手动加载前4个
  167 + $container.find('img.lazy:lt(4)').lazyload({
  168 + event: 'load'
  169 + });
  170 + //重置navInfo
  171 + if (res.end) {
  172 + nav.end = true;
  173 + }
  174 + nav.reload = false;
  175 + nav.deviation = setting.deviation + len;
  176 + }
  177 + });
  178 + }
  179 + //读取筛选时的分类信息
  180 + $.get('/tpl/classification', function(data) {
  181 + var c,
  182 + html;
  183 + if (data.success) {
  184 + classification = data.data;
  185 + for (c in classification) {
  186 + if(classification.hasOwnProperty(c)) {
  187 + $('#sub-' + c).html(renderArrData(classification[c]));
  188 + }
  189 + }
  190 + }
  191 + });
  192 +
  193 + //img lazyload
  194 + $('img.lazy').lazyload({
  195 + skip_invisible : false
  196 + });
  197 +
  198 + /**
  199 + * 导航 touch/click处理句柄
  200 + */
  201 + function navTouchEvt(e) {
  202 + var $cur = $(e.currentTarget),
  203 + type;
41 204
42 if ($cur.hasClass('screen-nav')) { 205 if ($cur.hasClass('screen-nav')) {
43 //筛选 206 //筛选
  207 + $screen.toggleClass('hide');
  208 + $prevFocusNav.toggleClass('focus');
  209 + $cur.toggleClass('focus');
44 } else { 210 } else {
  211 + if ($cur.hasClass('focus')) {
  212 + return;
  213 + }
  214 +
  215 + $prevFocusNav = $cur;
  216 +
  217 + $navItem.removeClass('focus');
  218 + $cur.addClass('focus');
  219 +
  220 + type = getFocusNavType(); //当前focus项(new/sale/price)
  221 +
45 $goodList.addClass('hide'); 222 $goodList.addClass('hide');
46 - if ($cur.hasClass('new-patterns-nav')) {  
47 - $npc.removeClass('hide');  
48 - } else if ($cur.hasClass('sales-volume-nav')) {  
49 - $svc.removeClass('hide');  
50 - } else if ($cur.hasClass('price-nav')) {  
51 - $pc.removeClass('hide'); 223 + switch (type) {
  224 + case 'newest':
  225 + $npc.removeClass('hide');
  226 + break;
  227 + case 'sale':
  228 + $svc.removeClass('hide');
  229 + break;
  230 + case 'price':
  231 + $pc.removeClass('hide');
  232 + break;
  233 + }
  234 +
  235 + if (navInfo[type].reload) {
  236 + search();
52 } 237 }
53 } 238 }
54 } 239 }
@@ -56,9 +241,90 @@ exports.init = function() { @@ -56,9 +241,90 @@ exports.init = function() {
56 //切换“最新”，“销量”，“价格”以及“筛选”功能 241 //切换“最新”，“销量”，“价格”以及“筛选”功能
57 $('#goods-nav').delegate('.nav-item', 'touchstart', function(e) { 242 $('#goods-nav').delegate('.nav-item', 'touchstart', function(e) {
58 e.preventDefault(); 243 e.preventDefault();
59 - touchEvt(e); 244 + navTouchEvt(e);
60 }).delegate('.nav-item', 'click', function(e) { 245 }).delegate('.nav-item', 'click', function(e) {
61 - touchEvt(e); 246 + navTouchEvt(e);
  247 + });
  248 +
  249 + /**
  250 + * 筛选分类点击事件句柄
  251 + */
  252 + function scTouchEvt(e) {
  253 + var $cur = $(e.currentTarget),
  254 + cs = ['brand', 'msort', 'color', 'size', 'price', 'discount'],
  255 + curType;
  256 +
  257 + if ($cur.hasClass('active')) {
  258 + return;
  259 + }
  260 +
  261 + $('#screen-content .c-item').removeClass('active');
  262 + $cur.addClass('active');
  263 +
  264 + curType = _.filter(cs, function(c) {
  265 + return $cur.hasClass(c);
  266 + });
  267 +
  268 + $('.sub-classify:not(.hide)').addClass('hide');
  269 + $('#sub-' + curType).removeClass('hide');
  270 + }
  271 +
  272 + $('#screen-content').delegate('.c-item', 'touchstart', function(e) {
  273 + e.preventDefault();
  274 + scTouchEvt(e);
  275 + }).delegate('.c-item', 'click', function(e) {
  276 + scTouchEvt(e);
  277 + });
  278 +
  279 + /**
  280 + * 筛选
  281 + * @params string 数据id
  282 + * @params string 数据类型
  283 + * @name string 值
  284 + * @navNam string 最新/销量/价格
  285 + * @direction int 0(降序)/1(升序)
  286 + */
  287 + function doFilter(id, type, name, navName) {
  288 + var $shower = $('#show-' + type),
  289 + att,
  290 + req;
  291 + //更新当前过滤项
  292 + curFilter[type] = id;
  293 +
  294 + //更新显示值
  295 + if (id === 0) {
  296 + $shower.addClass('default');
  297 + } else {
  298 + $shower.removeClass('default');
  299 + }
  300 +
  301 + $shower.text(name);
  302 +
  303 + //重置reload
  304 + for (att in navInfo) {
  305 + if (navInfo.hasOwnProperty(att)) {
  306 + navInfo[att].reload = true;
  307 + }
  308 + }
  309 + search();
  310 + }
  311 +
  312 + /**
  313 + * 筛选子类点击事件句柄
  314 + */
  315 + function subScTouchEvt(e) {
  316 + var cur = e.currentTarget,
  317 + $cur = $(cur),
  318 + $parent = $cur.closest('ul'),
  319 + id = cur.dataset.id * 1,
  320 + type = $parent[0].dataset.type,
  321 + name = $cur.children('.text').text();
  322 +
  323 + doFilter(id, type, name);
  324 + }
  325 +
  326 + $('.sub-classify').delegate('li', 'click', function(e) {
  327 + subScTouchEvt(e);
62 }); 328 });
63 }); 329 });
64 }; 330 };