fe / yohobuywap-node · Commits

Go to a project

Authored by 梁志锋
Commit 3c1d837d7e85d2b21f046051cf3bfd866ca29a06 2 parents dddc4d7f 32055567

Merge remote-tracking branch 'remotes/origin/hotfix/star'

Inline Side-by-side
Showing 6 changed files with 226 additions and 136 deletions
@@ -24,6 +24,8 @@ const headTab = [ @@ -24,6 +24,8 @@ const headTab = [
24 } 24 }
25 ]; 25 ];
26 26
  27 +let md5Str = '';
  28 +
27 const _processPublicData = (req, title) => { 29 const _processPublicData = (req, title) => {
28 let renderData = { 30 let renderData = {
29 module: 'guang', 31 module: 'guang',
@@ -49,6 +51,7 @@ let index = (req, res, next) => { @@ -49,6 +51,7 @@ let index = (req, res, next) => {
49 pageHeadTab[0].cur = true; 51 pageHeadTab[0].cur = true;
50 52
51 starModel.getIndexData().then((result) => { 53 starModel.getIndexData().then((result) => {
  54 + md5Str = result.md5;
52 res.render('star/index', _.assign({ 55 res.render('star/index', _.assign({
53 page: 'star', 56 page: 'star',
54 isStarIndexPage: true, 57 isStarIndexPage: true,
@@ -58,24 +61,31 @@ let index = (req, res, next) => { @@ -58,24 +61,31 @@ let index = (req, res, next) => {
58 data: result.ads 61 data: result.ads
59 }, 62 },
60 starAvatar: result.starAvatar ? result.starAvatar : '', 63 starAvatar: result.starAvatar ? result.starAvatar : '',
61 - articles: result.articles 64 + articles: result.articles,
  65 + md5: result.md5
62 }, _processPublicData(req, '星潮教室'))); 66 }, _processPublicData(req, '星潮教室')));
63 }).catch(next); 67 }).catch(next);
64 }; 68 };
65 69
66 -// let getIndexHtml = (req, res, next) => {  
67 -// starModel.getIndexData().then((result) => {  
68 -// res.render('star/index-html', _.assign({  
69 -// layout: false,  
70 -// content: {  
71 -// focus: true,  
72 -// data: result.ads  
73 -// },  
74 -// starAvatar: result.starAvatar ? result.starAvatar : '',  
75 -// articles: result.articles  
76 -// }));  
77 -// }).catch(next);  
78 -// }; 70 +let getIndexHtml = (req, res, next) => {
  71 + starModel.getIndexData().then((result) => {
  72 + if (md5Str !== result.md5) {
  73 + md5Str = result.md5;
  74 +
  75 + res.render('star/index-html', _.assign({
  76 + layout: false,
  77 + content: {
  78 + focus: true,
  79 + data: result.ads
  80 + },
  81 + starAvatar: result.starAvatar ? result.starAvatar : '',
  82 + articles: result.articles
  83 + }));
  84 + } else {
  85 + res.json();
  86 + }
  87 + }).catch(next);
  88 +};
79 89
80 /** 90 /**
81 * 星专题 91 * 星专题
@@ -204,6 +214,7 @@ let detailList = (req, res, next) => { @@ -204,6 +214,7 @@ let detailList = (req, res, next) => {
204 214
205 module.exports = { 215 module.exports = {
206 index, 216 index,
  217 + getIndexHtml,
207 special, 218 special,
208 collocation, 219 collocation,
209 collocationList, 220 collocationList,
@@ -13,6 +13,7 @@ const star = require(cRoot + '/star'); @@ -13,6 +13,7 @@ const star = require(cRoot + '/star');
13 const router = express.Router(); // eslint-disable-line 13 const router = express.Router(); // eslint-disable-line
14 14
15 router.get('/star', star.index); // 星潮教室首页 15 router.get('/star', star.index); // 星潮教室首页
  16 +router.get('/star/getIndexHtml', star.getIndexHtml); // 星潮教室首页
16 router.get('/star/detail', star.detail); // 明星文章专区 17 router.get('/star/detail', star.detail); // 明星文章专区
17 router.get('/star/detailList', star.detailList); // 明星文章专区文章Ajax请求 18 router.get('/star/detailList', star.detailList); // 明星文章专区文章Ajax请求
18 router.get('/star/special', star.special); // 星潮教室星专题 19 router.get('/star/special', star.special); // 星潮教室星专题
1 <div class="star-page yoho-page"> 1 <div class="star-page yoho-page">
2 {{> star/head-tab}} 2 {{> star/head-tab}}
  3 + <div class="loading-tip">下拉刷新</div>
3 <div class="star-main"> 4 <div class="star-main">
4 - {{> star/index-html}} 5 + <div class="main-content">
  6 + {{> star/index-html}}
  7 + </div>
5 </div> 8 </div>
6 </div> 9 </div>
1 <div class="star-wrap"> 1 <div class="star-wrap">
2 - {{#content}}  
3 - {{#if focus}}  
4 - {{> resources/banner-top}}  
5 - {{/if}}  
6 - {{/content}} 2 + <div class="star-content">
  3 + {{#content}}
  4 + {{#if focus}}
  5 + {{> resources/banner-top}}
  6 + {{/if}}
  7 + {{/content}}
7 8
8 - <div class="avatar-wrap">  
9 - <div class="avatar-swiper avatar">  
10 - <ul class="clearfix swiper-wrapper">  
11 - {{# starAvatar}}  
12 - <li class="swiper-slide">  
13 - <a href='{{url}}' style="background-image: url({{image cover 180 180}})" class="star"></a>  
14 - </li>  
15 - {{/ starAvatar}}  
16 - </ul> 9 + <div class="avatar-wrap">
  10 + <div class="avatar-swiper avatar">
  11 + <ul class="clearfix swiper-wrapper">
  12 + {{# starAvatar}}
  13 + <li class="swiper-slide">
  14 + <a href='{{url}}' style="background-image: url({{image cover 180 180}})" class="star"></a>
  15 + </li>
  16 + {{/ starAvatar}}
  17 + </ul>
  18 + </div>
17 </div> 19 </div>
18 - </div>  
19 20
20 - <ul class="star-info">  
21 - {{#each articles}}  
22 - <li data-id="{{id}}">  
23 - <div class="star-avatar">  
24 - {{#if isSwiper}}  
25 - <div class="article-avatar-swiper">  
26 - <ul class="clearfix swiper-wrapper">  
27 - {{#each tags}}  
28 - <li class="swiper-slide">  
29 - <a href='{{avatarUrl}}'>  
30 - <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>  
31 - <p class="name">{{tagName}}</p>  
32 - </a>  
33 - </li>  
34 - {{/each}}  
35 - </ul>  
36 - </div>  
37 - {{else}}  
38 - {{# tags}}  
39 - <a href="{{avatarUrl}}">  
40 - <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>  
41 - <p class="name">{{tagName}}</p>  
42 - </a>  
43 - {{/ tags}}  
44 - {{/if}}  
45 - </div>  
46 - <a class="star-article" href='{{url}}'>  
47 - <i class="article-arrow"></i>  
48 - <h2 class="article-title">{{title}}</h2>  
49 - <div class="artice-cont">  
50 - <p>{{articeTxt}}</p>  
51 - <div class="artice-imgs-area">  
52 - <img data-original="{{image src 266 266}}" class="lazy"/> 21 + <ul class="star-info clearfix">
  22 + {{#each articles}}
  23 + <li data-id="{{id}}">
  24 + <div class="star-avatar">
  25 + {{#if isSwiper}}
  26 + <div class="article-avatar-swiper">
  27 + <ul class="clearfix swiper-wrapper">
  28 + {{#each tags}}
  29 + <li class="swiper-slide">
  30 + <a href='{{avatarUrl}}'>
  31 + <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
  32 + <p class="name">{{tagName}}</p>
  33 + </a>
  34 + </li>
  35 + {{/each}}
  36 + </ul>
  37 + </div>
  38 + {{else}}
  39 + {{# tags}}
  40 + <a href="{{avatarUrl}}">
  41 + <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
  42 + <p class="name">{{tagName}}</p>
  43 + </a>
  44 + {{/ tags}}
  45 + {{/if}}
  46 + </div>
  47 + <a class="star-article" href='{{url}}'>
  48 + <i class="article-arrow"></i>
  49 + <h2 class="article-title">{{title}}</h2>
  50 + <div class="artice-cont">
  51 + <p>{{articeTxt}}</p>
  52 + <div class="artice-imgs-area">
  53 + <img data-original="{{image src 266 266}}" class="lazy" />
53 54
54 - {{!-- <ul class="artice-imgs">  
55 - {{#each articeImg}}  
56 - <li><img src="{{image . 640 640}}" /></li>  
57 - {{/each}}  
58 - </ul> --}} 55 + {{!-- <ul class="artice-imgs">
  56 + {{#each articeImg}}
  57 + <li><img src="{{image . 640 640}}" /></li>
  58 + {{/each}}
  59 + </ul> --}}
59 60
  61 + </div>
60 </div> 62 </div>
61 - </div>  
62 - <div class="artice-o">  
63 - <span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>  
64 - <span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>  
65 - </div>  
66 - </a>  
67 - </li>  
68 - {{/each}}  
69 - </ul> 63 + <div class="artice-o">
  64 + <span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
  65 + <span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>
  66 + </div>
  67 + </a>
  68 + </li>
  69 + {{/each}}
  70 + </ul>
  71 + </div>
70 </div> 72 </div>
71 73
72 {{!-- <div class="view-img"> 74 {{!-- <div class="view-img">
@@ -6,16 +6,19 @@ @@ -6,16 +6,19 @@
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
8 Swiper = require('yoho-swiper'), 8 Swiper = require('yoho-swiper'),
  9 + tip = require('../plugin/tip'),
9 lazyLoad = require('yoho-jquery-lazyload'), 10 lazyLoad = require('yoho-jquery-lazyload'),
10 - ellipsis = require('yoho-mlellipsis'); 11 + ellipsis = require('yoho-mlellipsis'),
  12 + loading = require('../plugin/loading'),
  13 + PullRefresh = require('../plugin/pull-refresh');
11 14
12 var $window = $(window), 15 var $window = $(window),
13 - $starMain = $('.star-main'),  
14 - $bannerTop = $('.banner-top'),  
15 - $starArticle = $('.star-article'),  
16 - $avatarWrap = $('.avatar-wrap'),  
17 - bannerLen = $avatarWrap.find('.swiper-slide').length,  
18 - avatarTop = parseInt($starMain.find('.avatar').css('margin-top'), 10), 16 + stopLoading = false,
  17 + $mainContent = $('.main-content'),
  18 + $headTab = $('.head-tab'),
  19 + headTabH = $headTab.height(),
  20 + scrollH = $(window).height() - headTabH,
  21 + $loadingTip = $('.loading-tip'),
19 u = navigator.userAgent, 22 u = navigator.userAgent,
20 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 23 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
21 24
@@ -29,19 +32,22 @@ var $window = $(window), @@ -29,19 +32,22 @@ var $window = $(window),
29 var mySwiper; 32 var mySwiper;
30 */ 33 */
31 34
32 -var res, avatarSwiper, avatarSwiperClone, $avatarClone; 35 +var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml,
  36 + $avatarClone, $starArticle, $avatarWrap, starIScroll;
33 37
34 var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2; 38 var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2;
35 39
36 -require('../common');  
37 -  
38 if ($window.width() === 375 && isiOS) { 40 if ($window.width() === 375 && isiOS) {
39 swiperNum = 32; 41 swiperNum = 32;
40 } 42 }
41 43
  44 +require('../common');
  45 +
42 lazyLoad($('img.lazy')); 46 lazyLoad($('img.lazy'));
43 ellipsis.init(); 47 ellipsis.init();
44 48
  49 +$window.on('mousewheel', false);
  50 +
45 // 限制标题字数 51 // 限制标题字数
46 function txtLimit(dom, item1, item2) { 52 function txtLimit(dom, item1, item2) {
47 var $title = dom.find(item1), 53 var $title = dom.find(item1),
@@ -73,7 +79,7 @@ function setAvatar($userAvatar) { @@ -73,7 +79,7 @@ function setAvatar($userAvatar) {
73 79
74 // 明星头像点击居中显示或跳转 80 // 明星头像点击居中显示或跳转
75 function bindAvatar(dom) { 81 function bindAvatar(dom) {
76 - var avatarKey = dom.index(); 82 + avatarKey = dom.index();
77 83
78 if (!dom.hasClass('swiper-slide-active')) { 84 if (!dom.hasClass('swiper-slide-active')) {
79 if (avatarKey >= (2 * bannerLen + 1)) { 85 if (avatarKey >= (2 * bannerLen + 1)) {
@@ -91,48 +97,7 @@ function bindAvatar(dom) { @@ -91,48 +97,7 @@ function bindAvatar(dom) {
91 } 97 }
92 } 98 }
93 99
94 -// 悬浮明星头像  
95 -function cloneAvatarInit() {  
96 - if ($window.scrollTop() >= $bannerTop.height() + avatarTop) {  
97 - $avatarClone.show();  
98 -  
99 - if (!avatarSwiperClone) {  
100 - avatarSwiperClone = new Swiper('.avatar-0', {  
101 - loop: true,  
102 - initialSlide: $('.avatar-1').find('.swiper-slide-active').index() % bannerLen,  
103 - centeredSlides: true,  
104 - slidesPerView: 'auto',  
105 - loopedSlides: bannerLen,  
106 - spaceBetween: 10,  
107 - slidesOffsetBefore: -swiperNum,  
108 - watchSlidesProgress: true,  
109 - watchSlidesVisibility: true,  
110 - onInit: function() {  
111 - $('.avatar-0 li').on('click', function() {  
112 - res = bindAvatar($(this));  
113 - return res;  
114 - });  
115 - }  
116 - });  
117 -  
118 - avatarSwiperClone.params.control = avatarSwiper;  
119 - avatarSwiper.params.control = avatarSwiperClone;  
120 - }  
121 - } else {  
122 - $avatarClone.hide();  
123 - }  
124 -}  
125 -  
126 -// 初始化首页各种效果  
127 -function initAction() {  
128 - $starMain.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());  
129 - $avatarClone = $('.avatar-clone');  
130 -  
131 - // 限制标题字数  
132 - $('.cont-area').each(function() {  
133 - txtLimit($(this), '.title', '.cont-txt');  
134 - });  
135 - 100 +function setIndexAction() {
136 $('.avatar').each(function(key, item) { 101 $('.avatar').each(function(key, item) {
137 $(item).addClass('avatar-' + key); 102 $(item).addClass('avatar-' + key);
138 }); 103 });
@@ -198,14 +163,123 @@ function initAction() { @@ -198,14 +163,123 @@ function initAction() {
198 $('#yoho-header, .head-tab').on('touchmove', function() { 163 $('#yoho-header, .head-tab').on('touchmove', function() {
199 return false; 164 return false;
200 }); 165 });
  166 +}
  167 +
  168 +function initAction() {
  169 + $starArticle = $('.star-article');
  170 + $avatarWrap = $('.avatar-wrap');
  171 + bannerLen = $('.avatar-wrap').find('.swiper-slide').length;
  172 +
  173 + if ($avatarClone) {
  174 + $avatarClone.remove();
  175 + }
  176 +
  177 + $loadingTip.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
201 178
202 - cloneAvatarInit(); 179 + $avatarClone = $('.avatar-clone');
  180 +
  181 + // 限制标题字数
  182 + $('.cont-area').each(function() {
  183 + txtLimit($(this), '.title', '.cont-txt');
  184 + });
  185 +
  186 + lazyLoad($('img.lazy'));
  187 +
  188 + setIndexAction();
203 } 189 }
204 190
  191 +
  192 +// 首页数据请求
  193 +getIndexHtml = function() {
  194 + loading.showLoadingMask();
  195 + $.ajax({
  196 + url: '/guang/star/getIndexHtml',
  197 + dataType: 'html',
  198 + success: function(data) {
  199 + stopLoading = false;
  200 +
  201 + if (data) {
  202 + if (avatarSwiperClone) {
  203 + avatarSwiperClone.destroy(true, true);
  204 + avatarSwiperClone = '';
  205 + }
  206 +
  207 + $mainContent.html(data);
  208 +
  209 + initAction();
  210 + }
  211 +
  212 + loading.hideLoadingMask();
  213 + },
  214 + error: function() {
  215 + tip.show('网络断开连接了~');
  216 + }
  217 + });
  218 +};
  219 +
205 initAction(); 220 initAction();
206 221
207 -$window.scroll(function() {  
208 - cloneAvatarInit(); 222 +// 下拉刷新，上拉加载
  223 +starIScroll = new PullRefresh('.star-main', {
  224 + height: scrollH,
  225 + pullDown: function() {
  226 + if (!stopLoading) {
  227 + stopLoading = true;
  228 + getIndexHtml();
  229 + }
  230 + }
  231 +});
  232 +
  233 +starIScroll.iScroll.on('scrollStart', function() {
  234 + // 下拉
  235 + if (this.directionY === -1) {
  236 + $loadingTip.slideDown();
  237 + }
  238 +});
  239 +
  240 +starIScroll.iScroll.on('scroll', function() {
  241 + if (this.directionY !== -1) {
  242 + starIScroll.iScroll.refresh();
  243 + }
  244 +
  245 + if ($avatarWrap.offset().top <= headTabH) {
  246 + $avatarClone.show();
  247 +
  248 + if (!avatarSwiperClone) {
  249 + avatarSwiperClone = new Swiper('.avatar-0', {
  250 + loop: true,
  251 + initialSlide: $('.avatar-1').find('.swiper-slide-active').index() % bannerLen,
  252 + centeredSlides: true,
  253 + slidesPerView: 'auto',
  254 + loopedSlides: bannerLen,
  255 + spaceBetween: 10,
  256 + slidesOffsetBefore: -swiperNum,
  257 + watchSlidesProgress: true,
  258 + watchSlidesVisibility: true,
  259 + onInit: function() {
  260 + $('.avatar-0 li').on('click', function() {
  261 + res = bindAvatar($(this));
  262 + return res;
  263 + });
  264 + }
  265 + });
  266 +
  267 + avatarSwiperClone.params.control = avatarSwiper;
  268 + avatarSwiper.params.control = avatarSwiperClone;
  269 + }
  270 + }
  271 +
  272 + if ($avatarWrap.offset().top > $('.avatar-1')[0].scrollHeight) {
  273 + $avatarClone.hide();
  274 + }
  275 +});
  276 +
  277 +starIScroll.iScroll.on('scrollEnd', function() {
  278 + $loadingTip.slideUp();
  279 +});
  280 +
  281 +$('img').on('load', function() {
  282 + starIScroll && starIScroll.iScroll.refresh();
209 }); 283 });
210 284
211 window.setCookie('guangStarUid', window.queryString.uid); 285 window.setCookie('guangStarUid', window.queryString.uid);
@@ -56,7 +56,7 @@ @@ -56,7 +56,7 @@
56 } 56 }
57 } 57 }
58 58
59 - .star-wrap { 59 + .star-content {
60 background: #000; 60 background: #000;
61 } 61 }
62 62
@@ -418,8 +418,7 @@ @@ -418,8 +418,7 @@
418 418
419 .star-index-bg { 419 .star-index-bg {
420 background: #000; 420 background: #000;
421 -  
422 - /* overflow: hidden; */ 421 + overflow: hidden;
423 422
424 .star-page { 423 .star-page {
425 background: #000; 424 background: #000;