Authored by 郭成尧

filter-loading

@@ -6,7 +6,8 @@ import { @@ -6,7 +6,8 @@ import {
6 6
7 const ProductListWithFilter = require('product/list/product-list-with-filter'); 7 const ProductListWithFilter = require('product/list/product-list-with-filter');
8 const lazyLoad = require('yoho-jquery-lazyload'); 8 const lazyLoad = require('yoho-jquery-lazyload');
9 -let productListWithFilter = new ProductListWithFilter({ 9 +
  10 +new ProductListWithFilter({
10 page: 2, 11 page: 2,
11 material: true, 12 material: true,
12 unionType: window.queryString.union_type 13 unionType: window.queryString.union_type
@@ -15,7 +16,8 @@ let productListWithFilter = new ProductListWithFilter({ @@ -15,7 +16,8 @@ let productListWithFilter = new ProductListWithFilter({
15 class MaterialController extends Controller { 16 class MaterialController extends Controller {
16 constructor() { 17 constructor() {
17 super(); 18 super();
18 - productListWithFilter.getFilter(); 19 +
  20 + // productListWithFilter.getFilter();
19 lazyLoad($('img.lazy')); 21 lazyLoad($('img.lazy'));
20 } 22 }
21 } 23 }
@@ -14,4 +14,4 @@ require('common/footer'); @@ -14,4 +14,4 @@ require('common/footer');
14 new ProductListWithFilter({ 14 new ProductListWithFilter({
15 query: $.trim($('.nav-title').text()), 15 query: $.trim($('.nav-title').text()),
16 page: 2, // 首页服务端已经渲染 16 page: 2, // 首页服务端已经渲染
17 -}, 'product/search/chanpin/goods').getFilter(); 17 +}, 'product/search/chanpin/goods');
@@ -12,6 +12,7 @@ const filter = require('plugin/filter'); @@ -12,6 +12,7 @@ const filter = require('plugin/filter');
12 const noResultHbs = require('product/search/no-result-new.hbs'); 12 const noResultHbs = require('product/search/no-result-new.hbs');
13 const lazyLoad = require('yoho-jquery-lazyload'); 13 const lazyLoad = require('yoho-jquery-lazyload');
14 const cacheStore = require('./cache-store'); 14 const cacheStore = require('./cache-store');
  15 +const loading = require('plugin/loading');
15 16
16 class ProductListWithFilter { 17 class ProductListWithFilter {
17 constructor(filterParams, searchUrl, extra) { 18 constructor(filterParams, searchUrl, extra) {
@@ -248,6 +249,9 @@ class ProductListWithFilter { @@ -248,6 +249,9 @@ class ProductListWithFilter {
248 } 249 }
249 }); 250 });
250 251
  252 + loading.hideLoading();
  253 + filter.showFilter();
  254 +
251 this.view.filterBody = $('.filter-body'); 255 this.view.filterBody = $('.filter-body');
252 } 256 }
253 }); 257 });
@@ -317,8 +321,14 @@ class ProductListWithFilter { @@ -317,8 +321,14 @@ class ProductListWithFilter {
317 this.view.pre.removeClass('active'); 321 this.view.pre.removeClass('active');
318 $this.addClass('active'); 322 $this.addClass('active');
319 323
  324 + if ($('.filter-body').length < 1) {
  325 + loading.init($('.yoho-page'));
  326 + loading.showLoading();
  327 + this.getFilter();
  328 + } else {
320 filter.showFilter(); 329 filter.showFilter();
321 } 330 }
  331 + }
322 } else { // 排序改变 332 } else { // 排序改变
323 this.view.dropList.css('display', 'none'); 333 this.view.dropList.css('display', 'none');
324 if ($this.hasClass('new')) { 334 if ($this.hasClass('new')) {
@@ -746,7 +746,10 @@ if ($brandHeader.data('isbaseshop') === true) { @@ -746,7 +746,10 @@ if ($brandHeader.data('isbaseshop') === true) {
746 Object.assign(defaultOpt, {shop_id: $brandHeader.data('id')}); 746 Object.assign(defaultOpt, {shop_id: $brandHeader.data('id')});
747 } 747 }
748 748
749 -(function() { 749 +/**
  750 + * 获取筛选面板数据
  751 + */
  752 +function getFilter() {
750 let pars = {}; 753 let pars = {};
751 754
752 if (age_level) { 755 if (age_level) {
@@ -862,10 +865,11 @@ if ($brandHeader.data('isbaseshop') === true) { @@ -862,10 +865,11 @@ if ($brandHeader.data('isbaseshop') === true) {
862 $pre.siblings('.filter').removeClass('active'); 865 $pre.siblings('.filter').removeClass('active');
863 } 866 }
864 }); 867 });
  868 + loading.hideLoading();
  869 + filter.showFilter();
865 } 870 }
866 }); 871 });
867 -}());  
868 - 872 +}
869 873
870 lazyLoad($('.lazy')); 874 lazyLoad($('.lazy'));
871 875
@@ -963,6 +967,9 @@ $dropList.on('touchend', 'li', function(e) { @@ -963,6 +967,9 @@ $dropList.on('touchend', 'li', function(e) {
963 $dropList.addClass('hide'); 967 $dropList.addClass('hide');
964 }); 968 });
965 969
  970 +/**
  971 + * 顶部排序等点击事件处理
  972 + */
