<{import file="index/header.html" title="售后详情"}>
<style type="text/css">
.process ul li.step{ width:343px;}
.rbox{ width:1035px; border:1px solid #eee; padding:0; float:left; }  
.pleft{ width:260px; padding:0 15px 0; height:350px; border-left:1px solid #eee; margin-left:-1px; float:left;} 
.pleft .sname{ width:100%; padding:8px 0; margin:0 0 5px 0; border-bottom:1px solid #eee; float:left;}
.pleft .sname span{ padding:10px 0 0 0; font-size:14px; color:#333; float:left;}
.pleft .scon{ padding:0; width:280px; float:left; }
.pleft .scon dl{ width:260px; padding:3px 10px 3px 0; float:left;}
.pleft .scon dl dt{ width:70px; color:#999; text-align:left; padding:0 12px 0 0; float:left; }
.pleft .scon dl dd{ width:165px; color:#333; float:left; } 

.pright{ width:710px; min-height:350px; border-left:1px solid #efefef; float:left;}  
.submit_msg{width:100%; font-size:16px; text-align:center; padding:20px 0 20px 0; float:left;}

/*日志列表*/
.process_log { width:710px; margin:0 15px; float:left; }
.process_log .pname{ width:100%; padding:6px 0; margin:0 0 10px 0; border-top:1px solid #efefef; float:left;}
.process_log .pname span{ margin-top:8px; padding:0 0 0 10px; line-height:15px; font-size:14px; border-left:3px solid #f00; color:#666; float:left;}
.process_log{ width:100%; padding:0 0 50px 0; float:left; } 
.process_log .my{ width:100%; padding:10px 0; border-bottom:1px dashed #efefef; float:left;}
.process_log .my .myname{width:720px; padding:5px 0; float:left;}
.process_log .my .myname span{ padding:0 10px 0 0; color:#333333; font-size:14px; float:left;}
.process_log .my .myname em{ padding:2px 0 0 10px; color:#999;  font-style:inherit; float:left; }
.process_log .my .mycon{ width:720px; padding:0; color:#666; line-height:26px; float: left; }

/*上传文件*/
.upload_box{ float:left; }
.upload_box .img{ width:50px; height:50px; margin-right:10px; border:1px solid #efefef; overflow:hidden; float:left; }
.upload_box .img img{ max-width:50px; height:50px; position:absolute; float:left;}
.upload_box .img i{ width:50px; height:50px; display:none; float:left; z-index:2; font-style:inherit; text-align:center; line-height:50px; color:#FFFFFF; background-color:rgba(0,0,0,0.4); cursor:pointer; position: relative; left:0; top:0; }
.upload_box .img:hover i{ display:block; }
.upload_button{ float:left; }
</style>
</head>
<div class="lbox">
	<{uqcms m="refund" v="row" c="get_one:service_id=smarty.get.service_id"}>
	<div class="process">
		<ul>
			<li class="step <{if $row.order_status >= 1 || $rrow.status == ''}>step1<{else}>step0<{/if}>">
				<div class="ttl">1.买家申请退款</div>
				<div class="number">√</div> 
				<div class="meta"><{if $row.addtime}><{$row.addtime}><{/if}></div>
			</li>
			<li class="step <{if $row.status >= 2}> step1<{else}>step0<{/if}>">
				<div class="ttl">2.商家 处理退款申请</div>
				<div class="number">√</div> 
				<div class="meta"><{if $row.passtime}><{$row.passtime}><{/if}></div>
			</li>
			<li class="step <{if $row.status == 5}> step1<{else}>step0<{/if}>">
				<div class="ttl">3.结束完成</div>
				<div class="number">√</div>
				<div class="meta"><{if $row.endtime}><{$row.endtime}><{/if}></div>
			</li> 
		</ul>
	</div> 
	<div class="rbox">
		<{uqcms m="refund" c="refund_goods:service_id=smarty.get.service_id" v="goods"}> 
		<div class="pleft">
			<div class="sname"><span>售后产品</span></div>
			<div class="scon">
				<dl style="border-bottom:1px dashed #efefef; padding:8px 0; margin-bottom:10px;">
					<dt style="width:60px;"><a href="index.php?m=goods&a=detail&id=<{$row.goods_row.gid}>" target="_blank"><img src="<{$__IMG__}><{$goods.images|img_size:60x60}>" width="60"/></a></dt>
					<dd><a href="index.php?m=goods&a=detail&id=<{$goods.gid}>" target="_blank"><{$goods.title}></a></dd>
				</dl>
				<dl>
					<dt>订单编号：</dt>
					<dd><{$goods.order_no}></dd>
				</dl>
				<dl>
					<dt>卖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家：</dt>
					<dd><{$goods.shop_name}></dd>
				</dl>
				<dl>
					<dt>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</dt>
					<dd>￥<{$goods.goods_price}></dd>
				</dl>
				<dl>
					<dt>数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;量：</dt>
					<dd>￥<{$goods.buy_num}></dd>
				</dl>
				<dl>
					<dt>总&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：</dt>
					<dd style="color:#FF0000; font-weight:bold; font-family:tahoma,arial;">￥<{$goods.goods_price}></dd>
				</dl>
				<dl>
					<dt>支付时间：</dt>
					<dd><{$goods.pay_time}></dd>
				</dl>
			</div> 
		</div>
		
		<div class="pright"> 
			<div class="process_act">
			<{if $row.id}>
				<{if $row.status == '1'}>			
					<div class="submit_msg">已经提交申请，请等待卖家处理</div>
				<{elseif $row.status == '2'}>
					<form id="kd_form" method="post">
						<input type="hidden" name="service_id" value="<{$row.refund_row.service_id}>"/>
						<table class="etable"> 
							<tr>
								<td width="120">快递名称：</td>
								<td> 
									<{uqcms m="express" v="exp" c="get_config"}> 
									<select name="kd_code">
										<option value="0">--选择快递--</option>
										<{foreach item=i from=$exp}>		
											<option value="<{$i.code}>"><{$i.name}></option>
										<{/foreach}>			 
									</select> 
								</td>
							</tr>
							<tr>
								<td>快递单号：</td>
								<td><input type="text" name="kd_number" size="50"></td>
							</tr>
							<tr>
								<td valign="top" style="padding-top:8px;">发货备注：</td>
								<td><textarea name="kd_remark" cols="51" rows="3"></textarea></td>
							</tr>
							<tr>
								<td>发货凭证：</td>
								<td>
							<div class="upload_box"></div>
							<div class="upload_button"> 
								<a class="file" href="javascript:;">选择文件<input type="file" name="imgFile" class="img_file" id="imgFile"/></a>									
							</div>
								</td>
							</tr> 
							<tr>
								<td>&nbsp;</td>
								<td><input type="submit" name="kd_submit" class="submit" value="我要发货"/></td>
							</tr>
						</table>
					</form> 
				<{elseif $row.status == '3'}>
					<div class="submit_msg">已经发货,等待买家确认收货</div>
				<{elseif $row.status == '4'}>
					<div class="submit_msg">平台介入</div>
				<{elseif $row.status == '5'}>
					<div class="submit_msg">退款成功</div>
				<{elseif $row.status == '6'}>
					<div class="submit_msg">退款失败</div>
				<{/if}>
			<{else}>
				<{if $row.error == '0'}>
					<!--申请退款操作-->
					<form id="form" method="post">
						<input type="hidden" name="service_id" value="<{$smarty.get.service_id}>"/>
						<table class="etable">
							<tr>
								<td width="120">退货原因：</td>
								<td>
									<{uqcms m="refund" v="reason" c="refund_reason"}>	
									<select name="reason">
										<option value="0">请选择退款原因</option>
									<{foreach item=i key=k from=$reason}>			
										<option value="<{$k}>"><{$i}></option>
									<{/foreach}>  
									</select>
								</td>
							</tr>
							<tr>
								<td>退款金额：</td>
								<td>
								<input type="number" name="price" size="10" value="<{$goods.refund_price}>" max="<{$row.goods_row.refund_price}>">
								<span style="float:left; color:#666666; padding:7px 0 0 10px;">退款金额不能高于<{$goods.refund_price}>元</span>
								</td>
							</tr> 
							<tr>
								<td>退款说明：</td>
								<td><textarea name="remarks" cols="51" rows="3"></textarea></td>
							</tr> 
							<tr>
								<td>退货凭证：</td>
								<td>
								<div class="upload_box"></div>
								<div class="upload_button"> 
								<a class="file" href="javascript:;">选择文件<input type="file" name="imgFile" class="img_file" id="imgFile"/></a>									
								</div>
								</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td><input type="submit" name="apply_submit" class="submit" value="提交"/></td>
							</tr>
						</table>
					</form>
				<{else}>
					<div class="submit_msg"><{$row.msg}></div>
				<{/if}>
			<{/if}>
			
			</div>
			<div class="process_log">
				<div class="pname"><span>协商记录</span></div>
				<div class="pcon">
					<{foreach item=i from=$row.process}>
						<div class="my">
							<div class="myname">
								<span><{$i.title}></span> <em><{$i.addtime}></em>
							</div>
							<div class="mycon">
								<p><{$i.content}></p>
								<{if $i.images}>
								<p>
									<{foreach item=img from=$i.images}> 
										<img src="<{$__IMG__}><{$img|img_size:60x60}>" width="60" height="60"/>
									<{/foreach}>
								</p>
								<{/if}>
							</div> 
						</div>
					<{/foreach}>
				</div>
			</div> 
		</div> 
		
		
				
	</div>
</div> 
<{include file="index/footer.html"}> 
<script type="text/javascript" src="<{$__PUBLIC__}>js/ajaxfileupload.js"></script>
<script type="text/javascript"> 
$(function(){ 
	// 申请订单
	$("form#form").submit(function(){ 
		$.ajax({
			type:'POST',
			url:'member.php?m=buy&a=refund_apply',
			data: $("#form").serialize(),
			success:function(result){ 
				var data = jQuery.parseJSON(result); 
				if(data.error == 0){
					$.alert('申请成功', function(){
						location.reload();
					}); 
				}else{ 
					$.alert(data.msg);
				}
			},
			error:function(){
				$.alert('错误');
			}
		}); 
	});  
	// 发货
	$("form#kd_form").submit(function(){
		$.ajax({
			type:'POST',
			url:'member.php?m=buy&a=refund_kd_submit',
			data:$("#kd_form").serialize(),
			success:function(result){ 
				var data = jQuery.parseJSON(result); 
				if(data.error == 0){
					$.alert('发货成功', function(){
						location.reload();
					}); 
				}else{ 
					$.alert(data.msg);
				}
			},
			error:function(){
				$.alert('错误');
			}
		}); 
		return false;
	});
	
	// 证据上传
	$(document).on('click','.upload_box .img i',function(){
		$(this).parent('.img').remove();
	});
	$(document).on('change','.upload_button',function(){ 
		var $this=$(this); 
		$("#upload_msg").ajaxStart(function(){ 
			$(this).show(); 
		});
		img_num = $('.upload_box .img').length;
		if(img_num < 5){ 
			$.ajaxFileUpload({ 
				url:'?m=album&a=upload&path=refund',
				secureuri:false, 
				fileElementId:'imgFile',
				dataType: 'json',	//text json
				success: function(data){
					if(data.error == '0'){
						html_con = '<div class="img"><img src="'+data.url+'"><i>删除</i><input type="hidden" name="refund_img[]" value="'+data.name+'"/></div>';
						if(img_num == 0){
							$('.upload_box').html(html_con); 
						}else{
							$('.upload_box .img:last').after(html_con); 
						}
					}else{
						$.alert(data.msg);
					}
				}
			});	
		}else{
			$.alert('最多能上传5张图片');
		} 
	});
});
</script>
