detail.page.js 6.16 KB
/**
 * 逛详情页
 * @author: liuyue<yue.liu@yoho.cn>
 * @date: 2015/12/16
 */

var $ = require('yoho-jquery'),
    lazyLoad = require('yoho-jquery-lazyload'),
    $commentArea = $('#comment-area'),
    articleId = $('.detail-body').data('id');

var $commentList = $commentArea.find('.comments-wrap'),
    $commentNum = $('#article-comment > .comment-num'),
    commenting = false, // 评论请求尚未返回变量
    locating = false, // 评论页面正在跳转
    $commentBtn = $('#comment-btn'),
    MAX_COMMENTS_WORDS = 100,
    $wordCountTip = $('#word-count-tip');

require('./right-side');
require('./img-blink');

require('../common/share');
require('./detail-dynamic');

// Pjax
require('yoho-jquery-pjax');

lazyLoad({
    failure_limit: 50
});

// 点击评论滑到评论区
// $('#article-comment').click(function() {
//     $('html, body').animate({
//         scrollTop: $commentArea.offset().top - 20
//     }, 800);
// });

// 文章点赞与取消点赞
$('#prise-btn').click(function() {
    var prising = false,
        url,
        $this = $(this);

    if (prising) {
        return;
    }
    $this.toggleClass('liked');
    if ($this.hasClass('liked')) {

        // 点赞
        url = '/guang/info/praise';
    } else {

        // 取消点赞
        url = '/guang/info/cancelPraise';
    }
    prising = true;
    $.ajax({
        type: 'GET',
        url: url,
        data: {
            id: articleId
        }
    }).then(function(data) {
        if (data.code === 200) {
            $this.find('.like-num').html(data.data);
        }
        prising = false;
    });
}).bind('mouseenter mouseleave', function() {
    $(this).toggleClass('hover');
});

// 文章收藏与取消收藏
$('#collect-btn').click(function() {
    var collecting = false,
        url,
        col,
        $this = $(this);

    if (collecting) {
        return;
    }
    if ($this.hasClass('collected')) {

        // 取消收藏
        url = '/guang/info/cancelcollect';
        col = 0;
    } else {

        // 收藏
        url = '/guang/info/collect';
        col = 1;
    }
    collecting = true;
    $.ajax({
        type: 'GET',
        url: url,
        data: {
            id: articleId
        }
    }).then(function(data) {
        var hrefUrl;

        switch (data.code) {
            case 401:

                // 防止从已有col的页面再次进行跳转后出错的情况
                if (/\?col=(1|0)/.test(location.href)) {
                    hrefUrl = location.href.replace(/\?col=(1|0)/, '?col=' + col);
                } else {
                    hrefUrl = location.href + '?col=' + col;
                }
                location.href = '//www.yohobuy.com/signin.html?refer=' + encodeURI(hrefUrl);
                break;
            case 400:

                // alert(data.message);
                break;
            case 200:
                if (/\?col=(1|0)/.test(location.href)) {

                    // 如果页面url中含有col,为了防止页面刷新时收藏或者取消收藏会根据col来的问题,进行页面跳转拿掉参数
                    location.href = location.href.replace(/\?col=(1|0)/, '');
                } else {
                    $this.toggleClass('collected');
                }
                break;
        }
        collecting = false;
    });
}).bind('mouseenter mouseleave', function() {
    $(this).toggleClass('hover');
});

function showComment() {
    var commonlist = $('.comments-list').find('li').length;

    if (commonlist === 0) {
        $('.commnets-resultwrapper').hide();
        $('.comments-empty').show();
    } else {
        $('.commnets-resultwrapper').show();
        $('.comments-empty').hide();
    }
}
showComment();

// 评论
function comment(id) {
    var commentInfo = $('#comment-info').val();

    if (commentInfo === '') {
        alert('评论不能为空');
        return false;
    }
    commenting = true;
    $.ajax({
        url: '/guang/info/comment',
        data: {
            id: id,
            comment: commentInfo
        },
        type: 'post',
        success: function(data) {
            switch (data.code) {
                case 401:
                    locating = true;
                    location.href = '//www.yohobuy.com/signin.html?refer=' +
                                    window.escape(location.href + '#comment-info');
                    break;
                case 400:
                    alert(data.message);
                    break;
                case 200:
                    if (data.data) {
                        $commentList.html(data.data.content);
                        $commentNum.html(data.data.count);
                        showComment();

                        // clear comment-text
                        $('#comment-info').val('').keyup();
                    }
                    break;
            }
            commenting = false;
        }
    });
}

$commentBtn.click(function(e) {

    // 页面正在跳转或者正在AJAX请求时评论无效
    if (locating || commenting) {
        return false;
    }

    // 字数不符合要求
    if ($('#comment-info').val().length - MAX_COMMENTS_WORDS > 0) {
        return;
    }
    e.preventDefault();
    comment(articleId);
});


// comment pager pjax
$(document).pjax('.comment-pager a', '#pjax-container', {
    timeout: 5000
});

// 分页后移动到评论框的位置
$(document).on('pjax:end', function() {
    showComment();
    $('html,body').scrollTop($('#comment-info').offset().top);

    // 设置头部评论数
    $('#article-comment .comment-num').text($('#comment-area .comment-num').text());
});

$('#comment-info').keyup(function() {
    var len = $(this).val().length,
        showTxt;

    if (len === 0) {
        $wordCountTip.html('');
        $commentBtn.addClass('disable');
    } else {
        if (len - MAX_COMMENTS_WORDS <= 0) {
            showTxt = '还可以输入' + (MAX_COMMENTS_WORDS - len) + '字';
            $commentBtn.removeClass('disable');
        } else {
            showTxt = '已超过<span class="exceed-count">' + (len - MAX_COMMENTS_WORDS) + '</span>字';
            $commentBtn.addClass('disable');
        }
    }
    $wordCountTip.html(showTxt);
});

// init
$('#comment-info').trigger('keyup');