fe / yohobuywap-node · Commits

Go to a project

Authored by zhangxiaoru
Commit 0ad30ea2514f3b2f951e7fe10ac90550e295091d 2 parents 4f05a3d1 f4d1dfa3

shop

Inline Side-by-side
Showing 5 changed files with 208 additions and 130 deletions
@@ -26,7 +26,10 @@ const singleDay = (req, res) => { @@ -26,7 +26,10 @@ const singleDay = (req, res) => {
26 }; 26 };
27 27
28 const getSingleData = (req, res) => { 28 const getSingleData = (req, res) => {
29 - Promise.all([singleDayModel.getResourceData(req.query.contCode), singleDayModel.getTabData(req.query.channelId)]).then((result) => { 29 + Promise.all([
  30 + singleDayModel.getResourceData(req.query.contCode),
  31 + singleDayModel.getTabData(req.query.channel_id)
  32 + ]).then((result) => {
30 _.forEach(result[0], (item) => { 33 _.forEach(result[0], (item) => {
31 if (item.focus) { 34 if (item.focus) {
32 _.forEach(item.data, (banner) => { 35 _.forEach(item.data, (banner) => {
@@ -39,10 +42,7 @@ const getSingleData = (req, res) => { @@ -39,10 +42,7 @@ const getSingleData = (req, res) => {
39 }; 42 };
40 43
41 const getProductData = (req, res) => { 44 const getProductData = (req, res) => {
42 - let params = {  
43 - tabName: req.query.tab_name,  
44 - channelId: req.query.channelId  
45 - }; 45 + let params = req.query || {};
46 46
47 singleDayModel.getProductData(params).then(result => { 47 singleDayModel.getProductData(params).then(result => {
48 res.json(result); 48 res.json(result);
@@ -29,23 +29,26 @@ const getResourceData = (contCode) => { @@ -29,23 +29,26 @@ const getResourceData = (contCode) => {
29 }; 29 };
30 30
31 const getProductData = (params) => { 31 const getProductData = (params) => {
32 - return api.get('', { 32 + return api.get('', _.assign({
33 method: 'app.product.singleDay', 33 method: 'app.product.singleDay',
34 - tab_name: params.tabName,  
35 - channel_id: params.channelId  
36 - }, { 34 + limit: '20'
  35 + }, params), {
37 cache: true 36 cache: true
38 }).then((result) => { 37 }).then((result) => {
39 if (result && result.code === 200) { 38 if (result && result.code === 200) {
40 result.data = result.data || []; 39 result.data = result.data || [];
41 40
42 - _.forEach(result.data, (item) => {  
43 - item.url = helpers.urlFormat(`/product/pro_${item.productId}_${item.goodsId}/${item.cnAlphabet}.html`); // eslint-disable-line  
44 - item.url = helpers.appUrlFormat(item.url, 'go.productDetail', {  
45 - product_skn: item.productSkn 41 + if (result.data.length === 0) {
  42 + return '';
  43 + } else {
  44 + _.forEach(result.data, (item) => {
  45 + item.url = helpers.urlFormat(`/product/pro_${item.productId}_${item.goodsId}/${item.cnAlphabet}.html`); // eslint-disable-line
  46 + item.url = helpers.appUrlFormat(item.url, 'go.productDetail', {
  47 + product_skn: item.productSkn
  48 + });
46 }); 49 });
47 - });  
48 - return result.data; 50 + return result.data;
  51 + }
49 } else { 52 } else {
50 logger.error('get product data code no 200'); 53 logger.error('get product data code no 200');
51 return []; 54 return [];
@@ -3,3 +3,4 @@ @@ -3,3 +3,4 @@
3 <li class="swiper-slide">{{.}}</li> 3 <li class="swiper-slide">{{.}}</li>
4 {{/each}} 4 {{/each}}
5 </ul> 5 </ul>
  6 +
@@ -12,128 +12,187 @@ var $ = require('yoho-jquery'), @@ -12,128 +12,187 @@ var $ = require('yoho-jquery'),
12 tab = require('../../hbs/activity/single-day/tab.hbs'), 12 tab = require('../../hbs/activity/single-day/tab.hbs'),
13 product = require('../../hbs/activity/single-day/product-list.hbs'); 13 product = require('../../hbs/activity/single-day/product-list.hbs');
14 14
15 -var $productList = $('.product-list');  
16 -var getFlag = false;  
17 -  
18 -var getProductData = function(index, channelId, tabName) {  
19 - if (getFlag) {  
20 - return;  
21 - }  
22 - getFlag = true;  
23 - loading.showLoadingMask();  
24 - $.ajax({  
25 - type: 'GET',  
26 - url: '/activity/single-day/getProductData',  
27 - data: {  
28 - tab_name: tabName,  
29 - channelId: channelId  
30 - },  
31 - success: function(data) {  
32 - var $productTab = $('.product-tab');  
33 -  
34 - if (data) {  
35 - $productTab.eq(index).append(product(data)); 15 +var singleDay = {
  16 + initParams: function() {
  17 + var self = this,
  18 + opt = {
  19 + $productList: $('.product-list'),
  20 + $swiper: $('.swiper-tab'),
  21 + getFlag: false,
  22 + previousScrollTop: 0,
  23 + winH: $(window).height(),
  24 + noResult: '<p class="no-result">未找到相关商品</p>',
  25 + page: 0,
  26 + contCode: window.queryString.content_code || '',
  27 + channelId: window.queryString.channel_id
  28 + };
  29 +
  30 + self.swiperOTop = opt.$swiper[0].offsetTop;
  31 +
  32 + $.extend(self, opt);
  33 + },
  34 + getInitData: function() {
  35 + var self = this;
  36 + var _scrollHandler;
  37 +
  38 + self.initParams();
  39 +
  40 + _scrollHandler = function() {
  41 + var curScrollTop = $(window).scrollTop(),
  42 + index = $('.swiper-tab .active').index(),
  43 + curHeight = self.$productList.find('ul').eq(index).height();
  44 +
  45 + // 当scroll到1/4$goodsContainer高度后继续请求下一页数据
  46 + if (curScrollTop > self.previousScrollTop &&
  47 + (curScrollTop + self.winH >
  48 + $(document).height() - 0.25 * curHeight - 50)) {
  49 + self.getProductData({
  50 + index: index,
  51 + tabName: self.tabName(index),
  52 + isScroll: true
  53 + });
36 } 54 }
37 55
38 - $productTab.hide().eq(index).show();  
39 -  
40 - $('img.lazy').lazyload({  
41 - effect: 'fadeIn'  
42 - });  
43 - getFlag = false;  
44 - loading.hideLoadingMask();  
45 - },  
46 - error: function() {  
47 - tip.show('网络断开连接了~');  
48 - loading.hideLoadingMask();  
49 - getFlag = false;  
50 - }  
51 - });  
52 -}; 56 + self.previousScrollTop = curScrollTop;
  57 + };
53 58
54 -var tabName = function(index) {  
55 - return $('.swiper-tab li').eq(index).html();  
56 -}; 59 + $(window).on('scroll', function() {
  60 + if ($(window).scrollTop() > self.swiperOTop) {
  61 + self.$swiper.addClass('fixer');
  62 + } else {
  63 + self.$swiper.removeClass('fixer');
  64 + }
57 65
58 -var getInitData = function() {  
59 - var channelId = window.queryString.channel_id,  
60 - contCode = window.queryString.content_code || '',  
61 - $swiper = $('.swiper-tab'),  
62 - swiperOTop = $swiper[0].offsetTop;  
63 -  
64 - $(window).on('scroll', function() {  
65 - if ($(window).scrollTop() > swiperOTop) {  
66 - $swiper.addClass('fixer');  
67 - } else {  
68 - $swiper.removeClass('fixer');  
69 - }  
70 - });  
71 -  
72 - $.ajax({  
73 - type: 'GET',  
74 - url: '/activity/single-day/getSingleData',  
75 - data: {  
76 - channelId: channelId,  
77 - contCode: contCode  
78 - },  
79 - success: function(data) {  
80 - var i = 0, $swiperTab, $productTab;  
81 - var tabNum = window.queryString.tabNum ? window.queryString.tabNum - 1 : 0;  
82 -  
83 - if (data[0]) {  
84 - $('.banner').append(banner(data[0][0]));  
85 -  
86 - if ($('.banner-swiper').find('li').size() > 1) {  
87 - new Swiper('.banner-swiper', {  
88 - lazyLoading: true,  
89 - lazyLoadingInPrevNext: true,  
90 - loop: true,  
91 - autoplay: 3000,  
92 - autoplayDisableOnInteraction: false,  
93 - paginationClickable: true,  
94 - slideElement: 'li',  
95 - pagination: '.banner-top .pagination-inner'  
96 - }); 66 + window.requestAnimationFrame(_scrollHandler.bind(self));
  67 + });
  68 +
  69 + $.ajax({
  70 + type: 'GET',
  71 + url: '/activity/single-day/getSingleData',
  72 + data: {
  73 + channel_id: self.channelId,
  74 + contCode: self.contCode
  75 + },
  76 + success: function(data) {
  77 + var i = 0, $swiperTab;
  78 + var tabNum = window.queryString.tabNum ? window.queryString.tabNum - 1 : 0;
  79 +
  80 + if (data[0]) {
  81 + $('.banner').append(banner(data[0][0]));
  82 +
  83 + if ($('.banner-swiper').find('li').size() > 1) {
  84 + new Swiper('.banner-swiper', {
  85 + lazyLoading: true,
  86 + lazyLoadingInPrevNext: true,
  87 + loop: true,
  88 + autoplay: 3000,
  89 + autoplayDisableOnInteraction: false,
  90 + paginationClickable: true,
  91 + slideElement: 'li',
  92 + pagination: '.banner-top .pagination-inner'
  93 + });
  94 + }
97 } 95 }
98 - }  
99 96
100 - if (data[1]) {  
101 - $('.swiper-tab').append(tab(data[1])); 97 + if (data[1]) {
  98 + $('.swiper-tab').append(tab(data[1]));
102 99
103 - $swiperTab = $('.swiper-tab li'); 100 + $swiperTab = $('.swiper-tab li');
104 101
105 - new Swiper('.swiper-tab', {  
106 - slidesPerView: 'auto'  
107 - }); 102 + new Swiper('.swiper-tab', {
  103 + slidesPerView: 'auto'
  104 + });
108 105
109 - for (i; i < data[1].length; i++) {  
110 - $productList.append('<ul class="product-tab"></ul>');  
111 - } 106 + for (i; i < data[1].length; i++) {
  107 + self.$productList.append('<ul class="product-tab" data-page="0"></ul>');
  108 + }
  109 +
  110 + self.$productTab = $('.product-tab');
  111 +
  112 + self.getProductData({
  113 + index: tabNum,
  114 + tabName: self.tabName(tabNum)
  115 + });
  116 + $swiperTab.eq(tabNum).addClass('active');
112 117
113 - $productTab = $('.product-tab'); 118 + $swiperTab.on('click', function() {
  119 + var index = $(this).index();
114 120
115 - getProductData(tabNum, channelId, tabName(tabNum));  
116 - $swiperTab.eq(tabNum).addClass('active'); 121 + $swiperTab.removeClass('active').eq(index).addClass('active');
117 122
118 - $swiperTab.on('click', function() {  
119 - var index = $(this).index(); 123 + if (self.$productTab.eq(index).find('li').length > 0) {
  124 + self.$productTab.hide().eq(index).fadeIn();
  125 + } else {
  126 + self.getProductData({
  127 + index: index,
  128 + tabName: self.tabName(index)
  129 + });
  130 + }
  131 + });
  132 + }
120 133
121 - $swiperTab.removeClass('active').eq(index).addClass('active'); 134 + loading.hideLoadingMask();
  135 + },
  136 + error: function() {
  137 + tip.show('网络断开连接了~');
  138 + }
  139 + });
  140 + },
  141 + tabName: function(index) {
  142 + return $('.swiper-tab li').eq(index).html();
  143 + },
  144 + getProductData: function(params) {
  145 + var self = this;
  146 + var page;
  147 + var curProductTab = self.$productTab.eq(params.index);
  148 +
  149 + if (self.getFlag) {
  150 + return false;
  151 + }
122 152
123 - if ($productTab.eq(index).find('li').length > 0) {  
124 - $productTab.hide().eq(index).show(); 153 + page = +curProductTab.attr('data-page') + 1;
  154 + self.getFlag = true;
  155 + loading.showLoadingMask();
  156 +
  157 + $.ajax({
  158 + type: 'GET',
  159 + url: '/activity/single-day/getProductData',
  160 + data: {
  161 + tab_name: params.tabName || '',
  162 + channel_id: self.channelId,
  163 + page: page
  164 + },
  165 + success: function(data) {
  166 + if (data) {
  167 + curProductTab.find('.no-result').hide();
  168 + curProductTab.append(product(data));
  169 + curProductTab.attr('data-page', page);
  170 + self.getFlag = false;
  171 + } else {
  172 + if (page === 1) {
  173 + curProductTab.append(self.noResult);
  174 + self.getFlag = false;
125 } else { 175 } else {
126 - getProductData(index, channelId, tabName(index)); 176 + self.getFlag = true;
127 } 177 }
  178 + }
  179 +
  180 + if (!params.isScroll) {
  181 + self.$productTab.hide().eq(params.index).fadeIn();
  182 + }
  183 +
  184 + $('img.lazy').lazyload({
  185 + effect: 'fadeIn'
128 }); 186 });
  187 + loading.hideLoadingMask();
  188 + },
  189 + error: function() {
  190 + tip.show('网络断开连接了~');
  191 + loading.hideLoadingMask();
  192 + self.getFlag = false;
129 } 193 }
130 -  
131 - loading.hideLoadingMask();  
132 - },  
133 - error: function() {  
134 - tip.show('网络断开连接了~');  
135 - }  
136 - }); 194 + });
  195 + }
137 }; 196 };
138 197
139 require('../common'); 198 require('../common');
@@ -142,5 +201,5 @@ require('yoho-jquery-lazyload'); @@ -142,5 +201,5 @@ require('yoho-jquery-lazyload');
142 201
143 $(function() { 202 $(function() {
144 loading.showLoadingMask(); 203 loading.showLoadingMask();
145 - getInitData(); 204 + singleDay.getInitData();
146 }); 205 });
@@ -23,23 +23,29 @@ @@ -23,23 +23,29 @@
23 border-top: 1px solid #e0e0e0; 23 border-top: 1px solid #e0e0e0;
24 background: #fff; 24 background: #fff;
25 25
26 - ul {  
27 - margin-top: 28px;  
28 - }  
29 -  
30 li { 26 li {
31 float: left; 27 float: left;
32 padding: 0 50px; 28 padding: 0 50px;
33 - border-right: 1px solid #e0e0e0;  
34 - height: 30px;  
35 - line-height: 30px; 29 + height: 82px;
  30 + line-height: 82px;
36 color: #b0b0b0; 31 color: #b0b0b0;
37 width: auto; 32 width: auto;
38 font-size: 28px; 33 font-size: 28px;
  34 + background: #fff;
  35 + }
  36 +
  37 + li:after {
  38 + content: "";
  39 + height: 30px;
  40 + width: 2px;
  41 + border-left: 1px solid #e0e0e0;
  42 + position: absolute;
  43 + right: 0;
  44 + top: 28px;
39 } 45 }
40 46
41 - li:last-child {  
42 - border-right: none; 47 + li:last-child:after {
  48 + border-left: none;
43 } 49 }
44 50
45 .active { 51 .active {
@@ -72,7 +78,7 @@ @@ -72,7 +78,7 @@
72 .product-info { 78 .product-info {
73 width: 370px; 79 width: 370px;
74 height: 445px; 80 height: 445px;
75 - float: left; 81 + float: right;
76 position: relative; 82 position: relative;
77 border-bottom: 1px solid #e8e8e8; 83 border-bottom: 1px solid #e8e8e8;
78 padding-right: 30px; 84 padding-right: 30px;
@@ -87,6 +93,15 @@ @@ -87,6 +93,15 @@
87 width: 340px; 93 width: 340px;
88 } 94 }
89 95
  96 + .no-result {
  97 + width: 100%;
  98 + text-align: center;
  99 + vertical-align: middle;
  100 + color: #ccc;
  101 + font-size: 1.2em;
  102 + margin-top: 320px;
  103 + }
  104 +
90 h3 { 105 h3 {
91 margin-top: 50px; 106 margin-top: 50px;
92 font-size: 28px; 107 font-size: 28px;