/** *Description: 商品列表页 *Author: chenglong.wang@yoho.cn *Date: 2015/12/2 */ var $ = require('yoho.jquery'), lazyLoad = require('yoho.lazyload'), Handlebars = require('yoho.handlebars'), productEvent = require('../common/product-event'); var $goodsContainer = $('.goods-container'), $goodItem = $goodsContainer.find('.good-info'), $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'), $goodInfoMain = $goodsContainer.find('.good-info-main'), $goodSelectColor = $goodsContainer.find('.good-select-color'), $productListNav = $('.product-list-nav'), productList; lazyLoad($('img.lazy')); /** * @description 初始化鼠标移入商品列表弹层效果 * @num 每列存放商品的个数 */ exports.init = function(num) { productList = null; $goodItem.unbind(); productList = productEvent($goodItem, num); /** * @description 构造商品颜色列表的html结构 * @param data 商品颜色的数组,[url: '',src: ''] * @return json {'colorListStr': '', 'ulNum': ''} * */ function createColorList(data, _from) { var colorListStr = '', len = data.length, row = 4, //每列ul放4个li col = Math.ceil(len / row), //需要几**列**ul i, j, index, ulNum = 0; for (i = 0; i < col; i++) { colorListStr += '<ul>'; for (j = 0; j < row; j++) { index = i * row + j; if (index === len) { break; } colorListStr += '<li>' + '<a target="_blank" href="' + data[i * row + j].url + _from + '">' + '<img src="' + data[i * row + j].src + '" data-cover="' + data[i * row + j].coverImg + '" />' + '</a>' + '</li>'; if (j === row - 1) { colorListStr += '</ul>'; ulNum++; } } } if (ulNum < col) { colorListStr += '</ul>'; } return { colorListStr: colorListStr, ulNum: col }; } function removeHtmlFn() { $goodInfoMain.html(''); $goodSelectColor.html(''); $goodItemWrapper.css({ display: 'none' }); } productList.addHandler('MouseEnter', function(event) { var itemMr = 10, //list的右边距 itemMb = 35, //list的下边距 ulStr = '', ulNum, wrapperWidth, diffWidth, wrapperX, wrapperY, wrapperPl, //鼠标移入时弹层的左内边距 wrapperPt, //鼠标移入时弹层的上内边距 containerPt, //商品列表容器的上内边距 _from = event.target.attr('data-from') || ''; $.ajax({ type: 'POST', url: '/product/list/getProductPic', dataType: 'jsonp', jsonp: 'callback', data: { skn: event.target.attr('data-skn'), skc: event.target.attr('data-skc') } }).then(function(res) { var data = res.data, colorList = createColorList(data.pics, _from); removeHtmlFn(); ulStr = colorList.colorListStr; //ajax请求的颜色列表 ulNum = colorList.ulNum;//ajax请求的颜色的数量 $goodInfoMain.append(event.targetDuplicate); $goodSelectColor.append($(ulStr)); // 点击收藏商品不需要了 // if (data.isFavorite) { // $goodInfoMain.find('.col-btn').addClass('coled'); // } else { // $goodInfoMain.find('.col-btn').removeClass('coled'); // } wrapperPl = $goodItemWrapper.css('paddingLeft'); wrapperPt = $goodItemWrapper.css('paddingTop'); containerPt = $goodsContainer.css('paddingTop'); wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth; //wrapperWidth = $goodItemWrapper.width(); wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1); wrapperY = (event.targetY - 1) * (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1); //todo //event.offsetR表示当前列表距离浏览器右侧边缘的距离 diffWidth = event.offsetR - ((15 + 50) * ulNum + 25); if (diffWidth <= 0) { wrapperX = wrapperX + diffWidth - 25; } $goodItemWrapper.css({ width: wrapperWidth, left: wrapperX, top: wrapperY, display: 'inline-block' }); // 鼠标悬浮获取到商品信息后显示第一张图片 if (data.pics[0] && data.pics[0].src) { $goodInfoMain.find('.good-thumb img').attr('src', data.pics[0].src); } }); }); productList.addHandler('MouseLeave', function() { removeHtmlFn(); }); $goodItemWrapper.mouseleave(function() { removeHtmlFn(); }); }; //鼠标放在颜色列表上效果 $(document).on('hover', '.good-select-color li', function() { var coverImg = $(this).find('img').attr('data-cover'), $coverImg = $(this).closest('.good-item-wrapper').find('.good-detail-img').find('img'); $coverImg.attr('src', coverImg); }); // 左侧导航 $productListNav.find('h3').click(function(event) { var $this = $(this).closest('.product-list-nav'); if ($this.hasClass('active')) { $this.find('.sort-child-list').stop(true, true).slideUp(); } else { $this.find('.sort-child-list').stop(true, true).slideDown(); } $this.toggleClass('active'); }); //左侧需要ajax内容 (function() { var $brandCard = $('#brand-card'); var $brandFavor = $('#brand-favor'); var html; if ($brandCard.length) { $.ajax({ type: 'POST', url: '/product/index/getNodeContent', data: { node: $brandCard.data('node') } }).then(function(data) { $brandCard.html(data); }); } //品牌页请求 if ($brandFavor.length) { html = $('#pic-link-tpl').html(); $.ajax({ type: 'POST', url: '/product/index/getAdnav', data: { brandId: $brandFavor.data('id') } }).then(function(data) { if (data) { $('#brand-ad').html(Handlebars.compile(html)({ picLink: data })); } }); } }());