Merge branch 'feature/star' of git.yoho.cn:fe/yohobuywap-node into feature/star

王水玲
Commit 374f002014867bbe9248ae27edaae8737465bb77 2 parents 11d5dc73 1a267ac2
Showing 9 changed files with 135 additions and 162 deletions
app.js
apps/guang/controllers/star.js
apps/guang/router.js
apps/guang/views/action/star/index-html.hbs
package.json
public/js/guang/star.page.js
public/js/plugin/loading.js
public/js/plugin/pull-refresh.js
public/scss/guang/star/_star.css
--- a/app.js
View file @374f002
+++ b/app.js
View file @374f002
@@ -45,25 +45,26 @@ app.use(bodyParser.urlencoded({
     extended: false
 }));
 app.use(cookieParser());
-app.use(session({
-    proxy: true,
-    resave: false,
-    saveUninitialized: true,
-    unset: 'destroy',
-    secret: 'nothing', // 兼容 PHP SESSION，sessionID 不加密
-    name: 'PHPSESSID', // 兼容 PHP SESSION
-    genid: () => {
-        return uuid.v4(); // 兼容 PHP SESSION
-    },
-    cookie: {
-        domain: 'yohobuy.com'
-    },
-    store: new MemcachedStore({
-        hosts: config.memcache.session,
-        prefix: 'qinsessionsession:', // 兼容 PHP SESSION
-        key: 'yohobuy_session' // 兼容 PHP SESSION
-    })
-}));
+
+// app.use(session({
+//     proxy: true,
+//     resave: false,
+//     saveUninitialized: true,
+//     unset: 'destroy',
+//     secret: 'nothing', // 兼容 PHP SESSION，sessionID 不加密
+//     name: 'PHPSESSID', // 兼容 PHP SESSION
+//     genid: () => {
+//         return uuid.v4(); // 兼容 PHP SESSION
+//     },
+//     cookie: {
+//         domain: 'yohobuy.com'
+//     },
+//     store: new MemcachedStore({
+//         hosts: config.memcache.session,
+//         prefix: 'qinsessionsession:', // 兼容 PHP SESSION
+//         key: 'yohobuy_session' // 兼容 PHP SESSION
+//     })
+// }));
 app.use((req, res, next) => {
     req.user = {};
--- a/apps/guang/controllers/star.js
View file @374f002
+++ b/apps/guang/controllers/star.js
View file @374f002
@@ -56,7 +56,7 @@ exports.index = (req, res) => {
     }, processPublicData(req, '星潮教室')));
 };
