style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
							<!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 myReviewWrite"> <!-- 페이지특정 클래스 = myReviewWrite -->
				<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="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>리뷰 작성시 욕설, 비방, 선정적인 내용등이 있을 경우 통보 없이 관리자에 의해 삭제 될 수 있습니다.</li>
								</ul>
							</div>
							<th:block th:each="review, status : ${completeReviewList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
							<form class="form_wrap" id="reviewForm" th:action="@{'/mypage/review/save'}">
								<input type="hidden" name="ordNo" th:value="${review.ordNo}">
								<input type="hidden" name="ordDtlNo" th:value="${review.ordDtlNo}">
								<input type="hidden" name="goodsCd" th:value="${review.goodsCd}">
								<input type="hidden" name="custNo" th:value="${review.custNo}">
								<h4 class="subH3">리뷰쓰기</h4>
								<div class="part_goods">
									<div class="goods_cont">
										<!-- 주문상품 -->
										
										<div class="goods_info">
											<div class="order_desc">
												<div class="goods_box">
													<div class="gd_item">	
														<a href="">
															<span class="thumb">
																<img th:src="${imageUrl + '/' + review.sysImgNm}" width="100%" alt="">
															</span>
															<p>
																<span class="buy_date"><em th:text="${review.payDt}"></em>&nbsp;구매</span>
															</p>
															<p>
																<span class="brand" th:text="${review.brandEnm}"></span>
																<!-- <span class="tag">STYLE24 일반배송</span> -->
															</p>
															<p>
																<span class="name" th:text="${review.goodsNm}"></span>																
															</p>
														</a>
													</div>
													<div class="gd_opt">
														<div class="option_wrap">
															<span class="title sr-only">주문 옵션</span>
															<span class="option">[[${review.optCd1}]]K&nbsp;/&nbsp;[[${review.optCd2}]]</span>
														</div>
													</div>
												</div>
											</div>
										</div>
										
										<!-- //주문상품 -->
									</div>
								</div>			

								<h4 class="subH3">별점 선택</h4>
								<div class="tbl type1">
									<table>
										<colgroup>
											<col width="170">
											<col width="*">
										</colgroup>   
										<tr>
											<th>
												별점
											</th>
											<td>
												<div class="input_starscore" id="star">
													<input type="hidden" id="score" name="score">
													<button type="button" id="starBtn"></button>
													<button type="button" id="starBtn"></button>
													<button type="button" id="starBtn"></button>
													<button type="button" id="starBtn"></button>
													<button type="button" id="starBtn"></button>
												</div>
											</td>
										</tr>
									</table>
								</div>

								<h4 class="subH3">키 / 몸무게</h4>
								<div class="tbl type1">
									<table>
										<colgroup>
											<col width="170">
											<col width="*">
										</colgroup>   
										<tr>
											<th>
												키
											</th>
											<td>
												<div class="input_my_physical">
													<div class="form_field">
														<div class="input_wrap">
															<input type="text" class="form_control" placeholder="숫자만 입력해 주세요." data-valid-type="numeric" maxlength="3" id="height" name="height">
															<span class="unit">cm</span>
														</div>
													</div>
												</div>
											</td>
										</tr>
										<tr>
											<th>
												몸무게
											</th>
											<td>
												<div class="input_my_physical">
													<div class="form_field">
														<div class="input_wrap">
															<input type="text" class="form_control" placeholder="숫자만 입력해 주세요." data-valid-type="numeric" maxlength="3" id="weight" name="weight">
															<span class="unit">kg</span>
														</div>
													</div>
												</div>
											</td>
										</tr>
									</table>
								</div>
								
								<!-- <th:block th:if="${review.sizeGb == 'T' or review.sizeGb == 'B' or review.sizeGb == 'S'}"> --> 
								<h4 class="subH3">상품 평가</h4>
								<div class="tbl type1">
									<table>
										<colgroup>
											<col width="170">
											<col width="*">
										</colgroup>  
										<!-- <th:block th:if="${review.sizeGb == 'T' or review.sizeGb == 'B' or review.sizeGb == 'S'}"> --> 
										<tr>
											<th>
												사이즈
											</th>
											<td>
												<div class="input_simple_review">
													<div class="form_field">
														<div>
															<input type="radio" name="scoreSize" id="rdi_review_size1" value="1">
															<label for="rdi_review_size1"><span>작음</span></label>
														</div>
														<div>
															<input type="radio" name="scoreSize" id="rdi_review_size2" value="2">
															<label for="rdi_review_size2"><span>딱맞음</span></label>
														</div>
														<div>
															<input type="radio" name="scoreSize" id="rdi_review_size3" value="3">
															<label for="rdi_review_size3"><span>큼</span></label>
														</div>
													</div>
												</div>
											</td>
										</tr>
										<tr>
											<th>
												컬러
											</th>
											<td>
												<div class="input_simple_review">
													<div class="form_field">
														<div>
															<input type="radio" name="scoreColor" id="rdi_review_color1" value="1">
															<label for="rdi_review_color1"><span>밝음</span></label>
														</div>
														<div>
															<input type="radio" name="scoreColor" id="rdi_review_color2" value="2">
															<label for="rdi_review_color2"><span>똑같음</span></label>
														</div>
														<div>
															<input type="radio" name="scoreColor" id="rdi_review_color3" value="3">
															<label for="rdi_review_color3"><span>어두움</span></label>
														</div>
													</div>
												</div>
											</td>
										</tr>
										<!-- </th:block>
										<th:block th:if="${review.sizeGb == 'T' or review.sizeGb == 'B'}"> --> 
										<tr>
											<th>
												핏
											</th>
											<td>
												<div class="input_simple_review">
													<div class="form_field">
														<div>
															<input type="radio" name="scoreFit" id="rdi_review_fit1" value="1">
															<label for="rdi_review_fit1"><span>슬림</span></label>
														</div>
														<div>
															<input type="radio" name="scoreFit" id="rdi_review_fit2" value="2">
															<label for="rdi_review_fit2"><span>레귤러</span></label>
														</div>
														<div>
															<input type="radio" name="scoreFit" id="rdi_review_fit3" value="3">
															<label for="rdi_review_fit3"><span>오버</span></label>
														</div>
													</div>
												</div>
											</td>
										</tr>
										<tr>
											<th>
												두께감
											</th>
											<td>
												<div class="input_simple_review">
													<div class="form_field">
														<div>
															<input type="radio" name="scoreThick" id="rdi_review_thick1" value="1">
															<label for="rdi_review_thick1"><span>얇음</span></label>
														</div>
														<div>
															<input type="radio" name="scoreThick" id="rdi_review_thick2" value="2">
															<label for="rdi_review_thick2"><span>적당함</span></label>
														</div>
														<div>
															<input type="radio" name="scoreThick" id="rdi_review_thick3" value="3">
															<label for="rdi_review_thick3"><span>도톰함</span></label>
														</div>
													</div>
												</div>
											</td>
										</tr>
										<!-- </th:block>
										<th:block th:if="${review.sizeGb == 'S'}">  -->
										<tr>
											<th>
												무게감
											</th>
											<td>
												<div class="input_simple_review">
													<div class="form_field">
														<div>
															<input type="radio" name="scoreWeight" id="rdi_review_weight1" value="1">
															<label for="rdi_review_weight1"><span>가벼움</span></label>
														</div>
														<div>
															<input type="radio" name="scoreWeight" id="rdi_review_weight2" value="2">
															<label for="rdi_review_weight2"><span>적당함</span></label>
														</div>
														<div>
															<input type="radio" name="scoreWeight" id="rdi_review_weight3" value="3">
															<label for="rdi_review_weight3"><span>무거움</span></label>
														</div>
													</div>
												</div>
											</td>
										</tr>
										<tr>
											<th>
												볼너비
											</th>
											<td>
												<div class="input_simple_review">
													<div class="form_field">
														<div>
															<input type="radio" name="scoreBall" id="rdi_review_width1" value="1">
															<label for="rdi_review_width1"><span>작음</span></label>
														</div>
														<div>
															<input type="radio" name="scoreBall" id="rdi_review_width2" value="2">
															<label for="rdi_review_width2"><span>딱맞음</span></label>
														</div>
														<div>
															<input type="radio" name="scoreBall" id="rdi_review_width3" value="3">
															<label for="rdi_review_width3"><span>큼</span></label>
														</div>
													</div>
												</div>
											</td>
										</tr>
										<!-- </th:block> -->
									</table>
								</div>
								<!-- </th:block> -->
								<h4 class="subH3">고객님의 리뷰가 다른 고객들에게 도움이 될 수 있어요!</h4>
								<div class="tbl type1">
									<table>
										<colgroup>
											<col width="170">
											<col width="*">
										</colgroup>   
										<tr>
											<th>
												리뷰내용
											</th>
											<td>
												<div class="input_txt_review">
													<div class="form_field">
														<div class="input_wrap">
															<textarea class="doc_review" name="reviewContent" id="reviewContent" cols="30" rows="10" placeholder="·&nbsp;리뷰 내용은 최소 10자 이상 입력해 주세요.&#13;&#10;·&nbsp;상품과 무관하거나 스팸, 음란, 불법적인 내용의 리뷰는 통보 없이 삭제되며, 지급한 포인트는 회수 될 수 있습니다.&#13;&#10;·&nbsp;리뷰 등록 후 관리자 승인이 필요한 경우 바로 노출이 되지 않을 수 있습니다." style="resize: none;"></textarea>
															<p class="txt_cnt"><span id="review_cnt" class="c_primary">0</span>/500</p>			
														</div> 
													</div>
												</div>
											</td>
										</tr>
										<tr>
											<th>
												포토/영상 첨부
											</th>
											<td>
												<div class="form_field">
													<div class="input_wrap">
														<!-- 이미지첨부 -->
														<div class="form_field">
															<div class="imgUpload">
																<label for="fileAdd" class="fileAdd">첫번째업로드</label>
																<input type="file" id="fileAdd" name="files[]">
															</div>
														</div>
														<!-- //이미지첨부 -->
													</div> 
												</div>
												<div class="txt_info">
													<ul>
														<li>
															최대 10개까지 등록 가능
														</li>
													</ul>
												</div>
											</td>
										</tr>
									</table>
								</div>							

								<div class="btn_footer_area">
									<button type="button" class="btn btn_default btn_md" onclick="reviewCancel()"><span>취소</span></button>
									<button type="button" id="btn_review_registration" class="btn btn_dark btn_md" onclick="reviewCreate()"><span>리뷰 등록</span></button>
								</div>		
							</form>	
							</th:block>						
						</div>
					</div>
					<!-- // CONT-BODY -->					
				</div>
			</div>

