张泽世 / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit 542a18e4980b8ba3e18fd95ce3bc7f2a1f29416b 1 parent d7003954

tab select

Inline Side-by-side
Showing 6 changed files with 151 additions and 78 deletions
@@ -25,14 +25,14 @@ exports.index = (req, res, next) => { @@ -25,14 +25,14 @@ exports.index = (req, res, next) => {
25 /** 25 /**
26 * 潮流优选首页-资源位 26 * 潮流优选首页-资源位
27 */ 27 */
28 -exports.resources = (req, res, next) => { 28 +exports.resourcesTemplate = (req, res, next) => {
29 let code = req.query.code || ''; 29 let code = req.query.code || '';
30 30
31 plusstarModel.getResources({ 31 plusstarModel.getResources({
32 content_code: code 32 content_code: code
33 }).then(result => { 33 }).then(result => {
34 - res.render('plusstar/index', {  
35 - page: 'plusstar-index', 34 + res.render('plusstar/resources-template', {
  35 + page: 'plusstar-resources-template',
36 result: result, 36 result: result,
37 title: '潮流优选' 37 title: '潮流优选'
38 }); 38 });
@@ -24,6 +24,6 @@ router.get('/star/collocation/list', star.collocationList); // 星潮教室星 @@ -24,6 +24,6 @@ router.get('/star/collocation/list', star.collocationList); // 星潮教室星
24 router.post('/star/setFavorite', star.setFavorite); // 收藏文章 24 router.post('/star/setFavorite', star.setFavorite); // 收藏文章
25 25
26 router.get('/plusstar', plusstar.index); // 潮流优选 26 router.get('/plusstar', plusstar.index); // 潮流优选
27 -router.get('/plusstar/resources', plusstar.resources); // 潮流优选首页-资源位 27 +router.get('/plusstar/resources-template', plusstar.resourcesTemplate); // 潮流优选首页-资源位
28 28
29 module.exports = router; 29 module.exports = router;
@@ -12,65 +12,8 @@ @@ -12,65 +12,8 @@
12 {{/if}} 12 {{/if}}
13 <!--/tab-nav--> 13 <!--/tab-nav-->
14 14
15 - <div class="resources">  
16 - <!--banner-->  
17 - {{#each result.focus1}}  
18 - {{> resources/banner-top}}  
19 - {{/each}}  
20 -  
21 - {{#each result.title_image}}  
22 - <div class="header-title">  
23 - {{title}}  
24 - <a class="more" href="{{moreUrl}}">{{moreName}}</a>  
25 - </div>  
26 - <div class="title-image">  
27 - <a class="image" href="{{image.url}}">  
28 - <img class="lazy" data-original="{{image image.src 750 364}}">  
29 - </a>  
30 - </div>  
31 - {{/each}}  
32 -  
33 - <div class="focus-left-right">  
34 - {{#each result.focus2.data}}  
35 - <a href="{{url}}" title="{{title}}">  
36 - <img class="lazy" data-original="{{image src 250 250}}">  
37 - </a>  
38 - {{/each}}  
39 - </div>  
40 - <!--/focus-left-right-->  
41 -  
42 - {{#if result.recommend}}  
43 - <div class="header-title">  
44 - {{result.recommend.title.name}}  
45 - <a class="more" href="{{result.recommend.title.moreUrl}}">  
46 - {{result.recommend.title.moreName}}  
47 - </a>  
48 - </div>  
49 - <div class="recommend-content-five">  
50 - {{#each result.recommend.data}}  
51 - <a href="{{url}}" title="{{title}}">  
52 - <img class="lazy" data-original="{{image src 375 375}}">  
53 - </a>  
54 - {{/each}}  
55 - </div>  
56 - {{/if}}  
57 -  
58 - {{#if result.goods}}  
59 - <div class="header-title">  
60 - {{result.goods.title.name}}  
61 - <a class="more" href="{{result.goods.title.moreUrl}}">  
62 - {{result.goods.title.moreName}}  
63 - </a>  
64 - </div>  
65 -  
66 - <div class="goods">  
67 - <!--商品--->  
68 - {{#each result.goods.data}}  
69 - {{> common/goods}}  
70 - {{/each}}  
71 - </div><!--/goods-->  
72 - {{/if}}  
73 -  
74 - </div><!--/resources--> 15 + <div class="plusstar-resources">
  16 + <!--资源位数据模板-->
  17 + </div><!--/plusstar-resources-->
75 18
76 </div><!--/plusstar-page--> 19 </div><!--/plusstar-page-->
  1 +<div class="resources">
  2 + <!--banner-->
  3 + {{#each result.focus1}}
  4 + {{> resources/banner-top}}
  5 + {{/each}}
  6 +
  7 + {{#each result.title_image}}
  8 + <div class="header-title">
  9 + {{title}}
  10 + <a class="more" href="{{moreUrl}}">{{moreName}}</a>
  11 + </div>
  12 + <div class="title-image">
  13 + <a class="image" href="{{image.url}}">
  14 + <img class="lazy" data-original="{{image image.src 750 364}}">
  15 + </a>
  16 + </div>
  17 + {{/each}}
  18 +
  19 + <div class="focus-left-right">
  20 + {{#each result.focus2.data}}
  21 + <a href="{{url}}" title="{{title}}">
  22 + <img class="lazy" data-original="{{image src 250 250}}">
  23 + </a>
  24 + {{/each}}
  25 + </div>
  26 + <!--/focus-left-right-->
  27 +
  28 + {{#if result.recommend}}
  29 + <div class="header-title">
  30 + {{result.recommend.title.name}}
  31 + <a class="more" href="{{result.recommend.title.moreUrl}}">
  32 + {{result.recommend.title.moreName}}
  33 + </a>
  34 + </div>
  35 + <div class="recommend-content-five">
  36 + {{#each result.recommend.data}}
  37 + <a href="{{url}}" title="{{title}}">
  38 + <img class="lazy" data-original="{{image src 375 375}}">
  39 + </a>
  40 + {{/each}}
  41 + </div>
  42 + {{/if}}
  43 +
  44 + {{#if result.goods}}
  45 + <div class="header-title">
  46 + {{result.goods.title.name}}
  47 + <a class="more" href="{{result.goods.title.moreUrl}}">
  48 + {{result.goods.title.moreName}}
  49 + </a>
  50 + </div>
  51 +
  52 + <div class="goods">
  53 + <!--商品--->
  54 + {{#each result.goods.data}}
  55 + {{> common/goods}}
  56 + {{/each}}
  57 + </div><!--/goods-->
  58 + {{/if}}
  59 +
  60 +</div><!--/resources-->
  61 +
1 var $ = require('yoho-jquery'), 1 var $ = require('yoho-jquery'),
2 - Swiper = require('yoho-swiper'), 2 + tip = require('../plugin/tip'),
  3 + loading = require('../plugin/loading'),
3 lazyLoad = require('yoho-jquery-lazyload'); 4 lazyLoad = require('yoho-jquery-lazyload');
4 5
  6 +var plusstar = {};
  7 +
  8 +require('../common');
5 lazyLoad($('img.lazy')); 9 lazyLoad($('img.lazy'));
6 10
7 -// 头部banner轮播  
8 -if ($('.banner-swiper').find('li').size() > 1) {  
9 - new Swiper('.banner-swiper', {  
10 - lazyLoading: true,  
11 - lazyLoadingInPrevNext: true,  
12 - loop: true,  
13 - autoplay: 3000,  
14 - autoplayDisableOnInteraction: false,  
15 - paginationClickable: true,  
16 - slideElement: 'li',  
17 - pagination: '.banner-top .pagination-inner'  
18 - });  
19 -} 11 +plusstar = {
  12 + init: function() {
  13 + var that = this, $liDom;
  14 +
  15 + //事情委托机制
  16 + $('.plusstar-page .tab-nav ul').bind('click', function(even) {
  17 + $liDom = $(event.target).closest('li');
  18 + $(this).find('li').removeClass('focus');
  19 + $liDom.addClass('focus');
  20 + that.tabNav($liDom.data('code'));
  21 + });
  22 +
  23 + switch (window.cookie('_Channel')) {
  24 + case 'girls':
  25 + $liDom = $('.plusstar-page .tab-nav ul li:eq(1)');
  26 + break;
  27 + case 'lifestyle':
  28 + $liDom = $('.plusstar-page .tab-nav ul li:eq(2)');
  29 + break;
  30 + default:
  31 + $liDom = $('.plusstar-page .tab-nav ul li:eq(0)');
  32 + break;
  33 + }
  34 + that.tabNav($liDom.data('code'));
  35 + },
  36 + tabNav: function(code) {
  37 + loading.showLoadingMask();
  38 + $.ajax({
  39 + type: 'GET',
  40 + url: '/guang/plusstar/resources-template',
  41 + data: {
  42 + code: code
  43 + },
  44 + dataType: 'html',
  45 + success: function(data) {
  46 + if (data === '') {
  47 + tip.show('没有更多内容了');
  48 + }
  49 +
  50 + $('.plusstar-resources').html(data);
  51 +
  52 + loading.hideLoadingMask();
  53 + lazyLoad($('img.lazy'));
  54 + },
  55 + error: function() {
  56 + tip.show('网络断开连接了~');
  57 + }
  58 + });
  59 + }
  60 +};
  61 +
  62 +$(function() {
  63 + plusstar.init();
  64 +});
  1 +var $ = require('yoho-jquery'),
  2 + Swiper = require('yoho-swiper');
  3 +
  4 +var plusstarResources = {
  5 + init: function() {
  6 + // 头部banner轮播
  7 + if ($('.banner-swiper').find('li').size() > 1) {
  8 + new Swiper('.banner-swiper', {
  9 + lazyLoading: true,
  10 + lazyLoadingInPrevNext: true,
  11 + loop: true,
  12 + autoplay: 3000,
  13 + autoplayDisableOnInteraction: false,
  14 + paginationClickable: true,
  15 + slideElement: 'li',
  16 + pagination: '.banner-top .pagination-inner'
  17 + });
  18 + }
  19 + }
  20 +};
  21 +
  22 +$(function() {
  23 + plusstarResources.init();
  24 +});