地址弹窗交互

 /**
 /**
  * 订单结算controller
  * 订单结算controller
- * @author: xuqi<qi.xu@yoho.cn>
- * @date: 2016/8/26
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/12/21
  */
  */
 
 
 'use strict';
 'use strict';

@@ -22,7 +22,7 @@ router.post('/address/delete', address.delAddress); // 删除地址
 router.post('/address/save', address.saveAddress); // 新增地址/更新地址
 router.post('/address/save', address.saveAddress); // 新增地址/更新地址
 router.post('/address/setdefault', address.setDefault); // 设置默认地址
 router.post('/address/setdefault', address.setDefault); // 设置默认地址
 
 
-router.get('/orderensure', ensure.index); // 限购商品快捷结算页
+router.get('/ensure', ensure.index); // 限购商品快捷结算页
 
 
 router.get('/easypay', easypay.index); // 限购商品快捷结算页
 router.get('/easypay', easypay.index); // 限购商品快捷结算页
 router.post('/easypay/compute', easypay.compute); // 价格重新计算
 router.post('/easypay/compute', easypay.compute); // 价格重新计算

@@ -5,7 +5,7 @@
         </div>
         </div>
 
 
         <div class="info-block-wrap">
         <div class="info-block-wrap">
-            <p class="block-title">收货信息<span class="right">新增收货地址></span></p>
+            <p class="block-title">收货信息<span id="new-address-btn" class="right">新增收货地址></span></p>
             <div class="address-wrap">
             <div class="address-wrap">
                 <div class="addr-list clearfix">
                 <div class="addr-list clearfix">
                     {{# deliveryAddress}}
                     {{# deliveryAddress}}
@@ -147,5 +147,7 @@
             <button id="order-submit">提交订单</button>
             <button id="order-submit">提交订单</button>
         </div>
         </div>
         {{/ shoppingCartData}}
         {{/ shoppingCartData}}
+
+        {{> ensure-tpl}}
     {{/ content}}
     {{/ content}}
 </div>
 </div>

+
+
+<script id="address-tpl" type="text/html">
+    <div class="title">\{{title}}</div>
+    <p class="prompt">电话为选填项，其他均为必填项</p>
+    <ul class="info-wrap">
+        <li>
+            <span class="left-rd"><i class="red">*</i>收货人：</span>
+            <input type="text" name="consignee" value="\{{name}}" placeholder="请输入您的姓名">
+            <span class="caveat-tip"></span>
+        </li>
+        <li>
+            <span class="left-rd"><i class="red">*</i>所在区域：</span>
+            <div class="area-box">
+                <select class="province">
+                    <option value="0">请选择省</option>
+                </select>
+                <select class="city">
+                    <option value="0">请选择市</option>
+                </select>
+                <select class="country">
+                    <option value="0">请选择县</option>
+                </select>
+            </div>
+            <span>注：标“＊”的为支持加急送的地区</span>
+            <span class="caveat-tip"></span>
+        </li>
+        <li>
+            <span class="left-rd"><i class="red">*</i>详细地址：</span>
+            <input type="text" name="address" value="\{{name}}" placeholder="街道名称或小区名称">
+            <span class="caveat-tip"></span>
+        </li>
+        <li>
+            <span class="left-rd"><i class="red">*</i>手机号码：</span>
+            <input type="text" name="mobile" value="\{{name}}" placeholder="请输入手机号码（重要必填）">
+            <span class="caveat-tip"></span>
+        </li>
+        <li>
+            <span class="left-rd">电话号码：</span>
+            <input type="text" name="tel" value="\{{name}}" placeholder="请输入电话号码（选填）">
+            <span class="caveat-tip"></span>
+        </li>
+        <li>
+            <span class="left-rd"></span>
+            <label class="radio-btn">设置为默认收货地址</label>
+            
+        </li>
+    </ul>
+</script>

@@ -11,6 +11,8 @@ var order = {};
 var payWay,
 var payWay,
     deliveryWay;
     deliveryWay;
 
 
+require('./order-new/address');
+
 // 支付方式
 // 支付方式
 payWay = {
 payWay = {
     $payType: $('.pay-wrap .check-btn'),
     $payType: $('.pay-wrap .check-btn'),

 /**
 /**
  * 订单结算页
  * 订单结算页
  * @author: yyq<yanqing.yang@yoho.cn>
  * @author: yyq<yanqing.yang@yoho.cn>
- * @date: 2016/11/30
+ * @date: 2016/12/20
  */
  */
 
 
-// var $ = require('yoho-jquery');
+var $ = require('yoho-jquery');
+var hbs = require('yoho-handlebars');
+var dialog = require('../../common/dialog');
+var Dialog = dialog.Dialog;
+
+// var Confirm = dialog.Confirm;
+// var Alert = dialog.Alert;
+
+var addressTpl = hbs.compile($('#address-tpl').html());
+
+Dialog.prototype.packageInfo = function() {
+    var data = {};
+    var province = this.$el.find('.province').val(),
+        city = this.$el.find('.city').val(),
+        country = this.$el.find('.country').val();
+
+    this.$el.find('input').each(function() {
+        var $this = $(this),
+            key = $this.attr('name');
+
+        if (key) {
+            data[key] = $.trim($this.val());
+        }
+    });
+
+    data.areacode = (province || '00') + '' + (city || '00') + (country || '00');
+
+    if (this.$el.find('.radio-btn.on').length) {
+        data.setDefault = true;
+    }
+
+    return data;
+};
+
+function validateAddress(data) {
+    var regx = {
+            consignee: /^[\u4e00-\u9fa5]{2,5}$/,
+            areacode: /^[0-9]{6}$/,
+            mobile: /^\d{3}(\d{4}|\*{4})\d{4}$/,
+            tel: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
+        },
+        pass = true,
+        i;
+
+    data = data || {};
+    for (i in data) {
+        if (data.hasOwnProperty(i) &&
+            regx[i] &&
+            !regx[i].test(data[i])) {
+            pass = false;
+        }
+    }
+
+    return pass;
+}
+
+function bindOperateEvent($el) {
+    var $province = $el.find('.province'),
+        $city = $el.find('.city'),
+        $country = $el.find('.country');
+
+    $el.on('change', 'input[name="consignee"]', function() {
+        var $this = $(this);
+        var val = $.trim($this.val());
+
+        if (!val) {
+            $this.siblings('.caveat-tip').text('收货人不能为空').show();
+        } else if (!validateAddress({consignee: val})) {
+            $this.siblings('.caveat-tip').text('收货人姓名至少2个中文，最多5个中文').show();
+        } else {
+            $this.siblings('.caveat-tip').empty().hide();
+        }
+    }).on('change', '.country', function() {
+        var code = '' + $province.val() + $city.val() + $country.val();
+
+        if (!validateAddress({areacode: code})) {
+            $province.parent().siblings('.caveat-tip').show().text('请选择省市县').prev().hide();
+        } else {
+            $province.parent().siblings('.caveat-tip').empty().hide().prev().show();
+        }
+    }).on('change', 'input[name="address"]', function() {
+        var $this = $(this);
+        var val = $.trim($this.val());
+
+        if (!val) {
+            $this.siblings('.caveat-tip').text('收货地址不能为空').show();
+        } else {
+            $this.siblings('.caveat-tip').empty().hide();
+        }
+        $country.trigger('change');
+    }).on('change', 'input[name="mobile"]', function() {
+        var $this = $(this);
+        var val = $.trim($this.val());
+
+        if (!val) {
+            $this.siblings('.caveat-tip').text('手机号码不能为空').show();
+        } else if (!validateAddress({mobile: val})) {
+            $this.siblings('.caveat-tip').text('您输入的手机号码格式不正确').show();
+        } else {
+            $this.siblings('.caveat-tip').empty().hide();
+        }
+    }).on('change', 'input[name="tel"]', function() {
+        var $this = $(this);
+        var val = $.trim($this.val());
+
+        if (val && !validateAddress({tel: val})) {
+            $this.siblings('.caveat-tip').text('您输入的电话格式不正确').show();
+        } else {
+            $this.siblings('.caveat-tip').empty().hide();
+        }
+    }).on('click', '.radio-btn', function() {
+        $(this).toggleClass('on');
+    });
+}
+
+function newEditAddress(info) {
+    var addDia = new Dialog({
+        content: addressTpl({
+            title: '新增地址'
+        }),
+        className: 'ope-address-dialog',
+        btns: [{
+            id: 1,
+            name: '保存',
+            btnClass: ['black'],
+            cb: function() {
+                console.log(addDia.packageInfo());
+
+    console.log(info);
+                // window.open(myCouponUrl);
+            }
+        }, {
+            id: 2,
+            name: '取消',
+            btnClass: ['btn-close']
+        }]
+    }).show();
+
+    bindOperateEvent(addDia.$el);
+}
+
+$('#new-address-btn').click(function() {
+    newEditAddress();
+});
 
 

@@ -448,3 +448,130 @@
         }
         }
     }
     }
 }
 }