<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
let reviewList = [[${completeReviewList}]];
// 별점 class="on"
var $starEls = $('#star button#starBtn');
var rate = 0;

$starEls.each(function (index, el) {
    $(el).on('click', function () {
        rating(index);
        $("#score").attr("value",index+1);
    });
});

function rating(score) {
    $starEls.each(function (i, el) {
        if (i <= score) {
            $(el).addClass('on');
        } else {
            $(el).removeClass('on');
        }
    });

    rate = score + 1;
}

// 리뷰  취소
var reviewCancel = function() {
	
	mcxDialog.confirm('취소하시겠습니까"?', {
        cancelBtnText: "취소",
        sureBtnText: "확인",
        sureBtnClick: function(){
        	cfnGoToPage(_PAGE_MYPAGE_REVIEW);
        }
    });
}

// 리뷰 등록
var reviewCreate = function () {
	
	if($("#score").val()=='' || $("#score").val()==null){
		mcxDialog.alert('별점을 선택하세요.');
		return;
	}
	
	if($("#reviewForm input[name=height]").val() == '' || $("#reviewForm input[name=height]").val() == null){
		mcxDialog.alert('키를 입력하세요.');
		return;
	}
	
	if($("#reviewForm input[name=weight]").val() == '' || $("#reviewForm input[name=weight]").val() == null){
		mcxDialog.alert('몸무게를 입력하세요.');
		return;
	}
	
	
	if(reviewList[0].sizeGb == 'T' || reviewList[0].sizeGb == 'B' || reviewList[0].sizeGb == 'S'){
		if($('#reviewForm input:radio[name=scoreSize]').prop('checked') == false){
			mcxDialog.alert('상품 사이즈를 평가해주세요.');
			return;
		}
		
		if($('#reviewForm input:radio[name=scoreColor]').prop('checked') == false){
			mcxDialog.alert('상품 컬러를 평가해주세요.');
			return;
		}
	}
	
	if(reviewList[0].sizeGb == 'T' || reviewList[0].sizeGb == 'B'){
		if($('#reviewForm input:radio[name=scoreFit]').prop('checked') == false){
			mcxDialog.alert('상품 핏을 평가해주세요.');
			return;
		}
		if($('#reviewForm input:radio[name=scoreThick]').prop('checked') == false){
			mcxDialog.alert('상품 두께감을 평가해주세요.');
			return;
		}	
	}
	
	if(reviewList[0].sizeGb == 'S' ){
		if($('#reviewForm input:radio[name=scoreWeight]').prop('checked') == false){
			mcxDialog.alert('상품 무게감을 평가해주세요.');
			return;
		}
		
		if($('#reviewForm input:radio[name=scoreBall]').prop('checked') == false){
			mcxDialog.alert('상품 볼넓이를 평가해주세요.');
			return;
		}
	}

	if($('#reviewContent').val().length<10){
		mcxDialog.alert("리뷰 내용을 10자 이상 입력해주세요.");
		return;
	}
	
	mcxDialog.confirm('리뷰를 등록하시겠습니까"?', {
        cancelBtnText: "취소",
        sureBtnText: "확인",
        sureBtnClick: function(){
        	gagajf.ajaxFormSubmit($('#reviewForm').prop('action'), '#reviewForm', fnSaveCallback);
        }
    });
	
}
var fnSaveCallback = function (result) {
	if(result.status == "200"){
		mcxDialog.alert("상품 리뷰를 등록하였습니다.");
		//포인트 예정금액 고지해야함
		cfnGoToPage(_PAGE_MYPAGE_REVIEW);
	}
}


