style24
/
style24.admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : ReviewDetailForm.html
 * @desc    : 리뷰 상세 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.22   gagamel     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1200" id="popupReviewDetail">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>리뷰 상세</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupReviewDetail');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- CONTENT -->
		<div class="panelContent">
			<form id="reviewDetailForm" name="reviewDetailForm" action="#" th:action="@{'/marketing/review/user/reply/save'}" th:method="post" th:object="${reviewInfo}">
				<input type="hidden" name="reviewSq" th:value="*{reviewSq}"/>
				
				<div class="reviewWrap">
					<div class="user_review">
						<div class="prodInfo">
							<div class="prodImg">
								<img th:src="${@environment.getProperty('upload.goods.view') + '/' + reviewInfo.goodsImg}" onerror="this.src=\'/image/no.gif\';"/>
							</div>
							<dl>
								<dt>상품코드</dt>
								<dd class="cBk" style="width: 100px;"><strong th:text="*{goodsCd}">ABC123456</strong></dd>
								<dt>상품명</dt>
								<dd class="cBk" th:text="*{goodsNm}"></dd>
							</dl>
							<dl>
								<dt>주문번호</dt>
								<dd class="cBk" style="width: 100px;"><strong th:text="*{ordNo}"></strong></dd>
								<dt>고객명</dt>
								<dd class="cBk" style="width: 100px;"><span th:text="*{custNm}"></span> <strong th:text="*{'(' + custNo + ')'}"></strong></dd>
								<dt>구매옵션</dt>
								<dd style="width: 100px;">베이지 / 100</dd>
							</dl>
							<dl>
								<dt>고객별점</dt>
								<dd>
									<div class="star_score">
										<span class="star">
											<em class="progbar" style="width:70%;"></em>
										</span>
									</div>
								</dd>
								<dt>키/몸무게</dt><dd th:text="*{height + '/' + weight}">178cm/71kg</dd>
								<dt th:if="*{scoreSize != null}">사이즈</dt><dd th:text="*{scoreSize}">작음</dd>
								<dt th:if="*{scoreColor != null}">컬러</dt><dd th:text="*{scoreColor}">밝음</dd>
								<dt th:if="*{scoreFit != null}">핏</dt><dd th:text="*{scoreFit}">레귤러</dd>
								<dt th:if="*{scoreThick != null}">두께감</dt><dd th:text="*{scoreThick}">적당함</dd>
								<dt th:if="*{scoreWeight != null}">무게감</dt><dd th:text="*{scoreWeight}"></dd>
								<dt th:if="*{scoreBall != null}">볼넓이</dt><dd th:text="*{scoreBall}"></dd>
							</dl>
						</div>
						
						<!-- 리뷰 파일 -->
						<dl class="rvPic">
							<dt>등록파일</dt>
							<dd>
								<div class="picList" id="divPicList">
									<th:block th:if="*{attachList != null}" th:each="oneData, status : *{attachList}">
										<a th:if="${oneData.fileGb == 'M'}" href="javascript:void(0);" class="mov" onclick="fnPopupOpen('layer_review_pic', this);">
											<iframe class="player" th:src="${kollusMediaUrl + '/' + oneData.kmcKey + '?enable_initialize_focus=false&mute'}"></iframe>
										</a>
										<a th:if="${oneData.fileGb == 'I'}" href="javascript:void(0);" onclick="fnPopupOpen('layer_review_pic', this);">
											<span th:style="${'background-image:url(' + @environment.getProperty('upload.default.view') + oneData.sysFileNm + ');'}">사진</span>
										</a>
									</th:block>
								</div>
								<div class="chk">
									<i>동영상 노출 상태 설정</i>
									<span class="switchBox switch-base">
										<input type="checkbox" id="chkConfirmYn" value="Y" th:checked="*{confirmYn == 'Y' ? true : false}" th:disabled="*{confirmYn == 'Y' ? true : false}" onclick="fnUpdateVideoReviewDisplay(this);"><label for="chkConfirmYn"><span>Ball</span></label><!-- default: 영상 숨김 -->
									</span>
								</div>
							</dd>
						</dl>
						
						<dl class="rvTxt">
							<dt>구매후기</dt>
							<dd th:utext="*{reviewContent}"></dd>
						</dl>
						<!-- //리뷰 파일 -->
						
						<!-- 포인트 지급 정보 -->
