info-common.js 7.2 KB
/**
 * 资讯相关API
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/10
 */

let $ = require('yoho-jquery'),
    Hammer = require('../common/toy-hammer'),
    ellipsis = require('yoho-mlellipsis'),
    lazyLoad = require('yoho-jquery-lazyload'),
    Swiper = require('yoho-swiper2');

let tip = require('../plugin/tip');
let loading = require('../plugin/loading');

let $loadMoreInfo = $('#load-more-info');
let $loading = $(''),
    $noMore = $(''),
    $swiper = $('');

let searching = false;
let mySwiper = {};

let isLoading = false;

ellipsis.init();

if ($loadMoreInfo.length > 0) {
    $loading = $loadMoreInfo.children('.loading');
    $noMore = $loadMoreInfo.children('.no-more');
}

// 获取url中的参数
function getUrlParam(name) {

    // 构造一个含有目标参数的正则表达式对象
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');

    // 匹配目标参数
    let r = window.location.search.substr(1).match(reg);

    // 返回参数值
    if (r !== null) {
        return r[2];
    }

    return null;
}

// 初始化swiper
function initSwiper(typeId) {
    if (!typeId) {
        return;
    }

    if (!mySwiper[typeId]) {
        mySwiper[typeId] = new Swiper('.swiper-cont-' + typeId, {
            lazyLoading: true,
            wrapperClass: 'swiper-wrap-' + typeId,
            pagination: '.swiper-pagi-' + typeId,
            autoplay: 3000
        });
    }
}

/**
 * 设置指定资讯项的Lazyload和文字截取
 * @params $infos 资讯项
 */

function setLazyLoadAndMellipsis($infos) {
    lazyLoad($infos.find('img.lazy'));

    $infos.each(function() {
        let $this = $(this),
            $title = $this.find('.info-title'),
            $text = $this.find('.info-text');

        $title[0].mlellipsis(2);
        $text[0].mlellipsis(2);
    });
}

/**
 * 初始化资讯列表事件绑定
 * @params $container 逛资讯列表容器
 */
function initInfosEvt($container) {
    let cHammer;

    if (typeof $container === 'undefined') {
        return;
    }
    if (typeof $container[0] === 'undefined') {
        return;
    }
    cHammer = new Hammer($container[0]);

    // 点赞或者收藏事件
    cHammer.on('tap', function(e) {
        let $this = $(e.target),
            opt = 'ok',
            $btn,
            $info,
            yhChannel;

        e.preventDefault && e.preventDefault();

        // 点赞
        $btn = $this.closest('.like-btn');
        if ($btn.length > 0 && !isLoading) {

            if ($btn.hasClass('like')) {
                opt = 'cancel';
            }

            $info = $this.closest('.guang-info');

            isLoading = true;

            $.ajax({
                type: 'POST',
                url: '/guang/opt/praiseArticle',
                data: {
                    id: $info.data('id'),
                    opt: opt
                },
                success: function(data) {
                    let code = data.code;


                    if (code === 200) {
                        $btn.next('.like-count').text(data.data);

                        // 切换点赞状态
                        $btn.toggleClass('like');
                    }
                },
                error: function() {
                    tip.show('网络断开连接了~');
                },
                complete: function() {
                    isLoading = false;
                }
            });
            return;
        }

        // APP收藏
        $btn = $this.closest('.collect-btn');
        if ($btn.length > 0) {
            let uid = getUrlParam('uid');

            if (uid) {
                if ($btn.hasClass('collected')) {
                    opt = 'cancel';
                }

                $info = $this.closest('.guang-info');

                if (getUrlParam('yh_channel')) {
                    yhChannel = getUrlParam('yh_channel');
                }

                $.ajax({
                    type: 'POST',
                    url: location.protocol + '//m.yohobuy.com/guang/opt/collectArticle',
                    data: {
                        id: $info.data('id'),
                        opt: opt,
                        yh_channel: yhChannel,
                        uid: uid
                    },
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function(data) {
                        if (data.code && data.code === 200) {

                            // 切换收藏状态
                            $btn.toggleClass('collected');
                        } else {
                            tip.show(data.message);
                        }
                    },
                    error: function() {
                        tip.show('网络断开连接了~');
                    }
                });
            }
        }
    });

    setLazyLoadAndMellipsis($container.find('.guang-info'));
}

/**
 * 资讯LoadMore
 * @param $container 资讯容器 jqyeryObject
 * @param opt 请求参数
 * @param url[可选], 扩展请求的url而不使用默认值
 */
function loadMore($container, opt, url) {
    let num;

    if (searching) {
        return;
    }

    if (opt.end) {
        return;
    }

    if (opt.page === 1) {

        // 显示loading
        loading.showLoadingMask();
    }

    opt.app_version = window.queryString.app_version || '';

    num = $container.find('.guang-info').length;
    searching = true;
    $.ajax({
        type: 'GET',
        url: url ? url : '/guang/index/page', // 对于指定url的使用指定url(存在不同的控制器)
        data: opt,
        success: function(data) {
            let $newItems;

            if (data === '') {
                opt.end = true;
                searching = false;

                //
                $loading.addClass('hide');
                $noMore.removeClass('hide');

                return;
            }

            $container.append(data);

            $swiper = $container.find('.swiper-container');
            if ($swiper.length) {
                $swiper.addClass('swiper-cont-' + opt.type);
                $swiper.children('.swiper-wrapper').addClass('swiper-wrap-' + opt.type);
                $swiper.children('.swiper-pagination').addClass('swiper-pagi-' + opt.type);
                initSwiper(opt.type);
            }

            if (num > 0) {
                $newItems = $container.find('.guang-info:gt(' + (num - 1) + ')');
            } else {
                $newItems = $container.find('.guang-info');
            }

            setLazyLoadAndMellipsis($newItems);

            if (opt.page === 1) {
                loading.hideLoadingMask();

                $loading.removeClass('hide'); // 显示空屏加载时hide的隐藏

                window.rePosFooter(); // 插入内容后重新计算底部位置
            }

            opt.page++;

            searching = false;
            delete opt.isTab;
        },
        error: function() {
            console.log('error');
            tip.show('网络断开连接了~');
            searching = false;
            delete opt.isTab;
        }
    });
}


exports.mySwiper = mySwiper;
exports.initSwiper = initSwiper;
exports.initInfosEvt = initInfosEvt;
exports.setLazyLoadAndMellipsis = setLazyLoadAndMellipsis;
exports.loadMore = loadMore;