style24
/
style24.front


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

<th:block layout:fragment="content">
	<div class="content 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">
				<form id="cancelForm">
					<input type="hidden" name="accountNo" th:value="${oneData.accountNo}"/>
					<input type="hidden" name="accountNm" th:value="${oneData.accountNm}"/>
					<input type="hidden" name="bankCd" th:value="${oneData.bankCd}"/>
					<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 th:unless="${oneData.giftPackYn == 'Y'}">주문일 <span th:text="${oneData.ordDt}"></span></p>
								<p th:if="${oneData.giftPackYn == 'Y'}">선물일 <span th:text="${oneData.ordDt}"></span></p>
							</div>
							<div class="goods_cont">
								<th:block th:if="${cancelList.cancelList}" th:each="cancel, status : ${cancelList.cancelList}" 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=${cancel.goodsCd}, optCd1=${cancel.goodsType == 'G056_N' ? cancel.optCd1 : ''}, ithrCd='IN21_03'" onclick="fnGoToGoodsDetail(this)">
													<span class="thumb">
														<img th:src="${imageUrl + '/' + cancel.sysImgNm + '?RS=100'}" width="100%" alt="">
													</span>
													<p>
														<span class="brand" th:text="${cancel.brandNm}"></span>
														<span class="tag primary" th:if="${cancel.shotDelvYn == 'Y'}">총알배송</span>
														<span class="tag" th:if="${cancel.shotDelvYn == 'N' and cancel.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
														<span class="tag" th:if="${cancel.selfGoodsYn == 'N'}">업체직배송</span>
													</p>
													<p>
														<span class="name" th:text="${cancel.goodsNm}"></span>
													</p>
												</a>
											</div>
											<div class="gd_opt">
												<div class="option_wrap">
													<span class="title sr-only">주문 옵션</span>
													<span class="option" th:if="${cancel.goodsType == 'G056_S'}" th:each="option, status : ${cancel.colorNmArr}" th:text="|${cancel.itemNmArr[status.index]} / ${option} / ${cancel.optCd2Arr[status.index]}|"></span>
													<span class="option" th:unless="${cancel.goodsType == 'G056_S'}" th:text="|${cancel.colorNm} / ${cancel.optCd2}|"></span>
												</div>
											</div>
											<div class="gd_calc">
												<p>
													<span class="count"><em th:text="${cancel.ordQty - cancel.cnclRtnQty}"></em>개</span>
												</p>
												<p>
													<span class="price_org" th:if="${(cancel.ordAmt - cancel.cnclRtnAmt) > (cancel.realOrdAmt + cancel.pntDcAmt + cancel.gfcdUseAmt)}"><em th:text="${#numbers.formatInteger(cancel.ordAmt - cancel.cnclRtnAmt, 1, 'COMMA')}"></em>원</span>
													<span class="price_sale"><em th:text="${#numbers.formatInteger(cancel.realOrdAmt + cancel.pntDcAmt + cancel.gfcdUseAmt, 1, 'COMMA')}"></em>원</span>
												</p>
											</div>
										</div>
										<div class="button_box">
											<div class="count_modify">
												<span class="txt">수량</span>
												<form class="form_wrap">
													<div class="form_field">
														<div class="select_custom select_count">
															<div class="combo">
																<input type="hidden" name="chgQty" value="0" th:attr="ordDtlNo=${cancel.ordDtlNo}, ordCanChgQty=${cancel.ordCanChgQty}"/>
																<div class="select">선택</div>
																<ul class="list">
																	<li class="selected" qty="0" onclick="fnChangeCancelQty(this);">선택</li>
																	<li th:if="${cancel.ordCanChgQty > 0}" th:each="num : ${#numbers.sequence(1,cancel.ordCanChgQty)}" th:attr="qty=${num}" th:text="${num}" onclick="fnChangeCancelQty(this);"></li>
																</ul>
															</div>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
									<div class="order_text">
										<p>취소하실 수량을 선택하신 후 주문 취소를 하실 수 있습니다.</p>
									</div>
								</div>
								<!-- //주문상품 -->
								</th:block>
							</div>
						</div>
						<h4 class="subH3">환불정보</h4>
						<div class="tbl type6">
							<table>
								<colgroup>
									<col width="50%">
									<col width="50%">
								</colgroup>
								<tr>
									<td>
										<dl>
											<div>
												<dt>환불 예정 금액</dt>
												<dd>
													<div class="price">
														<span class="return_total_price"><em id="returnAmt">0</em>원</span>
													</div>
												</dd>
											</div>
											<div class="include_item"> <!-- 할인항목 표기 class명 include_item -->
												<dt>상품 취소 금액</dt>
												<dd><em id="goodsCancelAmt">0</em>원</dd>
											</div>
											<div class="include_item">
												<dt>배송비</dt>
												<dd><em id="deliveryFee">0</em>원</dd>
											</div>
											<div class="include_item">
												<dt>할인 금액 차감</dt>
												<dd><em id="deductDcAmt">0</em>원</dd>
											</div>
										</dl>
									</td>
									<td>
										<dl>
											<div>
												<dt>환불 수단</dt>
												<dd th:if="${paymentInfo.pgGb == 'KCP'}" th:text="${paymentInfo.payMeansNm}"></dd>
												<dd th:if="${paymentInfo.pgGb == 'NAVER'}" th:text="|네이버페이|"></dd>
												<dd th:if="${paymentInfo.pgGb == 'KAKAO'}" th:text="|카카오페이|"></dd>
												<dd th:if="${paymentInfo.pgGb == 'PAYCO'}" th:text="|PAYCO|"></dd>
											</div>
											<div>
												<dt>결제 금액 환불</dt>
												<dd>
													<em id="refundPayAmt">0</em>원
												</dd>
											</div>
											<div>
												<dt>포인트 환불</dt>
												<dd>
													<em id="refundPoint">0</em>P
												</dd>
											</div>
											<div>
												<dt>상품권 환불</dt>
												<dd>
													<em id="refundGiftCard">0</em>원
												</dd>
											</div>
										</dl>
									</td>
								</tr>
							</table>
						</div>
						<div class="txt_info">
							<ul>
								<li>
									카드사로 결제 취소 요청이 전달된 후 환불까지는 평일 기준 3 ~7일이 소요될 수 있습니다.
								</li>
							</ul>
						</div>
						<div class="info_footer_area" id="addDeliveryFee" style="display:none">
							<p>
								<span id="addPayCost">2,500원</span> 배송비 추가 결제가 필요합니다.
								<input type="hidden" name="addPayCost"/>
							</p>
						</div>
						<div class="btn_footer_area">
							<button type="button" class="btn btn_default btn_md" onclick="cfnGoToPage(_PAGE_MYPAGE_ORDER_LIST);"><span>취소</span></button>
							<button type="button" id="btn_refund_pop" class="btn btn_dark btn_md" onclick="fnCancel();"><span>주문 취소</span></button>
						</div>
					</div>
				</form>
			</div>
			<!-- // CONT-BODY -->
		</div>

		<!-- 환불계좌 등록 팝업 -->
		<div class="modal fade refund_pop" id="refundPop" tabindex="-1" role="dialog" aria-labelledby="refundLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content"></div>
			</div>
			<a href="#close-modal" rel="modal:close" id="refundPop_close" class="close-modal">Close</a>
			<a href="#close-modal" rel="modal:close" class="close-modal ">Close</a>
		</div>
		<!-- //환불계좌 등록 팝업 -->
	</div>