<!-- 						<dl class="orderInfo"> -->
<!-- 							<dt>포인트</dt> -->
<!-- 							<dd class="cBk"><strong th:text="*{giveDuePnt}"></strong> <span th:text="*{pntGiveStat}"></span></dd> -->
<!-- 							<dt th:if="*{bestYn != null}">베스트포인트</dt> -->
<!-- 							<dd class="cBk" th:if="*{bestYn != null}"><strong th:text="*{giveDueBpnt}"></strong> <span th:text="*{bpntGiveYn}"></span></dd> -->
<!-- 						</dl> -->
						<!-- //포인트 지급 정보 -->
						
						<!-- 관리자 답변 등록 -->
						<ul class="panelBar">
							<li>
								<i class="fa fa-smile-o" aria-hidden="true"></i> 관리자
								<strong th:if="*{admRplRegNm != null}" th:text="*{admRplRegNm}"></strong>
								<span class="date" th:if="*{admRplDt != null}" th:text="*{admRplDt}"></span>
							</li>
							<li class="right">
								<button type="button" class="btn btn-base btn-lg" id="btnSaveReply">저장</button>
							</li>
						</ul>
						<table class="frmStyle">
							<colgroup>
								<col width="110px"/>
								<col/>
							</colgroup>
							<tbody>
								<tr>
									<th>관리자 답변<br/><span id="dpLocAdmRpt">0</span>/4,000</th>
									<td>
										<textarea th:if="*{rplCfmYn != null and rplCfmYn == 'Y'}" class="textareaR3" name="admRpl" th:text="*{admRpl}" disabled="disabled"></textarea>
										<textarea th:if="*{rplCfmYn == null or rplCfmYn == 'N'}" class="textareaR3" name="admRpl" th:text="*{admRpl}" onkeyup="cfnGetTextLength(this, 4000, $('#dpLocAdmRpt'));"></textarea>
									</td>
								</tr>
							</tbody>
						</table>
						<!-- //관리자 답변 등록 -->
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 사용자 레이어팝업 : 등록 파일 출력 -->
<div class="uPopupWrap off" id="layer_review_pic">
	<div class="area reviewPic" style="width:500px; height:500px;">
		<ul class="picList" th:object="${reviewInfo}">
			<th:block th:if="*{attachList != null}" th:each="oneData, status : *{attachList}">
				<li th:if="${oneData.fileGb == 'M'}"><iframe class="player" th:src="${kollusMediaUrl + '/' + oneData.kmcKey + '?enable_initialize_focus=false&mute'}"></iframe></li>
				<li th:if="${oneData.fileGb == 'I'}"><div class="img" th:style="${'background-image:url(' + @environment.getProperty('upload.default.view') + oneData.sysFileNm + ');'}"></div></li>
			</th:block>
		</ul>
		<button type="button" class="btnArr prev" onclick="fnPicPrev('layer_review_pic');">이전</button>
		<button type="button" class="btnArr next" onclick="fnPicNext('layer_review_pic');">다음</button>
		<button type="button" class="btnClose">닫기</button>
	</div>
</div>
<!-- //사용자 레이어팝업 : 등록 파일 출력 -->