// 글자 카운팅
$('#reviewContent').keyup(function (e){
    var content = $(this).val();
    $('.txt_cnt').html('<span id="review_cnt" class="c_primary">'+content.length+'</span>/500');    //글자수 실시간 카운팅
    

    if (content.length > 500){
    	mcxDialog.alert("최대 500자까지 입력 가능합니다.");
        $(this).val(content.substring(0, 500));
        $('.txt_cnt').html('<span id="review_cnt" class="c_primary">500</span>/500');
    }
});

$('#fileAdd').on('change', function() { fnChooseFile(this); });

var fnChooseFile = function(obj) {
	// multiple 속성이 있으면 files에는 다수의 객체가 할당됨
	var file = obj.files[0];
	
	if (!gagajf.isNull(file.size) && Number(file.size) > 10 * 1000000) {
		mcxDialog.alertC('이미지는 최대 10MB 이하 파일만 가능합니다.', {
			sureBtnText: "확인",
			sureBtnClick: function() {
				$(obj).parent('.imgUpload').find('.removes').trigger('click');
			}
		});
		return false;
	}
	
	// 파일 업로드
	gagajf.ajaxFileUpload('/common/file/upload?subDir=/review'
			, file
			, function(result) {
				// 업로드한 파일명 설정
				$('input[name=' + obj.name + 'OrgFileNm]').val(result.oldFileName);
				$('input[name=' + obj.name + 'SysFileNm]').val(result.newFileName);
			}
	);
}

$(document).ready(function() {
	
	// 마이페이지 LNB 설정
	fnSetMypageLnbList(7);

	// 마이페이지 location 설정
	fnSetMypageLocation('리뷰', '_PAGE_MYPAGE_REVIEW');
	
});
</script>
</th:block>

</body>
</html>