<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
	let cancelList = [[${cancelList}]];
	let oneData = [[${oneData}]];
	let paymentInfo = [[${paymentInfo}]];
	var isLogin = [[${isLogin}]];
	let addPayCost = 0;

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

		// 마이페이지 location 설정
		fnSetMypageLocation('취소/반품/교환 내역', '_PAGE_MYPAGE_CRE_LIST', '취소 신청');

		// 셀렉트박스 활성화
		$(".myOrderView .part_goods .select_custom.select_count").each(function() {
			new sCombo(this);
		});
	});

	// 취소 처리
	var fnCancel = function() {
		// 취소수량 설정
		//fnChangeCancelQty();

		// 주문상세번호 및 취소 수량 설정
		let ordDtlNoArr = [];
		let cnclRtnReqQtyArr = [];
		let chkQty = 0;
		$.each($('#cancelForm input[name=chgQty]'), function(idx, item) {
			let chgQty = $(item).val();
			let ordDtlNo = $(item).attr('ordDtlNo');
			
			ordDtlNoArr.push(Number(ordDtlNo));
			cnclRtnReqQtyArr.push(Number(chgQty));
			chkQty += chgQty;
		});

		// 취소 수량 체크
		if (chkQty == 0) {
			mcxDialog.alert('취소하실 상품의 수량을 선택해주세요.');
			return false;
		}

		// 환불계좌 체크
		let accountNo = $('#cancelForm input[name=accountNo]').val();
		let accountNm = $('#cancelForm input[name=accountNm]').val();
		let bankCd = $('#cancelForm input[name=bankCd]').val();

		if (paymentInfo.payMeans == 'G014_20' && paymentInfo.payStat == 'G016_30' && (gagajf.isNull(accountNo) || gagajf.isNull(accountNm) || gagajf.isNull(bankCd))) {
			let data = {};
			data.ordNo = oneData.ordNo;
			data.accountNm = oneData.accountNm;

			let jsonData = JSON.stringify(data);

			$.ajax( {
				type		: "POST",
				url 		: '/mypage/refund/account/register/popup/form',
				data		: jsonData,
				dataType 	: 'html',
				beforeSend : function(xhr, settings) {
					xhr.setRequestHeader("AJAX"			, "true");
					xhr.setRequestHeader('Accept'		, 'application/json');
					xhr.setRequestHeader('Content-Type'	, 'application/json');
				},
				success 	: function(result) {
					$("#refundPop .modal-dialog .modal-content").html(result);
					$("#refundPop").modal("show");
				}
			});
			
			return false;
		}

		// 취소요청 데이터 설정
		let url = '/mypage/cancel';

		// 취소 처리
		let data = {};
		data.ordNo = oneData.ordNo;
		data.chgReason = 'G686_10';
		data.chgReasonNm = '고객변심';
		data.accountNo = accountNo;
		data.accountNm = accountNm;
		data.bankCd = bankCd;
		data.isCustomer = true;
		data.reqGbn = 'cnclComplete';
		data.pgTid = paymentInfo.pgTid;
		data.payAmt = paymentInfo.payAmt;
		data.ordDtlNoArr = ordDtlNoArr;
		data.cnclRtnReqQtyArr = cnclRtnReqQtyArr;

		let jsonData = JSON.stringify(data);

		// 취소 처리 가능 여부 조회
		gagajf.ajaxJsonSubmit('/mypage/wms/cancel/available', jsonData, function(result) {
			if (result.cancelYn == 'Y') {
				// 취소 처리
				gagajf.ajaxJsonSubmit(url, jsonData, function(result) {
					cfnGoToPage(_PAGE_MYPAGE_CRE_LIST);
				}, true);
			} else {
				mcxDialog.alert('이미 배송처리 되어 취소 처리에 실패 하였습니다.');
			}
		});
	}
	
	// 취소 수량 변경 이벤트 처리
	var fnChangeCancelQty = function(param) {
		let url = '/mypage/cancel/refund/amt/calculate';

		if (param != null) {
			$(param).parent().parent().find('input[name=chgQty]').val($(param).attr('qty'));
		}

		// 취소 수량 설정
		let cnclRtnReqQtyArr = [];
		let ordDtlNoArr = [];
		let ordCanChgQtyArr = [];
		$.each($('#cancelForm input[name=chgQty]'), function(idx, item) {
			let chgQty = $(item).val();
			let ordDtlNo = $(item).attr('ordDtlNo');
			let ordCanChgQty = $(item).attr('ordCanChgQty');
			
			cnclRtnReqQtyArr.push(Number(chgQty));
			ordDtlNoArr.push(Number(ordDtlNo));
			ordCanChgQtyArr.push(Number(ordCanChgQty));
		});

		let data = {};
		data.ordNo = oneData.ordNo;
		data.ordDtlNoArr = ordDtlNoArr;
		data.cnclRtnReqQtyArr = cnclRtnReqQtyArr;

		let jsonData = JSON.stringify(data);

		gagajf.ajaxJsonSubmit(url, jsonData, function (result) {
			let refundPoint = Number(result.spanPntDcAmt);							// 환불 포인트 금액
			let refundGiftCard = Number(result.spanGfcdUseAmt);						// 환불 상품권 금액
			let spanCnclRtnAmt = Number(result.spanCnclRtnAmt);						// 환불 상품 금액
			let spanCpnDcAmt = Number(result.spanCpnDcAmt);							// 쿠폰 할인 차감 금액
			let spanTmtbDcAmt = Number(result.spanTmtbDcAmt);						// 다다익선 할인 차감 금액
			let spanPrePntDcAmt = Number(result.spanPrePntDcAmt);					// 선포인트 할인 차감 금액
			let sumDeliveryFee = Number(result.sumDeliveryFee);						// 원주문배송비
			let spanTotDeliveryFee = Number(result.spanTotDeliveryFee);				// 추가배송비 (무료배송비 허들 깨져서 발생한 배송비)
			let spanRefundAmt = Number(result.spanRefundAmt);						// 환불 예정 금액
			let goodsCancelAmt = spanCnclRtnAmt;									// 상품취소금액
			let deliveryFee = sumDeliveryFee - spanTotDeliveryFee;					// 배송비 (마지막 취소 시 돌려줘야할 원주문 배송비 - 추가배송비)
			let deductDcAmt = 0 - spanCpnDcAmt - spanTmtbDcAmt - spanPrePntDcAmt;	// 할인금액 차감 (쿠폰+다다익선+선포인트)
			let refundPayAmt = spanRefundAmt;										// 결제금액 환불 (환불상품금액 - 할인차감금액 - 배송비)
			let returnAmt = refundPayAmt + refundPoint + refundGiftCard;			// 환불예정금액
			
			// 추가배송비 영역 설정
			if (refundPayAmt < 0) {
				//refundPayAmt = spanRefundAmt;
				//$('#addDeliveryFee').css('display', '');
				//$('#addPayCost').text(spanTotDeliveryFee.addComma() + '원');
				addPayCost = spanTotDeliveryFee;
			} else {
				addPayCost = 0;
			}
			
			// 금액 설정
			$('#returnAmt').text(returnAmt.addComma());
			$('#goodsCancelAmt').text(goodsCancelAmt.addComma());
			$('#deliveryFee').text(deliveryFee.addComma());
			$('#deductDcAmt').text(deductDcAmt.addComma());
			$('#refundPayAmt').text(refundPayAmt.addComma());
			$('#refundPoint').text(refundPoint.addComma());
			$('#refundGiftCard').text(refundGiftCard.addComma());
		});
	}

	// 환불계좌 등록 콜백 처리
	var fnRegisterAccountCallback = function(result) {
		// 환불계좌 정보 설정
		$('#cancelForm input[name=accountNo]').val(result.accountNo);
		$('#cancelForm input[name=accountNm]').val(result.accountNm);
		$('#cancelForm input[name=bankCd]').val(result.bankCd);

		// 취소처리
		fnCancel();
	}
</script>

</th:block>

</body>
</html>