<{import file="common.html" title="产品评价"}>  
<link href="<{$__PUBLIC__}>plug/raty/jquery.raty.css" rel="stylesheet" type="text/css">
<style type="text/css">
.lbox{ width:100%; background:#efefef; float:left; } 
.gbox{ width:100%; margin:0 0 10px 0; background:#fff; float:left; }
.myd{ width:100%; padding:12px 0 8px 0; border-top:1px solid #efefef; border-bottom:1px solid #efefef; float:left; }
.myd .gimg{ padding:0 0 0 10px; float:left; }
.myd .gimg img{ width:30px; border:1px solid #f8f8f8; border-radius:3px; float:left; }
.myd .my{ margin-top:7px; float:left; }
.myd .my dl{ float:left; }
.myd .my dl dt{ padding:2px 10px 0; color:#333; float:left; }
.myd .my dl dd{ float:left; }
.myd .my dl dd img{ margin-right:6px; }

.plcon{ width:100%;  float:left; }
.plcon span{ padding:10px; line-height:20px; color:#333; float:left; }
.plcon p{ padding:2px; margin:10px; border-radius:3px;  }
.plcon p textarea.pf_con{ width:100%; }

/*图片上传*/
.img_up{ width:100%; margin-bottom:15px; padding:0; float: left;}
.img_up .img_box{ padding:0 10px; clear:both; } 
.upload_box{ float:left; }
.upload_box .img{ width:50px; height:50px; margin-right:5px; border:1px solid #ddd; border-radius:3px; overflow:hidden; float:left; }
.upload_box .img img{ max-width:50px; max-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; }
.upload_button .file{ padding:0; width:52px; height:52px; line-height:52px; 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); 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; float:left;}
.shop_score .name{ width:100%; padding:13px 0 10px; border-bottom:1px solid #eee; float:left;}
.shop_score .name i{ width:20px; height:20px; margin:0 10px; background:url(<{$__APP__}>public/images/icon/shop.png) no-repeat; background-size:auto 18px; float:left; }
.shop_score .name span{ text-align:center; font-size:15px; float: left;} 
.shop_score .con{ width:100%; padding:10px 0 15px 0; float:left;} 
.shop_score .con dl{ width:250px; padding:6px 0 6px 0; float:left;} 
.shop_score .con dl dt{ width:80px; text-align:left; padding:4px 5px 0 10px; color:#666; float: left;} 
.shop_score .con dl dd{ padding:2px 0 0 0; float:left;}
.shop_score .con dl dd img{ margin-right:6px; }  
</style> 
<body>
<div class="cnav">
	<a class="back" href="javascript:;">&nbsp;</a>订单评价<a class="thome" href="javascript:;">主页</a>
</div>
<{uqcms m="order" v="data" c="get_comment:smarty.get.oid"}> 
<div class="lbox"> 
<form id="form" action="#" method="post">
	<input type="hidden" name="oid" value="<{$data.order_row.order_no}>"/> 
	<div class="glist">
		<{foreach item=i from=$data.goods_info}> 
			<div class="gbox">
				<div class="myd">
					<div class="gimg"><a href="<{$__URI__}>index.php?m=goods&a=detail&id=<{$i.gid}>" target="_blank"><img src="<{$__IMG__}><{$i.images|img_size:80x80}>"></a></div>
					<div class="my"> 
						<{if $i.comment_status}> 
							<dl>	
								<dt>商品满意度</dt>
								<dd><div class="starpl" data-score="<{$i.comment_score}>"></div></dd>
							</dl>  
						<{else}> 
							<input type="hidden" name="goods_id[<{$i.id}>]" value="<{$i.gid}>"/>
							<dl>
								<dt>商品满意度</dt>
								<dd>
									<div class="starpl"></div>
									<div class="pfen"><input type="hidden" name="goods_score[<{$i.id}>]" class="pf_score" value=""/></div>
								</dd>
							</dl> 
						<{/if}> 
					</div>
				</div> 
				<div class="plcon">
					<{if $i.comment_status}> 
						<span><{$i.comment_content}></span>
					<{else}>
						<p>
		<textarea class="pf_con" name="goods_content[<{$i.id}>]" rows="4" placeholder="请输入您的购买评价，说说他的优点和美中不足的地方吧"></textarea>
						</p>
					<{/if}>
				</div>
				<{if $i.comment_status}>
					<{if $i.comment_img}>
						<div class="img_up">
							<div class="img_box"> 
								<{foreach item=ci from=$i.comment_img}>
									<img src="<{$__IMG__}><{$ci.images|img_size:60x60}>" width="60" height="60"/>
								<{/foreach}>
							</div>
						</div>	
					<{/if}>
				<{else}> 
					<div class="img_up">
						<div class="img_box"> 
							<div class="upload_box upload_box_<{$i.id}>"></div>
							<div class="upload_button" data-gid="<{$i.id}>"> 
								<a class="file" href="javascript:;">选择文件<input type="file" name="imgFile" class="img_file" id="imgFile<{$i.id}>"/></a>									
							</div> 
						</div>	
					</div> 
				<{/if}>
			</div>
		<{/foreach}>
	</div>
	
	<div class="shop_score">
		<div class="name"><i></i><span>店铺动态评分</span></div>
		<div class="con">
			<{if !$shop_score.status}>
				<dl>
					<dt>产品满意度 </dt>
					<dd>
						<div class="shop_pf" data-score="<{$data.shop_score.goods}>"></div>
						<input type="hidden" class="sps_val" name="shop_goods_score"/>
					</dd>
				</dl>
				<dl>
					<dt>服务满意度 </dt>
					<dd>
						<div class="shop_pf" data-score="<{$data.shop_score.service}>"></div>
						<input type="hidden" class="sps_val" name="shop_service_score"/>
					</dd>
				</dl>
				<dl>
					<dt>物流满意度 </dt>
					<dd>
						<div class="shop_pf" data-score="<{$data.shop_score.logistics}>"></div>
						<input type="hidden" class="sps_val" name="shop_logistics_score"/>
					</dd>
				</dl>
			<{/if}> 
		</div>
	</div> 
	<{if $data.order_row.order_status != '5'}> 
		<div class="sbutton"><p><input type="submit" value="发表评论"/></p></div>
	<{/if}>
<form> 
</div>	
<{include file="default/footer.html"}>
<script type="text/javascript" src="<{$__PUBLIC__}>js/ajaxfileupload.js"></script>
<script type="text/javascript" src="<{$__PUBLIC__}>plug/raty/jquery.raty.js"></script>  
<script type="text/javascript">
$(function(){
	$("form").submit(function(){
		var params = $("#form").serialize();
		$.post('member.php?m=buy&a=comment_save', params,function(result){
			var data = jQuery.parseJSON(result); 
			if(data.error == '0'){
				$.alert('发布成功', function(){
					location.reload();
				}); 
			}else{
				$.alert(data.msg);
			}
		});
		return false;
	});
	// 店铺打分
	$('.shop_pf').raty({
		click: function(score, evt) { 
			$(this).next('.sps_val').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:'member.php?m=album&a=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张图片');
		} 
	});
	// 移除图片
	$(document).on('click','.upload_box .img i',function(){
		$(this).parent('.img').remove();
	})
});
</script>
