update for edit order and fix some bugs

@@ -208,10 +208,8 @@ const _getUserOrder = (uid, type, page) => {
             // 转换订单创建时间
             item.createTime = _convertUnixTime(item.createTime);
 
-            // 隐藏结束了的剩余时间
-            if (parseInt(item.payLefttime, 10) !== 0 &&
-                item.isCancel === 'N' &&
-                st === 0) {
+            // 没有取消订单并且状态为0的时候显示付款按钮
+            if (item.isCancel === 'N' && st === 0) {
                 item.showPayButton = true;
             }
 
@@ -225,6 +223,9 @@ const _getUserOrder = (uid, type, page) => {
             // 判断是否是待收货状态
             item.showGetBtn = statusMap[st].showGetBtn;
 
+            // 在线支付和货到付款有按钮的差异
+            item.isOnlinePaid = parseInt(item.paymentType, 10) === 1;
+
 
             if (item.isCancel === 'Y') {
                 item.showBuyBtn = true;

-<div class="user-info info-box">
+<div class="user-info info-box" data-area="{{areaCode}}">
     <h4 class="status-title">收货人信息</h4>
-    <p class="text">收货人：{{userName}}</p>
-    <p class="text">收货地址：{{address}}</p>
-    <p class="text">联系电话：{{mobile}}</p>
+    <p class="text user-name-sel" data-name="{{userName}}">收货人：{{userName}}</p>
+    <p class="text user-addr-sel" data-address="{{address}}">收货地址：{{address}}</p>
+    <p class="text user-mo-sel" data-mobile="{{mobile}}">联系电话：{{mobile}}</p>
+    <p class="text user-ph-sel hide" data-phone="{{phone}}">联系电话：{{phone}}</p>
 </div>
 
 <div class="info-box">

@@ -24,12 +24,16 @@
             <div class="common-column special-border operation">
                 {{#if showPayButton}}
                 <div class="pay-operation">
-                    <p class="left-time" data-left="{{payLefttime}}"></p>
-                    <span class="btn red">立即付款</span>
+                    {{#if isOnlinePaid}}
+                        <p class="left-time" data-left="{{payLefttime}}"></p>
+                        <span class="btn red">立即付款</span>
+                    {{/if}}
                     <p class="subtext cancel">取消订单</p>
                 </div>
                 {{/if}}
                 {{#if showEditOption}}
+                <p class="subtext">评价晒单</p>
+                <p class="subtext">申请退货</p>
                 <p class="subtext">申请换货</p>
                 <p class="subtext delete">删除订单</p>
                 {{/if}}

 var cancelOrder = require('./order/cancel-order');
+var editOrder = require('./order/edit-order');
 
 
 function reload() {
-    location.href = location.href;
+    location.reload();
 }
 
-$('.cancel-btn').on('click', function() {
+$('.order .cancel-btn').on('click', function() {
     var $this = $(this);
     var code = $this.closest('.order').data('code');
 
     cancelOrder.start(code, reload);
 });
 
+$('.order .edit-btn').on('click', function() {
+    var $this = $(this);
+    var $userInfo = $('.user-info.info-box');
+    var code = $this.closest('.order').data('code');
+
+    var areaCode = $userInfo.data('area');
+    var userName = $userInfo.find('.user-name-sel').data('name');
+    var address = $userInfo.find('.user-addr-sel').data('address');
+    var mobile = $userInfo.find('.user-mo-sel').data('mobile');
+    var phone = $userInfo.find('.user-ph-sel').data('phone');
+
+    editOrder.start({
+        data: {
+            orderCode: code,
+            userName: userName,
+            address: address,
+            mobile: mobile,
+            phone: phone,
+            areaCode: areaCode
+        }
+    });
+});

+var dialog = require('../../plugins/dialog');
+var _dialog = dialog.Dialog;
+
+var addrSelector = require('../../plugins/cascading-address');
+var addr;
+
+var validate = require('./validation');
+
+var nameReg = /^[\u4e00-\u9fa5]{2,5}$/;
+var addressReg = /^[\s\S]{2,100}$/;
+var phoneReg = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
+
+// var codeReg = /^[0-9]{6}$/;
+// var emailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+// var telCodeReg = /^[0-9]{3,5}$/;
+// var telReg = /^[0-9]{5,10}$/;
+
+var validateMap = {
+    name: {
+        sl: '#user-name',
+        v: {
+            reg: nameReg,
+            errMsg: '真实姓名至少2个中文,最多5个中文'
+        }
+    },
+    address: {
+        sl: '#user-address',
+        v: {
+            reg: addressReg,
+            errMsg: '详细地址不能为空'
+        }
+    },
+    mobile: {
+        sl: '#user-mobile',
+        v: {
+            reg: phoneReg,
+            errMsg: '您输入的联系电话格式不正确'
+        }
+    }
+};
+
+function getTpl(data) {
+    var editOrderTpl = require('../../../tpl/me/edit-order.hbs');
+
+    return editOrderTpl(data);
+}
+
+function initAddr() {
+    addr = addrSelector({
+        el: '#user-city',
+        url: 'http://localhost:3000/areas/0',
+        resource: 'areas'
+    });
+}
+
+function getValidateKey(id) {
+    return id.replace('user-', '');
+}
+
+function validateData() {
+    var $inputs = $('.edit-dialog .input-row .validate');
+    var pass = true;
+
+    $inputs.each(function(idx, input) {
+        var k = getValidateKey(input.id);
+
+        if (k && validateMap[k]) {
+            if (!validate.do(validateMap[k].sl, validateMap[k].v)) {
+                pass = false;
+            }
+        }
+    });
+
+    return pass;
+}
+
+function showDiaglog(tpl, code, onEdit) {
+    var areaCode;
+    var tip = new _dialog({
+        className: 'order-dialog edit-dialog',
+        content: tpl,
+        btns: [
+            {
+                id: 'edit-confirm',
+                btnClass: ['confirm'],
+                name: '确定',
+                cb: function() {
+                    if (validateData()) {
+                        tip.close(onEdit);
+                    } else {
+                        console.log('err');
+                    }
+                }
+            },
+            {
+                id: 'edit-stop',
+                btnClass: ['cancel-btn'],
+                name: '取消',
+                cb: function() {
+                    tip.close();
+                }
+            }
+        ]
+    }).show();
+
+    initAddr();
+
+    areaCode = $('.input-row.selector').data('area');
+
+
+    if (areaCode) {
+        // Since there's some bug when addr is set the real area code,
+        // use the fake data instead for develop phase
+        // addr.setAddress(areaCode);
+        addr.setAddress('320102');
+    }
+}
+
+function start(tplData) {
+    var tpl = getTpl(tplData);
+
+    showDiaglog(tpl);
+}
+
+module.exports = {
+    start: start
+};

+var makeValidate = {
+    reg: function(val, reg) {
+        return reg.test(val);
+    },
+    minLength: function(val, l) {
+        return val.length >= l;
+    },
+    isNumber: function(val, bl) {
+        return bl && !isNaN(parseInt(val, 10));
+    }
+};
+
+function showMsg(obj) {
+    var text = obj.msg || '数据格式有问题，请检查';
+    var m = '<span class="error-msg validate-msg"><span class="iconfont">-</span>' + text + '</span>';
+
+    var curMsg = $(obj.el).next('.validate-msg');
+
+    if (curMsg.length > 0) {
+        curMsg.remove();
+    }
+
+    if (obj.err) {
+        $(obj.el).after(m);
+    } else {
+        m = '<span class="correct-msg validate-msg"><span class="iconfont">+</span>';
+        $(obj.el).after(m);
+    }
+}
+
+function validate(selector, conditions) {
+    var pass = true;
+    var $el = $(selector);
+    var c;
+
+    for (c in conditions) {
+        if (makeValidate[c] && !makeValidate[c].call(null, $el.val(), conditions[c])) {
+            pass = false;
+
+            showMsg({
+                el: selector,
+                err: true,
+                msg: conditions.errMsg
+            });
+        } else if (c !== 'errMsg') {
+            showMsg({
+                el: selector
+            });
+        }
+    }
+
+    return pass;
+}
+
+module.exports = {
+    do: validate
+};
+

 .order-dialog {
+    $bigSpace: 30px;
+    $smallSpace: 10px;
+    $space: 20px;
+    $normalSize: 14px;
+
+    $borderColor: #f1f1f1;
+
     .cancel-btn {
         background-color: #fff;
         color: #1b1b1b;
         border: 1px solid #1b1b1b;
     }
 
+    .asterisk {
+        position: relative;
+        top: 2px;
+        margin-right: 5px;
+        color: #c71814;
+    }
+
+    .dialog-title {
+        padding-bottom: $space;
+        border-bottom: 1px solid #f1f1f1;
+        font-size: 16px;
+    }
+
     &.delete-dialog {
         .content {
             h1 {
@@ -39,35 +59,23 @@
             }
         }
 
-        h1 {
-            padding-bottom: 20px;
-            border-bottom: 1px solid #f1f1f1;
-            font-size: 16px;
-        }
-
         .tip {
             display: block;
-            margin: 20px 0 10px;
+            margin: $space 0 10px;
             font-size: 12px;
             font-weight: bold;
         }
 
         .tip-item {
-            height: 20px;
-            line-height: 20px;
-            font-size: 14px;
-
-            .asterisk {
-                position: relative;
-                top: 2px;
-                margin-right: 5px;
-                color: #c71814;
-            }
+            height: $space;
+            line-height: $space;
+            font-size: $normalSize;
+
         }
 
         .row {
-            height: 30px;
-            line-height: 30px;
+            height: $bigSpace;
+            line-height: $bigSpace;
 
             &.other {
                 p {
@@ -84,15 +92,82 @@
                 width: 49%;
                 display: inline-block;
                 box-sizing: border-box;
-                font-size: 14px;
+                font-size: $normalSize;
             }
 
             .iconfont {
                 display: inline-block;
                 margin-right: 3px;
-                font-size: 14px;
+                font-size: $normalSize;
                 cursor: pointer;
             }
         }
     }
+
+    &.edit-dialog {
+        min-width: 660px;
+        background-color: #fff;
+
+        * {
+            text-align: left;
+        }
+
+        .form {
+            margin: $bigSpace 0 $space;
+        }
+    }
+
+    .cascading-address {
+        display: inline-block;
+        border: 1px solid #f0f0f0;
+
+        .dist-item {
+            height: 32px;
+            margin-right: 0;
+            border: none;
+            background-color: #fff;
+        }
+
+        .items-panel {
+            border-color: #f0f0f0;
+        }
+    }
+
+    .form {
+        .input-row {
+            height: 25px;
+            line-height: 25px;
+            margin-bottom: $space;
+            font-size: $normalSize;
+
+            label {
+                display: inline-block;
+                width: 70px;
+                text-align: left;
+
+                span {
+                    margin-right: 7px;
+                }
+            }
+
+            input {
+                width: 190px;
+
+                &.long {
+                    width: 270px;
+                }
+            }
+
+            &.selector {
+                height: 32px;
+                line-height: 1;
+
+                > span,
+                > label {
+                    position: relative;
+                    top: -12px !important;
+                }
+            }
+        }
+    }
 }

@@ -27,3 +27,4 @@
 }
 
 @import "dialog";
+

-<h1>取消订单</h1>
+<h1 class="dialog-title">取消订单</h1>
 <span class="tip">您取消订单的原因是：</span>
 <div class="reason">
     {{# reasons}}

+<h1 class="dialog-title">订单修改</h1>
+
+<div class="form" data-code={{orderCode}}>
+    {{# data}}
+    <div class="input-row necessary">
+        <span class="asterisk">*</span>
+        <label for="user-name"><span>收</span><span>货</span>人：</label>
+        <input class="input validate" type="text" id="user-name" placeholder="请输入您的姓名" value="{{userName}}">
+    </div>
+    <div class="input-row necessary selector clearfix" data-area="{{areaCode}}">
+        <span class="asterisk">*</span>
+        <label for="user-city">所在区域：</label>
+        <div id="user-city" class="cascading-address"></div>
+    </div>
+    <div class="input-row necessary">
+        <span class="asterisk">*</span>
+        <label for="user-address">详细地址：</label>
+        <input class="input validate" class="long" type="text" id="user-address" placeholder="街道名称或小区名称" value={{address}}>
+    </div>
+    <div class="input-row necessary">
+        <span class="asterisk">*</span>
+        <label for="user-mobile">手机号码：</label>
+        <input class="input validate" type="text" id="user-mobile" placeholder="请输入手机号码(重要必填)" value="{{mobile}}">
+    </div>
+    <div class="input-row">
+        <span class="asterisk vhide">*</span>
+        <label for="user-phone">电话号码：</label>
+        <input class="input" type="text" id="user-phone" placeholder="请输入电话号码（选填）" value="{{phone}}">
+    </div>
+    {{/ data}}
+</div>