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

…into feature/new-product-detail

Merge branch 'feature/new-product-detail' of http://git.yoho.cn/fe/yohobuy-node …
…into feature/new-product-detail
mark
Commit 0f99d9e490c71fba1711b54a3cef53dd2890a0b6 2 parents aecf90ef ae16249e
Showing 8 changed files with 235 additions and 17 deletions
apps/product/views/action/product/detail.hbs
apps/product/views/partial/product/package.hbs
public/font/iconfont.eot
public/font/iconfont.svg
public/font/iconfont.ttf
public/font/iconfont.woff
public/js/product/detail.page.js
public/scss/product/_detail.css
--- a/apps/product/views/action/product/detail.hbs
View file @0f99d9e
+++ b/apps/product/views/action/product/detail.hbs
View file @0f99d9e
@@ -563,3 +563,47 @@
         })();
     </script>
 {{/statGoodsInfo}}
+    <script type="text/html" id="packageDialog">
+        <div class="pkgDg-header">
+            <p class="left">潮流搭配</p>
+            <span class="pkg-close close right"><i class="iconfont"></i></span>
+        </div>
+        <div class="pkgDg-prodetal">
+            <div class="pkg-product clearfix">
+                <a href="#" class="pkg-proImg"><img src="//img12.static.yhbimg.com/goodsimg/2016/11/02/14/0293f6afc458261c612853b2fb371c9a7a.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90" class="pro-img"/></a>
+                <div class="type-chose">
+                    <div class="chose-color row clearfix">
+                        <span class="title pull-left">颜&nbsp;&nbsp;色：</span>
+                        <ul class="colors pull-left clearfix">
+                            <li class="focus  pull-left" title="Reshake 男款logo刺绣织带装饰棉服外套 黑色" data-color="黑色" data-total="10">
+                                <img src="//img12.static.yhbimg.com/goodsimg/2016/11/02/14/0293f6afc458261c612853b2fb371c9a7a.jpg?imageMogr2/thumbnail/40x40/extent/40x40/background/d2hpdGU=/position/center/quality/90"><span class="color-name">黑色</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="chose-size row clearfix">
+                        <span class="title pull-left"> 尺&nbsp;&nbsp;码： </span>
+
+                        <div id="sizes" class="size-wrapper pull-left">
+                            <ul class="size">
+                                <li data-sku="1848512" data-num="1" data-name="46" data-title="">46</li>
+                                <li data-sku="1848514" data-num="4" data-name="48" data-title="">48</li>
+                                <li data-sku="1848516" data-num="4" data-name="50" data-title="">50</li>
+                                <li data-sku="1848518" data-num="1" data-name="52" data-title="">52</li>
+
+                                <span class="size-warn warn-tip hide"> <i class="iconfont"></i> 请选择尺码 </span>
+                            </ul>
+
+                            <p class="color-size-tip hide"></p>
+                        </div>
+                    </div>
+                    <div class="chose-done">您已选择：<span>“黑色”</span><span>“M码”</span></div>
+                </div>
+            </div>
+        </div>
+        <div class="pkgDg-footer clearfix">
+            <p class="totalMoney left">合计：<em>￥138.00</em></p>
+            <span class="buy-product red-color right">
+                <em>立即购买</em>
+            </span>
+        </div>
+    </script>
--- a/apps/product/views/partial/product/package.hbs
View file @0f99d9e
+++ b/apps/product/views/partial/product/package.hbs
View file @0f99d9e
@@ -69,7 +69,7 @@
             <p>销售价:<em class="sale-price">¥633.00</em></p>
             <p>套餐价:<em class="package-price red-color">¥520.00</em></p>
             <p class="save-text red-color">立省<em class="save-price">¥113.00</em>元</p>
-            <span class="buy-product red-color">
+            <span id="buy-detail" class="buy-product red-color">
                 <em>立即购买</em>
             </span>
         </div>
--- a/public/font/iconfont.eot
View file @0f99d9e
+++ b/public/font/iconfont.eot
View file @0f99d9e
--- a/public/font/iconfont.svg
View file @0f99d9e
+++ b/public/font/iconfont.svg
View file @0f99d9e
@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Fri Dec  2 11:50:29 2016
+Created by FontForge 20120731 at Mon Dec  5 19:57:53 2016
  By admin
 </metadata>
 <defs>
