<!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" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script>
//屏蔽分享
// document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// WeixinJSBridge.call('hideOptionMenu');
// });
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<div id="pro-menu" class="mui-segmented-control tab-with-orderlist">
<a class="mui-control-item icon-topay" tabindex="0" href="#item1">待支付</a>
<a class="mui-control-item icon-todelivery" href="#item2" tabindex="1">待发货</a>
<a class="mui-control-item icon-delivery" href="#item3" tabindex="2">待收货</a>
<a class="mui-control-item icon-allorder" href="#item4" tabindex="3">全部</a>
</div>
</header>
<!--<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 id="pullrefresh_order_list" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="my-table-view-order my-scroll-order">
</ul>
</div>
</div>
<!-- 加载ing -->
<div class="loading-bg">
<div class="mui-loading">
<div class="mui-spinner">
</div>
加载中...
</div>
</div>
<!-- 加载ing END -->
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.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>
var isPay = true; // 是否在请求支付，false表示正在请求,true可以请求
var tabindex = 1;
/**
* 获取指定的URL参数值
* URL:http://www.baidu.com/index?name=tyler
* 参数：paramName URL参数
* 调用方法:getParam("name")
* 返回值:tyler
*/
var search_str = "",
pageNumber = 0,
pagesize = 10;
//初始化mui
mui.init({
pullRefresh: {
container: '#pullrefresh_order_list',
down: {
// callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
mui.ready(function() {
tabindex = getParam("salesStatus");
tabindex == null ? tabindex = '1' : tabindex;
$(".tab-with-orderlist").removeClass('mui-active');
switch(tabindex) {
case "2":
$(".tab-with-orderlist .icon-todelivery").addClass('mui-active');
break;
case "5":
$(".tab-with-orderlist .icon-delivery").addClass('mui-active');
break;
case "-1":
$(".tab-with-orderlist .icon-allorder").addClass('mui-active');
break;
default:
$(".tab-with-orderlist .icon-topay").addClass('mui-active');
break;
}
document.querySelector('.loading-bg').style.display = 'none';
mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
});
function SetRemainTime(setName, index, sys_second) {
var setName = setInterval(function() {
if(sys_second > 1) {
sys_second -= 1;
var minute = Math.floor((sys_second / 60));
//var second = Math.floor(sys_second % 60);
//$("#testid"+index).html(second);
$("#testid" + index).html(minute);
//$("#testid" + index).html(minute + "分" + second + "秒");
} else {
$("#timeli" + index).hide();
clearInterval(setName);
}
}, 1000);
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
++pageNumber;
var Status = ""
var btnArray = ['否', '是'];
tabindex == "-1" ? Status = "" : Status = tabindex;
$.ajax(base_path + '/wechat/cart/selectShopOrder?dates=' + new Date().getTime(), {
data: {
"pageSize": pagesize,
"pageNO": pageNumber,
"salesStatus": Status
},
dataType: 'json',
type: 'post',
xhrFields: {
withCredentials: true
},
crossDomain: true,
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.status) {
var order_data = [];
order_data = dt.data.orderList;
//参数为true代表没有更多数据了。
mui('#pullrefresh_order_list').pullRefresh().endPullupToRefresh(order_data.length < pagesize);
var table = document.body.querySelector('.my-table-view-order'),
str = "",
str1 = "";
console.log(order_data);
mui(order_data).each(function(index) {
var txt_order = this;
var li = document.createElement('li');
switch(txt_order.salesStatus) {
case "0":
str = '<span>取消订单</span>';
break;
case "1":
str = '<span class="cl-red">待支付</span> <a class="mui-btn my-btn-danger mui-pull-right go_order_details" value=' + this.salesOrderid + '>去支付</a>';
break;
case "2":
str = '<span>待发货</span>';
break;
case "3":
str = '<span>退款申请中</span>';
break;
case "4":
str = '<span>已退款</span>';
break;
case "5":
str = '<span>已发货</span>';
break;
case "6":
str = '<span>申请退货中</span>';
break;
case "7":
str = '<span>退货中</span>';
break;
case "8":
str = '<span>订单关闭</span>';
break;
case "9":
str = '<span>换货中</span>';
break;
case "10":
str = '<span>换货完成</span>';
break;
case "11":
str = '<span>申请换货中</span>';
break;
default:
str = '<span>订单完成</span>';
break;
}
var orderSalesStatus = txt_order.salesStatus;
if(Status == "") {
str1 = '状态：' + str;
}
var a = '<li><ul class="mui-table-view mui-grid-view my-view-no " style="padding-bottom: 0;">';
var color_num = 0; //统计购买产品数量
mui(txt_order.orderItemList).each(function(index) {
var txt_item = this;
color_num += txt_item.itemNum;
a += '<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-text-left">'
+ '<a href="#"><img class="mui-media-object" src="' + txt_item.itemProductPic + '"></a>'
+ '</li>'
+ '<li class="mui-table-view-cell mui-media mui-col-xs-8 mui-text-left">'
+ '<a>'
+ '<div class="pro-tit">' + txt_item.itemProductName + '</div>'
+ '<h6 >颜色：' + txt_item.itemProductColor + '<span class="my-pull-right">数量：' + txt_item.itemNum + '</span></h6>'
+ '<p>¥' + accDiv(txt_item.itemProductDiscount,100) + '</p>'
mui(txt_item.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>';
}
});
});
a += '</a>'
+ '</li>'
+ '<li class="mui-table-view-cell mui-media mui-col-xs-12 mui-text-right cl-red">'
+ '<span class="mui-pull-left">共' + color_num + '件</span>合计：¥' + accDiv(txt_order.salesYetAmount,100) + ' '
+ '</li>'
+ '<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left">';
var ali = '<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">';
var ali2 = '</li>';
var orderDesc = '<button type="button" class="my-order-btn" onclick="order_details(\'' + txt_order.salesOrderid + '\')">订单详情</button>';
if (txt_order.salesStatus == 1) {
if(txt_order.salesAdminRemark > 0) {
SetRemainTime("setName" + index, index, this.salesAdminRemark);
a += '<h6><span class="my-btn-orange" id="testid' + index + '"></span>分钟后，订单失效</h6>';
}
a += '<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">'
//+ '<button type="button" class="my-order-btn" onclick="cancel_order(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">取消订单</button>'
+ '<button type="button" class="my-order-btn" onclick="goOrderPay(\'' + txt_order.salesOrderid + '\')">立即支付</button>';
a += orderDesc;
a += '</li>';
} else if (txt_order.salesStatus == 2) {
a += ali;
a += '<button type="button" class="my-order-btn" onclick="warnSend(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">提醒发货</button>'
a += orderDesc;
a += ali2;
} else if (txt_order.salesStatus == 5) {
a += ali;
a += '<button type="button" class="my-order-btn" onclick="confirm_receipt(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">确认收货</button>'
a += orderDesc;
a += ali2;
}else{
a += ali;
a += orderDesc;
a += ali2;
}
li.innerHTML = a + '</ul>';
table.appendChild(li);
});
} else {
mui.confirm(dt.message + '是否重新加载页面？', '爱贝源-提示', btnArray, function(e) {
if(e.index == 1) {
location.reload(true);
}
});
}
}
},
error: function(xhr, type, errorThrown) {
//异常处理；
//errorfn(xhr);
}
});
}
function search_pullrefresh(str) {
if(str != null && str != '') {
if(!checkParameter(str)) {
mui.alert('您输入的格式有误,请重新输入!');
} else {
pageNumber = 0;
$('.my-scroll-order').empty();
search_str = str;
mui('#pullrefresh_order_list').pullRefresh().refresh(true);
mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
}
} else {
pageNumber = 0;
$('.my-scroll-order').empty();
search_str = str;
mui('#pullrefresh_order_list').pullRefresh().refresh(true);
mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
}
}
/*mui.os.ios ? listener_ipt() : keyup_fn();*/
function keyup_fn() {
$('body').on('keyup', '#order-list-search', function(e) {
var currKey = 0,
e = e || event;
currKey = e.keyCode || e.which || e.charCode;
var keyName = String.fromCharCode(currKey);
if(currKey == "13") {
//传参数并加载数据
var str = $.trim($('#order-list-search').val());
search_pullrefresh(str);
}
});
}
mui.each(document.querySelectorAll('.tab-with-orderlist .mui-control-item'), function(index, el) {
el.addEventListener('tap', function() {
pageNumber = 0;
switch(index) {
case 0:
tabindex = 1;
break;
case 1:
tabindex = 2;
break;
case 2:
tabindex = 3;
break;
default:
tabindex = -1;
break;
}
$('.my-scroll-order').empty();
mui('#pullrefresh_order_list').pullRefresh().refresh(true);
mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
}, false);
});
//提醒发货
function warnSend(salesOrderid,status) {
var dataArgs = {
"orderId": salesOrderid,
"status": status
};
$.ajax(base_path+'/wechat/cart/warn_send', {
data: dataArgs,
dataType: 'json',
type: 'POST',
timeout: 15000,
success: function (dt) {
mui.alert(dt.message);
},
error: function(xhr, type, errorThrown) {
}
});
}
//确认收货
function confirm_receipt(salesOrderid,status) {
var dataArgs = {
"orderId": salesOrderid,
"status": status
};
$.ajax(base_path+'/wechat/cart/confirm_receipt', {
data: dataArgs,
dataType: 'json',
type: 'POST',
timeout: 15000,
success: function (dt) {
mui.alert(dt.message);
},
error: function(xhr, type, errorThrown) {
}
});
}
//取消订单
function cancel_order(salesOrderid,status) {
var dataArgs = {
"orderId": salesOrderid,
"status": status
};
$.ajax(base_path+'/wechat/cart/cancelOrder', {
data: dataArgs,
dataType: 'json',
type: 'POST',
timeout: 15000,
success: function (dt) {
mui.alert(dt.message);
},
error: function(xhr, type, errorThrown) {
}
});
}
//显示物流信息
function show_logistics(salesPostNum,salesPostFirm) {
mui.openWindow({
url: '/iamberry/view/view_logistics.html?billCode=' + salesPostNum + '&billName=' + salesPostFirm
});
}
function order_details(salesOrderid) {
mui.openWindow({
url: 'order-details.html?orderId=' + salesOrderid
});
}
function goOrderPay(salesOrderid) {
var dataArgs = {
"orderId": salesOrderid
};
$.ajax(base_path+'/wechat/cart/orderPay', { // 提交订单,准备支付
data: dataArgs,
dataType: 'json',
type: 'POST',
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',
type: 'post',
timeout: 15000,
success: function(dt) {
if(dt.status) { // 支付成功
window.location.href = "pay-win.html?orderId=" + orderIds.orderId + "&dates=" + new Date().getTime();
} else {
setTimeout(checkOrderStatus(orderIds), 1000);
}
},
error: function(xhr, type, errorThrown) {
isPay = true;
// layer.closeAll();
mui.toast("您的网络异常，请刷新重试!");
return;
}
});
} else {
isPay = true;
//mui.alert("对不起，支付失败!请稍后重试!" + dt.data.orderId + "支付失败!");
//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;
}
});
}
function checkParameter(remark) {
if(!/^[\u4e00-\u9fa5_a-zA-Z0-9-]+$/.test(remark)) {
return false;
}
return true;
}
mui('body').on('tap', '#mydate', function() {
var th = this;
var picker = new mui.DtPicker({
type: "date", //设置日历初始视图模式
beginDate: new Date(2016, 7, 1), //设置开始日期
endDate: new Date() //设置结束日期
});
console.log(picker)
picker.show(function(rs) {
pageNumber = 0;
th.value = rs.text;
picker.dispose();
$('.my-scroll-order').empty();
mui('#pullrefresh_order_list').pullRefresh().refresh(true);
mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
});
});
mui("body").on('tap', '.mui-btn[data-id=btn-cancel]', function() {
pageNumber = 0;
document.getElementById('mydate').value = "";
})
mui("body").on('tap', '.my-right', function() {
if($(".search-box").is(":hidden")) {
$('.search-box').show();
$(".tab-with-orderlist").css("margin-top", 105 + "px");
$(".mui-bar-nav~.mui-content").css("padding-top", 156 + "px");
} else {
$('.search-box').hide();
document.getElementById('mydate').value = "";
$(".tab-with-orderlist").css("margin-top", 56 + "px");
$(".mui-bar-nav~.mui-content").css("padding-top", 107 + "px");
}
})
</script>
</body>
</html>