<script th:inline="javascript">
/*<![CDATA[*/
	//동영상 플레이어
	var controller;
	var player = document.getElementsByClassName("player");
	player.onload = function() {
		try {
			var controller = new VgControllerClient({
				target_window: document.getElementById('pdThumbVideo').contentWindow
			});
			controller.on('ready', function() { //플레이어 준비 완료
				controller.set_ratio('fill');
				//contain : 비율에 맞게 채웁니다.
				//fill : 화면에 꽉 차게 채웁니다.
				//enlargement : 세로 높이를 꽉 차게 맞춥니다. 좌우로 스크롤이 가능합니다
				controller.play();
			});
			controller.on('done', function() { //플레이어 재생 완료
				controller.play();
			});
		} catch (e) {
			// Videogateweay Controller Library는 window.postMessage API를 이용하기 때문에
			// 해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.
			// 이 부분에 적절한 fail-over 코드를 추가하여 주십시요.
			mcxDialog.alert("해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.");
		}
	}
	
	// 팝업 열기
	function fnPopupOpen(id,el,kind) {
		$("#"+id).removeClass("off");	//레이어 Open
		$("#"+id).find(".picList li").removeClass("on");
		let onIdx = $(el).index();
		$("#"+id).find(".picList li").eq(onIdx).addClass("on");
		let picTot = $("#"+id).find(".picList li").length - 1;
		//console.log(onIdx +', '+ picTot);
		if (onIdx == 0) {
			$("#"+id).find("button.prev").addClass("off");
		}
		if (onIdx == picTot) {
			$("#"+id).find("button.next").addClass("off");
		}
	}
	
	// 팝업 닫기 버튼 //uifnPopupClose 함수로 닫으면 remove 되어서 테스트 불가능하며 임시로 사용, 추후 바꾸세요
	$("#layer_review_pic .btnClose").click(function() {
		$("#layer_review_pic").addClass("off"); //레이어 닫기
		$("#layer_review_pic").find("button.btnArr").removeClass("off"); //버튼 초기화
	});
	
	// 팝업 레이어 : 이전 버튼
	function fnPicPrev(id){
		let onIdx = $("#"+id).find(".picList li.on").index() - 1;
		let picTot = $("#"+id).find(".picList li").length - 1;
		//console.log(onIdx +', '+ picTot);
		if (onIdx >= 0 ) {
			$("#"+id).find(".picList li").removeClass("on");
			$("#"+id).find(".picList li").eq(onIdx).addClass("on");
		}
		//화살표버튼
		if (onIdx <= 0) {
			$("#"+id).find("button.prev").addClass("off");
		}
		if (onIdx < picTot) {
			$("#"+id).find("button.next").removeClass("off");
		}
	}

	// 팝업 레이어 : 다음 버튼
	function fnPicNext(id){
		let onIdx = $("#"+id).find(".picList li.on").index() + 1;
		let picTot = $("#"+id).find(".picList li").length - 1;
		//console.log(onIdx +', '+ picTot);
		if (onIdx <= picTot) {
			$("#"+id).find(".picList li").removeClass("on");
			$("#"+id).find(".picList li").eq(onIdx).addClass("on");
		}
		//화살표버튼
		if (onIdx >= picTot) {
			$("#"+id).find("button.next").addClass("off");
		}
		if (onIdx > 0 ) {
			$("#"+id).find("button.prev").removeClass("off");
		}
	}
	
	// 관리자 댓글 저장
	$('#btnSaveReply').on('click', function() {
		if (gagajf.isNull($('textarea[name=admRpl]').val())) {
			mcxDialog.alert("관리자 답변 내용을 입력해 주세요.");
			return false;
		}
		
		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#reviewDetailForm').prop('action'), '#reviewDetailForm', function() {
					uifnPopupClose('popupReviewDetail');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	// 상품 동영상 노출 처리
	var fnUpdateVideoReviewDisplay = function(obj) {
		if ($('#divPicList').find('iframe').length > 0 && $(obj).is(':checked')) {
			var actionUrl = '/marketing/review/video/display/update/' + $('#reviewDetailForm input[name=reviewSq]').val();
			$.post(actionUrl
				, null
				, function(result) {
					$(obj).attr('disabled', true);
				}
				, 'json');
		}
	}
	
	$(document).ready(function() {
		cfnGetTextLength($('textarea[name=admRpl]'), 4000, $('#dpLocAdmRpt'));
	});
/*]]>*/
</script>

</html>