style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!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  : MypageExchangeFormWeb.html
 * @desc    : 마이페이지 > 교환신청 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.22   card007     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div class="my_cont">
		<div class="sec_head">
			<h3>교환 신청</h3>
			<div class="od_detail">
				(주문번호 : <span class="num" th:text="${ordNo}"></span>)
			</div>
		</div>
		<div class="sec_body mypage_body">
			<div class="order_list return_list">
				<section class="order_row">
					<th:block th:if="${orderList}" th:each="oneData, status : ${orderList}">
						<div class="part_deliver">
							<div class="tbl_tit">
								<!-- 주문일/선물일 설정 -->
								<span class="start_t" th:unless="${oneData.giftPackYn == 'Y'}">주문일</span>
								<span class="gift_t" th:if="${oneData.giftPackYn == 'Y'}">선물일</span>
								<!-- //주문일/선물일 설정 -->

								<span class="order_date" th:text="${oneData.ordDt}"></span>

								<!-- 배송구분 설정 -->
								<span class="order_label02" th:if="${oneData.shotDelv}">총알배송</span>
								<span class="order_label01" th:if="${oneData.selfMall}">STYLE24 일반배송</span>
								<span class="order_label01" th:if="${oneData.supplyMall}">업체직배송</span>
								<!-- //배송구분 설정 -->
								<a href="javascript:void(0)" class="detail_btn" th:attr="ordNo=${oneData.ordNo}" onclick="fnGoToOrderDetail(this)">주문상세보기</a>
							</div>
							<th:block th:if="${oneData.orderList}" th:each="order, status : ${oneData.orderList}">
								<div class="tbl type2">
									<table id="exchangeList">
										<colgroup>
											<col width="1020">
											<col width="180">
										</colgroup>
										<tbody>
										<th:block th:if="${order.ordDtlList}" th:each="ordDtl, status : ${order.ordDtlList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
											<input type="hidden" name="ordDtlNo" th:value="${ordDtl.ordDtlNo}"/>
											<input type="hidden" name="ordDtlStat" th:value="${ordDtl.ordDtlStat}"/>
											<input type="hidden" name="reviewSq" th:value="${ordDtl.reviewSq}"/>
											<tr>
												<td>
													<div class="info_item">
														<div class="thumb_box">
															<a href="">
																<img th:src="${imageUrl + '/' + ordDtl.sysImgNm}" width="100%" alt="">
															</a>
														</div>
														<div class="info_box">
															<p class="od_name">
																<a href="">
																	<span class="brand" th:text="${ordDtl.brandNm}"></span>
																	<span class="name" th:text="${ordDtl.goodsNm}"></span>
																</a>
															</p>
															<p class="od_opt">
																<span class="option"><em th:text="${ordDtl.optCd1}"></em><em th:text="${ordDtl.optCd2}"></em></span>
																<span class="count">수량 <em th:text="${ordDtl.ordQty}"></em>개</span>
															</p>
														</div>
														<div class="info_calc">
															<p class="price">
																<span class="selling_price" th:text="|${#numbers.formatInteger(ordDtl.ordAmt, 1, 'COMMA')}원|"></span>
															</p>
															<p class="point"><span th:text="${#numbers.formatInteger(ordDtl.savePntAmt, 1, 'COMMA')}"></span>p</p>
														</div>
													</div>
												</td>
												<td class="cnt_sel">
													<span class="cnt_t">수량</span>
													<select class="select_dress" name="chgQty">
														<option value="">선택</option>
														<option th:if="${ordDtl.ordQty > 0}" th:each="num : ${#numbers.sequence(1,ordDtl.ordQty)}" th:value="${num}" th:text="${num}"></option>
													</select>
													<button class="btn btn_dark btn_sm" th:attr="ordDtlNo=${ordDtl.ordDtlNo}" onclick="fnChangeOption(this);">옵션 변경</button>
												</td>
											</tr>
										</th:block>
										</tbody>
									</table>
								</div>
							</th:block>
							<div class="order_confirm">
								<p class="cf_txt cf_desc c_primary">교환하실 상품의 수량 및 옵션을 선택하신 후 교환 신청을 하실 수 있습니다.</p>
							</div>
						</div>
					</th:block>
				</section>
				<section class="order_row">
					<div class="tbl_tit">
						<h3 class="subH3">교환 사유</h3>
					</div>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="*">
							</colgroup>
							<tbody>
							<tr>
								<td>
									<select id="mounth" name="chgReason" onchange="fnChangeReason(this);">
										<option value="">교환 사유를 선택하세요</option>
										<option th:if="${exchangeReason}" th:each="oneData, status : ${exchangeReason}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
									</select>
								</td>
							</tr>
							<tr>
								<td>
									<textarea class="doc_exchange" name="chgMemo" id="chgMemo" placeholder="자세한 사유를 입력해주세요." onkeyup="cfnGetTextLength(this, 500, $('#exchange_cnt'));"></textarea>
									<p class="txt_cnt"><span id="exchange_cnt" class="c_primary">0</span>/500</p>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
				</section>
				<section class="order_row" id="chgerLocation">
					<div class="order_tit">
						<h3 class="subH3">상품 회수지</h3>
						<span class="del_t">교환받을 상품을 수령할 장소 선택</span>
						<button type="button" class="btn_popup" onclick="fnChangeDeliveryAddr('chger');"><span>회수지 선택</span></button>
					</div>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="200">
								<col width="*">
							</colgroup>
							<tbody>
							<tr>
								<th>성명</th>
								<td id="chgerNm" th:text="${deliveryAddrInfo.recipNm}"></td>
								<input type="hidden" name="chgerNm" th:value="${deliveryAddrInfo.recipNm}">
							</tr>
							<tr>
								<th>연락처</th>
								<td id="chgerPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
								<input type="hidden" name="chgerPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
							</tr>
							<tr>
								<th>주소</th>
								<td id="chgerAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></td>
								<input type="hidden" name="chgerBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
								<input type="hidden" name="chgerDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
							</tr>
							</tbody>
						</table>
					</div>
				</section>
				<section class="order_row" id="returnLocation">
					<div class="order_tit">
						<h3 class="subH3">반품하실 배송지</h3>
					</div>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="200">
								<col width="*">
							</colgroup>
							<tbody>
							<tr>
								<th>성명</th>
								<td th:text="${deliveryAddrInfo.rtnLocNm}"></td>
								<input type="hidden" name="rtnLocNm" th:value="${deliveryAddrInfo.rtnLocNm}">
							</tr>
							<tr>
								<th>연락처</th>
								<td th:text="${deliveryAddrInfo.rtnLocTelno}"></td>
								<input type="hidden" name="rtnLocTelno" th:value="${deliveryAddrInfo.rtnLocTelno}">
							</tr>
							<tr>
								<th>주소</th>
								<td th:text="|${deliveryAddrInfo.rtnLocBaseAddr} ${deliveryAddrInfo.rtnLocDtlAddr}|"></td>
								<input type="hidden" name="rtnLocBaseAddr" th:value="${deliveryAddrInfo.rtnLocBaseAddr}">
								<input type="hidden" name="rtnLocDtlAddr" th:value="${deliveryAddrInfo.rtnLocDtlAddr}">
							</tr>
							</tbody>
						</table>
					</div>
				</section>
				<section class="order_row">
					<div class="order_tit">
						<h3 class="subH3">교환 상품 받으실 주소</h3>
						<span class="del_t">택배사에서 반품 상품을 직접 회수할 장소 선택</span>
						<button type="button" class="btn_popup" onclick="fnChangeDeliveryAddr('recip');"><span>회수지 선택</span></button>
					</div>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="200">
								<col width="*">
							</colgroup>
							<tbody>
							<tr>
								<th>성명</th>
								<td id="recipNm" th:text="${deliveryAddrInfo.recipNm}"></td>
								<input type="hidden" name="recipNm" th:value="${deliveryAddrInfo.recipNm}">
							</tr>
							<tr>
								<th>연락처</th>
								<td id="recipPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
								<input type="hidden" name="recipPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
							</tr>
							<tr>
								<th>주소</th>
								<td id="recipAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></td>
								<input type="hidden" name="recipBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
								<input type="hidden" name="recipDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
							</tr>
							</tbody>
						</table>
					</div>
				</section>
				<section class="order_row" id="addDeliveryFee" style="display:none">
					<div class="ship_fee">
						<p><span class="c_primary" id="addPayCost">2,500원</span> 배송비 추가 결제가 필요합니다.</p>
						<input type="hidden" name="addPayCost"/>
					</div>
				</section>
				<div class="btn_wrap">
					<button type="button" class="btn btn_default cancle_btn" onclick="cfnGoToPage(_PAGE_MYPAGE_CRS_LIST)"><span>교환 취소</span></button>
					<button tyep="submit" class="btn btn_primary submit_btn" onclick="fnExchange()"><span id="exchangeButton">교환 신청</span></button>
				</div>
			</div>
		</div>
	</div>
<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
	$(document).ready(function() {
		// 마이페이지 LNB 설정
		fnSetMypageLnbList(2);
		
		// 마이페이지 location 설정
		fnSetMypageLocation('취소/반품/환불내역', '_PAGE_MYPAGE_CRS_LIST', '교환 신청');
	});
	
	// 교환 옵션 변경 팝업
	var fnChangeOption = function(param) {
		// TODO
		// 옵션변경 처리
	}
	
	// 회수지, 교환지 설정 팝업
	var fnChangeDeliveryAddr = function(param) {
		// TODO
		// 회수지, 교환지 설정
	}
	
	// 교환 처리
	var fnExchange = function() {
		// TODO
		// 교환신청 처리
	}
	
	// 교환 사유 변경 이벤트
	var fnChangeReason = function(param) {
		let chgReason = $(param).val();
		// TODO
		// 사유 변경 처리
		alert('a');
		console.log($('#exchangeList tr'));
		$.each($('#exchangeList tr'), function(idx, item) {
			console.log(item);
		})
	}
</script>

</th:block>

</body>
</html>