style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
							<!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/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : OrderAddPaymentWeb.html
 * @desc	: 추가결제화면 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.13   jsh77b	 최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">

<!-- payment.js -->
<script type="text/javascript" th:src="${@environment.getProperty('pg.kcp.js.url')}" src=""></script>
<script type="text/javascript" src="/biz/payment.js"></script>

<!-- 주문정보form -->
<form id="order_info" name="order_info" method="post" action="/order/addPay/result/response" style="display:none"></form>
<!-- //주문정보form -->

<form class="form_wrap" name="addPayForm" id="addPayForm">
	<input type="hidden" name="refundAmt" th:value="${refundAmt}">
	<input type="hidden" name="ordNo" th:value="${ordNo}">
	<input type="hidden" name="ordNm" th:value="${ordNm}">
	<input type="hidden" name="ordPhnno" th:value="${ordPhnno}">
	<input type="hidden" name="addPayCost" th:value="${addPayCost}">
	<input type="hidden" name="ordChgSq" th:value="${ordChgSq}">
	
	<input type="hidden" name="chgGb" th:value="${chgGb}">
	<input type="hidden" name="chgerPhnno" th:value="${chgerPhnno}">
	<input type="hidden" name="chgerNm" th:value="${chgerNm}">
	<input type="hidden" name="goodsNm" th:value="${goodsNm}"> 
	
	<!--  container -->
	<div id="container" class="container od">
		<div class="wrap">
			<div class="content odPayment"> <!-- 페이지특정 클래스 = odPayment 클래스 추가 -->
				<div class="cont_head">
					<h2>추가결제</h2>
				</div>
				<div class="cont_body">
					<!-- CONT-BODY -->
					<div class="od_cont">
							<div class="sec_body">
								<div class="extra_pay">
									<div class="tit_pay">
										<span>결제수단 선택</span>
									</div>
									<div class="area_paymethod">
										<div class="form_field">
											<div class="paymethod_box">
												<ul class="sel_method">
													<li>
														<input type="radio" name="rdi-paynormal" id="payCreditCard" class="KCP" value="KCP|G014_30" checked="checked">
														<label for="payCreditCard"><span>신용카드</span></label>
													</li>
													<li>
														<input type="radio" name="rdi-paynormal" id="payCellphone" class="KCP" value="KCP|G014_60">
														<label for="payCellphone"><span>휴대폰 결제</span></label>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								
								<div class="area_paymentinfo">
									<!-- 입점업체가 있을때 노출 -->
									<th:block th:if="${delvCnt} > 0">
										<div class="paymentinfo">
											<!-- 210421_수정 : 테이블 추가. -->
											<div class="payinfo_blk">
												<a href="javascript:void(0)">
													개인정보 제공에 대한 동의
													<span>보기</span>
												</a>
												<div class="infotxt">
													STYLE24는 다음과 같이 회원님의 개인정보를 제3자에게 제공합니다.
													<table>
														<colgroup>
															<col width="25%">
															<col width="*">
															<col width="25%">
															<col width="25%">
														</colgroup>
														<thead>
															<tr>
																<th>제공받는 자</th>
																<th>제공하는 항목</th>
																<th>제공 목적</th>
																<th>보유 및 이용기간</th>
															</tr>
														</thead> 
														<tbody>
															<tr>
																<td>
																	<th:block th:each="delvFeeCd, i : ${delvFeeCdList}">
																		<th:block th:unless="${delvFeeCd.delvFeeCd} == 'WMS' or ${delvFeeCd.delvFeeCd} == 'WMS_FREE'">
																			<th:block th:if="${i.count == #lists.size(delvFeeCdList)}">
																				<th:block th:text="|${delvFeeCd.supplyCompNm}|"></th:block>
																			</th:block>
																			<th:block th:if="${i.count < #lists.size(delvFeeCdList)}">
																				<th:block th:text="|${delvFeeCd.supplyCompNm},|"></th:block>
																			</th:block>
																		</th:block>
																	</th:block>
																</td>
																<td>
																	성명, 주소, 연락처
																</td>
																<td>
																	주문상품의 배송, 고객상담 및 불만처리
																</td>
																<td>
																	이용목적 달성 시 까지
																</td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</th:block>
									<!-- //입점업체가 있을때 노출 -->
									<div class="agree_payment">
										위 주문내역을 확인 하였으며, 회원 본인은 결제에 동의합니다. (전자상거래법 제 8조 제2항) <!-- 210421_수정 : 텍스트 수정. -->
									</div>
								</div>
							<div class="area_paybtn">
								<div class="form_field">
									<button type="button" class="btn btn_primary btn_block" id="btn_payment">
										<span>동의 후 <em th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}원|"></em> 결제하기</span>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="od_side">
						<div class="area_order">
							<div class="tit_box"><h3>결제내역</h3></div>
							<div class="od_item_box">
								<!-- 반품상품 내역 -->
								<div class="part_dlvr">
									<th:block th:if="${chGb} == 'G680_20'">
										<h4 class="sr-only">반품상품</h4>
									</th:block>
									<th:block th:if="${chGb} == 'G680_30'">
										<h4 class="sr-only">반품상품</h4>
									</th:block>
									<th:block th:if="${chGb} == 'G680_40'">
										<h4 class="sr-only">교환상품</h4>
									</th:block>
									<div class="gd_list">
										<th:block th:each="goods, i : ${orderAddPayGoodsList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
										<div class="item_gd">
											<figure>
												<span class="thumb">
													<img th:src="${imageUrl + '/' + goods.sysImgNm}" src="/" width="100%" alt="">
												</span>
												<figcaption>
													<div class="brand" th:text="${goods.brandGroupNm}"></div>
													<div class="name goodsNm" th:text="${goods.goodsNm}"></div>
													<div class="option" th:each="colorNm, index : ${goods.colorNmArr}">
														<span th:text="${colorNm}+'/'+${goods.optCd2Arr[index.index]}"></span> 
													</div>
													<div class="option">
														<span>수량:<em th:text="${goods.chgQty}"></em>개</span>
													</div>
													<div class="price">
														<span class="selling_price" th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.chgQty, 1, 'COMMA')}"></span>
													</div>
												</figcaption>
											</figure>
										</div>
										</th:block>
									</div>
								</div>
								<!-- //반품상품 내역 -->
							</div>
							<div class="od_amount_box">
								<dl>
									<div>
										<dt>환불 상품금액</dt>
										<dd><em th:text="|${#numbers.formatInteger(refundAmt, 1, 'COMMA')}|"></em>원</dd>
									</div>
									<div>
										<dt>반품/교환 배송비</dt>
										<dd><em th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}|"></em>원</dd>
									</div>
								</dl>
							</div>
							<div class="totalprice_box">
								<dl>
									<dt>총 결제 예정 금액</dt>
									<dd><span th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}|"></span>원</dd>
								</dl>
								<p class="info_extra">
									환불할 상품금액이 반품/교환 배송비보다 적을<br>
									경우 배송비 를 결제하신 후 남은 상품금액이<br>
									환불처리 됩니다.
								</p>
							</div>
						</div>
					</div>
					<!-- // CONT-BODY -->
				</div>
			</div>
		</div>
	</div>
	<!-- // container -->	
