Authored by 郭成尧

all-goods-tab

@@ -29,7 +29,7 @@ @@ -29,7 +29,7 @@
29 </li> 29 </li>
30 <em>|</em> 30 <em>|</em>
31 <li class="shop-tab-nav tab-nav"> 31 <li class="shop-tab-nav tab-nav">
32 - <a href="#all-goods" data-trigger="tab">全部商品</a> 32 + <a href="#all-goods" data-trigger="tab" data-funGetFilter data-funGetGoodsList>全部商品</a>
33 </li> 33 </li>
34 </ul> 34 </ul>
35 <div class="tab-panels"> 35 <div class="tab-panels">
@@ -58,11 +58,11 @@ @@ -58,11 +58,11 @@
58 58
59 </div> 59 </div>
60 60
61 - {{!--视--}} 61 + {{!--视--}}
62 <div class="shop-video shop-section"> 62 <div class="shop-video shop-section">
63 <header> 63 <header>
64 <i class="section-more iconfont">&#xe606;</i> 64 <i class="section-more iconfont">&#xe606;</i>
65 - <h4 class="section-title">直播</h4> 65 + <h4 class="section-title">直播</h4>
66 </header> 66 </header>
67 <div class="video-player"> 67 <div class="video-player">
68 <div class="video-poster"> 68 <div class="video-poster">
@@ -72,8 +72,8 @@ @@ -72,8 +72,8 @@
72 </div> 72 </div>
73 </div> 73 </div>
74 <div class="video-intro"> 74 <div class="video-intro">
75 - <h6 class="video-title">这是视屏标题</h6>  
76 - <p class="text-line-2">这是视屏内容这是视屏内容这是视屏内容这是视屏内容这是视屏内容这是视屏内容这是视屏内容这是视屏内容</p> 75 + <h6 class="video-title">这是视频标题</h6>
  76 + <p class="text-line-2">视频内容视频内容视频内容视频内容视频内容视频内容视频内容视频内容</p>
77 </div> 77 </div>
78 </div> 78 </div>
79 79
@@ -135,7 +135,23 @@ @@ -135,7 +135,23 @@
135 </div> 135 </div>
136 </div> 136 </div>
137 {{!--shop-tab: 全部商品--}} 137 {{!--shop-tab: 全部商品--}}
138 - <div id="all-goods" class="tab-panel"></div> 138 + <div id="all-goods" class="tab-panel">
  139 + <div class="good-list-page yoho-page">
  140 + {{!--筛选tab--}}
  141 + {{> product/filter-tab}}
  142 +
  143 + <div id="goods-container" class="goods-container">
  144 + <div class="firstscreen-goods container clearfix"></div>
  145 + <div class="search-divide">正在加载...</div>
  146 + <div class="default-goods container clearfix"></div>
  147 + <div class="new-goods container clearfix"></div>
  148 + <div class="sale-goods container clearfix"></div>
  149 + <div class="price-goods container clearfix hide"></div>
  150 + <div class="discount-goods container clearfix hide"></div>
  151 + {{> common/filter}}
  152 + </div>
  153 + </div>
  154 + </div>
139 </div> 155 </div>
140 </div> 156 </div>
141 </div> 157 </div>
@@ -75,12 +75,23 @@ $.fn.yoTab.constructor = Tab; @@ -75,12 +75,23 @@ $.fn.yoTab.constructor = Tab;
75 75
76 76
77 $(document).on('click', '[data-trigger=tab]', function(event) { 77 $(document).on('click', '[data-trigger=tab]', function(event) {
  78 + var $nav = $(event.target);
  79 + var fun = '';
  80 +
  81 + $.each($nav.data(), function(index) {
  82 + if (index.substr(0, 3) === 'fun') {
  83 + fun = index.substr(3, index.length - 3);
  84 +
  85 + if ($.isFunction(Tab.prototype[fun])) {
  86 + Plugin.call($nav, fun);
  87 + }
  88 + }
  89 + });
  90 +
78 event.preventDefault(); 91 event.preventDefault();
79 event.stopPropagation(); 92 event.stopPropagation();
80 93
81 - var $nav = $(event.target);  
82 -  
83 Plugin.call($nav, 'show'); 94 Plugin.call($nav, 'show');
84 }); 95 });
85 96
86 - 97 +module.exports = Tab;
  1 +// const tip = require('../plugin/tip');
  2 +const filter = require('../plugin/filter');
  3 +
  4 +// const loading = require('../plugin/loading');
  5 +
  6 +require('product/search/list.page.css');
