<{import file="mheader.html" title="产品评价"}> 
<link rel="stylesheet" type="text/css" href="<{$__PUBLIC__}>plug/raty/jquery.raty.css">
<style type="text/css">
table.list_table thead tr th{ padding:0; margin:0;}
table.list_table tbody tr td{ padding:0;}
.c_star img{ width:16px; }
.epsinfo{ width:100%; border:1px solid #efefef; background:#fff; margin:0 0 20px 0; float:left; }
.epsinfo .hd{ width:300px; float:left; }
.epsinfo .hd span{ margin:40px 0 0 40px; float:left; }
.epsinfo .cn{ float:left; }
.epsinfo .cn .s{ padding:0 100px 0 0; margin:40px 0 38px; float:left; }
.epsinfo .cn .s span{ padding:0 10px 0 0; float:left; }
.epsinfo .cn .s i{ float:left; }

.gbox{ width:978px; border-bottom:1px solid #efefef; margin-top:-1px; float: left; }
.gbox:last-child{ border-bottom:none; }
.showbox{ width:250px; border-right:1px solid #efefef; padding:20px 0 40px 0; float:left;}
.showbox .gimg{ width:250px; text-align:center; float:left;}
.showbox .gimg a{ width:60px; }
.showbox .gimg a img{}
.showbox .ttl{ width:220px; padding:10px 10px 0; float:left; }
.showbox .ttl span{ width:200px; padding:0 15px; color:#666; text-align:center; float:left; } 
.showbox .pr{ width:220px; padding:5px 15px 0; font-size:16px; text-align:center; float:left; } 

.showbox .gpf{ padding:0; margin:22px 50px 0 0; float:right;}
.showbox .gpf a{ 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:#fff; 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; }

.showsub{ width:700px; padding:8px 0; margin-top:-1px; float:left;}
.showsub dl{ width:700px; padding:10px 0; float:left;}
.showsub dl dt{ width:120px; padding:3px 15px 0 0; text-align:right; color:#666; float:left;}
.showsub dl dd{ width:500px; float:left;}
.showsub dl dd img{ margin-right:3px;}

.sub{ width:100%; text-align:center; padding:15px 0 0 0; float:left;}
.sub input{ float:none; padding:8px 20px; background:#F25757; border:1px solid #F25757; font-size:14px; color:#fff; border-radius:2px; }
</style> 
<div class="tab"><span>产品评价</span></div>
<div class="lbox">
<form id="form" action="<{$__URI__}>order/comment_save" method="post"> 
	<input type="hidden" name="oid" value="<{$smarty.get.oid}>"/>
	<div class="glist">
		<{uqcms m="order" v="data" c="get_comment:oid=smarty.get.oid"}>
		<div class="epsinfo">
			<div class="hd"><span>订单 <{$data.order_row.order_no}></span></div>
			<div class="cn">
				<div class="s">
					<span>快递服务：</span>
					<i class="exp_star c_star"></i>
					<input type="hidden" name="exp_score" value=""/>
				</div>
				<div class="s">
					<span>服务满意：</span>
					<i class="ser_star c_star"></i>
					<input type="hidden" name="ser_score" value=""/>
				</div> 
			</div>
		</div>
		
		<{if $data.goods_info}>
			<{foreach item=i from=$data.goods_info}>
				<div class="gbox">
					<div class="showbox">
						<div class="gimg">
							<a href="<{$__URI__}>goods/<{$i.gid}><{$__HTML__}>" target="_blank">
								<img src="<{$__IMG__}><{$i.images|img_size:120x120}>" width="120">
							</a>
						</div>
						<div class="ttl"><span><{$i.title}></span></div>
						<div class="pr">￥<{$i.price}></div>
					</div> 
					<div class="showsub"> 
						<input type="hidden" name="goods_id[<{$i.id}>]" value="<{$i.gid}>"/>
						<dl>
							<dt>满意度：</dt>
							<dd>
								<div class="starpl c_star"></div>
								<div class="pfen"><input type="hidden" name="goods_score[<{$i.id}>]" class="pf_score" value=""/></div>
							</dd>
						</dl>
						<dl>
							<dt>商品评价：</dt>
							<dd><textarea class="pf_con" name="goods_content[<{$i.id}>]" cols="75" rows="3"></textarea></dd>
						</dl>
						<dl>	
							<dt>&nbsp;</dt>
							<dd>
								<div class="upload_box upload_box_<{$i.id}>"></div>
								<div class="upload_button upload_button_<{$i.id}>"> 
									<a class="file" href="javascript:;">
										选择文件
										<input type="file" name="imgFile" class="imgFile" data-id="<{$i.id}>"/>
									</a>									
								</div>
							</dd>
						</dl> 
					</div>
				</div>
			<{/foreach}> 
			<div class="sub"><input type="submit" name="" value="提交"/></div>
		<{/if}>	
	</div>
	
</form>	
</div>	
<{import file="mfooter.html"}>
<script type="text/javascript" src="<{$__PUBLIC__}>plug/raty/jquery.raty.js"></script>
<script type="text/javascript">
$(function(){ 
	// 快递评分
	$('.exp_star').raty({
		click: function(score, evt){
			$(this).next().val(score);
		},
		starOff: '<{$__PUBLIC__}>images/star-off.png',
  		starOn : '<{$__PUBLIC__}>images/star-on.png',
		score: function() {
			return $(this).attr('data-score');
		}
	}); 
	
	// 服务评分
	$('.ser_star').raty({ 
		click: function(score, evt) { 
			$(this).next().val(score);  
		},
		starOff: '<{$__PUBLIC__}>images/star-off.png',
  		starOn : '<{$__PUBLIC__}>images/star-on.png',
		score: function() {
			return $(this).attr('data-score');
		}
	}); 
	
	// 产品评分
	$('.starpl').raty({
		click: function(score, evt){ 
			$(this).next('.pfen').children(".pf_score").val(score); 
		},
		starOff: '<{$__PUBLIC__}>images/star-off.png',
  		starOn : '<{$__PUBLIC__}>images/star-on.png',
		score: function() {
			return $(this).attr('data-score');
		} 
	});
	
	$(document).on('click', '.upload_box .img i',function(){
		$this = $(this); 
		$this.parent('.img').remove();
		gid = $this.parent('.img').attr('data-id');
		$(".upload_button_"+gid).show(); 
	});
	
	upload(".imgFile", URI+'album/upload?path=comment', function(data, $this){
		gid = $this.attr('data-id'); 
		if(data.error == '0'){ 
			html_con = '<div class="img" data-id="'+gid+'"><img src="'+data.url+'"><i>删除</i><input type="hidden" name="goods_comment_img['+gid+'][]" value="'+data.name+'"/></div>';
			img_num = $('.upload_box_'+gid+' .img').length;
			if(img_num == 0){
				$('.upload_box_'+gid).html(html_con);
			}else{
				$('.upload_box_'+gid+' .img:last').after(html_con); 
				if(img_num >= 4){
					$(".upload_button_"+gid).hide();
				}
			} 
		}else{
			$.alert(data.msg);
		} 
	});
	
});
</script>