<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>订单详情</title>
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript">
// 屏蔽分享
window.hiddenAllWechatMenu = true;
</script>
</head>
<body>
<footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
<a class="mui-tab-item">
<span class="iconfont icon-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="iconfont icon-gouwuche"></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item mui-active">
<span class="iconfont icon-dingdan"></span>
<span class="mui-tab-label">订单</span>
</a>
<a class="mui-tab-item">
<span class="iconfont icon-wode"></span>
<span class="mui-tab-label">我的</span>
</a>
</footer>
<div class="loading-bg">
<div class="mui-loading">
<div class="mui-spinner">
</div>
加载中...
</div>
</div>
<div class="mui-content">
<input type="hidden" id="salesPostFirm" name="salesPostFirm" value=""/>
<input type="hidden" id="salesPostNum" name="salesPostNum" value=""/>
<div style="margin:14px 14px 0 14px;background-color: #f3f3f3;text-align: center;">
<ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
<li class="mui-table-view-cell" style="background-color: #f3f3f3;border-radius: 5px;padding: 11px 8px;">
<div class="mui-table" style="height: 80px;">
<div class="mui-table-cell mui-col-xs-12 table-middle" style="display: none;">
<div style="height: 20px;position: relative;width: 150px; margin: 0 auto;"><span class="iconfont icon-jia" style="position: absolute;left:0%;top: 0;font-size: 20px;"></span></div>
</div>
<div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
<p><span class="iconfont icon-dingwei"></span></p>
</div>
<div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
<div><span id="addressName"></span> <span class="" style="padding-left: 10px;" id="salesAddressTel"></span></div>
<p id="addressInfo"></p>
</div>
<div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle">
<!--<p><span class="mui-icon mui-icon-arrowright"></span></p>-->
</div>
</div>
</li>
</ul>
</div>
<div class="clearing-box">
<ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed shopping-cart-list">
</ul>
<ul class="mui-table-view my-view-no-top">
<li class="mui-table-view-cell cl-red" style="padding: 11px 2px;">
共<span id="num">0</span>件<span class="mui-pull-right">合计：¥<span id="salesYetAmount">0.00</span></span>
</li>
</ul>
<ul class="my-table-view">
<li>
订单状态：<span id="statusName"></span>
</li>
<li>
订单编号：<span id="orderId"></span>
</li>
<li>
下单时间：<span id="salesCreateDate"></span><br>
</li>
<li id="salesUserRemarkShow" style="display: none;">
订单备注：<span id="salesUserRemark"></span>
</li>
</ul>
<!--<textarea id="textarea" rows="1" placeholder="如您选择退款，请先输入退款原因！" style="background-color: #f9f9f9;border: 0;margin:0;padding: 15px;font-size: 14px;"></textarea>-->
<div class="mui-content-padded mui-text-center" id="operation">
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wechat-utils-1.0.js"></script>
<script>
var orderId = getParam("orderId");
var status;
var isPay = true; // 是否在请求支付，false表示正在请求,true可以请求
var isEfficacious = true; //商品是否有效，有效则可以支付，无效则不能支付
mui.ready(function() {
// var str="";
// for (i=0;i<3;i++) {
// str+='<div class="mui-table"><div class="mui-table-cell mui-col-xs-4"><img class="mui-media-object wh-100" src="images/chanpin-1.jpg"></div><div class="mui-table-cell table-middle mui-col-xs-8">Aiberle美国智能净饮水一体机<h6>颜色：优雅白<span class="center">数量：2</span></h6><div>¥2999.00</div><h6>（赠品：美国aiberle咖啡杯 数量：3）</h6></div></div>';
// }
// document.querySelector('.shopping-cart-list').innerHTML=str;
var table = document.body.querySelector('.shopping-cart-list');
$.ajax(base_path + '/wechat/cart/getShopOrderByOrderId', {
data: {
orderId: orderId
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'post',
timeout: 15000,
success: function(dt) {
//服务器返回响应
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.status) {
console.log(dt)
var order = dt.data;
status = order.salesStatus;
$("#addressInfo").html(order.salesAddressInfo);
$("#addressName").html(order.salesAddressName);
$("#salesAddressTel").html(order.salesAddressTel);
var str = '';
var num = 0,a='';
mui.each(order.orderItemList, function(index) {
num += this.itemNum;
str += '<div class="mui-table"><div class="mui-table-cell mui-col-xs-4"><img class="mui-media-object wh-100" src="'+ this.itemProductPic +'"></div><div class="mui-table-cell table-middle mui-col-xs-7" style="line-height:2.5">'+ this.itemProductName +'<h6><span class="center" style="margin-left: 0px;line-height: 15px;">颜色：'+ this.itemProductColor +'</span></br><span class="center" style="margin-left: 0px;line-height: 15px;">数量：'+ this.itemNum +'</span></h6><div>¥'+ accDiv(this.itemProductDiscount,100) +'</div></div></div>';
mui(this.salesUserGiftList).each(function(index) {
var txt_gift = this;
if (index == 0) {
a += '<h6>赠品：' + txt_gift.giftName + ' 数量：' + txt_gift.userGiftCount + '</h6>';
} else {
a += '<h6> ' + txt_gift.giftName + ' 数量：' + txt_gift.userGiftCount + '</h6>';
}
});
str += a
});
document.querySelector('.shopping-cart-list').innerHTML = str;
document.querySelector('.loading-bg').style.display = 'none';
if(order.salesPostFirm != null && order.salesPostFirm != "" && typeof(order.salesPostFirm) != "undefined"){
$("#salesPostFirm").val(order.salesPostFirm);
}
if(order.salesPostNum != null && order.salesPostNum != "" && typeof(order.salesPostNum) != "undefined"){
$("#salesPostNum").val(order.salesPostNum);
}
var logisticsHtml = '';
if(status == 5 || status == 12 || status == 6 || status == 11) { //状态为取消，待支付，代发货，退货，换货都没有物流信息
if(order.salesPostFirm != null && order.salesPostFirm != "" && typeof(order.salesPostFirm) != "undefined" && order.salesPostNum != null && order.salesPostNum != "" && typeof(order.salesPostNum) != "undefined"){
logisticsHtml = '<button type="button" class="mui-btn my-btn-request logistics" style="margin-left: 10px;">查看物流</button>';
}
}
var payHtml = '<button type="button" class="mui-btn my-btn-request go_pay" style="margin-left: 10px;">立即支付</button>';
var cancelOrderHtml = '<button type="button" class="mui-btn my-btn-request go_cancel" style="margin-left: 10px;">取消订单</button>';
var aftermarketHtml = '<button type="button" class="mui-btn my-btn-request go_aftermarket" style="margin-left: 10px;">我要售后</button>';
var cancelHtml = '<button type="button" class="mui-btn my-btn-request go_cancel" style="margin-left: 10px;">取消申请</button>';
var confirmHtml = '<button type="button" class="mui-btn my-btn-request go_confirm" style="margin-left: 10px;">确认收货</button>';
/*订单状态*/
var statusName = "";
var operationHtml = "";
switch (parseInt(order.salesStatus)){
case 0 :
statusName = "取消订单";
break;
case 1 :
statusName = "待支付(未支付订单超过20分钟自动取消)";
operationHtml += payHtml + cancelOrderHtml;
break;
case 2 :
statusName = "已支付";
operationHtml += aftermarketHtml;
break;
case 3 :
statusName = "退款申请中";
operationHtml += cancelHtml;
break;
case 4 :
statusName = "已退款";
break;
case 5 :
statusName = "已发货";
operationHtml += aftermarketHtml + logisticsHtml;
break;
case 6 :
statusName = "申请退货中";
operationHtml += cancelHtml + logisticsHtml;
break;
case 7 :
statusName = "退货中（请尽快寄回产品）";
operationHtml += cancelHtml;
break;
case 8 :
statusName = "订单退货完成";
break;
case 9 :
statusName = "换货中";
break;
case 10 :
statusName = "换货完成";
break;
case 11 :
statusName = "申请换货中";
operationHtml += cancelHtml + logisticsHtml;
break;
case 12 :
statusName = "订单完成";
operationHtml += logisticsHtml
break;
default:
break;
}
$("#statusName").html(statusName);
$("#orderId").html(order.salesOrderid);
$("#salesCreateDate").html(order.salesCreateDate);
$("#salesYetAmount").html(accDiv(order.salesYetAmount,100));
$("#salesUserRemark").html(order.salesUserRemark);
if(order.salesUserRemark != null && order.salesUserRemark != "" && typeof(order.salesUserRemark) != 'undefined'){
$("#salesUserRemarkShow").show();
}
$("#num").html(num);
$("#operation").html(operationHtml);
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
}
});
});
mui('body').on('tap', '.go_web_shop', function() {
mui.openWindow({
url: 'chanpin_list.html'
});
});
mui('body').on('tap', '.go-clearing', function() {
if($("input[type='checkbox']:checked").length > 0) {
mui.openWindow({
url: 'clearing.html'
});
} else {
mui.alert('您没有选中任何商品', '爱贝源-消息提醒', function() {
console.log("您关闭了警告框");
});
}
});
/*确认收货*/
mui('body').on('tap', '.go_confirm', function() {
confirm_receipt(orderId,status);
});
//确认收货
function confirm_receipt(salesOrderid,status) {
var dataArgs = {
"orderId": salesOrderid,
"status": status
};
$.ajax(base_path+'/wechat/cart/confirm_receipt', {
data: dataArgs,
dataType: 'json',
type: 'POST',
xhrFields: {
withCredentials: true
},
crossDomain: true,
timeout: 15000,
success: function (dt) {
mui.alert(dt.message);
},
error: function(xhr, type, errorThrown) {
}
});
}
/**
* 立即支付
*/
mui('body').on('tap', '.go_pay', function() {
goOrderPay(orderId);
});
/**
* 申请售后
*/
mui('body').on('tap', '.go_aftermarket', function() {
location.href = "customer-service.html?orderId=" + orderId;
});
/**
* 查询物流
*/
mui('body').on('tap', '.logistics', function() {
var salesPostFirm = $("#salesPostFirm").val();
var salesPostNum = $("#salesPostNum").val();
location.href = "logistics-massage.html?salesPostFirm="+salesPostFirm + "&salesPostNum="+salesPostNum;
});
/**
* 取消订单
*/
mui('body').on('tap', '.go_cancel', function() {
var newStatus;
if(status == 1){//取消订单
newStatus = 1;
}else if(status == 3){ //申请退款的
newStatus = 3;
}else if(status == 6){ //申请退货的
newStatus = 5;
}else if(status == 7){ //退货中 的
newStatus = 6;
}else if(status == 11){
newStatus = 8;
}
if(status != null){
updateOrderStatus(orderId,newStatus,"");
}
});
/*修改订单状态*/
function updateOrderStatus(orderId, status, remark) {
var msg = "";
if(status == 1){
msg = "是否取消该订单";
}else if(status == 3){
msg = "是否取消申请退款";
}else if(status == 5){
msg = "是否取消申请退货";
}else if(status == 6){
msg = "是否取消申请退货";
}else if(status == 8){
msg = "是否取消申请换货";
}
var btnArray = ['否', '是'];
mui.confirm(msg, "", btnArray, function(e){
if (e.index == 1) {
$.ajax(base_path + '/wechat/cart/updateOrderStatus?dates=' + new Date().getTime(), {
data: {
"status": status, //更改后的状态
"orderId": orderId, //订单id
"remark": remark
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get',
timeout: 15000,
success: function(dt) {
if(dt.resultCode == 200) {
//mui.alert("获取订单列表失败！网络错误");
//location.reload();//刷新
}
location.reload();//刷新
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取订单列表失败！网络错误");
}
});
}
})
}
function goOrderPay(salesOrderid) {
var dataArgs = {
"orderId": salesOrderid
};
$.ajax(base_path+'/wechat/cart/orderPay', { // 提交订单,准备支付
data: dataArgs,
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'POST',
xhrFields: {
withCredentials: true
},
crossDomain: true,
timeout: 15000,
success: function(dt) {
// layer.closeAll();
if(dt.status) {
var str = dt.data.info;
var obj = JSON.parse("{" + str + "}");
WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
if(res.err_msg == 'get_brand_wcpay_request:ok') {
var orderIds = {
"orderId": dt.data.orderId
};
// layer.open({
// type: 2,
// shadeClose: false,
// content: "正在请求加载订单信息..."
// }); // 调用加载弹出层
$.ajax(base_path+'/wechat/order/checkOrderPaySuccess', { // 校验订单状态
data: orderIds,
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'post',
xhrFields: {
withCredentials: true
},
crossDomain: true,
timeout: 15000,
success: function(dt) {
if(dt.status) { // 支付成功
window.location.href = "pay-win.html?orderId=" + orderIds.orderId + "&dates=" + new Date().getTime();
} else {
mui.toast("支付失败，请稍后重试!");
//setTimeout(checkOrderStatus(orderIds), 1000);
}
},
error: function(xhr, type, errorThrown) {
isPay = true;
// layer.closeAll();
mui.toast("您的网络异常，请刷新重试!");
return;
}
});
} else {
isPay = true;
mui.alert("支付失败!请稍后重试!");
//window.location.href = "order-details.html?orderId=" + dt.data.orderId; // 前往订单详情
}
});
} else {
isPay = true;
mui.toast(dt.message);
}
},
error: function(xhr, type, errorThrown) {
isPay = true;
// layer.closeAll();
mui.toast("您的网络异常，请刷新重试!");
return;
}
});
}
</script>
</body>
</html>