Authored by 王洪广

删除订单前端相关操作

... ... @@ -17,7 +17,14 @@
<div class="order" data-id="{{orderNum}}">
<p class="order-title">
订单编号:{{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>
<div class="order-wrap">
<ul>
... ... @@ -125,6 +132,9 @@
{{/if}}
{{/if}}
{{/if}}
{{#if hasDelete}}
<span class="op-item restore-order">还原订单</span>
{{/if}}
{{/ operation}}
</div>
</div>
... ... @@ -132,4 +142,5 @@
{{/ orders}}
{{/if}}
</div>
{{> home/order-cancel-tpl}}
\ No newline at end of file
{{> home/order-cancel-tpl}}
{{> home/order-delete-confirm}}
\ No newline at end of file
... ...
<ul class="tabs clearfix">
{{# tabs}}
<div class="tabs-wrapper">
<ul class="tabs clearfix">
{{# tabs}}
<li {{#if active}}class="active"{{/if}}>
<a href="{{url}}">{{name}}</a>
<a href="{{url}}">{{name}}</a>
</li>
{{/ tabs}}
</ul>
\ No newline at end of file
{{/ tabs}}
</ul>
<div class="recycle-bin"><a href=""><i></i>订单回收站</a></div>
</div>
... ...
... ... @@ -5,6 +5,7 @@
*/
var $ = require('yoho.jquery');
var Handlebars = require('yoho.handlebars');
var dialog = require('../common/dialog');
... ... @@ -12,7 +13,16 @@ var Dialog = dialog.Dialog;
var Confirm = dialog.Confirm;
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 active;
... ... @@ -25,7 +35,7 @@ function cancelFactory(id) {
id: 'cancel-sure',
name: '确定并取消订单',
btnClass: ['cancel-sure'],
cb: function() {
cb: function () {
var $checked = $('.cancel-dialog :checked');
var $tip = $('.cancel-dialog .cancel-tip');
... ... @@ -41,7 +51,7 @@ function cancelFactory(id) {
orderCode: id,
reason: $checked.val()
}
}).then(function(data) {
}).then(function (data) {
if (data.code === 200) {
active.close();
history.go(0);
... ... @@ -55,7 +65,7 @@ function cancelFactory(id) {
id: 'cancel-no',
name: '取消',
btnClass: ['cancel-no'],
cb: function() {
cb: function () {
active.close();
}
}
... ... @@ -70,34 +80,34 @@ function cancelFactory(id) {
$tpl.remove();
//查看物流
$('.check-logistics').click(function() {
$('.check-logistics').click(function () {
$(this).siblings('.logistics').removeClass('hide');
});
$('.close-logistics').click(function() {
$('.close-logistics').click(function () {
$(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.show();
}).on('click', '.confirm-received', function(e) {
}).on('click', '.confirm-received', function (e) {
var id = $(this).closest('.order, .order-detail').data('id');
//确认收货
active = new Confirm({
cb: function() {
cb: function () {
$.ajax({
type: 'POST',
url: '/home/orders/confirmorder',
data: {
orderCode: id
}
}).then(function(data) {
}).then(function (data) {
if (data.code === 200) {
active.close();
history.go(0);
... ... @@ -107,4 +117,56 @@ $('.me-orders, .order-detail').on('click', '.cancel-order', function(e) {
content: '您确定要确认收货吗?'
});
active.show();
});
\ No newline at end of file
}).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);
}
\ No newline at end of file
... ...
... ... @@ -213,10 +213,12 @@
text-align: center;
overflow: hidden;
}
.tabs-wrapper{
position: relative;
margin:10px;
}
.tabs {
height: 25px;
margin: 10px;
background: resolve(/home/tab.png) repeat-x 0px -25px;
font-size: 12px;
line-height: 25px;
... ... @@ -244,6 +246,24 @@
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 {
height: 30px;
... ...
... ... @@ -32,6 +32,13 @@
background: #efefef;
padding: 0 5px;
border-bottom: 1px solid #e6e6e6;
.order-time{
margin-left: 25px;
}
.order-delete{
margin-right:15px;
color: #999;
}
}
.order {
... ... @@ -344,4 +351,59 @@
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;
}
}
\ No newline at end of file
... ...