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) {
             if (good.image_url) {
                 goodsGroup.thumbs.push({
                 goodsGroup.thumbs.push({
                     url: '',
                     url: '',
-                    shower: helpers.image(good.image_url, 420, 560),
+                    shower: good.image_url,
                     img: helpers.image(good.image_url, 75, 100)
                     img: helpers.image(good.image_url, 75, 100)
                 });
                 });
             }
             }

@@ -2,7 +2,7 @@
     <div class="row activity-wrapper clearfix">
     <div class="row activity-wrapper clearfix">
         <span class="title pull-left">促&nbsp;&nbsp;销： </span>
         <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-title">展开全部促销 <span class="iconfont index">&#xe610;</span> </div>
             <div class="activity-container"></div>
             <div class="activity-container"></div>
         {{/if_cond}}
         {{/if_cond}}

@@ -29,7 +29,16 @@
                     {{/ isPresell}}
                     {{/ isPresell}}
                 {{/ tags}}
                 {{/ tags}}
             </div>
             </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 class="share-row"><span class="title pull-left">分享：</span> {{> common/share }} </div>
         </div>
         </div>
         <div id="thumbs" class="pull-right thumbs">
         <div id="thumbs" class="pull-right thumbs">
@@ -37,7 +46,8 @@
                 <div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
                 <div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
                     {{#if focus}}
                     {{#if focus}}
                         {{# thumbs}}
                         {{# 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}}
                     {{^}}
                     {{^}}
                         {{# thumbs}}
                         {{# thumbs}}

@@ -24,8 +24,8 @@ module.exports = {
         api: 'http://api.yoho.cn/',
         api: 'http://api.yoho.cn/',
         service: 'http://service.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/'
         search: 'http://192.168.102.216:8080/yohosearch/'
     },
     },

@@ -159,6 +159,96 @@ bindEvent.add(function() {
         $imgShow.attr('src', src);
         $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) {
     function getCouponAsync(cid) {
         var uid = getUid();  // eslint-disable-line
         var uid = getUid();  // eslint-disable-line
 
 
@@ -325,7 +415,14 @@ bindEvent.add(function() {
 
 
     // 缩略图鼠标移入显示
     // 缩略图鼠标移入显示
     $('#thumbs').on('mouseenter', '.thumb', 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 {
         .thumb {
             display: block;
             display: block;
-            width: 75px;
+            width: 71px;
             cursor: pointer;
             cursor: pointer;
-            margin-bottom: 2px;
+            margin-bottom: 15px;
+            border: 2px solid white;
+
+            &.active {
+                border: 2px solid black;
+            }
         }
         }
 
 
         .name {
         .name {
@@ -332,10 +337,11 @@
 
 
             .activity-container {
             .activity-container {
                 position: absolute;
                 position: absolute;
-                width: 100%;
-                height: 10px;
-                background: #b3b3b3;
+                left: 72px;
+                width: calc(585px - 72px);
+                background: #f5f5f5;
                 z-index: 5;
                 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 {
 .pkg-dialog {
     width: 500px;
     width: 500px;