editorial

@@ -9,7 +9,7 @@
             <div class="footer">
                 <span class="desc pay-notice left">{{../username}}如果<span class="blue">2小时</span>内您无法完成付款，系统会将您的订单取消</span>
                 <span id="order-detail-ctrl" class="right order-detail-ctrl">
-                    <em>展开详情</em>
+                    <em>收起详情</em>
                     <i class="iconfont down">&#xe616;</i>
                     <i class="iconfont up">&#xe617;</i>
                 </span>

@@ -2,6 +2,8 @@ var dialog = require('../../plugins/dialog');
 var _dialog = dialog.Dialog;
 var _alert = dialog.Alert;
 
+var validate = require('../../me/order/validation');
+
 
 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 reason = $checked.next('.reason-text').text();
     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({
         url: '/me/cancelOrder',
@@ -82,8 +100,7 @@ function showDiaglog(tpl, code, onCancel) {
                 btnClass: ['confirm'],
                 name: '确定并取消订单',
                 cb: function() {
-                    cancelOrder(code, onCancel);
-                    tip.close();
+                    cancelOrder(code, onCancel, tip);
                 }
             },
             {
@@ -104,7 +121,7 @@ function showDiaglog(tpl, code, onCancel) {
             var $ele = $(ele);
             var $input = $('.cancel-dialog .reason input');
 
-            if (checked && $ele.parent('.other').length) {
+            if (checked && $ele.hasClass('other')) {
                 $input.prop('disabled', false);
                 $input.focus();
             } else {
@@ -131,6 +148,13 @@ function getCancelReason(code, onCancel) {
                 if (idx === 0) {
                     d[0].checked = true;
                 }
+
+                d.forEach(function(r) {
+                    if (r.reason === '其他' || r.reason === '其它') {
+                        r.isOther = true;
+                    }
+                });
+
                 reasons.push({
                     subReasons: d
                 });

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

@@ -129,7 +129,7 @@ $hoverColor: #379ed6;
             }
 
             .pro-name > a {
-                height: 100%;
+                height: 36px;
                 display: block;
                 line-height: 18px;
             }

@@ -4,10 +4,19 @@
     {{# reasons}}
         <div class="row">
             {{# 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="reason-text">{{reason}}</span>
+                {{#if isOther}}
+                    <input type="text" class="input" id="other-reason" placeholder="50个字符以内">
+                {{/if}}
             </p>
+            {{#if isOther}}
+            <br>
+            {{/if}}
             {{/ subReasons}}
         </div>
     {{/ reasons}}