header.js 6.33 KB
/**
 * 公共头部
 * @author: yyq<yanqing.yang@yoho.cn>
 * @date: 2016/7/1
 */
var $ = require('yoho-jquery');

var $miniBag = $('.mini-bag-box'),
    $bagGoodsList = $('.mini-goods-list');

var $searchWrap = $('.search-wrapper'),
    $searchForm = $('#search-form'),
    $searchKey = $('#search-key'),
    $searchHint = $('.search-hint'),
    $clearInput = $('.clear-input');

var goodsTpl = require('../../tpl/common/bag-goods.hbs');
var searchHintTpl = require('../../tpl/header/search-hint.hbs');
var delayer;

require('yoho-jquery-nanoscroller');

function handelProduct(data) {
    var goods = [],
        list = ['commonPros', 'preSalePros', 'noStorage'];
    var i, total = 0;

    for (i = 0; i < list.length; i++) {
        if (data[list[i]].length) {
            goods = goods.concat(data[list[i]]);
        }
    }

    $.each(goods, function(key) {
        total += +goods[key].buy_number || 0;
    });

    return {
        total: total,
        goods: goods
    };
}

function refreshBag() {
    var time = Date.parse(new Date()),
        oldTime = this.time;

    if (oldTime && time - oldTime < 100) {
        return;
    }
    this.time = time;
    $('.tag-bag .sub-wrapper').hide();
    $.ajax({
        type: 'GET',
        url: '/shopping/cart/data',
        data: {},
        success: function(result) {
            var data;

            if (result.code === 200) {
                data = handelProduct(result);

                if (data.total) {
                    $bagGoodsList.html(goodsTpl(data));
                    $miniBag.removeClass('bag-empty');
                } else {
                    $bagGoodsList.empty();
                    $miniBag.addClass('bag-empty');
                }
                $('.tag-bag .sub-wrapper').show();
                $('.mini-goods-list-wrap.nano').nanoScroller({disableResize: true});
            }
        }
    });
}

function getNavImg(code, dom) {
    $.ajax({
        type: 'GET',
        url: '/common/getBanner',
        data: {
            code: code
        },
        success: function(result) {
            if (result.code === 200) {
                dom.data('show', true).html('<a href="' + result.data.url +
                    '"><img src="' + result.data.src + '" title="' + result.data.title + '"></a>');
            }
        }
    });
}

$('.yoho-group a').hover(function() {
    var data = $(this).data();

    $(this).text(data.cn);
}, function() {
    var data = $(this).data();

    $(this).text(data.en);
});

$('.tag-bag').mouseenter(function() {
    refreshBag();
});

$bagGoodsList.on('click', '.del-good-btn', function() {
    var $this = $(this),
        data = $this.data();
    var list = [];

    if (!data) {
        return;
    }

    list.push({
        goods_type: data.type,
        buy_number: data.num,
        selected: 'Y',
        product_sku: data.sku,
        promotion_id: data.pid
    });
    $.ajax({
        type: 'DELETE',
        url: '/shopping/cart/product/remove',
        data: {skuList: JSON.stringify(list)},
        success: function(result) {
            if (result.code === 200) {
                $this.closest('.goods-item').remove();
            }
        }
    });

});

$('.contain-third').on({
    mouseenter: function() {
        var $thirdWrapper = $(this).children('.third-nav-wrapper'),
            $detail = $thirdWrapper.find('.show-detail');
        var data;

        if ($detail) {
            data = $detail.data();
            if (data.code && !data.show) {
                getNavImg(data.code, $detail);
            }
        }

        delayer = setTimeout(function() {
            $thirdWrapper.show();
        }, 200);
    },
    mouseleave: function() {
        var $thirdWrapper = $(this).children('.third-nav-wrapper');

        if (delayer) {
            clearTimeout(delayer);
        }
        $thirdWrapper.hide();
    }
});

$('.search-entry').click(function() {
    $searchWrap.show();
});

$searchKey.keyup(function(e) {
    var key = $searchKey.val();

    if (e.which === 13) {
        if (key) {
            $searchForm.submit();
        }
    }

    if (key) {
        $clearInput.show();
    } else {
        $clearInput.hide();
    }
});

// 关键词搜索联想
function searchSuggest(key) {
    $.get('//www.yohoblk.com/product/query/suggest', {
        keyword: key
    }, function(data) {
        if (data.length >= 1) {
            $searchHint.html(searchHintTpl({list: data})).show();
        } else {
            $searchHint.hide();
        }
    });
}

$searchKey.keyup(function(e) {
    var val = $.trim($(this).val()),
        $child = $searchHint.find('li'),
        $act = $searchHint.find('.action'),
        $focus;

    if (e.which > 36 && e.which < 41) {

        if (e.which === 38) {
            $focus = $act.prev();
            if (!$act.length || !$focus.length) {
                $focus = $child.eq($child.length - 1);
            }
        } else if (e.which === 40) {
            $focus = $act.next();
            if (!$act.length || !$focus.length) {
                $focus = $child.eq(0);
            }
        } else {
            return;
        }

        $child.removeClass('action');
        $focus.addClass('action');
        $(this).val($focus.find('.search-value').text());
    } else if (e.which === 13) {
        if (val) {
            $searchForm.submit();
        }
    } else {
        if ($searchHint && $searchHint.length) {
            val = val.replace(new RegExp('\'', 'gm'), ''); // 去掉特殊字符
            searchSuggest(val);
        }
    }

    if (val) {
        $clearInput.show();
    } else {
        $clearInput.hide();
    }
});

// ie8输入框提示特殊处理
// 应产品要求所有浏览器获得焦点提示文字隐藏
// if (!!window.ActiveXObject && !!document.documentMode) {
$searchKey.focus(function() {
    var key = $searchKey.val();

    if (key === 'search') {
        $searchKey.val('').css('color', '#fff');
    }
}).blur(function() {
    var key = $searchKey.val();

    if ($.trim(key) === '') {
        $searchKey.val('search').css('color', '#aaa');
    }

    setTimeout(function() {
        $searchHint.hide();
    }, 200);
}).val('search').css('color', '#aaa');

$clearInput.click(function() {
    $searchKey.val('');
    $(this).hide();
});

$(document).click(function(e) {
    var $tar = $(e.target);

    if (!$tar.closest('.search-entry').length) {
        $searchWrap.hide();
    }
});

exports.refreshBag = refreshBag;