<{import file="mheader.html" title="售后详情"}>
<style type="text/css">
.process ul li.step{ width:323px;}

.rbox{ width:970px; border:1px solid #eee; padding:0; float:left; }

.pleft{ width:260px; padding: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:5px 0 2px 10px; font-size:14px; color:#333; font-weight:bold; float:left;}
.pleft .scon{ padding:10px 0 0 0; width:280px; float:left; }
.pleft .scon dl{ width:260px; padding:3px 10px 3px 10px; 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:680px; min-height:350px; border-left:1px solid #efefef; float:left;}  
.submit_msg{width:100%; font-size:16px; text-align:center; padding: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:#333; 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" v="goods" c="refund_goods:service_id=smarty.get.service_id"}> 
		<div class="pleft">
			<div class="sname"><span>售后产品</span></div>
			<div class="scon">
				<dl>
					<dt style="width:60px;">
						<a href="<{$__URI__}>goods/<{$row.goods_row.gid}><{$__HTML__}>" target="_blank">
							<img src="<{$__IMG__}><{$goods.images|img_size:60x60}>" width="60"/></a>
					</dt>
					<dd><a href="<{$__URI__}>goods/<{$goods.gid}><{$__HTML__}>" 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;格：</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;计：</dt>
					<dd style="color:#f00; 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.status == '1'}>
					<div class="submit_msg">已经提交申请，请等待卖家处理</div>
				<{elseif $row.status == '2'}>
					<form id="kd_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="express" v="exp" c="api_config"}> 
									<select name="kd_id">
										<option value="0">--选择快递--</option>
										<{foreach item=i from=$exp.code}>		
											<option value="<{$i.id}>"><{$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 == '9'}>
					<div class="submit_msg">平台介入</div>
				<{else}>	
					<!--申请退款操作-->
					<form id="forms" method="post">
						<input type="hidden" name="service_id" value="<{$smarty.get.service_id}>"/>
						<table class="etable">
							<tr>
								<td width="110">选择原因：</td>
								<td>
									<select name="reason">
										<option value="0">请选择退款原因</option> 
										<{uqcms m="common" v="cancel_reason" c="category:name=user_refund_reason"}>
										<{if $cancel_reason}>
											<{foreach item=i from=$cancel_reason}>
												<option value="<{$i}>"><{$i}></option>
											<{/foreach}>
										<{/if}> 
									</select>
								</td>
							</tr>
							<tr>
								<td>是否退货：</td>
								<td>
									<label><input type="radio" name="is_return_goods" value="0" checked="checked"/>未收到货</label>
									<label><input type="radio" name="is_return_goods" value="1"/>已收到货</label>
								</td>
							</tr> 
							<tr>
								<td>退款金额：</td>
								<td>
									<input type="text" name="price" size="20" value="<{$goods.refund_price}>" max="<{$row.goods_row.refund_price}>">
									<i>退款金额不能高于<{$goods.refund_price}>元</i>
								</td>
							</tr> 
							<tr>
								<td valign="top" style="padding-top:10px;">退款说明：</td>
								<td><textarea name="remark" cols="50" 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> 	
				<{/if}> 
			</div>
			<{if $row.process}>
				<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.addtime}></span></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> 
			<{/if}>
			
		</div>
	</div>
</div> 
<{import file="mfooter.html"}> 
<script type="text/javascript" src="<{$__PUBLIC__}>plug/ajaxfileupload.js"></script>
<script type="text/javascript"> 
$(function(){ 
	// 申请订单
	$("form#forms").submit(function(){ 
		$.ajax({
			type:'POST',
			url:URI+'order/refund_apply',
			data: $("#forms").serialize(),
			success:function(result){
				var data = jQuery.parseJSON(result); 
				if(data.error == 0){
					//alert('申请成功');
					$.alert('申请成功', function(){
						location.reload();
					}); 
				}else{
					$.alert(data.msg);
				}
			},error:function(){
				$.alert('错误');
			}
		});
		return false; 
	});
	// 发货
	$("form#kd_form").submit(function(){
		$.ajax({
			type:'POST',
			url:URI+'order/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:URI+'album/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>