</form>

<script th:inline="javascript">
// 개인정보동의 열고닫기
$(document).on('click','.area_paymentinfo .payinfo_blk a',function(e){
	e.preventDefault();
	$(this).parents('.payinfo_blk').toggleClass('on');
	$(this).parents('.payinfo_blk').siblings('.payinfo_blk').removeClass('on'); //210428_수정 : 아코디언 추가.
	var privacyToggle = $(this).find('span');
	$(privacyToggle).text($(privacyToggle).text() == '보기' ? '닫기' : '보기');
	return false;
});

//결제하기
$("#btn_payment").on("click", function(){
	var paynormal			= $("input[name='rdi-paynormal']:checked").val();
	var paynormalArr		= paynormal.split("|");
	var pgGb				= paynormalArr[0];
	var payMeans			= paynormalArr[1];
	
	// 주문데이타 생성
	var orderData = {
		"pgGb"					: pgGb
		,"payMeans"				: payMeans // 네이버페이, 카카오페이
		,"ordNo"				: $("#addPayForm input[name=ordNo]").val()
		,"ordNm"				: $("#addPayForm input[name=ordNm]").val()
		,"ordPhnno"				: $("#addPayForm input[name=ordPhnno]").val()
		,"addPayCost"			: $("#addPayForm input[name=addPayCost]").val()
		,"ordChgSq"				: $("#addPayForm input[name=ordChgSq]").val()
		,"chgGb"				: $("#addPayForm input[name=chgGb]").val()
		,"chgerPhnno"			: $("#addPayForm input[name=chgerPhnno]").val()
		,"chgerNm"				: $("#addPayForm input[name=chgerNm]").val()
		,"goodsNm"				: $("#addPayForm input[name=goodsNm]").val()
	};
	
	$.ajax( {
		type		: "POST",
		url 		: '/order/addPayment',
		data		: JSON.stringify(orderData),
		dataType 	: 'html',
		beforeSend : function(xhr, settings) {
			xhr.setRequestHeader("AJAX"			, "true");
			xhr.setRequestHeader('Accept'		, 'application/json');
			xhr.setRequestHeader('Content-Type'	, 'application/json');
		},
		success 	: function(result) {
			// 결재정보로드
			$("#order_info").html(result);
			
			var pgGb = $("#order_info input[name=pgGb]").val();
			
			if (pgGb == "NAVER") {
				fnNaverPaymentReady();
			} else if (pgGb == "KAKAO") {
				fnKakaoPaymentReady();
			} else if (pgGb == "KCP" || pgGb == "PAYCO") {
				jsf__pay(document.order_info);
			}
		}
	});
});

</script>
</th:block>
</body>
</html>