--- a/public/font/iconfont.ttf
View file @0f99d9e
+++ b/public/font/iconfont.ttf
View file @0f99d9e
--- a/public/font/iconfont.woff
View file @0f99d9e
+++ b/public/font/iconfont.woff
View file @0f99d9e
--- a/public/js/product/detail.page.js
View file @0f99d9e
+++ b/public/js/product/detail.page.js
View file @0f99d9e
@@ -14,6 +14,7 @@ var $ = require('yoho-jquery');
 var lazyLoad = require('yoho-jquery-lazyload');
 var yas = require('../common/data-yas');
 var dataLazyLoad = require('../plugins/lazy-load')(document);
+var handlebars = require('yoho-handlebars');
 var bindEvent = $.Callbacks(); // eslint-disable-line
 var clickAcquireCouponEvent = $.Callbacks('unique'); // eslint-disable-line
@@ -48,7 +49,8 @@ var $saleReturn = $('#saleReturn');
 var dialogTpl = require('hbs/product/coupon-dialog.hbs');
-var $goodsIdArr = [];
+var $goodsIdArr = [],
+    pkgFn = '';
 function limitedProductUrl(s) {
     return window.location.href + '?openby:yohobuy={"action":"go.limitpurchase","params":{"lp":"' + s + '"}}';
@@ -61,6 +63,9 @@ function isEmpty(el) {
 require('../plugins/slider');
 require('../common/center-slider');
+// handlebars模板
+pkgFn = handlebars.compile($('#packageDialog').html() || '');
+
 bindEvent.add(function() {
     var $imgShow = $('#img-show'),
         $thumbs = $('#thumbs > .thumb-wrap');
@@ -80,7 +85,7 @@ bindEvent.add(function() {
     var $lcContainer = $('.lc-container'),
         $itemBuy = $('.item-buy');
-    var $enableNofifyGoods = $('#enable-notify');
+    var $enableNotifyYou = $('#enable-notify');
     var $qrcode = $('.qr-code');
@@ -216,12 +221,12 @@ bindEvent.add(function() {
         if (maxStock === 0 || ($color && ~~$color.data('total') === 0)) {
             $itemBuy.addClass('hide'); // 隐藏加入购物车、即将开售、立即购买等相同位置的按钮
             $soldOut.removeClass('hide');
-            $enableNofifyGoods.removeClass('hide');
+            $enableNotifyYou.removeClass('hide');
         } else {
             // 包括默认的-1情况下
             $itemBuy.removeClass('hide');
             $soldOut.addClass('hide');
-            $enableNofifyGoods.addClass('hide');
+            $enableNotifyYou.addClass('hide');
         }
     }
@@ -351,6 +356,10 @@ bindEvent.add(function() {
         }, 300);
     });
+    $enableNotifyYou.on('click', function() {
+        new Alert("fjdsl").show();
+    });
+
     // 增加购买数量
     $plusNum.click(function() {
         var num = getNum();
@@ -432,7 +441,7 @@ bindEvent.add(function() {
         }
         // 加入购物车埋点
-        yas.givePoint('YB_GDS_DT_ADD_TO_SC', {PRD_ID: getSku(), PRD_NUM: getNum() });
+        yas.givePoint('YB_GDS_DT_ADD_TO_SC', {PRD_ID: getSku(), PRD_NUM: getNum()});
         $.ajax({
             type: 'POST',
@@ -477,7 +486,7 @@ bindEvent.add(function() {
         coltyp = cancel ? 2 : 1;
         // 收藏埋点
-        yas.givePoint('YB_COLLECTION_C', {PRD_ID: id, COL_TYP: coltyp });
+        yas.givePoint('YB_COLLECTION_C', {PRD_ID: id, COL_TYP: coltyp});
         $.ajax({
             type: 'POST',
@@ -516,6 +525,16 @@ bindEvent.add(function() {
         }
     });
+    //套餐
+    $('#buy-detail').click(function () {
+        var opt = {
+            className: 'pkg-dialog',
+            closeIcon: false,
+            content: pkgFn({msg: '测试信息！'})
+        };
+
+        new Dialog(opt).show();
+    });
     // 继续购物
     $('#keep-shopping').click(function() {
         $('#type-chose').slideDown(SLIDETIME);
@@ -1183,7 +1202,6 @@ $('.bottom-tab').on('click', '.bottom-title', function() {
 });
-
 $('.recommend-content').find('.iconfont').mouseenter(function() {
     $(this).addClass('focus');
 }).mouseleave(function() {
--- a/public/scss/product/_detail.css
View file @0f99d9e
+++ b/public/scss/product/_detail.css
View file @0f99d9e
@@ -793,7 +793,7 @@
         }
         .good-info .good-detail-text > a {
-            height: 35px;
+            height: 40px;
         }
         .package-priceList {
@@ -813,13 +813,8 @@
             }
             .buy-product {
-                display: inline-block;
                 margin-top: 40px;
-                width: 120px;
-                height: 30px;
-                text-align: center;
-                line-height: 30px;
-                border: 1px solid #d42838;
+                border-color: #d42838;
             }
             > p {
@@ -1494,7 +1489,6 @@
         .after-service-content {
             display: none;
-
         }
         .after-service-switch {
@@ -2101,3 +2095,165 @@
      .total-content{
        position: relative;
      }
+
+.buy-product {
+    display: inline-block;
+    width: 120px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    border: 1px solid;
+    cursor: pointer;
+}
+
+.chose-color {
+    font-size: 12px;
+
+    .title {
+        margin-top: 14px;
+    }
+
+    img {
+        float: left;
+        display: inline-block;
+        height: 34px;
+        width: 34px;
+    }
+
+    li {
+        margin-right: 10px;
+        cursor: pointer;
+        border: 1px solid white;
+        height: 34px;
+
+        &.focus {
+             border-color: black;
+        }
+    }
+
+    .color-name {
+        float:left;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+}
+
+.chose-size,
+.chose-ticket {
+    font-size: 12px;
+
+    .title {
+        margin-top: 6px;
+    }
+
+    li {
+        float: left;
+        display: block;
+        height: 24px;
+        line-height: 24px;
+        margin-right: 10px;
+        margin-bottom: 5px;
+        padding: 0 5px;
+        border: 1px solid #eaeceb;
+        text-align: center;
+        cursor: pointer;
+        min-width: 28px;
+
+        &.disable {
+            opacity: 0.5;
+        }
+
+        &.focus {
+            color: #fff;
+            background: #222;
+        }
+    }
+}
+
+/****套餐弹出框***/
+.pkg-dialog {
+    width: 500px;
+    height: 600px;
+    border-color: #000;
+
+    .pkg-close {
+        position: relative;
+        top: 0;
+        right: 0;
+    }
+
+    .pkg-close .iconfont {
+        font-size: 35px;
+        line-height: 40px;
+    }
+
+    .pkgDg-header {
+        height: 50px;
+        line-height: 50px;
+        text-align: left;
+    }
+
+    .pkgDg-prodetal {
+        width: 100%;
+        height: 490px;
+        overflow: auto;
+    }
+
+    .pkg-product {
+        border: 1px solid #ddd;
+        padding: 15px;
+        margin-bottom: 15px;
+
+        .pkg-proImg {
+            float: left;
+            width: 85px;
+            height: 109px;
+
+            > img {
+                width: 100%;
+                height:100%;
+            }
+        }
+
+        .type-chose {
+            float: left;
+            width: 350px;
+            margin-left: 15px;
+        }
+
+        .row {
+            margin-bottom: 15px;
+        }
+
+        .chose-done {
+            font-size: 12px;
+            text-align: left;
+        }
+    }
+
+    .pkgDg-footer {
+        height: 80px;
+        line-height: 80px;
+
+        .totalMoney em {
+            color: #d42838;
+            font-weight: bold;
+        }
+
+        .buy-product {
+            margin-top: 25px;
+        }
+    }
+
+    .pkgDg-footer:before {
+        position: absolute;
+        left: 0;
+        content: '';
+        display: block;
+        width: 540px;
+        border-top: 1px solid #ddd;
+    }
+}