Authored by mark

Merge branch 'feature/new-product-detail' of http://git.yoho.cn/fe/yohobuy-node

…into feature/new-product-detail
... ... @@ -308,7 +308,7 @@ const _getSkuDataByProductBaseInfo = (data) => {
if (good.image_url) {
goodsGroup.thumbs.push({
url: '',
shower: helpers.image(good.image_url, 420, 560),
shower: good.image_url,
img: helpers.image(good.image_url, 75, 100)
});
}
... ...
... ... @@ -2,7 +2,7 @@
<div class="row activity-wrapper clearfix">
<span class="title pull-left">&nbsp;&nbsp;销: </span>
{{#if_cond activity.length '>=' 3}}
{{#if_cond activity.length '>' 3}}
<div class="activity-title">展开全部促销 <span class="iconfont index">&#xe610;</span> </div>
<div class="activity-container"></div>
{{/if_cond}}
... ...
... ... @@ -29,7 +29,16 @@
{{/ isPresell}}
{{/ tags}}
</div>
<img id="img-show" class="img-show" src="{{img}}">
<div id="min-img" class="position:relation;z-index:1">
<img id="img-show" class="img-show" src="{{img}}">
<div class="move-object hide"></div>
<div class="move-over"></div>
<div id="max" class="max hide">
<img id='big' src="">
</div>
</div>
<div class="share-row"><span class="title pull-left">分享:</span> {{> common/share }} </div>
</div>
<div id="thumbs" class="pull-right thumbs">
... ... @@ -37,7 +46,8 @@
<div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
{{#if focus}}
{{# thumbs}}
<img class="thumb" src="{{img}}" data-shower="{{shower}}">
<img class="thumb" src="{{img}}" data-shower="{{image shower 420 560}}"
data-origin="{{image shower 1001 1333}}">
{{/ thumbs}}
{{^}}
{{# thumbs}}
... ...
... ... @@ -24,8 +24,8 @@ module.exports = {
api: 'http://api.yoho.cn/',
service: 'http://service.yoho.cn/',
// api: 'http://dev-api.yohops.com:9999/',
// service: 'http://dev-service.yohops.com:9999/',
//api: 'http://dev-api.yohops.com:9999/',
//service: 'http://dev-service.yohops.com:9999/',
search: 'http://192.168.102.216:8080/yohosearch/'
},
... ...
... ... @@ -159,6 +159,96 @@ bindEvent.add(function() {
$imgShow.attr('src', src);
}
function bigImgShow(src) {
$('#big').attr('src', src);
}
// 查看详情功能
var moveWidth = 135;
var w = 420;
var h = 560;
var _w = 1000;
var radio = w / _w;
var $moveObj = $('.move-object');
var $max = $('.max');
function move(e) {
var x = e.pageX - $imgShow.offset().left;
var y = e.pageY - $imgShow.offset().top;
var _x = x - moveWidth / 2;
var _y = y - moveWidth / 2;
var _maxX = w - moveWidth;
var _maxY = h - moveWidth;
if (_x < 0) {
_x = 0;
} else if (_x >= _maxX) {
_x = _maxX;
}
if (_y < 0) {
_y = 0;
} else if (_y >= _maxY) {
_y = _maxY;
}
var offX = _x / radio;
var offY = _y / radio;
$moveObj.css({
left: _x,
top: _y
});
$max.get(0).scrollLeft = offX;
$max.get(0).scrollTop = offY;
}
$('.move-over').mouseleave(function() {
$('.move-object').addClass('hide');
$max.addClass('hide');
});
$('.move-over').mousemove(function(e) {
if ($moveObj.hasClass('hide')) {
$moveObj.removeClass('hide');
}
if ($max.hasClass('hide')) {
$max.removeClass('hide');
}
move(e);
});
//促销弹出框
var icon = {
unfold: '&#xe610;',
fold: '&#xe615;'
};
$('.activity-title').click(function() {
$(this).toggleClass('active');
$('.activity-container').empty();
if ($(this).hasClass('active')) {
$(this).find('span').html(icon.fold);
if (!$('.activity-container').html()) {
$('.activity-container').append($('.activity').clone().find('li').each(function() {
$(this).removeClass('hide');
}).end());
}
$('.activity-container').slideDown(400);
} else {
$(this).find('span').html(icon.unfold);
$('.activity-container').slideUp(400);
}
});
function getCouponAsync(cid) {
var uid = getUid(); // eslint-disable-line
... ... @@ -325,7 +415,14 @@ bindEvent.add(function() {
// 缩略图鼠标移入显示
$('#thumbs').on('mouseenter', '.thumb', function() {
imgShow($(this).data('shower'));
var $this = $(this);
imgShow($this.data('shower'));
bigImgShow($this.data('origin'));
if (!$this.hasClass('active')) {
$this.siblings('.active').removeClass('active').end().addClass('active');
}
});
// 尺码
... ...
... ... @@ -145,9 +145,14 @@
.thumb {
display: block;
width: 75px;
width: 71px;
cursor: pointer;
margin-bottom: 2px;
margin-bottom: 15px;
border: 2px solid white;
&.active {
border: 2px solid black;
}
}
.name {
... ... @@ -332,10 +337,11 @@
.activity-container {
position: absolute;
width: 100%;
height: 10px;
background: #b3b3b3;
left: 72px;
width: calc(585px - 72px);
background: #f5f5f5;
z-index: 5;
display: none;
}
}
... ... @@ -2180,6 +2186,37 @@
}
}
/****放大镜****/
.move-object {
height: 135px;
width: 135px;
background: resolve("product/move.png") no-repeat;
top: 0;
right: 0;
position: absolute;
}
.max {
width: 560px;
height: 560px;
border: 2px solid #b0b0b0;
display: block;
position: absolute;
overflow: hidden;
left: 515px;
top: 0;
z-index: 100;
}
.move-over {
position: absolute;
width: 420px;
height: 560px;
z-index: 2;
top: 0;
left: 0;
}
/****套餐弹出框***/
.pkg-dialog {
width: 500px;
... ...