favorite.page.js 7.9 KB
/**
 * 个人中心--收藏
 * @author: zxr
 * @date: 2016/8/16
 */
require('scss/home/favorite.page.scss');
let $ = require('yoho-jquery'),
    Hammer = require('yoho-hammer'),
    Swiper = require('yoho-swiper');

let diaLog = require('js/plugin/dialog');

let tip = require('js/plugin/tip');

let $navLi = $('#fav-tab > li'),
    $favContainer = $('.fav-content > .fav-type'),
    swiperObj = {},
    favTabHammer,
    favContentHammer,
    $loadMore = $('.fav-load-more'),
    $brandLoadMore = $('.fav-brand-load-more'),
    winH = $(window).height(),
    footerH = $('#yoho-footer').height(),
    $favProductList = $('.fav-product-list'),
    $favBrandList = $('.fav-brand-swiper-wrapper'),
    pageId = 1,
    brandPageId = 1, // 收藏品牌的当前页数
    lockId = true,
    brandLockId = true, // 收藏品牌是否可下拉加载更多
    brandTab = false; // 当前是否停留在收藏品牌页

require('js/common');

function showFavTab(index) {
    $navLi.filter('.active').removeClass('active');
    $navLi.eq(index).addClass('active');

    $favContainer.filter('.show').removeClass('show');
    $favContainer.eq(index).addClass('show');
}

// 初始化swiper
function initSwiper(data) {
    let i,
        idStrReg = /container-(\d+)['"]{1}/gi,
        idReg = /\d+/,
        idArr = data.match(idStrReg),
        idArrLen = idArr && idArr.length || 0,
        containerId;

    // $swiperList = $('.swiper-container');
    for (i = 0; i < idArrLen; i++) {

        /* id = $swiperList.eq(i).attr('data-id');

        if (!!swiperObj[id]) {
            swiperObj[id].destroy(true, true);
        }*/

        containerId = idArr[i].match(idReg)[0];

        swiperObj[containerId] = new Swiper('#swiper-container-' + containerId, {
            slidesPerView: 'auto',
            grabCursor: true,
            slideElement: 'li',
            wrapperClass: 'swiper-wrapper-' + containerId,
            lazyLoading: true,
            watchSlidesVisibility: true
        });
    }
}

// 上拉加载更多
function loadData($parent, url, page) {
    if (url === 'favBrand') {
        brandLockId = true;
    } else {
        lockId = true;
    }
    $.ajax({
        method: 'get',
        url: '/home/' + url,
        data: {
            page: page
        },
        success: function(data) {
            let $loadingMask = $parent.closest('.fav-type').find('.fav-content-loading');

            if (url === 'favBrand') {
                $brandLoadMore.addClass('hide');
            } else {
                $loadMore.addClass('hide');
            }

            if (data.total === 0) {

                $loadingMask.addClass('hide');
                $parent.closest('.fav-type').find('.fav-null-box').removeClass('hide').addClass('show');
                window.rePosFooter();
            } else if (data.more === true) {

                // 处理data等于end时如果loadingMask存在且没有hide样式的情况
                if ($loadingMask && !$loadingMask.hasClass('hide')) {
                    $loadingMask.addClass('hide');

                    // $parent.closest('.fav-type').find('.fav-null-box').removeClass('hide');
                }

                $parent.closest('.fav-type').find('.fav-load-background')
                    .removeClass('fav-load-background').html('没有更多了');

                // hf: fixes bug to 修改没有数据还调接口,加载错误页面问题
                brandLockId = true;
                lockId = true;
            } else if (data.length > 10) {
                $parent.append(data);

                // 如果有数据loadingMask会被remove掉
                $loadingMask.remove();
                if (url === 'favBrand') {
                    initSwiper(data);// 如果是收藏品牌需要初始化swiper

                    brandLockId = false;// 请求成功后解锁品牌收藏page++
                } else {
                    lockId = false;// 请求成功后解锁商品收藏page++
                }
            }
            window.rePosFooter();
        }
    });
}

// 如果从品牌收藏入口进入
if ($('#fav-tab').hasClass('brand-tab')) {
    //  showFavTab(1);
    //  loadData($favBrandList, 'favBrand', 1);
    initSwiper($favBrandList.html());
    brandTab = true;
    window.rePosFooter();
    brandLockId = false;// 请求成功后解锁品牌收藏page++
} else {
    //  showFavTab(0);
    //  loadData($favProductList, 'favProduct', 1);
    brandTab = false;
    window.rePosFooter();
    lockId = false;// 请求成功后解锁商品收藏page++
}

favTabHammer = new Hammer(document.getElementById('fav-tab'));
favTabHammer.on('tap', function(e) {
    let $cur = $(e.target).closest('li'),
        index;

    if ($cur.length === 0 || $cur.hasClass('active')) {
        return;
    }

    index = $cur.index();

    if (index === 0) {
        brandTab = false;
        if ($favProductList.find('li').length === 0 &&
            !$favProductList.closest('.fav-type').find('.fav-null-box').hasClass('show')) {
            loadData($favProductList, 'favProduct', 1);
        }
    } else {
        brandTab = true;
        if ($favBrandList.find('div').length === 0 &&
            !$favBrandList.closest('.fav-type').find('.fav-null-box').hasClass('show')) {
            loadData($favBrandList, 'favBrand', 1);
        }
    }
    showFavTab(index);
    window.rePosFooter();

});

// 删除收藏的商品
favContentHammer = new Hammer(document.getElementById('fav-content'));

favContentHammer.on('tap', function(e) {
    let id = '';

    if (!$(e.target).hasClass('del-fav')) {
        return;
    }

    diaLog.showDialog({
        dialogText: '您确定要取消收藏吗?',
        hasFooter: {
            leftBtnText: '取消',
            rightBtnText: '确定'
        }
    }, function() {
        id = $(e.target).closest('li').data('id');
        $.ajax({
            method: 'post',
            url: '/home/favoriteDel',
            data: {
                id: id
            }
        }).then(function(data) {

            if (data.code === 200) {
                diaLog.showDialog({
                    autoHide: true,
                    fast: true,
                    dialogText: '已经取消收藏'
                });
                $(e.target).closest('li').remove();
                location.reload();
            } else if (data.code === 400) {
                diaLog.showDialog({
                    autoHide: true,
                    fast: true,
                    dialogText: data.message
                });
            } else {
                diaLog.showDialog({
                    autoHide: true,
                    fast: true,
                    dialogText: '取消收藏失败'
                });
            }
        }).fail(function() {

            // TODO

            diaLog.showDialog({
                autoHide: true,
                dialogText: '网络错误~'
            });
        });
    });
});

function scrollHandler() {

    // 距离底部未1/4列表高度+底部高度的时候加载更多
    if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $favBrandList.height() - footerH) {
        if (brandTab) {
            $brandLoadMore.filter('.hide').removeClass('hide');

            if (!brandLockId) {
                brandPageId++;
                loadData($favBrandList, 'favBrand', brandPageId);
            }

        } else {

            $loadMore.filter('.hide').removeClass('hide');

            if (!lockId) {
                pageId++;
                loadData($favProductList, 'favProduct', pageId);
            }
        }
    }
}

// srcoll to load more
$(window).scroll(scrollHandler);

$(document).on('touchend', '.swiper-header', function() {
    let url = $(this).find('.fav-more').attr('href');

    if (url) {
        window.location.href = url;
    }
});

$('.invalidGoods').on('touchstart touchend', function(e) {
    let $this = $(e.target).closest('span');

    if ($this.hasClass('del-fav')) {
        return;
    }
    tip.show('商品已下架');
    return false;
});