966 $listNav.on('touchend touchcancel', function(e) { 973 $listNav.on('touchend touchcancel', function(e) {
967 let $this = $(e.target).closest('li'), 974 let $this = $(e.target).closest('li'),
968 nav, 975 nav,
@@ -993,8 +1000,14 @@ $listNav.on('touchend touchcancel', function(e) { @@ -993,8 +1000,14 @@ $listNav.on('touchend touchcancel', function(e) {
993 $pre.removeClass('active'); 1000 $pre.removeClass('active');
994 $this.addClass('active'); 1001 $this.addClass('active');
995 1002
  1003 + if ($('.filter-body').length < 1) {
  1004 + loading.init($('.yoho-page'));
  1005 + loading.showLoading();
  1006 + getFilter();
  1007 + } else {
996 filter.showFilter(); 1008 filter.showFilter();
997 } 1009 }
  1010 + }
998 } else { 1011 } else {
999 1012
1000 // 判断选择navtype 1013 // 判断选择navtype
@@ -1231,6 +1244,11 @@ $('.more-shop').on('click', function() { @@ -1231,6 +1244,11 @@ $('.more-shop').on('click', function() {
1231 } 1244 }
1232 }); 1245 });
1233 1246
  1247 +// 筛选改为点击加载
  1248 +// (function() {
  1249 +// getFilter();
  1250 +// }());
  1251 +
1234 // 进入店铺埋点 1252 // 进入店铺埋点
1235 $('.brand-way a').on('click', function() { 1253 $('.brand-way a').on('click', function() {
1236 if (window._yas && window._yas.sendCustomInfo) { 1254 if (window._yas && window._yas.sendCustomInfo) {
@@ -3,11 +3,10 @@ let ProductListWithFilter = require('product/list/product-list-with-filter'); @@ -3,11 +3,10 @@ let ProductListWithFilter = require('product/list/product-list-with-filter');
3 3
4 const brandId = $('#brandId').val(); 4 const brandId = $('#brandId').val();
5 5
6 -let productListWithFilterModel =  
7 - new ProductListWithFilter({ 6 +new ProductListWithFilter({
8 brand_id: brandId, 7 brand_id: brandId,
9 page: 2, // 首页服务端已经渲染 8 page: 2, // 首页服务端已经渲染
10 isShopBrand: 'Y' // 传给 filter,表明调用哪个接口获取筛选面板的数据 9 isShopBrand: 'Y' // 传给 filter,表明调用哪个接口获取筛选面板的数据
11 - }, 'product/search/brand/goods'); 10 +}, 'product/search/brand/goods');
12 11
13 -productListWithFilterModel.getFilter(); 12 +// productListWithFilterModel.getFilter();
@@ -10,14 +10,13 @@ const $collectShopIcon = $('#collectShop'); @@ -10,14 +10,13 @@ const $collectShopIcon = $('#collectShop');
10 10
11 const shopId = $('#shopId').val(); 11 const shopId = $('#shopId').val();
12 12
13 -const productListWithFilterModel =  
14 - new ProductListWithFilter({ 13 +new ProductListWithFilter({
15 shop_id: shopId, 14 shop_id: shopId,
16 page: 2, // 首页服务端已经渲染 15 page: 2, // 首页服务端已经渲染
17 isShopList: 'Y' // 传给 filter,表明调用哪个接口获取筛选面板的数据 16 isShopList: 'Y' // 传给 filter,表明调用哪个接口获取筛选面板的数据
18 - }, 'product/search/shop/goods'); 17 +}, 'product/search/shop/goods');
19 18
20 -productListWithFilterModel.getFilter(); 19 +// productListWithFilterModel.getFilter();
21 20
22 require('./shop/coupon'); 21 require('./shop/coupon');
23 22
@@ -51,7 +51,7 @@ if ($shopCategory.length > 0) { @@ -51,7 +51,7 @@ if ($shopCategory.length > 0) {
51 51
52 52
53 // 页面打开直接加载筛选项 53 // 页面打开直接加载筛选项
54 -productListWithFilter.getFilter(); 54 +// productListWithFilter.getFilter();
55 55
56 require('../plugin/sticky'); 56 require('../plugin/sticky');
57 require('./shop/coupon'); 57 require('./shop/coupon');
@@ -5,3 +5,4 @@ @@ -5,3 +5,4 @@
5 @import "search"; 5 @import "search";
6 @import "list"; 6 @import "list";
7 @import "search-index"; 7 @import "search-index";
  8 +@import "layout/loading";