+
+.ope-address-dialog {
+    width: 610px;
+    height: 410px;
+    text-align: left;
+
+    > .close {
+        display: none;
+    }
+
+    > .content {
+        text-align: left;
+    }
+
+    .title {
+        padding-bottom: 26px;
+        border-bottom: 1px solid #e8e8e8;
+    }
+
+    .prompt {
+        line-height: 54px;
+        font-size: 12px;
+        color: #444;
+    }
+
+    .info-wrap {
+        font-size: 12px;
+        color: #aaa;
+
+        .radio-btn {
+            font-size: 14px;
+            color: #444;
+
+            &:before {
+                content: '';
+                width: 15px;
+                height: 15px;
+                margin-right: 6px;
+                background-image: url(/cart/radio-off.png);
+                display: inline-block;
+                vertical-align: middle;
+                position: relative;
+                top: -1px;
+                cursor: pointer;
+            }
+
+            &.on:before {
+                background-image: url(/cart/radio-on.png);
+            }
+        }
+
+        li {
+            padding-bottom: 20px;
+
+            input {
+                width: 180px;
+                border: 1px solid #e8e8e8;
+                padding: 5px;
+                margin-right: 10px;
+            }
+
+            input[name="address"] {
+                width: 270px;
+            }
+        }
+
+        .left-rd {
+            width: 92px;
+            font-size: 14px;
+            color: #444;
+            text-align: right;
+            display: inline-block;
+
+            .red {
+                color: #ce0b24;
+                margin-right: 10px;
+            }
+        }
+
+        .caveat-tip {
+            color: #ce0b24;
+            display: none;
+
+            &:before {
+                content: '';
+                width: 16px;
+                height: 16px;
+                margin-right: 6px;
+                background: url('/cart/error-ico.png');
+                display: inline-block;
+                position: relative;
+                top: 4px;
+            }
+        }
+
+        .area-box {
+            height: 26px;
+            display: inline-block;
+            border: 1px solid #e8e8e8;
+            background: #fff;
+            padding-right: 3px;
+            margin-right: 10px;
+
+            > select {
+                width: 90px;
+                height: 26px;
+                border: 0;
+                background: none;
+                color: #aaa;
+            }
+        }
+    }
+
+    .btns {
+        > .btn {
+            width: 128px;
+            height: 30px;
+            line-height: 32px;
+        }
+
+        .black {
+            background: #000;
+            color: #fff;
+            margin-right: 18px;
+        }
+    }
+}