添加到货通知

@@ -93,6 +93,28 @@
                                     <span>限购码已抢光</span>
                                 {{/if}}
                             {{/ fashionTopGoods}}
+
+                            {{#if soldOut}}
+                                <span>
+                                    点击
+                                    <i class="arr-notice blue">到货通知</i>
+                                    ，到货第一时间通知您
+                                </span>
+
+                                <script type="text/html" id="arrival-notice-tpl">
+                                    <h1>到货通知</h1>
+                                    <p>商品一旦在30日内到货，我们将会第一时间通知您，请及时关注哦！</p>
+                                    <div class="phone-num">手机号<input type="text" class="notice-phone"></div>
+                                    <p>
+                                        <span class="iconfont add-fav checked">&#xe602;</span>
+                                        添加到收藏夹
+                                    </p>
+                                </script>
+                                <script type="text/html" id="arrival-notice-success-tpl">
+                                    <h1>到货通知</h1>
+                                    <p>商品订阅到货通知成功！</p>
+                                </script>
+                            {{/if}}
                         </div>
                         <p class="btns">
                             {{#unless soldOut}}

@@ -4,7 +4,10 @@
  * @date: 2016/7/15
  */
 var $ = require('yoho-jquery'),
-    lazyload = require('yoho-jquery-lazyload');
+    handlebars = require('yoho-handlebars'),
+    lazyload = require('yoho-jquery-lazyload'),
+    Dialog = require('../plugins/dialog').Dialog,
+    regx = require('../passport/common/mail-phone-regx').phoneRegx;
 
 var $main = $('.product-main'),
     $mainThumb = $('#main-thumb'),
@@ -26,6 +29,9 @@ var $thumbCur = $('.thumb-wrap .cur'); // 当前选中展示图片
 
 var SLIDETIME = 200;
 
+var noticeFn = handlebars.compile($('#arrival-notice-tpl').html() || ''),
+    noticeSuccFn = handlebars.compile($('#arrival-notice-success-tpl').html() || '');
+
 var thumbsLoaded = [],
     id = $main.data('id');
 
@@ -94,6 +100,34 @@ function chooseColor(index) {
     $sizeText.text('');
 }
 
+function arrivalNotice() {
+    // $.ajax({
+    //     type: 'POST',
+    //     url: '/shopping/cart/add',
+    //     data: {
+    //         productSku: sku,
+    //         buyNumber: 1
+    //     }
+    // }).then(function(data) {
+    //     if (data.code === 200) {
+    //     }
+    // });
+    var tip = new Dialog({
+        className: 'arr-notice-dialog',
+        content: noticeSuccFn(),
+        btns: [
+            {
+                id: 'sure',
+                btnClass: ['sure'],
+                name: '确定',
+                cb: function() {
+                    tip.close();
+                }
+            }
+        ]
+    }).show();
+}
+
 // 缩略图垂直居中
 $thumbWrap.each(function() {
     var $this = $(this),
@@ -161,6 +195,40 @@ $('.size-list').on('click', 'li', function() {
     }
 });
 
+// 到货通知
+$('.arr-notice').click(function() {
+    var tip = new Dialog({
+        className: 'arr-notice-dialog',
+        content: noticeFn({}),
+        btns: [
+            {
+                id: 'apply',
+                btnClass: ['apply'],
+                name: '订阅',
+                cb: function() {
+                    var dom = tip.$el.find('.notice-phone'),
+                        num = dom.val ? dom.val() : '';
+
+                    if (regx['+86'].test(num)) {
+                        arrivalNotice(num);
+                        tip.close();
+                    } else {
+                        dom.addClass('err');
+                    }
+                }
+            },
+            {
+                id: 'cancel',
+                btnClass: ['cancel'],
+                name: '取消',
+                cb: function() {
+                    tip.close();
+                }
+            }
+        ]
+    }).show();
+});
+
 // 加入购物袋
 $addToBag.click(function() {
     var sku = getBuyProduct();

@@ -443,4 +443,52 @@
             }
         }
     }
+
+    + .arr-notice-dialog {
+        .content {
+            width: 260px;
+            text-align: center;
+            margin: 0 auto;
+        }
+
+    }
+}
+
+.arr-notice-dialog {
+    .content {
+        width: 280px;
+        text-align: center;
+        margin: 0 auto;
+        line-height: 1.5;
+        font-size: 14px;
+
+        h1 {
+            font-size: 20px;
+            font-weight: bold;
+            padding-bottom: 30px;
+        }
+    }
+
+    .phone-num {
+        text-align: left;
+        padding: 12px 0;
+
+        input {
+            width: 210px;
+            height: 30px;
+            border: 1px solid #eee;
+            margin-left: 20px;
+            padding: 0 20px;
+        }
+
+        .err {
+            border-color: #f00;
+        }
+    }
+
+    .add-fav {
+        font-size: 14px;
+        cursor: pointer;
+        margin-right: 4px;
+    }
 }