删除订单前端相关操作

@@ -17,7 +17,14 @@
             <div class="order" data-id="{{orderNum}}">
             <div class="order" data-id="{{orderNum}}">
                 <p class="order-title">
                 <p class="order-title">
                     订单编号：{{orderNum}}
                     订单编号：{{orderNum}}
-                    <span class="right">下单时间：{{orderTime}}</span>
+                    <span class="order-time">下单时间：{{orderTime}}</span>
+                    {{#if hasDelete}}
+                        <a class="right order-delete" href="javascript:;" data-deleted="true">彻底删除</a>
+                    {{^}}
+                        {{#if canDelete}}
+                        <a class="right order-delete" href="javascript:;">删除订单</a>
+                        {{/if}}
+                    {{/if}}
                 </p>
                 </p>
                 <div class="order-wrap">
                 <div class="order-wrap">
                     <ul>
                     <ul>
@@ -125,6 +132,9 @@
                                     {{/if}}
                                     {{/if}}
                                 {{/if}}
                                 {{/if}}
                             {{/if}}
                             {{/if}}
+                            {{#if hasDelete}}
+                                <span class="op-item restore-order">还原订单</span>
+                            {{/if}}
                         {{/ operation}}
                         {{/ operation}}
                     </div>
                     </div>
                 </div>
                 </div>
@@ -132,4 +142,5 @@
         {{/ orders}}
         {{/ orders}}
     {{/if}}
     {{/if}}
 </div>
 </div>
-{{> home/order-cancel-tpl}}
+{{> home/order-cancel-tpl}}
+{{> home/order-delete-confirm}}

-<ul class="tabs clearfix">
-    {{# tabs}}
+<div class="tabs-wrapper">
+    <ul class="tabs clearfix">
+        {{# tabs}}
         <li {{#if active}}class="active"{{/if}}>
         <li {{#if active}}class="active"{{/if}}>
-            <a href="{{url}}">{{name}}</a>
+        <a href="{{url}}">{{name}}</a>
         </li>
         </li>
-    {{/ tabs}}
-</ul>
+        {{/ tabs}}
+    </ul>
+    <div class="recycle-bin"><a href=""><i></i>订单回收站</a></div>
+</div>

@@ -5,6 +5,7 @@
  */
  */
 
 
 var $ = require('yoho.jquery');
 var $ = require('yoho.jquery');
+var Handlebars = require('yoho.handlebars');
 
 
 var dialog = require('../common/dialog');
 var dialog = require('../common/dialog');
 
 
@@ -12,7 +13,16 @@ var Dialog = dialog.Dialog;
 var Confirm = dialog.Confirm;
 var Confirm = dialog.Confirm;
 
 
 var $tpl = $('#cancel-dialog-tpl');
 var $tpl = $('#cancel-dialog-tpl');
-
+var deleteDialog = '<div class="order-delete-confirm">' +
+    '<div class="header">' +
+    '<p>删除订单</p>' +
+    '<a href="javascript:;" title="关闭"></a>' +
+    '</div>' +
+    '<div class="body">' +
+    '<p class="confirm-tip"><i class="icon-doubt"></i>{{deleteMessage}}</p>' +
+    '<p class="delete-tip">{{deleteTip}}</p>' +
+    '</div>' +
+    '</div>';
 var html = $tpl.html();
 var html = $tpl.html();
 
 
 var active;
 var active;
@@ -25,7 +35,7 @@ function cancelFactory(id) {
                 id: 'cancel-sure',
                 id: 'cancel-sure',
                 name: '确定并取消订单',
                 name: '确定并取消订单',
                 btnClass: ['cancel-sure'],
                 btnClass: ['cancel-sure'],
-                cb: function() {
+                cb: function () {
                     var $checked = $('.cancel-dialog :checked');
                     var $checked = $('.cancel-dialog :checked');
                     var $tip = $('.cancel-dialog .cancel-tip');
                     var $tip = $('.cancel-dialog .cancel-tip');
 
 
@@ -41,7 +51,7 @@ function cancelFactory(id) {
                             orderCode: id,
                             orderCode: id,
                             reason: $checked.val()
                             reason: $checked.val()
                         }
                         }
-                    }).then(function(data) {
+                    }).then(function (data) {
                         if (data.code === 200) {
                         if (data.code === 200) {
                             active.close();
                             active.close();
                             history.go(0);
                             history.go(0);
@@ -55,7 +65,7 @@ function cancelFactory(id) {
                 id: 'cancel-no',
                 id: 'cancel-no',
                 name: '取消',
                 name: '取消',
                 btnClass: ['cancel-no'],
                 btnClass: ['cancel-no'],
-                cb: function() {
+                cb: function () {
                     active.close();
                     active.close();
                 }
                 }
             }
             }
@@ -70,34 +80,34 @@ function cancelFactory(id) {
 $tpl.remove();
 $tpl.remove();
 
 
 //查看物流
 //查看物流
-$('.check-logistics').click(function() {
+$('.check-logistics').click(function () {
     $(this).siblings('.logistics').removeClass('hide');
     $(this).siblings('.logistics').removeClass('hide');
 });
 });
 
 
-$('.close-logistics').click(function() {
+$('.close-logistics').click(function () {
     $(this).closest('.logistics').addClass('hide');
     $(this).closest('.logistics').addClass('hide');
 });
 });
 
 
 
 
 //订单列表&订单详情【取消订单和确认收货】
 //订单列表&订单详情【取消订单和确认收货】
-$('.me-orders, .order-detail').on('click', '.cancel-order', function(e) {
+$('.me-orders, .order-detail').on('click', '.cancel-order', function (e) {
 
 
     //取消订单
     //取消订单
     active = cancelFactory($(this).closest('.order, .order-detail').data('id'));
     active = cancelFactory($(this).closest('.order, .order-detail').data('id'));
     active.show();
     active.show();
-}).on('click', '.confirm-received', function(e) {
+}).on('click', '.confirm-received', function (e) {
     var id = $(this).closest('.order, .order-detail').data('id');
     var id = $(this).closest('.order, .order-detail').data('id');
 
 
     //确认收货
     //确认收货
     active = new Confirm({
     active = new Confirm({
-        cb: function() {
+        cb: function () {
             $.ajax({
             $.ajax({
                 type: 'POST',
                 type: 'POST',
                 url: '/home/orders/confirmorder',
                 url: '/home/orders/confirmorder',
                 data: {
                 data: {
                     orderCode: id
                     orderCode: id
                 }
                 }
-            }).then(function(data) {
+            }).then(function (data) {
                 if (data.code === 200) {
                 if (data.code === 200) {
                     active.close();
                     active.close();
                     history.go(0);
                     history.go(0);
@@ -107,4 +117,56 @@ $('.me-orders, .order-detail').on('click', '.cancel-order', function(e) {
         content: '您确定要确认收货吗？'
         content: '您确定要确认收货吗？'
     });
     });
     active.show();
     active.show();
-});
+}).on('click', '.order-delete', function () {
+    var id = $(this).closest('.order, .order-detail').data('id');
+    active = deleteOrder(id, this);
+    active.show();
+});
+function deleteOrder(id, obj) {
+    // 是否为彻底删除
+    var isFullyDelete = $(obj).data("deleted") || false;
+    var $order = $(obj).parents("order");
+    var deleteMessage = isFullyDelete ? "您确定要永久删除订单吗?" : "您确定要删除订单吗?";
+    var deleteTip = isFullyDelete ? "永久删除后,订单将无法恢复,您将无法对该订单的商品申请售后服务,请谨慎操作。" : "删除后,您可以在订单回收站找回该订单,也可以做永久删除。";
+    var insert = Handlebars.compile(deleteDialog);
+    var html = insert({deleteMessage: deleteMessage, deleteTip: deleteTip})
+    var options = {
+        mask: false,
+        btns: [
+            {
+                id: 'delete-sure',
+                name: '确定',
+                btnClass: ['delete-sure'],
+                cb: function () {
+                    $.ajax({
+                        type: 'POST',
+                        url: '/home/orders/deleteOrder',
+                        data: {
+                            orderCode: id,
+                            isFullyDelete: isFullyDelete,
+                        }
+                    }).then(function (data) {
+                        if (data.code === 200) {
+                            active.close();
+                            $order.addClass("deleted-easeout");//执行动画后移除元素
+                            setTimeout(function(){
+                                $order.remove();
+                            },2e2)
+                        }
+                    });
+                }
+            },
+            {
+                id: 'delete-no',
+                name: '取消',
+                btnClass: ['delete-no'],
+                cb: function () {
+                    active.close();
+                }
+            }
+        ],
+        content: html,
+        className: 'delete-dialog',
+    };
+    return new Dialog(options);
+}

@@ -213,10 +213,12 @@
         text-align: center;
         text-align: center;
         overflow: hidden;
         overflow: hidden;
     }
     }
-
+    .tabs-wrapper{
+        position: relative;
+        margin:10px;
+    }
     .tabs {
     .tabs {
         height: 25px;
         height: 25px;
-        margin: 10px;
         background: resolve(/home/tab.png) repeat-x 0px -25px;
         background: resolve(/home/tab.png) repeat-x 0px -25px;
         font-size: 12px;
         font-size: 12px;
         line-height: 25px;
         line-height: 25px;
@@ -244,6 +246,24 @@
             height: 100%;
             height: 100%;
         }
         }
     }
     }
+    .recycle-bin{
+        position: absolute;
+        right:0;
+        top:0;
+        height:25px;
+        line-height: 25px;
+        i{
+            display:inline-block;
+            width: 15px;
+            height:17px;
+            vertical-align: text-bottom;
+            background: resolve(/home/recyclebin.png) no-repeat 0 0;
+            margin-right:5px;
+        }
+        a{
+            font-size:12px;
+        }
+    }
 
 
     .table-header {
     .table-header {
         height: 30px;
         height: 30px;

@@ -32,6 +32,13 @@
         background: #efefef;
         background: #efefef;
         padding: 0 5px;
         padding: 0 5px;
         border-bottom: 1px solid #e6e6e6;
         border-bottom: 1px solid #e6e6e6;
+        .order-time{
+            margin-left: 25px;
+        }
+        .order-delete{
+            margin-right:15px;
+            color: #999;
+        }
     }
     }
 
 
     .order {
     .order {
@@ -344,4 +351,59 @@
             width: 66px;
             width: 66px;
         }
         }
     }
     }
+}
+
+/* 删除订单对话框 */
+.delete-dialog{
+    padding: 0 0 20px 0;
+    border:1px solid #000;
+    background:#fff;
+    .header{
+        padding:0 10px;
+        height:32px;
+        background: #444;
+        line-height:32px;
+        color:#fff;
+        text-align: left;
+    }
+    .close{
+        color:#fff;
+        .iconfont{
+            font-size: 20px;
+            font-weight:700;
+        }
+    }
+    .order-delete-confirm{
+        width:400px;
+        line-height:1.5;
+    }
+    .body{
+        padding:20px;
+        margin-top: 30px;
+    }
+    .confirm-tip{
+        font-size:18px;
+        word-wrap:break-word;
+        i{
+            display:inline-block;
+            width: 30px;
+            height:30px;
+            margin-right: 12px;
+            background: resolve(/home/doubt.png) no-repeat;
+            vertical-align:middle;
+        }
+    }
+    .delete-tip{
+        padding-left:20px;
+        margin:15px 0;
+        font-size:13px;
+        word-wrap:break-word;
+    }
+    .delete-sure{
+        background:#efefef;
+    }
+    .delete-no{
+        margin-left:60px;
+        border-color: #cdcdcd;
+    }
 }
 }