fix editOrder style bug

@@ -26,6 +26,9 @@ var deleteDialog = '<div class="order-delete-confirm">' +
 var html = $tpl.html();
 
 var active;
+var dialogMessage = '<p class="message-title"><i class="order-icon {{messageIcon}}"></i>{{messageTitle}}</p><p class="message-summary">{{messageSummary}}</p>';
+var $dialogEdit = $('#edit-dialog-tpl');
+var $addressManage, $province, $city, $county, $selectList, $name, $phone, $address, $telCode, $tel, isProvinceChecked = false;
 
 function cancelFactory(id) {
     var options = {
@@ -76,8 +79,60 @@ function cancelFactory(id) {
 
     return new Dialog(options);
 }
+function showMessgaeDialog(message_icon, message_title, message_summary, cb) {
+    var template = Handlebars.compile(dialogMessage);
+    var html = template({messageIcon: message_icon, messageTitle: message_title, messageSummary: message_summary});
+    var options = {
+        mask: true,
+        btns: [
+            {
+                id: 'message-sure',
+                name: '确定',
+                btnClass: ['message-sure'],
+                cb: function() {
+                    active.close();
+                    cb && cb();
+                }
+            }
+        ],
+        content: html,
+        className: 'message-dialog',
+    };
+
+    return new Dialog(options);
+
+}
+// 编辑订单
+function editOrder(id) {
+    var options = {
+        mask: true,
+        btns: [
+            {
+                id: 'edit-sure',
+                name: '确定',
+                btnClass: ['edit-sure'],
+                cb: function() {
+                    saveAddress(id);
+                }
+            },
+            {
+                id: 'edit-no',
+                name: '取消',
+                btnClass: ['edit-no'],
+                cb: function() {
+                    active.close();
+                }
+            }
+        ],
+        content: $dialogEdit.html(),
+        className: 'edit-order-dialog'
+    };
+
+    return new Dialog(options);
+}
 
 $tpl.remove();
+$dialogEdit.remove();
 
 //查看物流
 $('.check-logistics').click(function () {
@@ -121,6 +176,11 @@ $('.me-orders, .order-detail').on('click', '.cancel-order', function (e) {
     var id = $(this).closest('.order, .order-detail').data('id');
     active = deleteOrder(id, this);
     active.show();
+}).on('click', '.edit-order', function() {
+    $(this).addClass('edit-order-active');
+    active = editOrder($(this).closest('.order, .order-detail').data('id'))
+    active.show();
+    newAddress(0);
 });
 function deleteOrder(id, obj) {
     // 是否为彻底删除
@@ -170,4 +230,325 @@ function deleteOrder(id, obj) {
         className: 'delete-dialog',
     };
     return new Dialog(options);
+}
+// 地址操作
+function newAddress(id) {
+    var code, codeId;
+
+    var pId = id || 0; //如果没有传id则获取所有省列表
+
+    var addressCodeReg = /[0-9]{2}/gi;
+
+    $addressManage = $('.edit-order-dialog');
+    $province = $addressManage.find('select[name="province"]');
+    $city = $addressManage.find('select[name="city"]');
+    $county = $addressManage.find('select[name="county"]');
+    $selectList = $addressManage.find('select[name="province"],select[name="city"]');
+    $name = $addressManage.find('.inp[name="name"]');
+    $phone = $addressManage.find('.inp[name="phone"]');
+    $address = $addressManage.find('.inp[name="address"]');
+    $telCode = $addressManage.find('.inp[name="tel-code"]');
+    $tel = $addressManage.find('.inp[name="tel"]');
+
+    var validate = validateForm();
+
+    code = $province.data("areacode") + '';
+    codeId = !!code && code.match(addressCodeReg);
+
+    //获取省
+    getAddress({
+        id: pId,
+        type: 'getProvince',
+        selectId: codeId[0]
+    }, function() {
+
+        var provinceId = $province.val();
+
+        if (provinceId !== '0') {
+            isProvinceChecked = true;
+
+            //如果获取的省有默认选中项则获取市
+            getAddress({
+                id: provinceId,
+                type: 'getCity',
+                selectId: '' + codeId[0] + codeId[1]
+            }, function() {
+
+                var cityId = $city.val();
+
+                //如果获取的市有默认选中项则获取县
+                if (cityId !== '0') {
+                    getAddress({
+                        id: cityId,
+                        type: 'getCounty',
+                        selectId: code
+                    });
+                }
+            });
+        } else {
+            $addressManage.find('select[name="city"]').html('<option value="0">请选择城市</option>');
+            $addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
+        }
+    });
+
+    // 发生change事件时获取下一级地址
+    $selectList.change(function() {
+
+        var $this = $(this);
+
+        if ($this.attr('name') === 'province') {
+
+            if ($this.val() === '0') {
+                $addressManage.find('select[name="city"]').html('<option value="0">请选择城市</option>');
+                $addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
+            } else {
+                getAddress({
+                    id: $this.val(),
+                    type: 'getCity'
+                }, function() {
+                    isProvinceChecked = true;
+                });
+                $addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
+            }
+        }
+
+        if ($this.attr('name') === 'city' && isProvinceChecked) {
+
+            if ($this.val() === '0') {
+                $addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
+            } else {
+                getAddress({
+                    id: $this.val(),
+                    type: 'getCounty'
+                });
+            }
+        }
+    });
+    $name.on('blur', function() {
+        validate.name($.trim($name.val()));
+    });
+    $address.on('blur', function() {
+        validate.address($.trim($address.val()));
+    });
+    $phone.on('blur', function() {
+        validate.mobile($.trim($phone.val()));
+    });
+    $tel.on('blur', function() {
+        validate.tel($.trim($telCode.val()), $.trim($tel.val()));
+    })
+    $county.on('change', function() {
+        validate.city($province.val(), $city.val(),$county.val());
+    })
+}
+/**
+ * @description: 改函数会返回地址信息
+ * d {Object} type: 'getProvince'获取省 type: 'getCity'获取城市 type: 'getCounty'获取县
+ * id: 0 && type: 'getProvince' 获取所有省，默认没有选中项
+ * id !== 0 && type: 'getProvince' 获取所有省，默认选中用户所在的省
+ */
+function getAddress(d, callback) {
+
+    var $obj;
+    var selectId = d.selectId;
+
+    if (d.type === 'getProvince') {
+
+        //url = 'getProvince';
+        $obj = $province;
+    } else if (d.type === 'getCity') {
+
+        //url = 'getCity';
+        $obj = $city;
+    } else if (d.type === 'getCounty') {
+
+        //url = 'getCounty';
+        $obj = $county;
+    }
+
+    $.ajax({
+        type: 'GET',
+        url: '/cart/index/getAreaList',
+        dataType: 'json',
+        data: {
+            id: d.id * 1
+        }
+    }).then(function(d) {
+
+        structureOption($obj, d.data, selectId);
+
+        if (typeof callback === 'function') {
+            callback();
+        }
+
+    });
+}
+
+// 构建select下拉选项
+function structureOption($obj, data, selectId) {
+
+    var i,
+        optionHtml = '',
+        defaultOption,
+        isStar = '';
+
+    for (i = 0; i < data.length; i++) {
+
+        if (data[i].is_support_express === 'Y') {
+            isStar = '*';
+        } else {
+            isStar = '';
+        }
+
+        if (data[i].id === selectId) {
+            optionHtml += '<option selected value="' + data[i].id + '">' + isStar + data[i].caption + '</option>';
+        } else {
+            optionHtml += '<option value="' + data[i].id + '">' + isStar + data[i].caption + '</option>';
+        }
+    }
+
+
+    if ($obj.attr('name') === 'province') {
+        defaultOption = '<option value="0">请选择省份</option>';
+    } else if ($obj.attr('name') === 'city') {
+        defaultOption = '<option value="0">请选择城市</option>';
+
+    } else if ($obj.attr('name') === 'county') {
+        defaultOption = '<option value="0">请选择区县</option>';
+    }
+
+    $obj.html(defaultOption + optionHtml);
+}
+
+// 保存地址
+function saveAddress(id) {
+    var name = $name.val(),
+        province = $province.val(),
+        city = $city.val(),
+        county = $county.val(),
+        address = $address.val(),
+        phone = $phone.val(),
+        telCode = $telCode.val(),
+        tel = $tel.val();
+
+    // var $err_name = $name.siblings('.error'),
+    //     $err_province = $province.siblings('.error'),
+    //     $err_address = $address.siblings('.error'),
+    //     $err_phone = $phone.siblings('.error'),
+    //     $err_tel = $tel.siblings('.error');
+
+    var postData = {
+        orderCode: id,
+        userName: name,
+        areaCode: county,
+        address: address,
+        mobile: phone,
+        phoneCode: telCode,
+        phoneNum: tel
+    };
+    var validate = validateForm();
+    if (!validate.name(name) || !validate.city(province, city, county) || !validate.address(address) || !validate.mobile(phone) || !validate.tel(telCode, tel)) {
+        return;
+    }
+
+    $.ajax({
+        type: 'post',
+        url: '/home/orders/modifyAddress',
+        data: postData
+    }).then(function(d) {
+        if (d.code === 200) {
+            active.close();
+            active = showMessgaeDialog('icon-waiting', '订单修改', '您的订单正在尝试修改,请耐心等待。稍后可在订单详情页查看修改情况!', function() {
+                location.reload(true);
+            });
+            active.show();
+        } else {
+            new dialog.Alert(d.message).show();
+        }
+    })
+}
+function validateForm() {
+    var $err_name = $name.siblings('.error'),
+        $err_province = $province.siblings('.error'),
+        $err_address = $address.siblings('.error'),
+        $err_phone = $phone.siblings('.error'),
+        $err_tel = $tel.siblings('.error');
+
+    var nameReg = /^[\u4e00-\u9fa5]{2,5}$/;
+    var addressReg = /^[a-zA-Z0-9-#（）()\u4e00-\u9fa5]+$/;
+    var phoneReg = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
+    var telCodeReg = /^[0-9]{3,4}$/;
+    var telReg = /^[0-9]{8}$/;
+    var _right_html = '<i class="order-icon icon-right"></i>';
+    var _error_html = '<i class="order-icon icon-error"></i><b></b>';
+
+    return {
+        name: function(name) {
+            if (!nameReg.test(name)) {
+                $err_name.html(_error_html);
+                $err_name.find('b').html('真实姓名至少2个中文,最多5个中文');
+                $err_name.show();
+                return false;
+            } else {
+                $err_name.html(_right_html).show();
+                return true;
+            }
+        },
+        city: function(province, city, county) {
+            if (province === '0' || city === '0' || county === '0') {
+                $err_province.html(_error_html);
+                $err_province.find('b').html('请填写完整的省市区信息');
+                $err_province.show();
+                return false;
+            } else {
+                $err_province.html(_right_html).show();
+                return true;
+            }
+        },
+        address: function(address) {
+            if (!addressReg.test(address)) {
+                var message = '详细地址不能为空';
+                if ($.trim(address) !== '') {
+                    message = '只能包含数字、字母、汉字、#、-、（）及其组合';
+                }
+                $err_address.html(_error_html);
+                $err_address.find('b').html(message);
+                $err_address.show();
+                return false;
+            } else {
+                $err_address.html(_right_html).show();
+                return true;
+            }
+        },
+        mobile: function(phone) {
+            if (!phoneReg.test(phone)) {
+                var message = '手机号码不能为空';
+                if ($.trim(phone) !== '') {
+                    message = '你输入的联系电话格式不正确';
+                }
+                $err_phone.html(_error_html);
+                $err_phone.find('b').html(message);
+                $err_phone.show();
+                return false;
+            } else {
+                $err_phone.html(_right_html).show();
+                return true;
+            }
+        },
+        tel: function(telCode, tel) {
+            if(telCode === '' && tel === ''){
+                _right_html = '';
+            }
+            if ((!!telCode && !telCodeReg.test(telCode)) || (!!tel && !telReg.test(tel)) ||
+                (telCodeReg.test(telCode) && !telReg.test(tel)) ||
+                (!telCodeReg.test(telCode) && telReg.test(tel))) {
+                $err_tel.html(_error_html);
+                $err_tel.find('b').html('你输入的电话格式不正确');
+                $err_tel.show();
+                return false;
+            } else {
+                $err_tel.html(_right_html).show();
+                return true;
+            }
+        }
+    }
 }
\ No newline at end of file

@@ -418,4 +418,191 @@
         margin-left:60px;
         border-color: #cdcdcd;
     }
-}
\ No newline at end of file
+}
+.message-dialog{
+    width: 350px;
+    background: #fff;
+    padding: 20px 30px 35px 30px;
+    .message-title{
+        margin-top: 40px;
+        margin-bottom: 27px;
+        font-size: 24px;
+        font-weight: 700;
+    }
+    .message-summary{
+        width: 250px;
+        margin: 0 auto 22px;
+        font-size: 14px;
+        word-wrap: break-word;
+        line-height: 20px;
+    }
+    .btns {
+        padding: 15px 30px 0;
+        text-align: center;
+
+        .btn {
+            height: 35px;
+            font-size: 15px;
+            line-height: 35px;
+        }
+
+        .message-sure {
+            width: 130px;
+            color: #fff;
+            background: #000;
+            border: none;
+        }
+    }
+    .close{
+        top: 15px;
+        right: 15px;
+        .iconfont{
+            font-size: 30px;
+        }
+    }
+}
+.edit-order-dialog {
+    width: 600px;
+    background: #fff;
+    padding: 20px 30px 35px 30px;
+    header {
+        font-size: 18px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #e8e8e8;
+        color: #000;
+        text-align: left;
+    }
+    .close{
+        top: 15px;
+        right: 30px;
+        .iconfont{
+            font-size: 30px;
+        }
+    }
+    .edit-order-info {
+        text-align: left;
+
+        li {
+            height: 26px;
+            margin:20px 0;
+            line-height: 26px;
+            font-size: 14px;
+        }
+        .form-required{
+            color:  #d70400;
+            font-family: SimSun;
+            font-size: 16px;
+            margin-right: 10px;
+            vertical-align: -6px;
+        }
+        label {
+            display:inline-block;
+            width:90px;
+            text-align:right;
+        }
+
+        .inp{
+            width:188px;
+            height: 18px;
+            line-height:18px;
+            padding:3px 0;
+            border:1px solid #e8e8e8;
+            margin-left: 10px;
+            text-indent: 5px;
+            box-sizing: content-box;
+        }
+        .w271{
+            width:271px;
+        }
+        .w40{
+            width:40px;
+        }
+        .inp[name='tel']{
+            margin-left: 0;
+        }
+    }
+    .ml10{
+        margin-left:10px;
+    }
+    select{
+        height: 25px;
+        line-height: 25px;
+        width: 100px;
+        padding: 0;
+        border: 1px solid #ccc;
+    }
+    .error{
+        display: none;
+        margin-left:20px;
+        color:#db3d50;
+        font-size:12px;
+        .icon-error{
+            margin-right: 8px;
+            vertical-align:text-bottom;
+        }
+    }
+    .btns {
+        padding: 15px 30px 0;
+        text-align: center;
+
+        .btn {
+            height: 35px;
+            font-size: 15px;
+            line-height: 35px;
+        }
+
+        .edit-sure {
+            width: 130px;
+            color: #fff;
+            background: #000;
+            border: none;
+        }
+
+        .edit-no {
+            margin-left: 30px;
+            background: #fff;
+            color: #000;
+            border-color: #000;
+            width: 126px;
+        }
+    }
+    .tip{
+        margin: 20px 0 ;
+        font-size: 12px;
+        text-align: left;
+        color: #db3d50;
+    }
+}
+.order-icon{
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 10px;
+    background: resolve(/home/order-sprite.png);;
+}
+.icon-success{
+    width: 30px;
+    height: 30px;
+    vertical-align: -6px;
+    background-position: 0 0;
+}
+.icon-waiting{
+    width: 30px;
+    height: 30px;
+    vertical-align: -6px;
+    background-position: -32px 0 ;
+}
+.icon-arrow{
+    width: 11px;
+    height: 7px;
+    background-position: -36px -33px;
+}
+.icon-error{
+    width: 15px;
+    height: 15px;
+    background-position:0 -33px;
+}
+.icon-recycle{
+    width: 15px;
+    height: 17px;
+    background-position: -18px -33px;
+}