<{import file="common.html" title="订单详情"}>  
<style type="text/css">
body{ background:#f8f8f8; }
.ostatus{ width:100%; height:5rem; background:#F97737; background: linear-gradient(to top left, #F19E49, #F5793C, #FD5909); padding:12px 0 8px; border-bottom:1px solid #efefef; float:left;}
.ostatus span.lft{ padding:1.7rem 0 2.3rem 3rem; color:#fff; font-size:1.1rem; float:left; } 
.ostatus span.rit{ float:right; }
.ostatus span.rit img{ width:4rem; margin:0.5rem 3rem 0 0; }

/*购买订单信息*/
.oaddress{ width:100%; padding:12px 0 6px 0; background:#fff; float:left;}
.oaddress .icon{ width:20px; height:20px; margin:8px 0 0 10px; float:left; }
.oaddress .dtl{ margin-left:40px; }
.oaddress .dtl .desc{ width:100%; padding:0 0 5px 0; color:#555; float:left; }
.oaddress .dtl .desc span{ padding:0 1rem 0 0; font-size:13px; line-height:20px; float:left; }

.exp_box{ width:100%; background:#fff; border-top:1px solid #efefef; float:left; }
.exp_name{ width:100%; padding:0.5rem 0 0 0; float: left; }
.exp_name span{ padding:1px 0 0 10px; font-size:14px; float:left; }
.exp_con{ padding:0 10px 0 0; float:right; }
.exp_con span{ padding:0 10px 0 10px; color:#666; float:left; }
.exp_con i{ color:#666; float:left; }

.exp_pro{ width:100%; background:#fff; padding:10px 0 0; float:left;}
.exp_pro ul{ padding:0 10px; font-size:13px; min-height:60px; max-height:150px; overflow:scroll; line-height:20px; }
.exp_pro ul li{ width:100%; border-left:1px solid #ddd; position: relative; float:left; }
.exp_pro ul li i{ width:7px; height:7px; border-radius:12px; background:#ddd; top:15px; left:-4px; position:absolute; z-index:2; float:left; }
.exp_pro ul li .con{ border-bottom:1px solid #efefef; margin:0 0 0 15px; padding:8px 0 6px;  }
.exp_pro ul li .con p{ color:#666; font-size:13px; line-height:20px;}
.exp_pro ul li .con p.msg{ }
.exp_pro ul li .con p.time{ color:#999;} 

/**/
.olist { width:100%; background:#fff; margin-top:10px; float:left; }
.olist .spname{ width:100%; padding:12px 0 7px 0; border-bottom:1px solid #f8f8f8; float:left; }
.olist .spname i{ width:18px; height:16px; margin:1px 10px 0 0.5rem; float:left;}
.olist .spname span{ font-size:1rem; float:left; }

.olist .glist{ width:100%; background:#f8f8f8; border-bottom:1px solid #f8f8f8; padding:0.8rem 0; float:left;} 
.olist .glist .img{ width:100px; text-align:center; float:left;}
.olist .glist .img img{ width:80px; border:1px solid #f8f8f8; border-radius:3px; }
.olist .glist .grit{ padding:0; margin-left:100px;  }
.olist .glist .grit .ttl{ width:100%; float:left; }
.olist .glist .grit .ttl .sttl{ width:65%; float:left;}
.olist .glist .grit .ttl .sttl a{ font-size:0.9rem; color:#333; line-height:18px;}
.olist .glist .grit .ttl .pr{ width:30%; float:right;}
.olist .glist .grit .ttl .pr span{ padding-right:10px; color:#333; font-size:12px; text-align:right; float:right; }
.olist .glist .grit .sku{ width:100%; padding:3px 0 0 0; float:left;} 
.olist .glist .grit .sku span{ font-size:13px; color:#999; float:left;}
.olist .glist .grit .sku span.sku_name{ margin-top:2px; float:left; }
.olist .glist .grit .sku span.service{ padding:1px 10px 0 0;float:right;}
.olist .glist .grit .sku span.service a{ font-size:0.85rem; border:1px solid #ccc; border-radius:20px; color:#333; padding:6px 7px 5px;  }

/*全部订单信息*/
.ototal{ width:100%; background:#fff; padding:12px 0 10px 0; margin-bottom:10px; float:left;  }
.ototal .pay{ width:100%; background:#fff; padding:3px 0; float:left;}
.ototal .pay span{ font-size:0.95rem; }
.ototal .pay span.l{ color:#333; padding:0 0 0 0.5rem; float:left; }   
.ototal .pay span.r{ padding:0 0.5rem 0 0; float:right; }
.ototal .pay span.lred{ margin-top:0.3rem; }
.ototal .pay span.rred{ color:#f00; font-size:1.2rem; }

/*时间流程*/
.oprs{ width:100%; background:#fff; padding:0.85rem 0; margin-bottom:65px; float:left;  }
.oprs p{ padding:0.1rem 0 0.1rem 0.7rem; font-size:0.9rem; }

/*最底下的按钮*/
.btmact{ width:100%; position:fixed; border-top:1px solid #eee; background:#fff; bottom:0; padding:10px 0; float:left; }
.btmact a{ border:1px solid #ccc; background:#fff; padding:8px 10px 5px; margin-right:10px; border-radius:30px; font-size:13px; color:#666; float:right; }
.btmact a.ch{ border:1px solid #f00; background:#fff; color:#f00; }
</style>
<body>
	<div class="cnav">
		<a class="back" href="javascript:;">&nbsp;</a>订单详情<a class="thome" href="javascript:;">主页</a>
	</div> 
	
	<{uqcms m="order" v="row" c="get_detail:order_no=smarty.get.oid"}>
	<div class="ostatus">
		<span class="lft">
			<{if $row.order.otype == '2' && $row.order.order_status == '0'}>
				拼团失败
			<{else}>
				<{$row.order.order_status_cn}>
			<{/if}> 
		</span> 
		<span class="rit"><img src="<{$__APP__}>public/images/order_cart.png"/></span>
	</div>
	
	<!--邮寄信息-->
	<div class="oaddress">
		<div class="icon"><img src="<{$__APP__}>public/images/icon/address.png"></div>
		<div class="dtl">
			<div class="desc"><span>收货人：<{$row.express.name}></span> <span style="float:right;"><{$row.express.mobile}></span></div> 	
			<div class="desc">
				<span style="color:#888;">
					收货地址：<{$row.express.prov_cn}> <{$row.express.city_cn}> <{$row.express.dist_cn}> , <{$row.express.address}> , <{$row.express.zip}>
				</span>
			</div>
		</div>
	</div> 

	<!--快递信息 只有收货了才能看到	-->
	<{if $row.order.order_status == '3' || $row.order.order_status == '4' || $row.order.order_status == '5'}>
		<div class="exp_box">
			<div class="exp_name">
				<span>物流信息</span>
				<div class="exp_con">
					<span><{if $row.express.kd_name}><{$row.express.kd_name}><{else}>--<{/if}></span>
					<i><{$row.express.kd_number}></i>
				</div>	
			</div> 
			<div class="exp_pro">
				<ul>正在加载快递信息... </ul> 
			</div>
		</div> 
	<{/if}>	 

	<!--订单列表--> 
	<div class="olist"> 
		<div class="spname">
			<i style="background:url(<{$__APP__}>public/images/icon/shop.png) no-repeat; background-size:auto 16px; ">&nbsp;</i>
			<span><{$row.shop.name}></span>
		</div>
		<{if $row.glist}>
			<{foreach item=i from=$row.glist}> 
					<div class="glist"> 
						<div class="img"><a href="wap.php?m=goods&a=detail&id=<{$i.gid}>"><img src="<{$__IMG__}><{$i.images|img_size:180x180}>"></a></div>
						<div class="grit">
							<div class="ttl">
								<div class="sttl"><a href="wap.php?m=goods&a=detail&id=<{$i.gid}>"><{$i.title|truncate:28:""}></a></div>
								<div class="pr"><span>￥<{$i.price}> × <{$i.buy_num}></span></div>
							</div>
							<div class="sku">
								<{if $i.sku}>	
									<span class="sku_name">
										<{foreach item=s from=$i.sku}>		
											<{$s.0}>:<{$s.1}> &nbsp;
										<{/foreach}>
									</span>
								<{/if}> 
								<{if $row.order.order_status == '2' || $row.order.order_status == '4' || $row.order.order_status == '5'}>
									<span class="service">
										<a href="?m=order&a=refund_detail&service_id=<{$i.service_id}>">申请售后</a>
									</span>
								<{/if}>
							</div>
						</div> 
					</div>  
			<{/foreach}>
			</div> 
		<{else}>
			<span style="text-align:center; width:100%; float:left;">暂时无订单</span>	
		<{/if}>		
	</div>
	
	<!--价格信息--->
	<div class="ototal">
		<div class="pay"><span class="l">商品总额</span><span class="r">¥ <{$row.order.goods_price}></span></div>
		<div class="pay"><span class="l">运费</span><span class="r"><{$row.order.express_price}></span></div>
		<div class="pay"><span class="l lred">实付款</span><span class="r rred">¥ <{$row.order.total_price}></span></div> 
	</div> 
	
	<!--订单信息--->
	<div class="oprs">
		<p>订单信息：<{$row.order.order_no}></p>
		<{if $row.order.addtime}><p>创建时间：<{$row.order.addtime}></p><{/if}>
		<{if $row.order.pay_time}><p>付款时间：<{$row.order.pay_time}></p><{/if}>
		<{if $row.order.deliver_time}><p>发货时间：<{$row.order.deliver_time}></p><{/if}>
		<{if $row.order.receipt_time}><p>成交时间：<{$row.order.receipt_time}></p><{/if}>
	</div> 
	
	<!--更多信息-->
	<{if $row.order.order_status == '1'}>
		<div class="btmact">
			<a href="member.php?m=buy&a=pay_trade&oid=<{$row.order.order_no}>" class="ch">马上付款</a>
			<a href="javascript:;"  onClick="cancel_order('取消订单','?m=order&a=cancel_order&oid=<{$row.order.order_no}>');">取消订单</a> 
		</div> 
	<{elseif $row.order.order_status == '3'}>
		<div class="btmact"><a herf="javascript:;" data-oid="<{$row.order.order_no}>" class="ok_receive ch">确认收货</a></div>
	<{elseif $row.order.order_status == '4'}>
		<div class="btmact">
			<a href="?m=order&a=comment&oid=<{$row.order.order_no}>" class="ch">订单评价</a> 
		</div>
	<{/if}>
	
</div>
<{include file="default/footer.html"}>
<script type="text/javascript"> 
function cancel_order(name, url){
	mdialog(name,url); 
}
$(function(){
	<{if $row.order.order_status == '3'}>	// 确认收货
	$(".ok_receive").click(function(){
		if (!confirm("确认要收货吗？")) { 
			if(window.event){
				window.event.returnValue = false;
			}else{  
				event.preventDefault();	//for firefox
			}
		}else{
			var oid = $(this).attr('data-oid');
			$.post('member.php?m=buy&a=receive&oid=<{$row.order_no}>',{oid:oid},function(result){
				var data = jQuery.parseJSON(result); 
				if(data.error == '0'){
					$.alert('确认成功', function(){
						location.reload();
					}); 
				}else{
					$.alert(data.msg);
				}
			});	
		}
	});
	<{/if}> 
});

// 快递信息
<{if $row.order.order_status == '3' || $row.order.order_status == '4' || $row.order.order_status == '5'}> 
	get_express_pro('<{$row.express.kd_code}>','<{$row.express.kd_number}>');
	function get_express_pro(code,number){ 
		$.get('index.php?m=ajax&a=express&code='+code+'&nu='+number,function(data){ 
			html = '';
			$.each(data.result, function(i,value){ 
				html += '<li><div class="con"><p class="msg">'+value.msg+'</p><p class="time">'+value.time+'</p></div><i></i></li>';
			});
			$('.exp_pro ul').html(html);
		}, 'json');
	} 
<{/if}>
</script>