<{import file="common.html" title="产品评价"}>  
<link rel="stylesheet" type="text/css" href="<{$__PUBLIC__}>plug/raty/jquery.raty.css">
<style type="text/css">
.star img{ width:0.36rem; margin-right:0.1rem; }
.lbox{ width:100%; background:#efefef; float:left; } 
.gbox{ width:100%; margin:0; border-bottom:1px solid #efefef; background:#fff; float:left; }
.myd{ width:100%; padding:12px 0 8px 0; border-bottom:1px solid #efefef; float:left; }
.myd .gimg{ padding:0 0 0 0.2rem; float:left; }
.myd .gimg img{ width:0.6rem; border:1px solid #efefef; border-radius:3px; float:left; }
.myd .my{ margin-top:7px; float:left; }
.myd .my dl{ float:left; }
.myd .my dl dt{ padding:0.01rem 0.2rem 0; line-height:0.38rem; font-size:0.26rem; color:#333; float:left; }
.myd .my dl dd{ float:left; } 


.plcon{ width:100%; padding:0.1rem 0 0; border-bottom:1px solid #ddd; float:left; } 
.plcon textarea{ border:1px solid #fff; }
.plcon textarea.pf_con{ width:100%; padding:0.2rem; box-sizing: border-box; float: left; }


/*图片上传*/ 
.img_box{ width:100%; padding:0.2rem; box-sizing: border-box; float: left;} 
.upload_box{ float:left; }
.upload_box .img{ width:0.8rem; height:0.8rem; margin-right:5px; border:1px solid #ddd; border-radius:3px; overflow:hidden; float:left; }
.upload_box .img img{ max-width:0.8rem; max-height:0.8rem; position:absolute; float:left;}
.upload_box .img i{ width:0.8rem; height:0.8rem; 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; }
.upload_button .file{ padding:0; width:0.8rem; height:0.8rem; line-height:8rem; position:relative; cursor:pointer; color:#666; border-radius:3px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1; text-indent:-9999px; background:url(<{$__APP__}>public/images/upload.png); background-size:0.8rem;  float:left; } 
.upload_button .file input{ position:absolute; font-size:100px; right:0; top:0; opacity:0; filter:alpha(opacity=0); cursor:pointer; } 
.upload_button .file:hover{ color: #444; border-color:#ccc; text-decoration:none; }


/*店铺评分*/
.shop_score{ width:100%; background:#fff; margin-top:0.2rem; float:left;}
.shop_score .name{ width:100%; padding:0.25rem 0; border-bottom:1px solid #eee; float:left;}
.shop_score .name i{ width:0.33rem; height:0.32rem; margin:0.05rem 0.2rem; background:url(<{$__APP__}>public/images/icon/shop.png) no-repeat; background-size:auto 0.32rem; float:left; }
.shop_score .name span{ text-align:center; font-size:0.28rem; float: left;} 
.shop_score .con{ width:100%; padding:0.3rem 0; float:left;} 
.shop_score .con dl{ width:100%; padding:0.2rem 0; float:left;} 
.shop_score .con dl dt{ width:1.2rem; text-align:left; padding:0 0.2rem; color:#333; font-size:0.25rem; float: left;} 
.shop_score .con dl dd{ padding:0; float:left;}
.shop_score .con dl dd img{ margin-right:0.2rem; }  
</style> 
<body>
<div class="cnav">
	<a class="back" href="javascript:;">&nbsp;</a>订单评价<a class="thome" href="javascript:;">主页</a>
</div>
<div class="lbox"> 
	<form id="form" action="<{$__URI__}>buy/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"}> 
			<{foreach item=i from=$data.goods_info}> 
				<div class="gbox">
					<div class="myd">
						<div class="gimg">
							<a href="<{$__WAP__}>goods/<{$i.gid}><{$__HTML__}>" target="_blank">
								<img src="<{$__IMG__}><{$i.images|img_size:80x80}>"></a>
						</div>
						<div class="my"> 
							<input type="hidden" name="goods_id[<{$i.id}>]" value="<{$i.gid}>"/>
							<dl>
								<dt>商品相符</dt>
								<dd>
									<div class="starpl star"></div>
									<div class="pfen"><input type="hidden" name="goods_score[<{$i.id}>]" class="pf_score" value=""/></div>
								</dd>
							</dl> 
						</div>
					</div> 
					<div class="plcon">
						<textarea class="pf_con" name="goods_content[<{$i.id}>]" rows="4" placeholder="请输入您的购买评价，说说他的优点和美中不足的地方吧!"></textarea>
					</div>  
					<div class="img_box"> 
						<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>
					</div>  
				</div>
			<{/foreach}>
		</div> 
		
		<div class="shop_score">
			<div class="name"><i></i><span>店铺评分</span></div>
			<div class="con"> 
				<dl>
					<dt>服务态度 </dt>
					<dd>
						<div class="ser_star star"></div> 
						<input type="hidden" name="exp_score" class="exp_val" value=""/>
					</dd>
				</dl>
				<dl>
					<dt>物流服务 </dt>
					<dd>
						<div class="exp_star star"></div> 
						<input type="hidden" name="ser_score" class="ser_val" value=""/>
					</dd>
				</dl>
			</div>
		</div> 
		<div class="sbutton"><input type="submit" value="发表评论"/></div> 
	<form> 
</div>

<{import file="footer.html"}>
<script type="text/javascript" src="<{$__PUBLIC__}>plug/ajaxfileupload.js"></script>
<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('change','.upload_button',function(){ 
		var $this=$(this);
		$("#upload_msg").ajaxStart(function(){ 
			$(this).show();
		}); 
		var gid = $this.attr('data-gid'); 
		img_num = $('.upload_box_'+gid+' .img').length;
		if(img_num < 5){ 
			id = "imgFile"+gid;
			$.ajaxFileUpload({ 
				url:URI+'album/upload?path=comment',
				secureuri:false, 
				fileElementId:id,
				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="goods_comment_img['+gid+'][]" value="'+data.name+'"/></div>';
						if(img_num == 0){
							$('.upload_box_'+gid).html(html_con); 
						}else{
							$('.upload_box_'+gid+' .img:last').after(html_con); 
						}
					}else{
						$.alert(data.msg);
					}
				}
			});	
		}else{
			$.alert('最多能上传5张图片');
		} 
	});
	
	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);
		} 
	});
	
	
	// 移除图片
	$(document).on('click','.upload_box .img i',function(){
		$(this).parent('.img').remove();
	})
});
</script>
