update for cancel dialog

@@ -2,6 +2,8 @@ var dialog = require('../../plugins/dialog');
 var _dialog = dialog.Dialog;
 var _dialog = dialog.Dialog;
 var _alert = dialog.Alert;
 var _alert = dialog.Alert;
 
 
+var validate = require('../../me/order/validation');
+
 
 
 require('../../common/foreach-polyfill');
 require('../../common/foreach-polyfill');
 
 
@@ -29,10 +31,26 @@ function getTpl(data) {
 }
 }
 
 
 // 取消订单
 // 取消订单
-function cancelOrder(code, onCancel) {
+function cancelOrder(code, onCancel, w) {
     var $checked = $('.reason .row .checked');
     var $checked = $('.reason .row .checked');
     var reason = $checked.next('.reason-text').text();
     var reason = $checked.next('.reason-text').text();
     var reasonId = $checked.parent().data('value');
     var reasonId = $checked.parent().data('value');
+    var pass = true;
+
+    if (reason === '其它' || reason === '其他') {
+        reason = $checked.siblings('.input').val();
+
+        pass = validate.start('#other-reason', {
+            maxLength: 50,
+            errMsg: '原因最多50个字符'
+        });
+    }
+
+    if (!pass) {
+        return false;
+    }
+
+    w.close();
 
 
     $.ajax({
     $.ajax({
         url: '/me/cancelOrder',
         url: '/me/cancelOrder',
@@ -82,8 +100,7 @@ function showDiaglog(tpl, code, onCancel) {
                 btnClass: ['confirm'],
                 btnClass: ['confirm'],
                 name: '确定并取消订单',
                 name: '确定并取消订单',
                 cb: function() {
                 cb: function() {
-                    cancelOrder(code, onCancel);
-                    tip.close();
+                    cancelOrder(code, onCancel, tip);
                 }
                 }
             },
             },
             {
             {
@@ -104,7 +121,7 @@ function showDiaglog(tpl, code, onCancel) {
             var $ele = $(ele);
             var $ele = $(ele);
             var $input = $('.cancel-dialog .reason input');
             var $input = $('.cancel-dialog .reason input');
 
 
-            if (checked && $ele.parent('.other').length) {
+            if (checked && $ele.hasClass('other')) {
                 $input.prop('disabled', false);
                 $input.prop('disabled', false);
                 $input.focus();
                 $input.focus();
             } else {
             } else {
@@ -131,6 +148,13 @@ function getCancelReason(code, onCancel) {
                 if (idx === 0) {
                 if (idx === 0) {
                     d[0].checked = true;
                     d[0].checked = true;
                 }
                 }
+
+                d.forEach(function(r) {
+                    if (r.reason === '其他' || r.reason === '其它') {
+                        r.isOther = true;
+                    }
+                })
+
                 reasons.push({
                 reasons.push({
                     subReasons: d
                     subReasons: d
                 });
                 });

@@ -57,7 +57,7 @@
     }
     }
 
 
     &.cancel-dialog {
     &.cancel-dialog {
-        min-width: 490px;
+        min-width: 660px;
 
 
         * {
         * {
             text-align: left;
             text-align: left;
@@ -79,22 +79,32 @@
 
 
         .tip-item {
         .tip-item {
             height: $space;
             height: $space;
+            margin-bottom: $smallSpace;
             line-height: $space;
             line-height: $space;
             font-size: $normalSize;
             font-size: $normalSize;
+        }
+
+        .radio {
+            color: #ccc !important;
 
 
+            &.checked {
+                color: #1b1b1b !important;
+            }
         }
         }
 
 
         .row {
         .row {
             height: $bigSpace;
             height: $bigSpace;
             line-height: $bigSpace;
             line-height: $bigSpace;
 
 
-            &.other {
+            .other {
+                width: 90%;
+
                 p {
                 p {
                     width: 20%;
                     width: 20%;
                 }
                 }
                 input {
                 input {
                     height: 25px;
                     height: 25px;
-                    width: 30%;
+                    width: 50%;
                     padding: 5px;
                     padding: 5px;
                 }
                 }
             }
             }

@@ -4,10 +4,19 @@
     {{# reasons}}
     {{# reasons}}
         <div class="row">
         <div class="row">
             {{# subReasons}}
             {{# subReasons}}
-            <p data-value="{{id}}">
+            {{#if isOther}}
+            <br>
+            {{/if}}
+            <p data-value="{{id}}" {{#if isOther}}class="other"{{/if}}>
                 <span class="iconfont raido {{#if checked}}checked{{/if}}">{{#if checked}}&#xe603;{{^}}&#xe604;{{/if}}</span>
                 <span class="iconfont raido {{#if checked}}checked{{/if}}">{{#if checked}}&#xe603;{{^}}&#xe604;{{/if}}</span>
                 <span class="reason-text">{{reason}}</span>
                 <span class="reason-text">{{reason}}</span>
+                {{#if isOther}}
+                    <input type="text" class="input" id="other-reason" placeholder="50个字符以内">
+                {{/if}}
             </p>
             </p>
+            {{#if isOther}}
+            <br>
+            {{/if}}
             {{/ subReasons}}
             {{/ subReasons}}
         </div>
         </div>
     {{/ reasons}}
     {{/ reasons}}