<!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" />
<style>
.order_operate{
color: #000!important;border-radius: 0px;border: 1px solid rgba(0,0,0,.5); padding: 6px 0;width: 40%;
}
</style>
<script type="text/javascript">
// 屏蔽分享
window.hiddenAllWechatMenu = true;
</script>
</head>
<body>
<div id="pro-menu" class="mui-segmented-control" id="mui-segmented-control">
<a class="mui-control-item mui-active" id="status_1" href="#item1" name="1">待付款</a>
<a class="mui-control-item" id="status_2" href="#item2" name="2">待发货</a>
<a class="mui-control-item" id="status_5" href="#item3" name="5">已发货</a>
<a class="mui-control-item" id="status_20" href="#item4" name="">全部</a>
</div>
<div id="pullrefresh_pro_list" class="mui-content mui-scroll-wrapper" style="top: 50px;">
<div class="mui-scroll">
<ul class="my-table-view-order my-table-pull">
<li>
<!--<ul class="mui-table-view mui-grid-view my-view-no" style="padding-bottom: 0;">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-text-left">
<a href="#"><img class="mui-media-object" src="images/pro-bai.png"></a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-8 mui-text-left">
<a>
<div class="pro-tit">柔性声波牙刷 <span class="mui-h5 mui-pull-right cl-red">待付款</span></div>
<h6 >颜色：极光白<span class="mui-pull-right">数量：2</span></h6>
<p>¥2999.00</p>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-text-left">
<a href="#"><img class="mui-media-object" src="images/pro-bai.png"></a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-8 mui-text-left">
<a>
<div class="pro-tit">柔性声波牙刷 <span class="mui-h5 mui-pull-right cl-red">待付款</span></div>
<h6 >颜色：极光白<span class="mui-pull-right">数量：2</span></h6>
<p>¥2999.00</p>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<span class="mui-pull-left">共<span class="cl-red">2</span>件</span>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-text-right">
合计：<span class="cl-red">¥5998.00</span>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left">
<h6>58分钟后，订单将失效</h6>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">
<button type="button" class="my-order-btn">取消订单</button><button type="button" class="my-order-btn">立即支付</button>
</li>
</ul>-->
</li>
</ul>
</div>
</div>
<!-- 加载ing -->
<div class="loading covers">
<div class="loading-bj"></div>
<p>加载中...</p>
</div>
<!-- 加载ing END -->
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.autocompleter.js"></script>
<script src="js/main.js"></script>
<script src="js/wechat-utils-1.0.js"></script>
<script>
window.addEventListener('pageshow', function(e) {
// 通过persisted属性判断是否存在 BF Cache
if(e.persisted) {
location.reload();
}
});
var salesStatus = getParam("salesStatus"); //待支付
var pageNumber = 0,
pagesize = 10; //pageNumber第几页，pagesize每页条数
// var orderDesc = '<button type="button" class="my-order-btn order_operate order_desc" fixedStatus="desc" orderId>订单详情</button>';
var orderStatus = {
1: '<button type="button" class="my-order-btn order_operate pay_order" fixedStatus="pay" orderId>立即支付</button><button type="button" class="my-btn-black my-btn order_operate order_desc" fixedStatus="desc" orderId>订单详情</button>',
3: '<button type="button" class="my-order-btn order_operate cancel_apply_refund" fixedStatus="3" orderId>取消申请</button>', //退款申请中
7: '<button type="button" class="my-order-btn order_operate cancel_product_return" fixedStatus="1" orderId>取消退货</button>', //退货中
11: '<button type="button" class="my-order-btn order_operate cancel_apply_exchange" fixedStatus="1" orderId>取消申请</button>' //申请换货中
};
mui.init({
pullRefresh: {
container: '#pullrefresh_pro_list', //上拉加载容器
down: {
//callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...', //上拉加载时显示的文字
callback: pullupRefresh //上拉加载的回调方法
}
}
});
/*订单按钮触发事件*/
$(document).on('tap', '.order_operate', function() {
var status = $(this).attr("fixedStatus");
var orderId = $(this).attr("orderId");
var remark = "";
if( status == "pay") { //调用支付接口
pay(orderId);
}else if(status == "desc") {
location.href = "order-details.html?orderId="+orderId;
}else{
updateOrderStatus(orderId, status, remark);
}
});
/*修改订单状态*/
function updateOrderStatus(orderId, status, remark) {
var msg = "";
var successMsg = "";
if(status == 1){
msg = "是否取消该订单";
//successMsg = "该订单已取消";
}else if(status == 3){
msg = "是否取消申请退款";
}else if(status == 7){
msg = "是否取消申请退货";
}else if(status == 11){
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(successMsg);
}
pageNumber = 0; //页数归零
$('.my-table-pull').empty(); //清空产品列表
mui('#pullrefresh_pro_list').pullRefresh().pullupLoading(); //重新加载数据
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);//500毫秒滚动到顶
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取订单列表失败！网络错误");
}
});
}
})
}
/*支付*/
function pay(orderId) {
$.ajax(base_path + '/wechat/cart/orderPay?dates=' + new Date().getTime(), {
data: {
"orderId": orderId
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get',
timeout: 15000,
success: function(dt) {
if(dt.resultCode == "500") {
mui.alert(dt.message);
isPay = true;
return;
};
if(dt.data.info == "isOK") {
location.href='pay-win.html?orderId='+ dt.data.orderId + "&dates=" + new Date().getTime()
// mui.openWindow({
// url: base_path+"/wechat/order/paySuccess?orderId=" + dt.data.orderId + "&dates=" + new Date().getTime()
// });
return;
};
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') {
$.ajax(base_path + '/wechat/order/checkOrderPaySuccess?dates=' + new Date().getTime(), {
data: {
"orderId": dt.data.orderId
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get',
timeout: 15000,
success: function(dataobj) {
if(dataobj.isRedirect) {
location.href = dataobj.redirectURL;
} else {
if(dataobj.status == true) { // 支付成功
location.href = "pay-win.html?orderId=" + dataobj.data + "&dates=" + new Date().getTime();
} else {
location.href = "order-details.html?orderId=" + dataobj.data + "&dates=" + new Date().getTime(); // 前往订单详情
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
}
});
} else {
isPay = true;
mui.toast("对不起，支付失败!请稍后重试!");
}
});
} else {
isPay = true;
mui.alert(dt.message);
location.href = "order-details.html?orderId=" + dt.data.orderId + "&dates=" + new Date().getTime(); // 前往订单详情
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取订单列表失败！网络错误");
}
});
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
++pageNumber; //每次上拉页数+1
$.ajax(base_path + '/wechat/cart/selectShopOrder?dates=' + new Date().getTime(), {
data: {
"salesStatus": salesStatus, //产品类型id
"pageNO": pageNumber, //pageNo第几页
"pageSize": pagesize //pageSize每页条数
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get',
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
console.log(dt);
if(dt.status) { //判断接口返回状态status
var table = document.body.querySelector('.my-table-pull'); //table是插入数据li的父级容器
mui('#pullrefresh_pro_list').pullRefresh().endPullupToRefresh(dt.data.orderList.length < pagesize); //endPullupToRefresh(ture)表示没有更多数据了，停止上拉加载
mui.each(dt.data.orderList, function(index) {
var li = document.createElement('li'); //创建li标签
var orderHtml = '<ul class="mui-table-view mui-grid-view my-view-no order_desc" style="padding-bottom: 10px;" >';
var orderItemHtml = '';
var allNum = 0;
mui.each(this.orderItemList, function(index) {
allNum += this.itemNum;
orderItemHtml += '<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-text-left">' +
'<a href="#"><img class="mui-media-object" src="' + this.itemProductPic + '"></a>' +
'</li>' +
'<li class="mui-table-view-cell mui-media mui-col-xs-8 mui-text-left">' +
'<a>' +
'<div class="pro-tit">' + this.itemProductName + ' <span class="mui-h5 mui-pull-right cl-red"></span></div>' +
'<h6 >颜色：' + this.productColor + ' <span class="mui-pull-right">数量：' + this.itemNum + '</span></h6>' +
'<p> ¥' + accDiv(this.itemProductDiscount,100) + '</p>' +
'</a>' +
'</li>';
});
orderHtml += orderItemHtml;
var status = this.salesStatus;
var statusHtml = '';
statusHtml = orderStatus[status]; //获取订单状态所展示的按钮
if(statusHtml == null || statusHtml == "" || typeof(statusHtml) == "undefined") {
statusHtml = '';
}
if(status != 1) {
statusHtml += '<button type="button" class="my-order-btn order_operate order_desc" fixedStatus="desc" orderId style=" color: #000!important;border-radius: 0px;border: 1px solid rgba(0,0,0,.5);">订单详情</button>';
}
statusHtml = statusHtml.replace(/\orderId/g,'orderId="'+ this.salesOrderid +'"');
orderHtml += '<li class="mui-table-view-cell mui-media mui-col-xs-6">' +
'<span class="mui-pull-left">共<span class="cl-red">' + allNum + '</span>件</span>' +
'</li>' +
'<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-text-right">' +
'实付：<span class="cl-red">¥' + accDiv(this.salesYetAmount,100) + '</span>' +
'</li>' +
'<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left">'
//+'<h6>58分钟后，订单将失效</h6>'
+
'</li>' +
'<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">' +
'' +
statusHtml +
'</li>' +
'</ul>';
li.innerHTML = orderHtml;
table.appendChild(li); //将li插入table
});
} else {
mui.alert("获取订单列表失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取订单列表失败！网络错误");
}
});
}
mui.ready(function() { //ready事件
$(".mui-segmented-control>a").removeClass("mui-active");
if(salesStatus == null || salesStatus == ""){
salesStatus = 1;
$("#status_1").addClass("mui-active");
}else if(salesStatus == 1){
$("#status_1").addClass("mui-active");
}else if(salesStatus == 2){
$("#status_2").addClass("mui-active");
}else if(salesStatus == 5){
$("#status_5").addClass("mui-active");
}else if(salesStatus == 20){
salesStatus = "";
$("#status_20").addClass("mui-active");
}
mui('#pullrefresh_pro_list').pullRefresh().pullupLoading();
});
// 头部选项卡点击事件
$(document).on('tap', '.mui-segmented-control>a', function() {
salesStatus = $(this).attr("name"); //当前点击的类型id
pageNumber = 0; //页数归零
$('.my-table-pull').empty(); //清空产品列表
mui('#pullrefresh_pro_list').pullRefresh().refresh(true);
//mui('#pullrefresh_pro_list').pullRefresh().pullupLoading(); //重新加载数据
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);//500毫秒滚动到顶
});
</script>
</body>
</html>