address dialogs for order

@@ -5,7 +5,7 @@
             <div class="form-group">
             <div class="form-group">
                 <label class="label-name">&nbsp;&nbsp;收货人:</label>
                 <label class="label-name">&nbsp;&nbsp;收货人:</label>
                 <input id="address_id"  type="hidden" value="">
                 <input id="address_id"  type="hidden" value="">
-                <input id="consignee" class="input width-190" type="text" placeholder="请输入您的姓名" maxlength="10">
+                <input id="consignee" class="input" type="text" placeholder="请输入您的姓名" maxlength="10">
                 <span class="blue error-tips">{{> icon/error-round}}收件人不能为空</span>
                 <span class="blue error-tips">{{> icon/error-round}}收件人不能为空</span>
             </div>
             </div>
             <div class="form-group">
             <div class="form-group">
@@ -15,17 +15,17 @@
             </div>
             </div>
             <div class="form-group">
             <div class="form-group">
                 <label class="label-name">详细地址:</label>
                 <label class="label-name">详细地址:</label>
-                <input id="addressDetail" class="input width-275" type="text" placeholder="街道名称或小区名称" maxlength="60">
+                <input id="addressDetail" class="input address-detail" type="text" placeholder="街道名称或小区名称" maxlength="60">
                 <span class="blue error-tips">{{> icon/error-round}}详细地址不能为空</span>
                 <span class="blue error-tips">{{> icon/error-round}}详细地址不能为空</span>
             </div>
             </div>
             <div class="form-group">
             <div class="form-group">
                 <label class="label-name">手机号码:</label>
                 <label class="label-name">手机号码:</label>
-                <input id="mobile" class="input width-190" type="text" placeholder="请输入手机号码（重要必填）" maxlength="11">
+                <input id="mobile" class="input" type="text" placeholder="请输入手机号码（重要必填）" maxlength="11">
                 <span class="blue error-tips">{{> icon/error-round}}手机号码不能为空</span>
                 <span class="blue error-tips">{{> icon/error-round}}手机号码不能为空</span>
             </div>
             </div>
             <div class="form-group">
             <div class="form-group">
                 <label class="label-name">电话号码:</label>
                 <label class="label-name">电话号码:</label>
-                <input id="phone" class="input width-190" type="text" placeholder="请输入电话号码（选填）">
+                <input id="phone" class="input" type="text" placeholder="请输入电话号码（选填）">
             </div>
             </div>
             <div class="form-group ">
             <div class="form-group ">
                 <label class="label-name"></label>
                 <label class="label-name"></label>

@@ -4,7 +4,7 @@
             <div class="address-info order-block">
             <div class="address-info order-block">
                 <p class="title">
                 <p class="title">
                     收货信息
                     收货信息
-                    <span id="new-address" class="right new-address">
+                    <span class="right new-address">
                         新增收货地址
                         新增收货地址
                         <i class="iconfont">&#xe61f;</i>
                         <i class="iconfont">&#xe61f;</i>
                     </span>
                     </span>
@@ -260,6 +260,17 @@
                     </div>
                     </div>
                 </div>
                 </div>
             </script>
             </script>
