style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
							<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/MypageLayoutWeb">
<!--
 *******************************************************************************
 * @source  : MypageReviewFormWeb.html
 * @desc    : 마이페이지 > 리뷰 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.24   sowon     최초 작성
 *******************************************************************************
 -->
<body>
	<th:block layout:fragment="content">
			<div class="content myReviewList"> <!-- 페이지특정 클래스 = myReviewList -->
				<div class="cont_body">
					<!-- CONT-BODY -->
					<div class="lnb">
					<div class="lnb_tit">
						<h2>마이페이지</h2>
					</div>
					<div class="lnb_list">
						<ul id="mypageLnbList"></ul>
					</div>
				</div>
					<!-- <div class="lnb_list">
						<ul id="mypageLnbList"></ul>
					</div> -->
					<div class="cont">
						<div class="sec_head">
							<h3 class="subH1">리뷰</h3>
						</div>
						<div class="sec_body">
							<div class="com_info_txt">
								<p class="tit">리뷰 안내</p>
								<ul>
									<li>일반 리뷰 작성 시 150P, 포토/영상 리뷰는 350P가 추가 적립됩니다!</li>
									<li>월 최대 10,000 P까지 적립 가능합니다.(합산 후 월 1회 지급)</li>
									<li>베스트 리뷰로 선정되면 10,000P가 추가 적립됩니다!</li>
									<li>리뷰는 주문일 기준 90일간 작성이 가능합니다.</li>
								</ul>
							</div>
							<div class="taps" id="tpasReview">
								<div>
									<ul>
										<li id="completeReview"><a href="javascript:void(0);" >작성 가능한 리뷰<span th:text="'('+${#numbers.formatInteger(completeReviewCount,0,'COMMA')}+')'"></span></a></li>
										<li id="alreadyReview"><a href="javascript:void(0);" >내가 쓴 리뷰<span th:text="'('+${#numbers.formatInteger(alreadyReviewCount,0,'COMMA')}+')'"></span></a></li>
									</ul>
								</div>
							</div>
							<div class="check_notice" th:if="${adminCount.count>0}">
								<p>
									관리자가 댓글을 남긴 상품평이 있습니다.
									<a href="javascript:void(0);" th:onclick="fnMove([[${adminCount.reviewSq}]])">
										바로 확인
									</a>
								</p>
							</div>
							<div class="area_list" id="reviewList"></div>
							<div class="sec_foot" id="comNav">
								<div class="ui_row">
									<ul class="pageNav" id="paging">
									
									</ul>
								</div>																					
							</div>
							<div class="sec_foot" id="alrNav">
								<div class="ui_row">
									<ul class="pageNav" id="paging2">
									
									</ul>
								</div>																					
							</div>
							<div class="nodata" id="nodata1" style="display:none;">
								<div class="txt_box">
									<p>
										작성 가능한 리뷰가 없습니다.<br>
									</p>
								</div>
							</div>
							<div class="nodata" id="nodata2" style="display:none;">
								<div class="txt_box">
									<p>
										작성한 리뷰가 없습니다.<br>
									</p>
								</div>
							</div>  
						
						</div>
						
						
					</div>
					<!-- // CONT-BODY -->					
				</div>
			</div>
			<form id="searchForm1" name="searchForm1" th:action="@{'/mypage/complete/review/list'}" th:method="post">
				<input type="hidden" name="pageNo" value="1" />
				<input type="hidden" name="pageSize" value="10" />
			</form>
			<form id="searchForm2" name="searchForm2" th:action="@{'/mypage/already/review/list'}" th:method="post">
				<input type="hidden" name="pageNo2" value="1" />
				<input type="hidden" name="pageSize2" value="10" />
			</form>

	<script src="/ux/plugins/gaga/gaga.paging.js"></script>
	<script th:inline="javascript">
	let imageUrl = [[${@environment.getProperty('upload.goods.view')}]];
	let reviewUrl =[[${@environment.getProperty('upload.image.view')}]];
	let attachList = [[${alreadyReviewAttach}]];
	// 작성가능한 리뷰 클릭 시 
	$("#completeReview").click(function() {
		$("#alreadyReview").removeClass("active");
		$("#completeReview").addClass("active");
		$(".check_notice").hide();
		$("#alrNav").hide();
		$("#comNav").show();
		gagaPaging.init('searchForm1', fnSearchCallback1, 'paging', 10);
		gagaPaging.load(1);
	})
	
	$("#alreadyReview").click(function() {
		$("#completeReview").removeClass("active");
		$("#alreadyReview").addClass("active");
		$(".check_notice").show();
		$("#comNav").hide();
		$("#alrNav").show();
		gagaPaging.init('searchForm2', fnSearchCallback2, 'paging2', 10);
		gagaPaging.load(1);
	})
	
	$(document).ready(function() {

		// 마이페이지 LNB 설정
		fnSetMypageLnbList(7);

		// 마이페이지 location 설정
		fnSetMypageLocation('리뷰', '_PAGE_MYPAGE_REVIEW');
				
		// 작성가능한 리뷰표시
		$("#completeReview").trigger('click');
	
	});
	
	// 주문 목록 조회 콜백
	var fnSearchCallback1 = function(result) {
		$('#nodata1').hide();
		$('#nodata2').hide();
		
		$('#reviewList').html('');

		
		if (result.dataList1 != null && result.dataList1.length > 0) {
			$.each(result.dataList1, function(idx, item) {
				let html = '';
				html += '<div class="part_goods">                                                                                                  ';
				html += '	<div class="goods_cont">                                                                                              ';
				html += '		<div class="goods_info">                                                                                          ';
				html += '			<div class="order_desc">                                                                                      ';
				html += '				<div class="goods_box">                                                                                   ';
				html += '					<div class="gd_item">	                                                                              ';
				html += '						<a href="">                                                                                       ';
				html += '							<span class="thumb">                                                                          ';
				html += '								<img src="' + imageUrl + '/' + item.sysImgNm + '"  width="100%" alt="">  ';
				html += '							</span>                                                                                       ';
				html += '							<p>                                                                                           ';
				html += '								<span class="buy_date"><em>'+item.payDt+'</em>&nbsp;구매</span>             ';
				html += '							</p>                                                                                          ';
				html += '							<p>                                                                                           ';
				html += '								<span class="brand">'+item.brandEnm+'</span>                               ';
				html += '							</p>                                                                                          ';
				html += '							<p>                                                                                           ';
				html += '								<span class="name">'+item.goodsNm+'</span>									';
				html += '							</p>                                                                                          ';
				html += '						</a>                                                                                              ';
				html += '					</div>                                                                                                ';
				html += '					<div class="gd_opt">                                                                                  ';
				html += '						<div class="option_wrap">                                                                         ';
				html += '							<span class="title sr-only">주문 옵션</span>                                                      ';
				if (item.goodsType =='G056_S') {
					$.each(item.colorNmArr, function (index2, option) {
						html += '							<span class="option">' + item.itemNmArr[index2] + ' / ' + option + ' / ' + item.optCd2Arr[index2] + '</span>\n';
					})
				}else{
					html += '							<span class="option">'+item.optCd1+'&nbsp;/&nbsp;'+item.optCd2+'</span>     ';
				}
				
				
				html += '						</div>                                                                                            ';
				html += '					</div>                                                                                                ';
				html += '				</div>                                                                                                    ';
				html += '				<div class="status_box">                                                                                  ';
				html += '					<p>'+item.remainDt+'일 남음</p>                                                                                                  ';
				html += '				</div>                                                                                                    ';
				html += '				<div class="button_box">                                                                                  ';
				html += '					<p><button type="button" class="btn btn_primary_line btn_sm" onclick="fnReviewCreate('+item.ordNo+','+item.ordDtlNo+',\'' + item.goodsCd + '\')"><span>리뷰쓰기</span></button></p>           ';
				html += '				</div>                                                                                                    ';
				html += '			</div>                                                                                                        ';
				html += '		</div>                                                                                                            ';
				html += '	</div>                                                                                                                ';
				html += '</div>                                                                                                                    ';
				$('#reviewList').append(html);
			})
		}else{
			$('#nodata1').show();
		}
		// Create pagination
		gagaPaging.createPagination(result.paging.pageable);
	}
	
	// 주문 목록 조회 콜백
	var fnSearchCallback2 = function(result) {
		$('#nodata1').hide();
		$('#nodata2').hide();
		
		$('#reviewList').html('');
		
		if (result.dataList2 != null && result.dataList2.length > 0) {
			$.each(result.dataList2, function(idx, item) {
				let html = '';
				html+='<div class="part_goods">';
				html+='		<div class="goods_cont">';
				html+='			<div class="goods_info">';
				html+='				<div class="order_desc">';
				html+='					<div class="goods_box">';
				html+='						<div class="gd_item">	';
				html+='							<a href="">';
				html+='								<span class="thumb">';
				html+='									<img src="' + imageUrl + '/' + item.sysImgNm + '" width="100%" alt="">';
				html+='								</span>';
				html+='								<p>';
				html+='									<span class="buy_date"><em>'+item.payDt+'</em>&nbsp;구매</span>';
				html+='								</p>';
				html+='								<p>';
				html+='									<span class="brand">'+item.brandEnm+'</span>';
				html+='								</p>';
				html+='								<p>';
				html+='									<span class="name">'+item.goodsNm+'</span>																';
				html+='								</p>';
				html+='							</a>';
				html+='						</div>';
				html+='						<div class="gd_opt">';
				html+='							<div class="option_wrap">';
				html+='								<span class="title sr-only">주문 옵션</span>';
				html+='								<span class="option">'+item.optCd1+'&nbsp;/&nbsp;'+item.optCd2+'</span>';
				html+='							</div>';
				html+='						</div>';
				html+='					</div>';
				html+='					<div class="button_box">';
				if (item.admRpl == null || item.admRpl == '') {
					html+='						<p><button type="button" class="btn btn_default btn_sm" onclick="fnReviewUpdate('+item.ordNo+','+item.ordDtlNo+','+item.goodsCd+','+item.reviewSq+')"><span>리뷰 수정</span></button></p>';
				}
				html+='						<p><button type="button" class="btn btn_default btn_sm" onclick="fnDeleteReview('+item.reviewSq+')"><span>리뷰 삭제</span></button></p>';
				html+='					</div>';
				html+='				</div>';
				html+='				<div class="order_review">';
				html+='					<div class="review">';
				html+='						<div class="info_box">';
				html+='							<div class="star_score">';
				html+='								<span class="star">';
				html+='									<em class="progbar" style="width:'+(item.score*20)+'%;"></em>';
				html+='								</span>';
				html+='							</div>';
				html+='							<div class="writer">';
				html+='								<span class="wr_date">'+item.regDt+'</span>';
				html+='							</div>';
				html+='						</div>';
				html+='						<div class="response_box">';
				html+='							<div>';
				html+='								<dl>';
				html+='									<div>';
				html+='										<dt>구매옵션</dt>';
				html+='										<dd>'+item.optCd1+' / '+item.optCd2+'</dd>';
				html+='									</div>';
				html+='								</dl>';
				html+='							</div>';
				html+='							<div>';
				html+='								<dl>';
				html+='									<div>';
				html+='										<dt>키/몸무게</dt>';
				html+='										<dd>'+item.weight+'cm/'+item.height+'kg</dd>';
				html+='									</div>';
				if (item.sizeGb == 'T' || item.sizeGb == 'B' || item.sizeGb == 'S') {
					html+='									<div>';
					html+='										<dt>사이즈</dt>';
					html+='										<dd>'+item.scoreSize+'</dd>';
					html+='									</div>';
					html+='									<div>';
					html+='										<dt>컬러</dt>';
					html+='										<dd>'+item.scoreColor+'</dd>';
					html+='									</div>';
				}
				if (item.sizeGb == 'T' || item.sizeGb == 'B') {
					html+='									<div>';
					html+='										<dt>핏</dt>';
					html+='										<dd>'+item.scoreFit+'</dd>';
					html+='									</div>';
					html+='									<div>';
					html+='										<dt>두께감</dt>';
					html+='										<dd>'+item.scoreThick+'</dd>';
					html+='									</div>';
				}
				if (item.sizeGb == 'S') {
					html+='									<div>';
					html+='										<dt>무게감</dt>';
					html+='										<dd>'+item.scoreWeight+'</dd>';
					html+='									</div>';
					html+='									<div>';
					html+='										<dt>볼넓이</dt>';
					html+='										<dd>'+item.scoreBall+'</dd>';
					html+='									</div>';
				}
				html+='								</dl>';
				html+='							</div>';
				html+='						</div>';
				if (attachList != null && attachList.length >0) {
					for (var i = 0; i < attachList.length; i++) {
						if (attachList[i].reviewSq == item.reviewSq) {
							html+='						<div class="photo_box">';
							html+='							<div class="photo_list">';
							html+='								<ul>';
							html+='									<li>';
							html+='										<a href="">';
							html+='											<div class="pic">';
							if (attachList[i].fileGb == 'M') {
								html+='												<span class="thumb mov" style="background-image:url(' + reviewUrl + '/' + attachList[i].sysFileNm + ');"></span>';
							}else{
								html+='												<span class="thumb" style="background-image:url(' + reviewUrl + '/' + attachList[i].sysFileNm + ');"></span>';
							}
							html+='											</div>';
							html+='										</a>';
							html+='									</li>';
							html+='								</ul>';
							html+='							</div>';
							html+='						</div>';
						}
					}
					
				}
				html+='						<div class="txt_review_box" id="admin_'+item.reviewSq+'">';
				html+='							<p>'+item.reviewContent+'</p>';
				html+='						</div>';
				
				if (item.admRpl != null && item.admRpl != '') {
					html+='						<div class="reply_box" >';
					html+='							<div class="reply">';
					html+='								<div class="reply_writer">';
					html+='									<span class="wr_name">관리자</span>';
					html+='									<span class="wr_date">'+item.admRplDt+'</span>';
					html+='								</div>';
					html+='								<div class="reply_txt">';
					html+='									<p>'+item.admRpl+'</p>';
					html+='								</div>';
					html+='							</div>';
					html+='						</div>';
				}
				
				html+='					</div>';
				html+='				</div>';
				html+='			</div>';
				html+='		</div>';
				html+='</div>	';
	
				
				$('#reviewList').append(html);
			})
		}else{
			$('#nodata2').show();
		}
		// Create pagination
		gagaPaging.createPagination(result.paging2.pageable2);
		
	}
	
	
	
	// 스크롤 이동
	var fnMove = function(obj) {
	  	 var offset = $("#admin_" + obj).offset();
	  	 console.log(offset);
        $('html, body').animate({scrollTop : offset.top}, 400);
	}
	
	// 리뷰삭제
	var fnDeleteReview = function(obj) {
		var data = {reviewSq : obj};
				
		var jsonData = JSON.stringify(data);

		mcxDialog.confirm("작성한 리뷰를 삭제하시겠습니까?", {
			cancelBtnText : "취소",
			sureBtnText : "확인",
			sureBtnClick : function() {

				gagajf.ajaxJsonSubmit('/mypage/review/delete', jsonData, function() {
					
					mcxDialog.alert("삭제되었습니다.");
					
					$("#alreadyReview").trigger('click');	
				});
			}
		});
	}
	
	// 리뷰 수정
	var fnReviewUpdate = function(obj1,obj2,obj3) {
		let ordNo = obj1;
		let ordDtlNo = obj2;
		let goodsCd = obj3;
		let reviewStat = 'u';
		
		$('#createReview input[name=ordNo]').val(ordNo);
		$('#createReview input[name=ordDtlNo]').val(ordDtlNo);
		$('#createReview input[name=goodsCd]').val(goodsCd);
		$('#createReview input[name=reviewStat]').val(reviewStat);
		
		document.createReview.submit();
		// cfnGoToPage(_PAGE_MYPAGE_CREATE_REVIEW + ordNo +'/'+ordDtlNo+'/'+goodsCd+'/'+reviewStat);
	}
	</script>
	</th:block>

</body>
</html>