-exports.ajaxIndexHtml = (req, res) => {
+exports.getIndexHtml = (req, res) => {
     starModel.getIndexData().then((result) => {
         res.render('star/index-html', _.assign({
             layout: false,
--- a/apps/guang/router.js
View file @374f002
+++ b/apps/guang/router.js
View file @374f002
@@ -13,7 +13,7 @@ const star = require(cRoot + '/star');
 const router = express.Router(); // eslint-disable-line
 router.get('/star', star.index); // 星潮教室首页
-router.get('/star/ajaxIndexHtml', star.ajaxIndexHtml); // 星潮教室首页
+router.get('/star/getIndexHtml', star.getIndexHtml); // 星潮教室首页
 router.get('/star/detail', star.detail); // 明星文章专区
 router.get('/star/detailList', star.detailList); // 明星文章专区文章Ajax请求
 router.get('/star/special', star.special); // 星潮教室星专题
--- a/apps/guang/views/action/star/index-html.hbs
View file @374f002
+++ b/apps/guang/views/action/star/index-html.hbs
View file @374f002
- <div class="avatar-swiper avatar-1">
-    <ul class="clearfix swiper-wrapper">
-        {{# starAvatar}}
-            <li class="swiper-slide">
-                <img class="rank-avatar" data-url="{{url}}" src="{{image cover 180 180}}">
-            </li>
-        {{/ starAvatar}}
-    </ul>
-</div>
-<div class="fliptop">松手开始刷新...</div> 
+<div class="loading-tip">松手开始刷新...</div>
 <div class="star-wrap">
     <div class="star-content">
         {{#content}}
@@ -16,14 +7,16 @@
             {{/if}}
         {{/content}}
-        <div class="avatar-swiper avatar-0">
-            <ul class="clearfix swiper-wrapper">
-                {{# starAvatar}}
-                    <li class="swiper-slide">
-                        <img class="rank-avatar" data-url="{{url}}" src="{{image cover 180 180}}">
-                    </li>
-                {{/ starAvatar}}
-            </ul>
+        <div class="avatar-wrap">
+            <div class="avatar-swiper avatar">
+                <ul class="clearfix swiper-wrapper">
+                    {{# starAvatar}}
+                        <li class="swiper-slide">
+                            <img class="rank-avatar" data-url="{{url}}" src="{{image cover 180 180}}">
+                        </li>
+                    {{/ starAvatar}}
+                </ul>
+            </div>
         </div>
         <ul class="star-info clearfix">
@@ -87,5 +80,3 @@
         </div>
     </div>
 </div> --}}
-
-
--- a/package.json
View file @374f002
+++ b/package.json
View file @374f002
@@ -33,11 +33,11 @@
   "dependencies": {
     "bluebird": "^3.4.0",
     "body-parser": "^1.15.0",
-    "cookie-parser": "^1.4.1",
+    "cookie-parser": "^1.4.3",
     "express": "^4.13.1",
     "express-handlebars": "^3.0.0",
     "influxdb-winston": "^1.0.1",
-    "lodash": "^4.12.0",
+    "lodash": "^4.13.1",
     "md5": "^2.1.0",
     "memcached": "^2.2.1",
     "moment": "^2.13.0",
@@ -49,16 +49,16 @@
     "serve-favicon": "^2.3.0",
     "uuid": "^2.0.2",
     "winston": "^2.2.0",
-    "winston-daily-rotate-file": "^1.0.1",
+    "winston-daily-rotate-file": "^1.1.3",
     "yoho-connect-memcached": "^1.0.3",
     "yoho-express-session": "^1.0.3"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
-    "ava": "^0.14.0",
+    "ava": "^0.15.2",
     "babel-preset-es2015": "^6.9.0",
     "babel-register": "^6.9.0",
-    "eslint": "^2.10.2",
+    "eslint": "^2.12.0",
     "eslint-config-yoho": "^1.0.1",
     "gulp": "^3.9.1",
     "gulp-cssnano": "^2.1.2",
@@ -68,15 +68,15 @@
     "gulp-util": "^3.0.7",
     "husky": "^0.11.4",
     "nodemon": "1.9.2",
-    "nyc": "^6.4.3",
+    "nyc": "^6.4.4",
     "postcss-assets": "^4.0.1",
-    "postcss-cachebuster": "^0.1.2",
+    "postcss-cachebuster": "^0.1.3",
     "postcss-calc": "^5.2.1",
     "postcss-center": "^1.0.0",
     "postcss-clearfix": "^1.0.0",
     "postcss-crip": "^2.0.0",
     "postcss-opacity": "^3.0.0",
-    "postcss-position": "^0.4.0",
+    "postcss-position": "^0.5.0",
     "postcss-pxtorem": "^3.3.1",
     "postcss-short": "^1.4.0",
     "postcss-sprites": "^3.1.2",
@@ -84,18 +84,18 @@
     "precss": "^1.4.0",
     "rewire": "^2.5.1",
     "shelljs": "^0.7.0",
-    "stylelint": "^6.4.1",
+    "stylelint": "^6.5.1",
     "stylelint-config-yoho": "^1.2.3",
-    "webpack": "^1.13.0",
+    "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1",
     "webpack-stream": "^3.1.0",
     "yoho-fastclick": "^1.0.6",
     "yoho-hammer": "^2.0.7",
     "yoho-handlebars": "^4.0.5",
-    "yoho-iscroll": "0.0.2",
+    "yoho-iscroll": "^5.2.0",
     "yoho-jquery": "^2.2.4",
     "yoho-jquery-lazyload": "^1.9.7",
-    "yoho-mlellipsis": "0.0.2",
+    "yoho-mlellipsis": "0.0.3",
     "yoho-swiper": "^3.3.1"
   }
 }
--- a/public/js/guang/star.page.js
View file @374f002
+++ b/public/js/guang/star.page.js
View file @374f002
@@ -16,7 +16,8 @@ var $window = $(window),
     $starArticle = $('.star-article'),
     $headTab = $('.head-tab'),
     stopLoading = false,
-    avatarSwiper = [];
+    avatarSwiper = [],
+    getIndexHtml;
 /*
     $swiperView = $('.swiper-view'),
@@ -49,132 +50,62 @@ function txtLimit(dom, item1, item2) {
 // 设置默认头像
 function setAvatar($userAvatar) {
     var myImage = new Image(),
-        avatar;
+        avatar = '';
     // 部分老用户没有头像，显示默认头像
     avatar = $userAvatar.data('avatar');
-    myImage.src = avatar || '';
+
+    if (avatar) {
+        myImage.src = avatar;
+    }
+
     myImage.onload = function() {
         $userAvatar.css('background-image', 'url(' + avatar + ')');
     };
 }
-function ajaxHtml() {
-    loading.showLoadingMask();
-    $.ajax({
-        type: 'GET',
-        url: '/guang/star/ajaxIndexHtml',
-        dataType: 'html',
-        success: function(data) {
-            stopLoading = false;
-
-            if (data === '') {
-                stopLoading = true;
-                tip.show('没有更多内容了');
-            }
-
-            $('.star-main').html(data);
-
-            // 限制标题字数
-            $('.cont-area').each(function() {
-                txtLimit($(this), '.title', '.cont-txt');
-            });
-
-            loading.hideLoadingMask();
-            lazyLoad($('img.lazy'));
-            bannerLen = $('.avatar-0 .swiper-slide').length;
-
-            setTimeout(function() {
-                setIndexAction();
-            }, 100);
-
-        },
-        error: function() {
-            tip.show('网络断开连接了~');
-        }
-    });
-}
-
 function setIndexAction() {
     var starIScroll;
-
-    var $avatar0 = $('.avatar-0'),
-        $avatar1 = $('.avatar-1');
+    var commonHeaderTop = $('#yoho-header').outerHeight();
+    var $loadingTip = $('.loading-tip');
+    var $avatarWrap = $('.avatar-wrap');
     // 下拉刷新，上拉加载
     starIScroll = new PullRefresh('.star-wrap', {
-        height: $(window).height() - $('#yoho-header').height() - $('.head-tab').height(),
+        height: $(window).height() - commonHeaderTop,
         pullDown: function() {
             if (!stopLoading) {
                 stopLoading = true;
-                ajaxHtml();
+                getIndexHtml();
             }
         }
-
-        // pullUp: function() {
-        //     // $headTab.slideUp();
-        // }
     });
     starIScroll.iScroll.on('scrollStart', function() {
-        $window.trigger('scroll');
-
-        // 上滑
-        if (this.directionY === 1) {
-            $headTab.slideUp();
-        } else {
-            $headTab.slideDown();
-        }
-
         // 下拉
         if (this.directionY === -1) {
-            $('.fliptop').slideDown();
+            $headTab.slideDown();
+            $loadingTip.slideDown();
         }
     });
     starIScroll.iScroll.on('scroll', function() {
-        // var scale = 1;
-
-        // if (this.y < 0 && this.startY > -40) {
-        //     console.log(headTabHeight + this.startY);
-        //     scale = 2 / headTabHeight;
-        // }
-        // $headTab.css({
-        //     transfrom: 'scale(' + scale + ')'
-        // });
-
-        if (this.startY < -180) {
-            $avatar0.hide();
-            $avatar1.show();
-
-            if (!avatarSwiper[1]) {
-                avatarSwiper[1] = new Swiper('.avatar-1', {
-                    loop: true,
-
-                    // loopedSlides: bannerLen,
-                    initialSlide: 2,
-                    centeredSlides: true,
-                    slidesPerView: 'auto',
-                    spaceBetween: 10,
-                    slidesOffsetBefore: '-' + $('.avatar-1').find('li').not('.swiper-slide-visible').width() / 2,
-                    watchSlidesProgress: true,
-                    watchSlidesVisibility: true,
-                    observer: true,
-                    observeParents: true
-                });
-
-                avatarSwiper[0].params.control = avatarSwiper[1];// 需要在Swiper2初始化后，Swiper1控制Swiper2
-                avatarSwiper[1].params.control = avatarSwiper[0];// 需要在Swiper1初始化后，Swiper2控制Swiper1
-            }
-
-            // avatarSwiper[1].slideTo($avatar0.find('.swiper-slide-active').index(), 1000, false);
+        if (commonHeaderTop > $avatarWrap.offset().top) {
+            // $('.avatar-clone').css('top', $('.head-tab').outerHeight());
+            $('.avatar-clone').show();
+            starIScroll[0].update();
+            starIScroll[1].update();
+        } else {
+            $('.avatar-clone').hide();
         }
     });
     starIScroll.iScroll.on('scrollEnd', function() {
-        $window.trigger('scroll');
-
-        $('.fliptop').slideUp();
+        // 上滑
+        if (this.directionY === 1) {
+            $headTab.slideUp(1000);
+        }
+        $loadingTip.slideUp();
     });
     // 明星动态文章图片相关操作
@@ -268,7 +199,7 @@ function setIndexAction() {
     // }
     if (bannerLen > 1) {
-        avatarSwiper[0] = new Swiper('.avatar-0', {
+        avatarSwiper = new Swiper('.avatar', {
             loop: true,
             // loopedSlides: bannerLen,
@@ -276,12 +207,15 @@ function setIndexAction() {
             centeredSlides: true,
             slidesPerView: 'auto',
             spaceBetween: 10,
-            slidesOffsetBefore: '-' + $('.avatar-0').find('li').not('.swiper-slide-visible').width() / 2,
+            slidesOffsetBefore: -($('.avatar').find('li').not('.swiper-slide-visible').width() / 2),
             watchSlidesProgress: true,
             watchSlidesVisibility: true,
             observer: true,
             observeParents: true
         });
+
+        avatarSwiper[0].params.control = avatarSwiper[1];// 需要在Swiper2初始化后，Swiper1控制Swiper2
+        avatarSwiper[1].params.control = avatarSwiper[0];// 需要在Swiper1初始化后，Swiper2控制Swiper1
     }
     // 明星动态头像左右滑动
@@ -324,4 +258,43 @@ function setIndexAction() {
 }
-ajaxHtml();
+getIndexHtml = function() {
+    var $starMain = $('.star-main');
+
+    loading.showLoadingMask();
+    $.ajax({
+        url: '/guang/star/getIndexHtml',
+        dataType: 'html',
+        success: function(data) {
+            stopLoading = false;
+
+            if (!data) {
+                stopLoading = true;
+                tip.show('没有更多内容了');
+            }
+
+            $starMain.html(data);
+            bannerLen = $('.avatar .swiper-slide').length;
+
+            $starMain.prepend($('.avatar-swiper').clone().addClass('avatar-clone').hide());
+
+            // 限制标题字数
+            $('.cont-area').each(function() {
+                txtLimit($(this), '.title', '.cont-txt');
+            });
+
+            loading.hideLoadingMask();
+            lazyLoad($('img.lazy'));
+
+            setTimeout(function() {
+                setIndexAction();
+            }, 100);
+
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+};
+
+getIndexHtml();
--- a/public/js/plugin/loading.js
View file @374f002
+++ b/public/js/plugin/loading.js
View file @374f002
@@ -48,3 +48,5 @@ function hideLoadingMask() {
 exports.init = init;
 exports.showLoadingMask = showLoadingMask;
 exports.hideLoadingMask = hideLoadingMask;
+exports.show = showLoadingMask;
+exports.hide = hideLoadingMask;
--- a/public/js/plugin/pull-refresh.js
View file @374f002
+++ b/public/js/plugin/pull-refresh.js
View file @374f002
@@ -18,7 +18,8 @@ var $ = require('yoho-jquery'),
 // });
 function PullRefresh(seclector, options) {
-    var $em,
+    var $window = $(window),
+        $em,
         pullFormTop = false,
         pullStart,
         topOffset;
@@ -46,6 +47,7 @@ function PullRefresh(seclector, options) {
         }
         pullStart = this.y;
+        $window.trigger('scroll');
     });
     this.iScroll.on('scrollEnd', function() {
@@ -57,6 +59,8 @@ function PullRefresh(seclector, options) {
         if (pullStart === this.y && this.directionY === 1) {
             options.pullUp && options.pullUp();
         }
+
+        $window.trigger('scroll');
     });
 }
--- a/public/scss/guang/star/_star.css
View file @374f002
+++ b/public/scss/guang/star/_star.css
View file @374f002
@@ -115,6 +115,16 @@
         overflow: hidden;
         margin-top: 30px;
+        &.avatar-clone {
+            position: fixed;
+            left: 0;
+            top: 0;
+            margin-top: 86px;
+            padding: 5px 0;
+            background: #000;
+            z-index: 9;
+        }
+
         li {
             float: left;
             width: auto;
@@ -356,15 +366,7 @@
         background-size: contain;
     }
-    .avatar-1 {
-        background: #000;
-        position: relative;
-        z-index: 9;
-        margin-top: 0;
-        display: none;
-    }
-
-    .fliptop {
+    .loading-tip {
         display: none;
         text-align: center;
         color: #ccc;