style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
							<!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/NoMemberLayoutWeb">
<!--
 *******************************************************************************
 * @source  : NoMemberCreExchangeDetailFormWeb.html
 * @desc    : 비회원 > 취소/반품/교환내역 > 교환상세 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.03   card007     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div class="content myOrderView"> <!-- 페이지특정 클래스 = myOrderView -->
		<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>
					<span class="order_number">주문번호&nbsp;:&nbsp;<em th:text="${oneData.ordNo}"></em></span>
				</div>
				<div class="sec_body">
					<div class="part_goods">
						<div class="goods_head">
							<p>주문일 <span th:text="${oneData.ordDt}"></span></p>
							<a href="javascript:void(0)" th:if="${oneData.chgStat == 'G685_20' or oneData.chgStat == 'G685_21'}" th:attr="ordNo=${oneData.ordNo}, ordChgSq=${oneData.ordChgSq}, cancelGb=${oneData.chgGb}, noMember=noMember" onclick="fnCreCancel(this);">전체신청취소</a>
						</div>
						<div class="goods_cont">
							<!-- 주문상품 -->
							<th:block th:if="${exchangeDetailList.exchangeDetailList}" th:each="exchangeDtl, status : ${exchangeDetailList.exchangeDetailList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
								<div class="goods_info">
									<div class="order_desc">
										<div class="goods_box">
											<div class="gd_item">
												<a href="javascript:void(0)" th:attr="goodsCd=${exchangeDtl.goodsCd}" onclick="fnGoToGoodsDetail(this)">
													<span class="thumb">
														<img th:src="${imageUrl + '/' + exchangeDtl.sysImgNm}" width="100%" alt="">
													</span>
													<p>
														<span class="brand" th:text="${exchangeDtl.brandNm}"></span>
														<span class="tag primary" th:if="${exchangeDtl.shotDelvYn == 'Y'}">총알배송</span>
														<span class="tag" th:if="${exchangeDtl.shotDelvYn == 'N' and exchangeDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
														<span class="tag" th:if="${exchangeDtl.selfGoodsYn == 'N'}">업체직배송</span>
													</p>
													<p>
														<span class="name" th:text="${exchangeDtl.goodsNm}"></span>
													</p>
												</a>
											</div>
											<div class="gd_opt">
												<div class="option_wrap">
													<span class="title sr-only">주문 옵션</span>
													<span class="option" th:if="${exchangeDtl.goodsType == 'G056_S'}" th:each="option, status : ${exchangeDtl.colorNmArr}" th:text="|${exchangeDtl.itemNmArr[status.index]} / ${option} / ${exchangeDtl.optCd2Arr[status.index]}|"></span>
													<span class="option" th:unless="${exchangeDtl.goodsType == 'G056_S'}" th:text="|${exchangeDtl.colorNm} / ${exchangeDtl.optCd2}|"></span>
												</div>
											</div>
											<div class="gd_opt">
												<div class="option_wrap">
													<span class="title">교환 옵션</span>
													<span class="option" th:if="${exchangeDtl.goodsType == 'G056_S'}" th:each="option, status : ${exchangeDtl.chgColorNmArr}" th:text="|${exchangeDtl.chgItemNmArr[status.index]} / ${option} / ${exchangeDtl.chgOptCd2Arr[status.index]}|"></span>
													<span class="option" th:unless="${exchangeDtl.goodsType == 'G056_S'}" th:text="|${exchangeDtl.chgColorNm} / ${exchangeDtl.chgOptCd2}|"></span>
												</div>
											</div>
											<div class="gd_calc">
												<p>
													<span class="count"><em th:text="${exchangeDtl.chgQty}"></em>개</span>
												</p>
												<!--												<p>-->
												<!--													<span class="price_org" th:if="${exchangeDtl.priceOrg > exchangeDtl.priceSale}"><em th:text="${#numbers.formatInteger(exchangeDtl.priceOrg, 1, 'COMMA')}"></em>원</span>-->
												<!--													<span class="price_sale"><em th:text="${#numbers.formatInteger(exchangeDtl.priceSale, 1, 'COMMA')}"></em>원</span>-->
												<!--												</p>-->
											</div>
										</div>
										<div class="status_box">
											<p>
												<th:block th:if="${exchangeDtl.chgStat == 'G685_40' && (exchangeDtl.ordDtlStat == 'G013_20' or exchangeDtl.ordDtlStat == 'G013_30' or exchangeDtl.ordDtlStat == 'G013_35' or exchangeDtl.ordDtlStat == 'G013_40' or exchangeDtl.ordDtlStat == 'G013_50')}" th:text="|교환진행중|"></th:block>
												<th:block th:if="${exchangeDtl.chgStat == 'G685_40' && (exchangeDtl.ordDtlStat == 'G013_60' or exchangeDtl.ordDtlStat == 'G013_70')}" th:text="|교환완료|"></th:block>
												<th:block th:if="${exchangeDtl.chgStat == 'G685_49'}" th:text="|접수취소|"></th:block>
												<th:block th:unless="${exchangeDtl.chgStat == 'G685_40' or exchangeDtl.chgStat == 'G685_49'}" th:text="${exchangeDtl.chgStatNm}"></th:block>
												<span class="date" th:text="${exchangeDtl.chgDate}"></span>
												<span class="time" th:text="${exchangeDtl.chgTime}"></span>
											</p>
										</div>
										<div class="button_box">
											<p th:if="${exchangeDtl.chgStat == 'G685_32' or exchangeDtl.chgStat == 'G685_21'}"><button type="button" class="btn btn_default btn_sm" th:attr="ordNo=${exchangeDtl.ordNo}, ordChgSq=${exchangeDtl.ordChgSq}" onclick="fnCrePayAddCost(this);"><span>결제하기</span></button></p>
											<p th:if="${exchangeDtl.chgStat == 'G685_40' && (exchangeDtl.ordDtlStat == 'G013_20' or exchangeDtl.ordDtlStat == 'G013_30' or exchangeDtl.ordDtlStat == 'G013_35' or exchangeDtl.ordDtlStat == 'G013_40' or exchangeDtl.ordDtlStat == 'G013_50')}"><button type="button" class="btn btn_default btn_sm" th:attr="${exchangeDtl.ordDtlNo}" onclick="fnGoToDeliveryTrack(this);"><span>배송조회</span></button></p>
										</div>
									</div>
									<!-- 교환결제대기 -->
									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_21' or (exchangeDtl.chgGb == 'G680_40' and exchangeDtl.chgStat == 'G685_32')}"><p th:text="|${exchangeDtl.addPayCost}|원 결제 후 교환 가능합니다."></p></div>
									<!-- 교환접수 -->
									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_20'}"><p>교환 신청이 접수 되었습니다. 신속하게 처리하여 드리겠습니다.</p></div>
									<!-- 회수요청 -->
									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_30'}"><p>고객님이 요청하신 회수지로 상품을 회수 중에 있습니다.</p></div>
									<!-- 교환상품검수중 -->
									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_31' and exchangeDtl.chgGb == 'G680_40'}"><p>고객님이 교환하신 상품을 검수 중에 있습니다.</p></div>
									<!-- 교환완료 -->
									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_40' and (exchangeDtl.chgOrdDtlStat == 'G013_60' or exchangeDtl.chgOrdDtlStat == 'G013_70')}"><p>교환이 완료되었습니다.</p></div>
									<!-- 교환철회 -->
									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_49'}"><p>요청하신 교환을 취소하였습니다.</p></div>
								</div>
							</th:block>
							<!-- //주문상품 -->
						</div>
					</div>
					<h4 class="subH3">상세 정보</h4>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="210">
								<col width="*">
							</colgroup>
							<tbody>
								<tr>
									<th>교환접수 일자</th>
									<td th:text="${oneData.chgDt}"></td>
								</tr>
								<tr>
									<th>교환완료 일자</th>
									<td th:if="${oneData.chgStat == 'G685_40' && (oneData.ordDtlStat == 'G013_60' or oneData.ordDtlStat == 'G013_70')}" th:text="${oneData.completeDt}"></td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4 class="subH3">교환 상품 배송지</h4>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="210">
								<col width="*">
							</colgroup>
							<tbody>
								<tr>
									<th>
										배송지 정보
									</th>
									<td>
										<div class="block_line">
											<ul>
												<li>
													<span id="recipNm" th:text="${oneData.recipNm}"></span>
												</li>
												<li>
													<span id="recipPhnno" th:text="${oneData.recipPhnno}"></span>
												</li>
												<li>
													<span id="recipAddr" th:text="|${oneData.recipBaseAddr} ${oneData.recipDtlAddr}|"></span>
													<button type="button" class="btn btn_default btn_sm" th:if="${oneData.chgOrdDtlStat == 'G013_20' or oneData.chgOrdDtlStat == 'G013_25' or oneData.chgOrdDtlStat == 'G013_30' or oneData.chgOrdDtlStat == 'G013_35'}" onclick="fnChangeAddr('recip');"><span>배송지 변경</span></button>
												</li>
												<li>
													배송요청 사항&nbsp;:&nbsp;<span id="delvMemo" th:text="${oneData.delvMemo}"></span>
													<button type="button" class="btn_underline" th:if="${oneData.chgOrdDtlStat == 'G013_20' or oneData.chgOrdDtlStat == 'G013_25' or oneData.chgOrdDtlStat == 'G013_30' or oneData.chgOrdDtlStat == 'G013_35'}" onclick="fnChangeMemo('recip')"><span>변경하기</span></button>
												</li>
											</ul>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<th:block th:if="${oneData.wdGb == 'W'}">
						<h4 class="subH3">교환 회수지 주소</h4>
						<div class="tbl type1">
							<table>
								<colgroup>
									<col width="210">
									<col width="*">
								</colgroup>
								<tbody>
									<tr>
										<th>회수 진행 여부</th>
										<td>회수요청</td>
									</tr>
									<tr>
										<th>회수지 정보</th>
										<td>
											<div class="block_line">
												<ul>
													<li>
														<span id="chgerNm" th:text="${oneData.chgerNm}"></span>
													</li>
													<li>
														<span id="chgerPhnno" th:text="${oneData.chgerPhnno}"></span>
													</li>
													<li>
														<span id="chgerAddr" th:text="|${oneData.chgerBaseAddr} ${oneData.chgerDtlAddr}|"></span>
														<button type="button" class="btn btn_default btn_sm" th:if="${oneData.chgStat == 'G685_20' or oneData.chgStat == 'G685_21'}" onclick="fnChangeAddr('chger');"><span>회수지 변경</span></button>
													</li>
													<li>
														배송요청 사항&nbsp;:&nbsp;<span id="chgerRtnMemo" th:text="${oneData.chgerRtnMemo}"></span>
														<button type="button" class="btn_underline" th:if="${oneData.chgStat == 'G685_20' or oneData.chgStat == 'G685_21'}" onclick="fnChangeMemo('chger');"><span>변경하기</span></button>
													</li>
												</ul>
											</div>
										</td>
									</tr>
									<tr th:if="${not #strings.isEmpty(oneData.wdInvoiceNo) and not #strings.isEmpty(oneData.shipCompNm)}">
										<th>회수 정보</th>
										<td>
											<th:block th:text="|${oneData.shipCompNm} / ${oneData.wdInvoiceNo}|"></th:block>
											<button type="button" class="btn btn_default btn_sm" onclick="fnGoToWithdrawDelivery()"><span>회수조회</span></button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</th:block>
					<th:block th:if="${oneData.addPayCost > 0}">
						<h4 class="subH3">결제정보</h4>
						<div class="tbl type6">
							<table>
								<colgroup>
									<col width="50%">
									<col width="50%">
								</colgroup>
								<tbody>
									<tr>
										<td>
											<dl>
												<div>
													<dt>배송비</dt>
													<dd>
														<div class="price">
															<span class="order_total_price"><em th:text="${#numbers.formatInteger(oneData.addPayCost, 1, 'COMMA')}"></em>원</span>
														</div>
													</dd>
												</div>
	<!--											<div class="include_item"> &lt;!&ndash; 할인항목 표기 class명 include_item &ndash;&gt;-->
	<!--												<dt>제휴할인</dt>-->
	<!--												<dd><em>-123,456,789</em>원</dd>-->
	<!--											</div>-->
											</dl>
										</td>
										<td>
											<dl>
												<div>
													<dt>결제 금액</dt>
													<dd>
														<div class="price">
															<span class="pay_total_price"><em th:text="${#numbers.formatInteger(oneData.addPayCost, 1, 'COMMA')}"></em>원</span>
														</div>
													</dd>
												</div>
												<div>
													<dt class="sr-only">결제방법</dt>
													<dd th:if="${oneData.payMeans == 'G014_30'}" th:text="|${oneData.payMeansNm}(${oneData.cardNm}) / ${oneData.cardMips}|"></dd>
													<dd th:if="${oneData.payMeans == 'G014_60'}" th:text="${oneData.payMeansNm}"></dd>
												</div>
												<div th:if="${oneData.payMeans == 'G014_30'}">
													<dt class="sr-only">영수증 확인</dt>
													<dd>
														<button type="button" class="btn btn_default btn_sm" onclick="fnReceipt('card')"><span>신용카드 전표</span></button>
													</dd>
												</div>
											</dl>
										</td>
									</tr>
								</tbody>
							</table>
							<p class="t_help">※ NPAY등의 대체결제수단으로 결제 시 해당 결제 플랫폼에서 영수증 확인이 가능합니다.</p>
						</div>
					</th:block>
					<div class="btn_footer_area">
						<button type="button" class="btn btn_dark btn_md" onclick="fnGoToNoMemberCreList();"><span>확인</span></button>
					</div>
				</div>
			</div>
			<!-- // CONT-BODY -->
		</div>
	</div>
