style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * * @source  : GoodsReviewDetailFormWeb.html
 * @desc	: 상품평 상세 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.02   eskim		최초 작성
 *******************************************************************************
 -->
<div class="modal-dialog" role="document" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
	<div class="modal-content">
		<div class="modal-header">
			<th:block th:if="${review.bestYn == 'Y'}">
			<h5 class="modal-title" id="pdBestReviewLabel">베스트 리뷰</h5>
			</th:block>
			<th:block th:unless="${review.bestYn == 'Y'}">
			<h5 class="modal-title" id="pdPhotoReviewDetailLabel">포토/영상 리뷰</h5>
			<button type="button" id="btn_pdPhotoReviewList_pop" th:onclick="cfGoodsReviewPhoto([[${params.goodsCd}]])"  class="btn_more"><span>전체보기</span></button>
			</th:block>
		</div>
		<div class="modal-body" id="reviewBody">
		</div>
	</div>
</div>
<form name="reviewDetailForm" id="reviewDetailForm" method="post">
<input type="hidden" name="goodsCd" th:value="${review.goodsCd}" />
<input type="hidden" name="bestYn" th:value="${review.bestYn}" />
<input type="hidden" name="photoYn" th:value="${review.photoYn}" />
<input type="hidden" name="reviewSq" th:value="${review.reviewSq}" />
</form>
<a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_review_best')" class="close-modal">Close</a> 
<script th:inline="javascript">
/*<![CDATA[*/
	
	var fnReviewDetail = function() {
		
		var params = new Object();
		params.goodsCd = $('#reviewDetailForm input[name=goodsCd]').val();
		params.reviewSq = $('#reviewDetailForm input[name=reviewSq]').val();
		params.bestYn =$('#reviewDetailForm input[name=bestYn]').val();
		params.photoYn = $('#reviewDetailForm input[name=photoYn]').val();
		
		gagajf.ajaxSubmit("/goods/review/detail/list", "json", fnReviewDetailCallback, params);
	}

	var fnReviewDetailCallback = function(result) {
		$('#reviewBody').html('');
		// 목록
		if (result.reviewList != null && result.reviewList.length > 0) {
			let fileGbClass = '';
			$.each(result.reviewList, function(idx, review) {
				let tag = '';
				tag +='<div class="pop_cont">\n';
				tag +='<div class="swiper-container detail">\n';
				tag +='<div class="swiper-wrapper">\n';
				tag +='<div class="swiper-slide">\n';
				
				let reviewClass = 'empty_photo';
				if (review.reviewAttachList != null && review.reviewAttachList.length > 0){
					reviewClass = '';
				}
				tag +='<div class="review '+reviewClass+'" >\n';  <!-- 첨부이미지 없을 시 empty_photo 클래스 추가 --> 
				tag +='	<div class="pic">\n';
				if (review.reviewAttachList != null && review.reviewAttachList.length > 0){
					$.each(review.reviewAttachList, function(aIdx, reviewAttach){
						fileGbClass = '';
						if (reviewAttach.fileGb == "M") fileGbClass = "mov";
				tag +='		<span class="thumb '+fileGbClass+'">\n';<!-- 동영상의 썸네일일 경우 mov 클래스 추가-->
						if (reviewAttach.fileGb == "M") {
				tag +='			<iframe width="100%" height="100%" src="'+_kollusMediaUrl +'/'+reviewAttach.kmcKey +'?player_version=html5" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>\n';
						}else{
				tag +='			<img src="'+ _imgUrl + reviewAttach.sysFileNm +'" alt="">\n';	
						}
				tag +='		</span>\n';
						return false;
					});	
				}else{
				tag +='		<span class="thumb">\n';
				tag +='			<img src="'+_uploadGoodsUrl +'/'+review.sysImgNm+'?RS=365" alt="" onerror="' + _uximgUrl + '/images/pc/thumb/bg_item_none.png"  />\n';
				tag +='		</span>\n';	
				}
				tag +='	</div>\n';
				tag +='	<div class="review_cont">\n';
				tag +='		<div class="box_wrap">\n';
				tag +='			<div class="star_box">\n';
				tag +='				<div class="star_score">\n';
				tag +='					<span class="star">\n';
				tag +='						<em class="progbar" style="width:'+(review.iscore*20)+'%;"></em>\n'; <!-- 평점 style로 표기 -->
				tag +='					</span>\n';
				tag +='				</div>\n';
				tag +='			</div>\n';
				tag +='			<div class="response_box">\n';
				tag +='				<div class="full">\n';
				tag +='					<dl>\n';
				
				tag +='						<div>\n';
				tag +='							<dt>구매옵션</dt>\n';
				if (review.goodsOptionList != null && review.goodsOptionList.length > 0){
				tag +='							<dd>\n';	
					$.each(review.goodsOptionList, function(aIdx, reviewGoods){
				tag +='							<p><span>'+ reviewGoods.optCd1Nm +'</span> / <span>'+ reviewGoods.optCd2+'</span></p>\n';
					});		
				tag +='							<dd>\n';	
				}

				tag +='						</div>\n';
				tag +='					</dl>\n';
				tag +='				</div>\n';
				tag +='				<div class="full">\n';
				tag +='					<dl>\n';
				tag +='						<div>\n';
				tag +='							<dt>키/몸무게</dt>\n';
				tag +='							<dd>'+review.height+'cm / '+review.weight +'kg \n';
				tag +='							</dd>\n';
				tag +='						</div>\n';
				tag +='					</dl>\n';
				tag +='				</div>\n';
				if (!gagajf.isNull(review.sizeGb)){  <!-- 사이즈구분(T:상의, B:하의, S:신발) -->
				tag +='				<div>\n'; 
				tag +='					<dl > \n';
				tag +='						<div>\n';
				tag +='							<dt>사이즈</dt>\n';
				tag +='							<dd>'+review.scoreSizeNm+'</dd>\n';
				tag +='						</div>\n';
				tag +='						<div>\n';
				tag +='							<dt>컬러</dt>\n';
				tag +='							<dd>'+review.scoreColorNm+'</dd>\n';
				tag +='						</div>\n';
					if (review.sizeGb == 'T' || review.sizeGb == 'B'){
				tag +='						<div>\n';
				tag +='							<dt>핏</dt>\n';
				tag +='							<dd>'+review.scoreFitNm+'</dd>\n';
				tag +='						</div>\n';
				tag +='						<div>\n';
				tag +='							<dt>두께감</dt>\n';
				tag +='							<dd>'+ review.scoreThickNm+'</dd>\n';
				tag +='						</div>\n';
					}
					if (review.sizeGb == 'S'){
				tag +='						<div>\n';
				tag +='							<dt>무게감</dt>\n';
				tag +='							<dd>'+review.scoreWeightNm+'</dd>\n';
				tag +='						</div>\n';
				tag +='						<div>\n';
				tag +='							<dt>볼너비</dt>\n';
				tag +='							<dd>'+review.scoreBallNm+'</dd>\n';
				tag +='						</div>\n';
					}
				tag +='					</dl>\n';
				tag +='				</div>\n';
				}
				tag +='			</div>\n';
				tag +='			<div class="txt_review_box">\n';
				tag +='				<p>' + review.reviewContent +'</p>\n';
				tag +='			</div>\n';
				tag +='			<div class="writer_box">\n';
				tag += '			<div class="writer">\n';
				tag += '				<span class="wr_id">'+ review.maskingCustId +'</span>\n';
				tag += '				<span class="wr_date">' + review.regDt + '</span>\n';
				tag += '			</div>\n'
				tag +='			</div>\n';
				if (!gagajf.isNull(review.admRpl)){
				tag += '		<div class="reply_box">\n';
				tag += '			<div class="reply">\n';
				tag += '				<div class="reply_writer">\n';
				tag += '					<span class="wr_name">관리자</span>\n';
				tag += '					<span class="wr_date">'+review.admRplDt+'</span>\n';
				tag += '				</div>\n';
				tag += '				<div class="reply_txt">\n';
				tag += '					<p>' + review.admRpl+'</p>\n';
				tag += '				</div>\n';
				tag += '			</div>\n';
				tag += '		</div>\n';	
				}
				tag +='		</div>\n';
				tag +='	</div>\n';
				if (review.reviewAttachList != null && review.reviewAttachList.length >= 2){
				tag +='	<div class="thumblist">\n';
				tag +='		<ul>\n';
					let activeClass = '';
					$.each(review.reviewAttachList, function(aIdx, reviewAttach){
						activeClass = '';
						if (aIdx == 0){
							activeClass = 'active';
						}
						fileGbClass = '';
						if (reviewAttach.fileGb == "M") fileGbClass = "mov";
				tag +='			<li>\n';
				tag +='				<div class="pic '+activeClass+'"> \n'; <!-- 활성화시 active 클래스 추가 -->
				tag +='					<span class="thumb" class="'+fileGbClass+'" style="background-image:url('+ _imgUrl + reviewAttach.sysFileNm +');\" >\n';<!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
					if (reviewAttach.fileGb == "M") {
				tag +='					<iframe width="100%" height="100%" src="'+_kollusMediaUrl +'/'+reviewAttach.kmcKey +'?player_version=html5" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>\n';
					}else{
				tag +='					<img src="'+ _imgUrl + reviewAttach.sysFileNm +'" alt="">\n';	
					}
				tag +='					</span>\n';
				tag +='				</div>\n';
				tag +='			</li>\n';
					});
				tag +='		</ul>\n';
				tag +='	</div>\n';
				}
				tag +='</div>\n';
				
				tag +='</div>\n';
				tag +='</div>\n';
				tag +='</div>\n';
				if (gagajf.isNull(review.nextReviewSq) || review.nextReviewSq <= 0) {
					tag +='<div class="swiper-button-next swiper-button-disabled" id="reviewBodyNext" ></div>\n';
				}else{
					tag +='<div class="swiper-button-next" id="reviewBodyNext" onclick="fnReviewNext('+review.nextReviewSq+')"></div>\n';	
				}
				
				if (gagajf.isNull(review.prevReviewSq) || review.prevReviewSq <= 0) {
					tag +='<div class="swiper-button-prev swiper-button-disabled" id="reviewBodyPrev"  ></div>\n';
				}else{
					tag +='<div class="swiper-button-prev" id="reviewBodyPrev" onclick="fnReviewNext('+review.prevReviewSq+')"></div>\n';	
				}
				tag +='</div>\n';
				
				$('#reviewBody').append(tag);
				
				 $('.pd_photoreviewdetail_pop .swiper-slide').each(function(index, element){
				        var $this = $(this);
				        
				        var thumbCount = $this.find('.thumblist ul li').length;
				        var thumbUlWidth = $this.find('.thumblist ul li').width() * thumbCount;
				        var thumbMargin = 8 * thumbCount;
				        var thumbListWidth = thumbUlWidth + thumbMargin;

				        $this.find('.thumblist ul').attr('style', 'width:' + thumbListWidth + 'px;');
				        
				    });

			});
		}
		
	}
	
	// 다른 상품평 보기
	var fnReviewNext = function(reviewSq){
		if (gagajf.isNull(reviewSq)) return false;
		
		$('#reviewDetailForm input[name=reviewSq]').val(reviewSq);
		fnReviewDetail();
	}
	
	$(document).ready( function() {
		
		fnReviewDetail();
       
		 //슬라이드 - 상품 베스트 리뷰 자세히보기 영역 
	    var photoReviewDetailSwiper = new Swiper('.pd_photoreviewdetail_pop .swiper-container.detail', {
	        effect :'fade',
	        slidesPerView: 1,
	        spaceBetween: 0,
	        simulateTouch:false,
	        navigation: {
	            nextEl: '.pd_photoreviewdetail_pop .swiper-button-next',
	            prevEl: '.pd_photoreviewdetail_pop .swiper-button-prev',
	        },
	    });   

	    $('.pd_photoreviewdetail_pop .swiper-slide').each(function(index, element){
	        var $this = $(this);
	        
	        var thumbCount = $this.find('.thumblist ul li').length;
	        var thumbUlWidth = $this.find('.thumblist ul li').width() * thumbCount;
	        var thumbMargin = 8 * thumbCount;
	        var thumbListWidth = thumbUlWidth + thumbMargin;

	        $this.find('.thumblist ul').attr('style', 'width:' + thumbListWidth + 'px;');
	        
	    });

	    $(document).on('click','.pd_photoreviewdetail_pop .thumblist ul li',function(e){

	        $(this).parents(".swiper-slide").find(".review > .pic > .thumb").empty();
	        $(this).parents(".swiper-slide").find(".thumblist ul li .pic").removeClass('active');
	        $(this).find(".pic").addClass('active');

	        var thumbIndex = $(this).index();
	        thumbContentHtml = $(this).find('.pic .thumb').html();
	        $(this).parents(".swiper-slide").find(".review > .pic > .thumb").append(thumbContentHtml);

	        return false;
	    });
	});		

	 
/*]]>*/
</script>	
 </html>