订单列表取消原因

@@ -7,7 +7,8 @@
 var $ = require('jquery'),
     Hammer = require('yoho.hammer'),
     lazyLoad = require('yoho.lazyload'),
-    tip = require('../plugin/tip');
+    tip = require('../plugin/tip'),
+    Swiper = require('yoho.iswiper');
 
 var $navLi = $('#order-nav > li'),
     $orderContainer = $('#order-container');
@@ -29,7 +30,9 @@ var loading = require('../plugin/loading');
 
 var dialog = require('./dialog');
 
-var orderHammer;
+var orderHammer,
+    $reaMask = $('.reason-mask'),
+    reasonSwiper;
 
 //加载订单
 function getOrders(option) {
@@ -116,6 +119,8 @@ orderHammer.on('tap', function(e) {
     $order = $cur.closest('.order');
     id = $order.data('id');
 
+    $reaMask.data('orderId', id);
+
     if ($cur.closest('.del').length > 0) {
 
         //Order delete
@@ -149,38 +154,8 @@ orderHammer.on('tap', function(e) {
             });
         });
     } else if ($cur.closest('.cancel').length > 0) {
-
-        //Order cancel
-        dialog.showDialog({
-            dialogText: '确定取消订单吗？',
-            hasFooter: {
-                leftBtnText: '取消',
-                rightBtnText: '确定'
-            }
-        }, function() {
-            $.ajax({
-                type: 'GET',
-                url: '/home/cancelOrder',
-                data: {
-                    id: id
-                },
-                success: function(data) {
-                    if (data.message) {
-                        tip.show(data.message);
-                    }
-                    if (data.code === 200) {
-
-                        //取消订单页面刷新
-                        setTimeout(function() {
-                            window.location.reload();
-                        }, 2000);
-                    }
-                },
-                error: function() {
-                    tip.show('取消订单失败');
-                }
-            });
-        });
+        console.log('s');
+        $reaMask.css('visibility', 'visible');
     } else if ($cur.closest('.order-goods').length > 0) {
 
         //Location to order detail
@@ -207,3 +182,42 @@ $(window).scroll(function() {
 
 //初始化请求第一页数据
 getOrders();
+
+$(function() {
+    reasonSwiper = new Swiper('.box-main', {
+        paginationClickable: true,
+        direction: 'vertical',
+        slidesPerView: 4,
+        effect: 'coverflow',
+        centeredSlides: true
+    });
+});
+
+$reaMask.find('.box-cmp').on('touchend', function(e) {
+    var selSolid = reasonSwiper.slides[reasonSwiper.activeIndex],
+        reason = $(selSolid).text(),
+        reasonId = $(selSolid).data('reasonId');
+
+    $.ajax({
+        type: 'GET',
+        url: '/home/cancelOrder',
+        data: {
+            id: $reaMask.data('orderId'),
+            reason: reason,
+            reasonId: reasonId
+        }
+    }).then(function(res) {
+        $reaMask.fadeOut();
+        if ($.type(res) !== 'object') {
+            return;
+        }
+        if (res.message) {
+            tip.show(res.message);
+        }
+        setTimeout(function() {
+            window.location.href = '/home/orders';
+        }, 2000);
+    }).fail(function() {
+        tip.show('网络错误');
+    });
+});
\ No newline at end of file

 .order-page {
     background: #f0f0f0;
 
+    .reason-mask {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background: rgba(0, 0, 0, .5);
+        z-index: 5;
+        visibility: hidden;
+
+        .reason-box {
+            border-bottom: solid 1px #CCCCCC;
+            font: inherit;
+            vertical-align: baseline;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            margin-left: -270px;
+            margin-top: -290px;
+            width: 540px;
+            height:580px;
+            color: #444;
+            background: #fff;
+            border-radius: 10px;
+
+            .box-head {
+                height: 60px;
+                line-height: 60px;
+                text-align: right;
+                font-size: 36px;
+                background: rgb(240, 240, 240);
+                padding-right: 30px;
+            }
+
+            .box-main {
+                background: #FFFFFF;
+                padding: 20px;
+                height:480px;
+                margin-top: 40px;
+            }
+
+            li {
+                text-align: center;
+                height: 36px;
+                font-size: 24px;
+                line-height: 36px;
+                background: #FFF;
+                color: rgba(0, 0, 0, .5);
+            }
+
+            .swiper-slide-active {
+                font-size: 36px;
+                color: rgb(0,0,0);
+                height: 48px;
+                line-height: 96px;
+            }
+        }
+    }
+
     .order {
         position: relative;
         display: block;