fe / yohobuy-node · Commits

Go to a project

Authored by 阿达
Commit c466af00ead4d6bf54ef8d122a6f7da35e49cdc1 1 parent 440ad0d9

-提交部分banner代码

Inline Side-by-side
Showing 9 changed files with 162 additions and 67 deletions
... ... @@ -297,10 +297,10 @@ exports.other = () => {
bannerHeight: 450,
list: [
{
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/16/11/0176c310938764910f7fe5f22c450d3f00.jpg?imageView2/{mode}/w/{width}/h/{height'
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/16/11/0176c310938764910f7fe5f22c450d3f00.jpg?imageView2/{mode}/w/{width}/h/{height}'
},
{
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/20/10/01360161e0099b26083b163c5158f93409.jpg?imageView2/{mode}/w/{width}/h/{height'
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/20/10/01360161e0099b26083b163c5158f93409.jpg?imageView2/{mode}/w/{width}/h/{height}'
}
]
... ...
... ... @@ -2,7 +2,9 @@
{{# result}}
<div class="sale-discount-page yoho-page center-content .new-sale-page">
{{> sale/sale-banner}}
{{#topBanner}}
{{> sale/sale-banner}}
{{/topBanner}}
<div class="center-content clearfix">
{{#saleTitle}}
... ...
... ... @@ -2,7 +2,11 @@
<div class="new-sale-page product-page yoho-page">
{{# saleList}}
{{> sale/sale-banner}}
{{#topBanner}}
{{> sale/sale-banner}}
{{/topBanner}}
<div class="center-content clearfix">
{{# saleTitle}}
... ... @@ -24,4 +28,4 @@
</div>
</div>
{{/ saleList}}
</div>
\ No newline at end of file
</div>
... ...
{{# saleBanner}}
<div class="sale-list-banner" style="height: {{bannerHeight}}px;">
<ul>
{{# list}}
<li class="banner-img" style="background:url({{image img 1150 450}}) no-repeat top center;"></li>
{{/ list}}
</ul>
</div>
{{/ saleBanner}}
<div class="sale-list-banner" style="height: 360px;">
<ul>
{{# list}}
<li class="banner-img" style="background:url({{image img 1920 360}}) no-repeat top center;"></li>
{{/ list}}
</ul>
</div>
... ...
... ... @@ -5,9 +5,9 @@
<li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
<a href="{{href}}" target= "_blank">
{{#if @first}}
<img src="{{image img 1150 450}}">
<img src="{{image img 1150 450}}" style="height: 450px;width: 1150px">
{{^}}
<img class="lazy" data-original="{{image img 1150 450}}" alt="">
<img class="lazy" data-original="{{image img 1150 450}}" style="height: 450px;width: 1150px" alt="">
{{/if}}
</a>
{{# tips}}
... ...
... ... @@ -172,7 +172,7 @@
<div class="attr-content clearfix">
{{# price}}
<a class="attr{{#if checked}} checked{{/if}}" href="{{href}}">¥{{name}}</a>
<a class="attr{{#if checked}} checked{{/if}}" href="{{href}}">{{name}}</a>
{{/ price}}
<div class="ud-price-range">
... ...
... ... @@ -45,11 +45,16 @@
{{/brand}}
<p class="price">
{{# marketPrice}}
<span class="market-price">¥{{.}}</span>
<span class="market-price">{{.}}</span>
{{/ marketPrice}}
<span class="sale-price{{#unless marketPrice}}prime-cost{{/unless}}">
¥{{salePrice}}
¥{{salesPrice}}
</span>
</p>
<div class="goodsList hide">
{{#goodsList}}
<div class="list" imgUrl = "{{imagesUrl}}" url = "{{goodsId}}" cover = "{{cover1}}"></div>
{{/goodsList}}
</div>
</div>
</div>
... ...
... ... @@ -83,10 +83,90 @@ exports.init = function(num) {
});
}
//原来的
//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('MouseEnter', function(event) {
var itemMr = 10, // list的右边距
itemMb = 35, // list的下边距
ulStr = '',
imageList,
pic, pics,
listCount,
i,item,
ulNum,
wrapperWidth,
diffWidth,
... ... @@ -97,65 +177,68 @@ exports.init = function(num) {
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();
listCount = event.target.find('.goodsList').length;
pics = [];
for (i = 0 ; i < listCount ; i++) {
item = event.target.find('.goodsList').find('.list').eq(i);
pic = {
url: item.attr('url'),
src: item.attr('imgUrl'),
coverImg: item.attr('cover')
};
//pic = {
// url: 'dasda',
// src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/16/11/0176c310938764910f7fe5f22c450d3f00.jpg?imageView2/2/w/100/h/100',
// coverImg: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/16/11/0176c310938764910f7fe5f22c450d3f00.jpg?imageView2/2/w/100/h/100'
//};
pics.push(pic);
}
imageList = {
pics : pics
}
ulStr = colorList.colorListStr; // ajax请求的颜色列表
ulNum = colorList.ulNum;// ajax请求的颜色的数量
var data = imageList,
colorList = createColorList(imageList.pics, _from);
$goodInfoMain.append(event.targetDuplicate);
$goodSelectColor.append($(ulStr));
removeHtmlFn();
// 点击收藏商品不需要了
// if (data.isFavorite) {
// $goodInfoMain.find('.col-btn').addClass('coled');
// } else {
// $goodInfoMain.find('.col-btn').removeClass('coled');
// }
ulStr = colorList.colorListStr; // ajax请求的颜色列表
ulNum = colorList.ulNum;// ajax请求的颜色的数量
wrapperPl = $goodItemWrapper.css('paddingLeft');
wrapperPt = $goodItemWrapper.css('paddingTop');
containerPt = $goodsContainer.css('paddingTop');
$goodInfoMain.append(event.targetDuplicate);
$goodSelectColor.append($(ulStr));
wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
wrapperPl = $goodItemWrapper.css('paddingLeft');
wrapperPt = $goodItemWrapper.css('paddingTop');
containerPt = $goodsContainer.css('paddingTop');
// wrapperWidth = $goodItemWrapper.width();
wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
wrapperY = (event.targetY - 1) *
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);
// 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);
}
if (diffWidth <= 0) {
wrapperX = wrapperX + diffWidth - 25;
}
$goodItemWrapper.css({
width: wrapperWidth,
left: wrapperX,
top: wrapperY,
display: 'inline-block'
});
// 鼠标悬浮获取到商品信息后显示第一张图片
if (imageList.pics[0] && imageList.pics[0].src) {
$goodInfoMain.find('.good-thumb img').attr('src', imageList.pics[0].src);
}
});
productList.addHandler('MouseLeave', function() {
... ... @@ -169,6 +252,9 @@ exports.init = function(num) {
};
// 鼠标放在颜色列表上效果
$(document).on('hover', '.good-select-color li', function() {
var coverImg = $(this).find('img').attr('data-cover'),
... ...
... ... @@ -9,7 +9,7 @@ require('../common/slider');
require('../common/filter');
require('../common/sort-pager');
product.init();
product.init(4);
lazyLoad($('img.lazy'));
$('.slide-container').slider();
... ...