<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	let addrGb = '';
	let memoGb = '';
	var isLogin = [[${isLogin}]];
	let oneData = [[${oneData}]];
	let ordNo = oneData.ordNo;
	let kcpReceiptUrl = [[${@environment.getProperty('pg.kcp.receipt.url')}]];

	// 추가배송비 전표 데이터 설정
	let paymentInfo = {};
	paymentInfo.pgTid = oneData.pgTid;
	let orderAmtInfo = {};
	orderAmtInfo.realOrdAmt = oneData.addPayCost;
	orderAmtInfo.realDelvAmt = 0;

	$(document).ready(function() {
		// 마이페이지 LNB 설정
		fnSetNoMemberLnbList(2);
		
		// 마이페이지 location 설정
		fnSetNoMemberLocation('취소/반품/교환 내역', '교환 상세');
	});

	// 배송메모 및 반품메모 변경 처리
	var fnChangeMemo = function(param) {
		memoGb = param;
		fnChangeDeliveryMemo();
	}

	// 배송지 및 교환지 변경 처리
	var fnChangeAddr = function(param) {
		addrGb = param;
		fnChangeDeliveryAddr();
	}

	// 배송지 및 회수지 정보 설정
	var delvAddrSet = function(delvObj) {
		let url = '';
		let ordChgSq = oneData.ordChgSq;
		let delvAddrSq = oneData.delvAddrSq;
		let recipNm = delvObj.recipNm;
		let recipPhnno = delvObj.recipPhnno;
		let recipZipcode = delvObj.recipZipcode;
		let recipBaseAddr = delvObj.recipBaseAddr;
		let recipDtlAddr = delvObj.recipDtlAddr;
		let delvMemo = delvObj.delvMemo;
		let recipAddr = recipBaseAddr + ' ' + recipDtlAddr;

		let data = {};

		if (addrGb == 'chger') {
			url = '/noMember/change/chger/addr';
			data.ordChgSq = ordChgSq;
			data.chgerNm = recipNm;
			data.chgerPhnno = recipPhnno;
			data.chgerZipcode = recipZipcode;
			data.chgerBaseAddr = recipBaseAddr;
			data.chgerDtlAddr = recipDtlAddr;
			data.chgerRtnMemo = delvMemo;
		} else {
			url = '/noMember/change/delvery/addr';
			data.delvAddrSq = delvAddrSq;
			data.recipNm = recipNm;
			data.recipPhnno = recipPhnno;
			data.recipZipcode = recipZipcode;
			data.recipBaseAddr = recipBaseAddr;
			data.recipDtlAddr = recipDtlAddr;
			data.delvMemo = delvMemo;
		}

		let jsonData = JSON.stringify(data);

		gagajf.ajaxJsonSubmit(url, jsonData, function (result) {
			if (result.status == '200') {
				if (addrGb == 'chger') {
					$('#chgerNm').text(recipNm);
					$('#chgerPhnno').text(recipPhnno);
					$('#chgerAddr').text(recipAddr);
					$('#chgerRtnMemo').text(delvMemo);
				} else {
					$('#recipNm').text(recipNm);
					$('#recipPhnno').text(recipPhnno);
					$('#recipAddr').text(recipAddr);
					$('#delvMemo').text(delvMemo);
				}
			}
		});
	}

	// 배송메모 설정
	var delvMemoSet = function(delvMemoObj) {
		let url = '';
		let ordChgSq = oneData.ordChgSq;
		let delvAddrSq = oneData.delvAddrSq;
		let delvMemo = delvMemoObj.delvMemo;

		let data = {};

		if (memoGb == 'chger') {
			url = '/noMember/change/chger/rtn/memo';
			data.ordChgSq = ordChgSq;
			data.chgerRtnMemo = delvMemo;
		} else {
			url = '/noMember/change/delvery/memo';
			data.delvAddrSq = delvAddrSq;
			data.delvMemo = delvMemo;
		}

		let jsonData = JSON.stringify(data);

		gagajf.ajaxJsonSubmit(url, jsonData, function(result) {
			if (result.status == '200') {
				if (memoGb == 'chger') {
					$("#chgerRtnMemo").text(delvMemo);
				} else {
					$("#delvMemo").text(delvMemo);
				}
			}
		});
	}

	var fnGoToWithdrawDelivery = function(param) {
		// TODO
		// 회수조회 페이지 이동
	}
/*]]>*/
</script>

</th:block>

</body>
</html>