+
+            <script id="address-dialog-tpl" type="text/html">
+                <p class="dialog-title">
+                    \{{#if updateAddress}}
+                        修改地址
+                    \{{^}}
+                        新增地址
+                    \{{/if}}
+                </p>
+                {{> write-address}}
+            </script>
         </div>
         </div>
     {{/ content}}
     {{/ content}}
 </div>
 </div>

+<form id="address-form" name="address-form">
+    <div class="address-page">
+        <span class="tip">
+            <em class="blue">
+                \{{#if updateAddress}}
+                    修改地址
+                \{{^}}
+                    新增地址
+                \{{/if}}
+            </em>
+             电话为选填项，其他均为必填项
+        </span>
+        <div class="add-address-detail" data-id="\{{id}}">
+            <div class="form-group">
+                <label class="label-name">
+                    <em class="required-mark">*</em>
+                    收货人：
+                </label>
+                <input class="input address-name" type="text" placeholder="请输入您的姓名" maxlength="10" value="\{{name}}">
+                <span class="blue error-tips hide">
+                    {{> icon/error-round}}
+                    <em></em>
+                </span>
+            </div>
+            <div class="form-group">
+                <label class="label-name">
+                    <em class="required-mark">*</em>
+                    所在区域：
+                </label>
+                <div id="address" class="clearfix"></div>
+                <span class="blue error-tips hide">
+                    {{> icon/error-round}}
+                    所在区域不能为空
+                </span>
+            </div>
+            <div class="form-group">
+                <label class="label-name">
+                    <em class="required-mark">*</em>
+                    详细地址：
+                </label>
+                <input class="input address-detail" type="text" placeholder="街道名称或小区名称" maxlength="60" value="\{{detail}}">
+                <span class="blue error-tips hide">
+                    {{> icon/error-round}}
+                    <em></em>
+                </span>
+            </div>
+            <div class="form-group">
+                <label class="label-name">
+                    <em class="required-mark">*</em>
+                    手机号码：
+                </label>
+                <input class="input address-mobile" type="text" placeholder="请输入手机号码（重要必填）" maxlength="11" value="\{{mobile}}">
+                <span class="blue error-tips hide">
+                    {{> icon/error-round}}
+                    <em></em>
+                </span>
+            </div>
+            <div class="form-group">
+                <label class="label-name">电话号码：</label>
+                <input class="input address-phone" type="text" placeholder="请输入电话号码（选填）" value="\{{phone}}">
+                <span class="blue error-tips hide">
+                    {{> icon/error-round}}
+                    <em></em>
+                </span>
+            </div>
+            <div class="form-group ">
+                <label class="label-name"></label>
+                <div class="default-address-radio default-address">
+                    \{{#if checked}}
+                        <span class="iconfont radio checked">&#xe603;</span>
+                    \{{^}}
+                        <span class="iconfont radio">&#xe604;</span>
+                    \{{/if}}
+                    <label>设置为默认收货地址</label>
+                </div>
+            </div>
+            \{{#unless dialogAddress}}
+                <div class="form-group">
+                    <span class="btn operation" id="save-address">保存</span>
+                </div>
+            \{{/unless}}
+        </div>
+    </div>
+</form>

@@ -22,6 +22,7 @@ var tpl =
         '<div class="content">' +
         '<div class="content">' +
             '{{{content}}}' +
             '{{{content}}}' +
         '</div>' +
         '</div>' +
+        '{{#if btns}}' +
         '<div class="btns">' +
         '<div class="btns">' +
             '{{# btns}}' +
             '{{# btns}}' +
                 '<span {{#if id}}id="dialog-{{id}}"{{/if}} class="btn{{#each btnClass}} {{.}}{{/each}}">' +
                 '<span {{#if id}}id="dialog-{{id}}"{{/if}} class="btn{{#each btnClass}} {{.}}{{/each}}">' +
@@ -29,6 +30,7 @@ var tpl =
                 '</span>' +
                 '</span>' +
             '{{/ btns}}' +
             '{{/ btns}}' +
         '</div>' +
         '</div>' +
+        '{{/if}}' +
     '</div>';
     '</div>';
 
 
 var tplFn = Handlebars.compile(tpl);
 var tplFn = Handlebars.compile(tpl);
@@ -48,7 +50,7 @@ function createMask() {
 function createDialog(data) {
 function createDialog(data) {
     $('body').append(tplFn(data));
     $('body').append(tplFn(data));
 
 
-    return $('.yoho-dialog');
+    return $('.yoho-dialog').last();
 }
 }
 
 
 function Dialog(options) {
 function Dialog(options) {
@@ -144,7 +146,7 @@ function Confirm(opt) {
 
 
     var option = {
     var option = {
         content: opt.content,
         content: opt.content,
-        className: 'confirm-dialog',
+        className: 'confirm-dialog' + (opt.className ? ' ' + opt.className : ''),
         btns: [
         btns: [
             {
             {
                 id: 'confirm-sure',
                 id: 'confirm-sure',

@@ -6,7 +6,12 @@
 
 
 var $ = require('yoho-jquery'),
 var $ = require('yoho-jquery'),
     lazyLoad = require('yoho-jquery-lazyload'),
     lazyLoad = require('yoho-jquery-lazyload'),
-    Dialog = require('../plugins/dialog').Dialog;
+    Hbs = require('yoho-handlebars'),
+    cascadingAddress = require('../plugins/cascading-address'),
+    popup = require('../plugins/dialog');
+
+var Dialog = popup.Dialog,
+    Confirm = popup.Confirm;
 
 
 var minusPlus = {
 var minusPlus = {
     minus: '',
     minus: '',
@@ -33,12 +38,160 @@ var $invoiceTitleInput,
     $invoiceEntity,
     $invoiceEntity,
     invoiceDialog;
     invoiceDialog;
 
 
+var addressTpl = Hbs.compile($('#address-dialog-tpl').html());
+
 require('../plugins/check');
 require('../plugins/check');
 
 
 lazyLoad($('img.lazy'));
 lazyLoad($('img.lazy'));
 
 
-// 地址切换
+// 显示全部地址
+$('.address-all').click(function() {
+    $(this).siblings('.address-list').removeClass('shrink').end().remove();
+});
+
+// address dialog 数据验证
+function validateAddress($el) {
+    var field = {
+        name: [
+            {
+                noEmpty: true,
+                err: '收货人不能为空'
+            },
+            {
+                regx: /[\u4e00-\u9fa5a-zA-Z\d]{2,12}/,
+                err: '请输入2-12个汉字、英文或数字'
+            }
+        ],
+        detail: [
+            {
+                noEmpty: true,
+                err: '详细地址不能为空'
+            },
+            {
+                regx: /[\u4e00-\u9fa5a-zA-Z\d#-()]+/,
+                err: '只能包含数字、字母、汉字、#、-、（）及其组合'
+            }
+        ],
+        mobile: [
+            {
+                noEmpty: true,
+                err: '手机号码不能为空'
+            },
+            {
+                regx: /\d+/,
+                err: '手机号码格式不正确'
+            }
+        ],
+        phone: [
+            {
+                regx: /[\d-]+/,
+                err: '只能包含数字、-组合',
+                skipWhenEmpty: true
+            }
+        ]
+    };
+
+    var key,
+        $cur,
+        cur,
+        vaKey,
+        vaRegx;
+
+    var pass = true;
+
+    for (key in field) {
+        if (field.hasOwnProperty(key)) {
+            $cur = $el.find('.address-' + key);
+            cur = $cur.val();
+
+            // 按顺序去验证对应filed的值
+            for (vaKey = 0; vaKey < field[key].length; vaKey++) {
+                vaRegx = field[key][vaKey];
+
+                // 非空验证、非空下正则验证、其他正则验证
+                if ((vaRegx.noEmpty && cur === '') || (vaRegx.regx &&
+                    (vaRegx.skipWhenEmpty ? !(cur === '' || vaRegx.regx.test(cur)) : !vaRegx.regx.test(cur))
+                )) {
+                    pass = false;
+                    $cur.siblings('.error-tips').find('em').text(vaRegx.err).end().removeClass('hide');
+                    break;
+                }
+            }
+        }
+    }
+
+    return pass;
+}
+
+// 地址弹窗Factory
+function addressDialogFactory(opt) {
+    var tplData = $.extend({
+        dialogAddress: true,
+        checked: true
+    }, opt);
+
+    var address = new Dialog({
+        closeIcon: false,
+        className: 'address',
+        content: addressTpl(tplData),
+        btns: [
+            {
+                id: 'save-address',
+                btnClass: ['save-address'],
+                name: '保存',
+                cb: function() {
+
+                    // 验证输入
+                    if (validateAddress(address.$el)) {
+                        address.close();
+                    }
+                }
+            },
+            {
+                id: 'cancel-address',
+                btnClass: ['cancel-address', 'white'],
+                name: '取消',
+                cb: function() {
+                    address.close();
+                }
+            }
+        ]
+    });
+
+    return address;
+}
+
+// 初始化弹窗内容
+function initAddressContent($el) {
+
+    // 初始化地址组件
+    cascadingAddress({
+        el: '#address',
+        url: 'http://localhost:3000/areas/0',
+        resource: 'areas'
+    });
+
+    $el.find('.default-address-radio').check({
+        type: 'radio',
+        onChange: function(el, checked) {
+            console.log(checked);
+        }
+    });
+}
+
+// 新增地址
+$('.new-address').click(function() {
+    var address = addressDialogFactory();
+
+    initAddressContent(address.$el);
+
+    address.show();
+});
+
+
 $('.address-list').on('click', '.address', function() {
 $('.address-list').on('click', '.address', function() {
+
+    // 地址切换
     var $this = $(this);
     var $this = $(this);
 
 
     if ($this.hasClass('focus')) {
     if ($this.hasClass('focus')) {
@@ -47,16 +200,48 @@ $('.address-list').on('click', '.address', function() {
 
 
     $this.addClass('focus');
     $this.addClass('focus');
     $this.siblings('.focus').removeClass('focus');
     $this.siblings('.focus').removeClass('focus');
-});
+}).on('click', '.modify', function(e) {
 
 
-// 显示全部地址
-$('.address-all').click(function() {
-    $(this).siblings('.address-list').removeClass('shrink').end().remove();
+
+    // 修改地址
+    var $this = $(this).closest('.address');
+    var address = addressDialogFactory({
+        updateAddress: true,
+        name: '徐祁',
+        detail: '嘉陵江东街18号',
+        mobile: '15895869035',
+        id: $this.data('id')
+    });
+
+    initAddressContent(address.$el);
+
+    address.show();
+
+    e.stopPropagation();
+}).on('click', '.delete', function(e) {
+
+    // 删除地址
+    // var $this = $(this).closest('.address');
+    // var id = $this.data('id');
+
+    new Confirm({
+        className: 'address-confirm-dialog',
+        content: '<p class="main">删除地址</p><p class="sub">您确定要删除该收货地址吗？</p>',
+        cb: function() {
+
+            // 确认删除，do something
+        }
+    }).show();
+
+    e.stopPropagation();
+}).on('click', '.set-default', function(e) {
+
+    // 设置为默认地址
+
+    e.stopPropagation();
 });
 });
 
 
-/**
- * 发票弹窗Factory
- */
+// 发票弹窗Factory
 function invoiceDialogFactory() {
 function invoiceDialogFactory() {
     var invoice = new Dialog({
     var invoice = new Dialog({
         className: 'invoice',
         className: 'invoice',

@@ -10,6 +10,10 @@
         font-size: 14px;
         font-size: 14px;
     }
     }
 
 
+    .required-mark {
+        color: #f00;
+    }
+
     .add-address-detail {
     .add-address-detail {
         padding: 15px 0 0;
         padding: 15px 0 0;
 
 
@@ -17,28 +21,28 @@
             clear: both;
             clear: both;
             margin-bottom: 20px;
             margin-bottom: 20px;
 
 
+            .input {
+                width: 190px;
+            }
+
             .default-address,
             .default-address,
             #address,
             #address,
             .btn {
             .btn {
+                margin-left: 94px;
+            }
 
 
-                margin-left: 83px;
+            .default-address {
+                font-size: 14px;
             }
             }
 
 
             .label-name {
             .label-name {
+                width: 84px;
                 font-size: 14px;
                 font-size: 14px;
-                text-align: left;
                 float: left;
                 float: left;
                 line-height: 26px;
                 line-height: 26px;
+                margin-right: 10px;
             }
             }
 
 
-            .width-190 {
-                width: 190px;
-                margin-left: 20px;
-            }
-            .width-275 {
-                width: 275px;
-                margin-left: 20px;
-            }
             .iconfont {
             .iconfont {
                 font-size: 14px;
                 font-size: 14px;
             }
             }
@@ -61,6 +65,10 @@
             }
             }
 
 
         }
         }
+
+        .address-detail.input {
+            width: 270px;
+        }
     }
     }
 }
 }
 
 

@@ -412,14 +412,43 @@
     }
     }
 }
 }
 
 
+.yoho-dialog.address,
 .yoho-dialog.invoice {
 .yoho-dialog.invoice {
-    width: 702px;
     background: #fff;
     background: #fff;
 
 
     .content {
     .content {
         text-align: left;
         text-align: left;
     }
     }
 
 
+    .btns .btn {
+        width: 140px;
+        height: 40px;
+        line-height: 40px;
+
+        &.white {
+            border-color: #000;
+            color: #000;
+        }
+    }
+}
+
+.yoho-dialog.address {
+    width: 664px;
+    padding: 0 40px 10px;
+
+    .label-name {
+        text-align: right;
+    }
+
+    .dialog-title {
+        margin: 25px 0;
+        font-size: 18px;
+    }
+}
+
+.yoho-dialog.invoice {
+    width: 702px;
+
     /* 纸质发票不显示提示和收票人手机 */
     /* 纸质发票不显示提示和收票人手机 */
     .tip,
     .tip,
     .phone-row {
     .phone-row {
@@ -502,15 +531,20 @@
             width: 520px;
             width: 520px;
         }
         }
     }
     }
+}
 
 
-    .btns .btn {
-        width: 140px;
-        height: 40px;
-        line-height: 40px;
+.address-confirm-dialog {
+    .content {
+        padding-top: 0 !important;
 
 
-        &.white {
-            border-color: #000;
-            color: #000;
+        p {
+            position: static !important;
+        }
+
+        p.main {
+            line-height: 100px;
+            font-weight: bold;
+            font-size: 28px;
         }
         }
     }
     }
 }
 }