<{import file="common.html" title="订单详情"}>  
<style type="text/css"> 
.ostatus{ width:100%; background:#F6651E; padding:0.4rem 0 0.35rem; border-bottom:1px solid #efefef; float:left;}
.ostatus span.lft{ padding:0.35rem 0 0 0.3rem; color:#fff; font-size:0.35rem; float:left; } 
.ostatus span.rit{ float:right; }
.ostatus span.rit img{ width:1.2rem; margin:0 0.3rem 0 0; }

/*购买订单信息*/
.oaddress{ width:100%; padding:0.2rem 0 0.2rem 0; background:#fff; float:left;}
.oaddress .icon{ width:0.4rem; height:0.4rem; margin:0 0 0 0.2rem; float:left; }
.oaddress .icon img{ width:0.4rem; background-size:auto 0.4rem;  float:left; }
.oaddress .dtl{ width: calc(100% - 1rem); margin-left:0.2rem; float:left; }
.oaddress .dtl .desc{ width:100%; padding:0 0 5px 0; color:#555; float:left; }
.oaddress .dtl .desc span{ padding:0 0.2rem 0.1rem 0; font-size:0.28rem; line-height:0.32rem; float:left; }
.oaddress .dtl .desc span.dtl_more{ color:#888; line-height:0.4rem;}

.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; font-size:0.23rem; float:left; }
.exp_con i{ color:#666; font-size:0.23rem; 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:0.2rem; border-top:1px solid #eee; float:left; } 
.glist{ width:100%; background:#fff; margin-bottom:1px; padding:0.2rem 0 0; border-bottom:1px solid #eee; float:left;} 
.glist .img{ width:1.5rem; text-align:center; padding:0 0.2rem; float:left;}
.glist .img img{ border:1px solid #f8f8f8; width:1.5rem; height:1.5rem; border-radius:3px; }

.glist .gctr{ width:3.5rem; float:left; }
.glist .gctr .ttl{ width:3.5rem; height:0.72rem; overflow:hidden; float:left;}
.glist .gctr .ttl a{ font-size:0.26rem; color:#333; line-height:0.4rem; float:left; }
.glist .gctr .sku{ width:100%; padding:0.22rem 0 0 0; float:left;}
.glist .gctr .sku span{ font-size:0.25rem; color:#999; float:left;}

.glist .grit .pr{ width:1.8rem; font-size:0.26rem; text-align:right; padding-right:0.2rem; color:#f00; float:right;} 
.glist .grit .num{ width:1.8rem; padding:1px 0.2rem 0 0; font-size:0.26rem; text-align:right; padding-right:0.2rem; float:right;}
.glist .grit .service{ width:1.8rem; padding:0 0.2rem 0 0; float:right;}
.glist .grit .service a{ border:1px solid #ddd; padding:0.08rem 0.2rem; margin-top:.2rem; font-size:0.25rem; border-radius:0.5rem; float:right; }

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

/*时间流程*/
.oprs{ width:100%; background:#fff; padding:0.28rem 0; margin-top:0.2rem; margin-bottom:1.2rem; float:left;  }
.oprs p{ padding:0.1rem 0 0.1rem 0.2rem; font-size:0.28rem; }

/*最底下的按钮*/
.btmact{ width:7.5rem; 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:0.15rem 0.3rem; margin-right:0.2rem; border-radius:30px; font-size:0.25rem; color:#666; float:right; }
.btmact a.ch{ border:1px solid #f00; background:#f00; color:#fff; }
</style>
<body> 
<div class="cnav">
	<a class="back" href="<{$__WAP__}>order/index">&nbsp;</a>订单详情<a class="thome" href="javascript:;">主页</a>
</div>

<{uqcms m="order" v="row" c="get_one:order_no=smarty.get.oid"}>
<div class="ostatus">
	<span class="lft"><{$row.order.order_status_cn}></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 class="dtl_more">
				收货地址：<{$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"> 
	<{if $row.glist}>
		<{foreach item=i from=$row.glist}> 
		<div class="glist">  
			<div class="img"><a href="<{$__WAP__}>goods/<{$i.gid}>"><img src="<{$__IMG__}><{$i.images|img_size:120x120}>" width="60"></a></div>
			<div class="gctr">
				<div class="ttl"><a href="<{$__WAP__}>goods/<{$i.gid}>"><{$i.title|truncate:28:""}></a></div>
				<div class="sku">
					<{if $i.sku}>	
						<span>
							<{foreach item=ii from=$i.sku}>		
								<{$ii.0}> : <{$ii.1}> &nbsp; 
							<{/foreach}>
						</span>
					<{/if}>  
				</div>
			</div>
			<div class="grit"> 
				<div class="pr">￥<{$i.price}></div>
				<div class="num"> × <{$i.buy_num}></div>
				<{if $row.order.order_status >= '2'}> 
					<div class="service">
						<{if $i.is_after_sale == 1 || $row.order.order_status == '2' }><!--无售后不显示-->
							<a href="<{$__WAP__}>order/refund_detail?service_id=<{$i.service_id}>">
								<{if $i.service_status != '0'}>
									<span style="color:#f00;"><{$i.service_status_cn}></span>
								<{else}> 
									售后服务
								<{/if}>	
							</a> 
						<{/if}>
					</div> 
				<{/if}>
			</div> 
		</div>  
		<{/foreach}>
	<{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>
	<{if $row.order.coupon_price >0}>
		<div class="pay"><span class="l">优惠</span><span class="r"> -<{$row.order.coupon_price}></span></div>
	<{/if}> 
	<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="<{$__WAP__}>account/pay?order_no=<{$row.order.order_no}>" class="ch">马上付款</a> 
		<a href="javascript:;" onClick="cancel_order('取消订单', '<{$__WAP__}>order/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="<{$__WAP__}>order/comment?oid=<{$row.order.order_no}>" class="ch">订单评价</a>
		<a href="javascript:;" data-id="<{$row.order.order_no}>" class="delete">删除订单</a>
	</div>
<{elseif $row.order.order_status == '0'}>
	<div class="btmact">
		<a href="javascript:;" data-id="<{$row.order.order_no}>" class="delete">删除订单</a>
	</div>	
<{/if}>
<{import file="footer.html"}>
<script type="text/javascript"> 
function cancel_order(name, url){
	mdialog(name,url); 
}
_delete('<{$__URI__}>buy/del', '', function(){
	history.go(-1); location.reload(); 
}); 
$(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(URI+'buy/receive',{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_alias}>', '<{$row.express.kd_number}>');
	function get_express_pro(code,number){ 
		$.get(URI+'ajax/express?code='+code+'&nu='+number,function(result){  
			data = jQuery.parseJSON(result);
			if(data.error == '0'){
				html = '';
				$.each(data.msg, function(i,value){ 
					html += '<li><div class="con"><p class="msg">'+value.content+'</p><p class="time">'+value.time+'</p></div><i></i></li>';
				});
				$('.exp_pro ul').html(html);
			}else{
				$('.exp_pro ul').html('查询不到快递信息');
			}
		});
	} 
<{/if}>
</script>