1 require('product/shop/redshop.page.css'); 7 require('product/shop/redshop.page.css');
2 8
3 require('plugin/sticky'); 9 require('plugin/sticky');
4 -require('plugin/tab');  
5 require('./shop/coupon'); 10 require('./shop/coupon');
  11 +
  12 +let Tab = require('plugin/tab');
  13 +let defaultOpt = require('../common/query-param');
  14 +let defaultOptCopy = {};
  15 +
  16 +let $goodsContainer = $('#goods-container');
  17 +let $fsgc = $goodsContainer.children('.firstscreen-goods');
  18 +let $defaultgc = $goodsContainer.children('.default-goods');
  19 +let $ngc = $goodsContainer.children('.new-goods');
  20 +let $sgc = $goodsContainer.children('.sale-goods');
  21 +let $pgc = $goodsContainer.children('.price-goods');
  22 +let $dgc = $goodsContainer.children('.discount-goods');
  23 +let $listNav = $('#list-nav'); // 筛选项列表
  24 +let $pre = $listNav.find('.active'); // 记录进入筛选前的active项,初始为选中项
  25 +
  26 +let allGoodsTabClickTimes = 0;
  27 +
  28 +let navInfo = {
  29 + price: {
  30 + order: 1,
  31 + reload: true,
  32 + page: 0,
  33 + end: false
  34 + },
  35 + discount: {
  36 + order: 1,
  37 + reload: true,
  38 + page: 0,
  39 + end: false
  40 + },
  41 + default: {
  42 + order: 0,
  43 + reload: true,
  44 + page: 0,
  45 + end: false
  46 + },
  47 + new: {
  48 + order: 0,
  49 + reload: true,
  50 + page: 0,
  51 + end: false
  52 + },
  53 + sale: {
  54 + order: 0,
  55 + reload: true,
  56 + page: 0,
  57 + end: false
  58 + }
  59 +};
  60 +
  61 +/**
  62 + * 判断两个对象是否相等
  63 + * @param {*} a
  64 + * @param {*} b
  65 + */
  66 +function isObjectValueEqual(a, b) {
  67 + let aProps = Object.getOwnPropertyNames(a);
  68 + let bProps = Object.getOwnPropertyNames(b);
  69 +
  70 + if (aProps.length != bProps.length) { // eslint-disable-line
  71 + return false;
  72 + }
  73 +
  74 + for (let i = 0; i < aProps.length; i++) {
  75 + let propName = aProps[i];
  76 +
  77 + if (a[propName] !== b[propName]) {
  78 + return false;
  79 + }
  80 + }
  81 + return true;
  82 +}
  83 +
  84 +/**
  85 + * 获取商品列表
  86 + */
  87 +function getGoodsList() {
  88 + console.log('ok');
  89 +}
  90 +
  91 +/**
  92 + * 加载筛选数据
  93 + */
  94 +function getFilter() {
  95 + if (allGoodsTabClickTimes === 0 || !isObjectValueEqual(defaultOptCopy, defaultOpt)) {
  96 + // 第一次点进来或者改变了筛选参数时调用
  97 +
  98 + defaultOptCopy = $.extend(true, {}, defaultOpt);
  99 + allGoodsTabClickTimes++;
  100 + $.ajax({
  101 + type: 'GET',
  102 + url: location.protocol + '//m.yohobuy.com/product/search/filter',
  103 + data: defaultOpt,
  104 + success: function(data) {
  105 + $goodsContainer.append(data);
  106 +
  107 + // 初始化filter&注册filter回调
  108 + filter.initFilter({
  109 + fCbFn: getGoodsList,
  110 + hCbFn: function() {
  111 +
  112 + // 切换active状态到$pre上
  113 + $pre.addClass('active');
  114 + $pre.siblings('.filter').removeClass('active');
  115 + }
  116 + });
  117 + }
  118 + });
  119 + }
  120 +}
  121 +
  122 +// 绑定 getfilter 方法,在点击全部商品时调用
  123 +Tab.prototype.getfilter = getFilter;
  124 +Tab.prototype.getgoodslist = getGoodsList;
  125 +
  126 +$listNav.bind('contextmenu', function() {
  127 + return false;
  128 +});
  129 +
  130 +$listNav.on('touchend touchcancel', function(e) {
  131 + var $this = $(e.target).closest('li'),
  132 + nav,
  133 + navType,
  134 + $active;
  135 + var bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || '';
  136 +
  137 + if ($this.hasClass('filter')) {
  138 +
  139 + // 筛选面板切换状态
  140 + if ($this.hasClass('active')) {
  141 + filter.hideFilter();
  142 +
  143 + // 点击筛选钱的active项回复active
  144 + $pre.addClass('active');
  145 + $this.removeClass('active');
  146 + } else {
  147 + $pre = $this.siblings('.active');
  148 +
  149 + $pre.removeClass('active');
  150 + $this.addClass('active');
  151 +
  152 + filter.showFilter();
  153 + }
  154 + } else {
  155 +
  156 + if ($this.hasClass('new')) {
  157 + navType = 'new';
  158 + } else if ($this.hasClass('price')) {
  159 + navType = 'price';
  160 + } else if ($this.hasClass('discount')) {
  161 + navType = 'discount';
  162 + } else if ($this.hasClass('default')) {
  163 + navType = 'default';
  164 + } else if ($this.hasClass('sale')) {
  165 + navType = 'sale';
  166 + }
  167 +
  168 + nav = navInfo[navType];
  169 +
  170 + if ($this.hasClass('active')) {
  171 +
  172 + // 默认、最新无排序切换
  173 + if ($this.hasClass('default') || $this.hasClass('new')) {
  174 + return;
  175 + }
  176 +
  177 + if ($this.hasClass('price') || $this.hasClass('discount')) {
  178 +
  179 + // 价格/折扣切换排序状态
  180 + $this.find('.icon > .iconfont').toggleClass('cur');
  181 + $pre = $this; // 更新pre为当前项
  182 + nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
  183 + nav.order = nav.order === 0 ? 1 : 0; // 切换排序
  184 + }
  185 + } else {
  186 + $active = $this.siblings('.active');
  187 +
  188 + $pre = $this; // $pre为除筛选导航的其他导航项,若当前active的为筛选,则把$pre置为当前点击项
  189 +
  190 + if ($active.hasClass('filter')) {
  191 +
  192 + // 若之前active项为筛选,则隐藏筛选面板
  193 + filter.hideFilter();
  194 + } else {
  195 +
  196 + // 切换container显示
  197 + $goodsContainer.children('.container:not(.hide)').addClass('hide');
  198 +
  199 + switch (navType) {
  200 + case 'new':
  201 + $ngc.removeClass('hide');
  202 + break;
  203 +
  204 + case 'price':
  205 + $pgc.removeClass('hide');
  206 + break;
  207 +
  208 + case 'discount':
  209 + $dgc.removeClass('hide');
  210 + break;
  211 +
  212 + case 'default':
  213 + $defaultgc.removeClass('hide');
  214 + $fsgc.removeClass('hide');
  215 + break;
  216 +
  217 + case 'sale':
  218 + $sgc.removeClass('hide');
  219 + break;
  220 + default:
  221 + break;
  222 + }
  223 + }
  224 +
  225 + $active.removeClass('active');
  226 + $this.addClass('active');
  227 + }
  228 + if (nav.reload) {
  229 + $(document).trigger('shouldSendBpData', [bpIdData]);
  230 + getGoodsList({filtering: true});
  231 + }
  232 + }
  233 +});