<!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>
.channel-price{padding-top: 10px;color: #666;font-size: 12px;}
.my-table-view-order>li:after{display: none;}
.my-view-no{border: 1px solid rgba(0,0,0,.1);}
.my-content-padded{margin: 10px 10px 20px 10px;}
.my-btn-sign{border: 1px solid rgba(0,0,0,.5);border-radius: 0;}
.pro-tit{font-size: 12px;}
</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" href="#item1" name="2">待提货(<span id="status_1">0</span>)</a>
<a class="mui-control-item" href="#item2" name="5">已提货(<span id="status_2">0</span>)</a>
<a class="mui-control-item" href="#item3" name="99">全部(<span id="status_3">0</span>)</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 class="my-content-padded">
<ul class="mui-table-view mui-grid-view my-view-no">
<li class="mui-table-view-cell mui-col-xs-12 mui-text-left">
<h6>订单编号：12914903247082750294</h6>
</li>
<li class="mui-table-view-cell mui-col-xs-12 mui-text-left">
<h6>下单时间：2018-08-02 12:12:12</h6>
</li>
<li class="mui-table-view-cell mui-col-xs-12 mui-text-left">
<h6>订单信息：何小小 16999687876</h6>
</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">soodo上朵柔性声波电动牙刷 </div>
<h6>都市轻奢款</h6>
<div class="channel-price">¥2999.00<span class="mui-pull-right">极光白x2</span></div>
</a>
</li>
</ul>
<div class="mui-content-padded mui-text-center">
<button type="button" class="mui-btn my-btn-sign">标记为已提货</button>
</div>
</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/main.js"></script>
<script src="js/wechat-utils-1.0.js"></script>
<script>
var salesStatus = 2; //2:已支付 5:已发货 99:全部订单
window.addEventListener('pageshow', function(e) {
// 通过persisted属性判断是否存在 BF Cache
if(e.persisted) {
location.reload();
}
});
var pageNumber = 0,
pagesize = 10; //pageNumber第几页，pagesize每页条数
mui.init({
pullRefresh: {
container: '#pullrefresh_pro_list', //上拉加载容器
down: {
//callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...', //上拉加载时显示的文字
callback: pullupRefresh //上拉加载的回调方法
}
}
});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
++pageNumber; //每次上拉页数+1
$.ajax(base_path + '/wechat/channelAdmin/getChannelList?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 {
if(dt.status) {//判断接口返回状态status
$("#status_1").html(dt.data.dfStatus);
$("#status_2").html(dt.data.yfStatus);
$("#status_3").html(dt.data.allStatus);
mui('#pullrefresh_pro_list').pullRefresh().endPullupToRefresh(dt.data.lastPage?false:true);//endPullupToRefresh(ture)表示没有更多数据了，停止上拉加载
var table = document.body.querySelector('.my-table-pull');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
mui.each(dt.data.orderList, function(index) {
var li = document.createElement('li');
li.className = 'my-content-padded';
var itemHtml = "";
mui.each(this.orderItemList, function(index) {
itemHtml += '<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-text-left"><a><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 +'</div><h6> </h6><div class="channel-price">¥'+ accDiv(this.itemProductDiscount,100) +'<span class="mui-pull-right">'+ this.productColor +'x'+ this.itemNum +'</span></div></a></li>';
})
var buttonHtml = "";
if(salesStatus == 2 && this.salesTransportationType == 2){
buttonHtml = '<div class="mui-content-padded mui-text-center"><button type="button" class="mui-btn my-btn-sign" orderid="'+ this.salesOrderid +'">标记为已提货</button></div>';
}
/*订单状态*/
var statusName = "";
switch (parseInt(this.salesStatus)){
case 0 :
statusName = "取消订单";
break;
case 1 :
statusName = "待支付";
break;
case 2 :
statusName = "已支付";
break;
case 3 :
statusName = "退款申请中";
break;
case 4 :
statusName = "已退款";
break;
case 5 :
statusName = "已发货";
break;
case 6 :
statusName = "申请退货中";
break;
case 7 :
statusName = "退货中";
break;
case 8 :
statusName = "订单退货完成";
break;
case 9 :
statusName = "换货中";
break;
case 10 :
statusName = "换货完成";
break;
case 11 :
statusName = "申请换货中";
break;
case 12 :
statusName = "订单完成";
break;
default:
break;
}
var typeHtml = "";
if(this.salesTransportationType == 1){
typeHtml = "线上邮寄"
}else{
typeHtml = "线下自提"
}
var allHtml = "";
if(salesStatus == 99){
allHtml += '<li class="mui-table-view-cell mui-col-xs-12 mui-text-left"><p>订单状态：'+ statusName +'</p></li>';
allHtml += '<li class="mui-table-view-cell mui-col-xs-12 mui-text-left"><p>订单类型：'+ typeHtml +'</p></li>';
}
li.innerHTML = '<ul class="mui-table-view mui-grid-view my-view-no"><li class="mui-table-view-cell mui-col-xs-12 mui-text-left"><p>订单编号：'+ this.salesOrderid +'</p></li><li class="mui-table-view-cell mui-col-xs-12 mui-text-left"><p>下单时间：'+ formatDateMinute(this.salesCreateDate,"yyyy-MM-dd HH:mm:ss") +'</p></li><li class="mui-table-view-cell mui-col-xs-12 mui-text-left"><p>订单信息：'+ this.salesAddressName +' '+ this.salesAddressTel +'</p></li>'+ allHtml + itemHtml +'</ul>'+buttonHtml;
table.appendChild(li);
});
} else {
mui.alert(dt.message);
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("获取提货列表失败！网络错误");
}
});
}
mui.ready(function() { //ready事件
mui('#pullrefresh_pro_list').pullRefresh().pullupLoading();
$(".loading").hide().css("opacity", "0");//隐藏（正在加载...）
});
//头部选项卡点击事件
$(document).on('tap', '.mui-segmented-control>a', function() {
salesStatus = $(this).attr("name"); //当前点击的类型
pageNumber = 0; //页数归零
$('.my-table-pull').empty(); //清空产品列表
mui('#pullrefresh_pro_list').pullRefresh().refresh(true);
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);//500毫秒滚动到顶
mui('#pullrefresh_pro_list').pullRefresh().pullupLoading(); //重新加载数据
});
//标记发货
$(document).on('tap', '.my-btn-sign', function() {
var $li = $(this);
var orderId = $(this).attr("orderid");
$.ajax(base_path + '/wechat/channelAdmin/updateStatus?dates=' + new Date().getTime(), {
data: {
"salesOrderid":orderId
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'get',
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.status) {//判断接口返回状态status
$li.parent().parent().remove();
mui.toast("标记成功！");
} else {
mui.alert("标记已提货状态失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("标记已提货状态失败！网络错误");
}
});
});
</script>
</body>
</html>