liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
							<!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;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,.5);

			}
		</style>
	</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>
			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>订单详情</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().pullupLoading(); //重新加载数据
				mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);//500毫秒滚动到顶
			});
		</script>
	</body>

</html>