node 星潮教室 二期

@@ -5,16 +5,49 @@
  */
 'use strict';
 
-// const library = '../../../library';
-// const channelModel = require('../models/channel');
 const mRoot = '../models';
 const _ = require('lodash');
-
-// const helpers = require(`${library}/helpers`);
-// const log = require(`${library}/logger`);
 const headerModel = require('../../../doraemon/models/header');
 const starModel = require(`${mRoot}/star`);
 
+const headTab = [
+    {
+        cur: false,
+        url: '/guang/star/index',
+        name: '全部'
+    },
+    {
+        cur: false,
+        url: '/guang/star/special',
+        name: '星专题'
+    },
+    {
+        cur: false,
+        url: '/guang/star/collocation',
+        name: '星搭配'
+    }
+];
+
+const headerData = headerModel.setNavHeader('新潮教室');
+
+const renderData = {
+    module: 'guang',
+    title: '新潮教室',
+    pageHeader: headerData
+}
+
+const curHeadTab = (num) => {
+    let i = 0;
+
+    for (i; i <= 2; i++) {
+        if (i === num) {
+            headTab[i].cur = true;
+        } else {
+            headTab[i].cur = false;
+        }
+    }
+};
+
 /**
  * 星潮教室首页
  * @param  {[object]} req
@@ -22,35 +55,64 @@ const starModel = require(`${mRoot}/star`);
  * @return {[type]}
  */
 exports.index = (req, res) => {
-    let headerData = headerModel.setNavHeader('新潮教室');
-    let renderData = {
-        // module: 'product',
-        // page: 'sale',
-        title: '新潮教室',
-        pageHeader: headerData,
-        pageFooter: true
-    };
-
-    starModel.getIndexData().then(() => {
-        res.render('star/index', _.assign(headerData, renderData, {
-            content: '',
-            headTab: [
-                {
-                    cur: true,
-                    url: '',
-                    name: '全部'
-                },
-                {
-                    cur: false,
-                    url: '',
-                    name: '星专题'
-                },
-                {
-                    cur: false,
-                    url: '',
-                    name: '星搭配'
-                }
-            ]
+    renderData.page = 'star';
+    starModel.getIndexData().then((result) => {
+        curHeadTab(0);
+        res.render('star/index', _.assign(renderData, {
+            content: result,
+            headTab: headTab
+        }));
+    });
+};
+
+/**
+ * 星专题
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.special = (req, res) => {
+    renderData.page = 'star';
+    starModel.getSpecialData().then((result) => {
+        curHeadTab(1);
+        res.render('star/special', _.assign(renderData, {
+            resources: result,
+            headTab: headTab
         }));
     });
 };
+
+
+/**
+ * 星搭配
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.collocation = (req, res) => {
+    renderData.page = 'collocation';
+    curHeadTab(2);
+    res.render('star/collocation', _.assign(renderData, {
+        headTab: headTab
+    }));
+}
+
+/**
+ * 星搭配文章请求
+ * @param  {[object]} req
+ * @param  {[object]} res
+ * @return {[type]}
+ */
+exports.collocationList = (req, res) => {
+    let params = Object.assign({}, req.query);
+    let uid = 9239279 || req.user.uid || 0;
+
+    starModel.getCollocationListData(params, uid).then((result) => {
+        res.render('star/collocation-list', _.assign({
+            layout: false,
+            params: params,
+            collocationList: result
+        }));
+    });
+    
+}

@@ -19,9 +19,8 @@ const serviceAPI = new ServiceAPI();
  */
 const getResources = (page) => {
     const contentCode = {
-        sale: '7c2b77093421efa8ae9302c91460db73',
-        breakCode: '7c2b77093421efa8ae9302c91460db73',
-        vip: '7c2b77093421efa8ae9302c91460db73'
+        index: '8adc27fcf5676f356602889afcfd2a8e',
+        special: '89cc20483ee2cbc8a716dcfe2b6c7603'
     };
 
     return serviceAPI.get('operations/api/v5/resource/get', sign.apiSign({
@@ -36,10 +35,36 @@ const getResources = (page) => {
     });
 };
 
-
 /**
  * 星潮首页
  */
 exports.getIndexData = () => {
-    getResources('index');
-};
+    return getResources('index');
+}
+
+/**
+ * 星专题
+ */
+exports.getSpecialData = () => {
+    return getResources('special');
+}
+
+/**
+ * 星搭配
+ */
+exports.getCollocationListData = (params, uid) => {
+
+    return serviceAPI.get('guang/api/v5/article/getStarClassroomArticleList', sign.apiSign(Object.assign({
+        limit: '20',
+        uid: uid
+    }, params))).then((result) => {
+        if (result && result.code === 200) {
+            return res;
+        } else {
+            logger.error('获取星搭配文章列表返回 code 不是 200');
+            return [];
+        }
+    });
+}
+
+// guang/api/v5/article/getStarClassroomArticleList
\ No newline at end of file

@@ -12,6 +12,9 @@ const star = require(cRoot + '/star');
 
 const router = express.Router(); // eslint-disable-line
 
-router.get('/star', star.index); // 星潮教室首页
+router.get('/star/index', star.index); // 星潮教室首页
+router.get('/star/special', star.special); // 星潮教室星专题
+router.get('/star/collocation', star.collocation); // 星潮教室星搭配
+router.get('/star/collocation/list', star.collocationList); // 星潮教室星搭配文章请求
 
 module.exports = router;

+{{#each collocationList}}
+    <li articleId="{{articleId}}" data-bp-id="guang_collocationList_{{title}}_false" class="buriedpoint">
+
+        {{#if img}}
+            <a href="{{url}}"><img class="lazy" src ="" data-original="{{img}}" /></a>
+        {{/if}}
+
+        <div class="cont-area ">
+            <a href="{{url}}"><h2 class="title">{{title}}</h2></a>
+            <p class="cont-txt">{{content}}</p>
+            <div class="count-area">
+                <span class="time"><i class="iconfont time-ico">&#xe603;</i>{{time}}</span>
+                <span class="see"><i class="iconfont see-ico">&#xe602;</i>{{seeNum}}</span>
+                <span class="collection"><i class="iconfont collected-ico {{#isCollected}} collected {{/isCollected}}">&#xe605;</i></span>
+
+                {{# share}}
+                    <a href="{{this}}" class="iconfont forward">&#xe600;</a>
+                {{/ share}}
+
+            </div>
+        </div>
+    </li>
+{{/each}}
\ No newline at end of file

+<div class="star-page yoho-page"> 
+    {{> star/head-tab}}
+    <ul class="collocation-list"></ul>
+</div>
\ No newline at end of file

-<div class="star-page yoho-page"> 
+<div class="star-page yoho-page">
+{{log this}}
     {{> star/head-tab}}
-    {{#if focus}}
-        {{> resources/banner-top}}
-    {{/if}}
+
+    {{#content}}
+        {{#if focus}}
+            {{> resources/banner-top}}
+        {{/if}}
+    {{/content}}
 </div>    

+{{log this}}
+<div class="star-page yoho-page"> 
+    {{> star/head-tab}}
+    <ul class="special-list">
+        {{#each resources}}
+            {{# data}}
+                <li data-bp-id="guang_subjectList_{{title}}_false" class="buriedpoint">
+                    <a href="{{url}}">
+                        <img class="lazy" data-original="{{image src 640 310}}" alt="{{alt}}"/>
+                        <p>{{title}}</p>
+                    </a>            
+                </li>
+            {{/ data}}
+        {{/each}}
+    </ul>
+</div>
\ No newline at end of file

-<ul class="head-tab">
-    {{#each headTab}}
-    <li {{#if cur}} class="cur" {{/if}} ><a href="{{ url }}" data-bp-id="guang_tab_{{name}}_false">{{ name }}</a></li>
-    {{/each}}
-</ul>
\ No newline at end of file

@@ -29,7 +29,7 @@ exports.setNavHeader = (title, navBack, backUrl, navBtn) => {
 
     return _.merge({
         navTitle: '',
-        backUrl: true,
+        backUrl: 'history.go(-1);',
         navBack: true,
         navBtn: true,
         boys: true

+/**
+ * 星潮教室-星搭配分页加载
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/4/12
+ */
+
+var $ = require('yoho-jquery'),
+    tip = require('../plugin/tip'),
+    loading = require('../plugin/loading'),
+    lazyLoad = require('yoho-jquery-lazyload'),
+    ellipsis = require('yoho-mlellipsis'),
+    stopLoading = false;
+
+var page = 1;
+
+ellipsis.init();
+
+$('body').addClass('star-class-body');
+
+function massageAJAX(page) {
+    var $this, $title, $cont;
+
+    loading.showLoadingMask();
+    $.ajax({
+        type: 'GET',
+        url: '/guang/star/collocation/list',
+        data: {
+            page: page
+        },
+        dataType: 'html',
+        success: function(data) {
+            stopLoading = false;
+
+            if (data === '') {
+                stopLoading = true;
+                tip.show('没有更多内容了');
+            }
+
+            $('.collocation-list').append(data);
+
+            // 限制标题字数
+            $('.cont-area').each(function() {
+                $this = $(this);
+                $title = $this.find('.title');
+                $cont = $this.find('.cont-txt');
+
+                $title[0].mlellipsis(2);
+                $cont[0].mlellipsis(2);
+            });
+
+            loading.hideLoadingMask();
+            lazyLoad($('img.lazy'));
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+}
+
+function scrollHandler() {
+    if (!stopLoading && ($(window).scrollTop() + $(window).height() > $('body').height() - 100)) {
+        stopLoading = true;
+        page++;
+        massageAJAX(page);
+    }
+}
+
+// 分享成功
+window.successShare = function() {
+    $.ajax({
+        type: 'POST',
+        url: '/guang/starclass/forward',
+        success: function(data) {
+            var code = data.code;
+
+            if (code === 200 && data.data > 0) {
+                tip.show('分享成功，亲密度+10');
+            }
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+};
+
+$(window).scroll(function() {
+    scrollHandler();
+});
+
+if ($('.collocation-list').find('li').length === 0) {
+    massageAJAX(1);
+}
+
+// 星搭配收藏请求
+$(document).on('touchstart', '.collection', function(event) {
+    var $that = $(this),
+        $icon = $that.find('.collected-ico');
+
+    var type;
+
+    event.stopPropagation();
+
+    if ($icon.hasClass('collected')) {
+        type = 'del';
+    } else {
+        type = 'fav';
+    }
+
+
+    $.ajax({
+        type: 'POST',
+        url: '/guang/starclass/setFavorite',
+        data: {
+            articleId: $that.parents('li').attr('articleId'),
+            type: type
+        },
+        success: function(data) {
+            var code = data.code;
+
+            if (code === 200) {
+                if ($icon.hasClass('collected')) {
+                    $icon.removeClass('collected');
+                } else {
+                    $icon.addClass('collected');
+                }
+
+            }
+
+            if (code === 201) {
+                if ($('#collocation-link').length <= 0) {
+                    $('body').append('<a href=\'' + data.data + '\' style="display:none;" id="collocation-link">' +
+                    '<span class="collocation-link"></span></a>');
+                }
+
+                $('.collocation-link').click();
+            }
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+});

+/**
+ * 星潮教室首页
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/5/31
+ */
+
+var $ = require('yoho-jquery'),
+    Swiper = require('yoho-swiper'),
+    lazyLoad = require('yoho-jquery-lazyload');
+
+lazyLoad($('img.lazy'));
+
+if ($('.swiper-container .swiper-slide').length > 1) {
+    new Swiper('.swiper-container', {
+        lazyLoading: true,
+        lazyLoadingInPrevNext: true,
+        loop: true,
+        autoplay: 3000,
+        autoplayDisableOnInteraction: false,
+        paginationClickable: true,
+        slideElement: 'li',
+        pagination: '.banner-top .pagination-inner'
+    });
+}
+

+.star-page {
+    .collocation-list {
+        width: 100%;
+        float: left;
+
+        li {
+            float: left;
+            width: 100%;
+            margin-top: 30px;
+            background: #000;
+
+            .cont-area {
+                width: 100%;
+                box-sizing: border-box;
+                padding: 30px;
+            }
+
+            .cont-txt {
+                font-size: 28px;
+                line-height: 46px;
+                color: #b0b0b0;
+                margin-top: 10px;
+            }
+
+            img {
+                width: 100%;
+            }
+
+            .title {
+                font-size: 40px;
+                line-height: 48px;
+                color: #fff;
+                width: 100%;
+            }
+        }
+    }
+
+    .count-area {
+        position: relative;
+        width: 100%;
+        height: 32px;
+
+        span {
+            font-size: 24px;
+            color: #b0b0b0;
+            height: 32px;
+            line-height: 32px;
+
+            i {
+                display: inline-block;
+                margin-right: 5px;
+                font-size: 24px;
+            }
+        }
+
+        .time {
+            float: left;
+        }
+
+        .see {
+            float: left;
+            margin-left: 20px;
+        }
+
+        .time-ico {
+            width: 24px;
+            height: 24px;
+        }
+
+        .see-ico {
+            width: 31px;
+            height: 24px;
+        }
+
+        .collection {
+            position: absolute;
+            right: 122px;
+        }
+
+        .collected-ico {
+            width: 34px;
+            height: 32px;
+            vertical-align: text-bottom;
+        }
+
+        .collected {
+            color: #D62927;
+        }
+
+        .forward {
+            width: 40px;
+            height: 28px;
+            position: absolute;
+            right: 23px;
+            margin-left: 45px;
+            font-size: 24px;
+            color: #b0b0b0;
+            height: 32px;
+            line-height: 32px;
+        }
+    }
+}
+
+.star-class-body {
+    background: #333;
+    width: 100%;
+    font: 12px/1.5 Arial,'黑体';
+    float: left;
+}
\ No newline at end of file

 @import "star";
+@import "special";
+@import "collocation";

+.star-page {
+    .special-list {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+
+        li {
+            width: 100%;
+            float: left;
+            background: #000;
+            margin-top: 30px;
+
+            img {
+                width: 100%;
+            }
+
+            p {
+                width: 100%;
+                height: 88px;
+                box-sizing: border-box;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                padding: 0 34px;
+                font-size: 34px;
+                line-height: 88px;
+            }
+
+            a {
+                color: #fff;
+            }
+        }
+    }
+}
+
+

@@ -48,7 +48,6 @@
     .banner-top {
         width: 100%;
         height: 310px;
-        margin-top: 30px;
         position: relative;
 
         .banner-swiper {