style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!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="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">
									<div class="paymentinfo">
										<div class="payinfo_blk">
											<a href="javascript:void(0);">개인정보 제공에 대한 동의<span>보기</span></a>
											<div class="infotxt">
												개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.
											</div>
										</div>
										<div class="payinfo_blk">
											<a href="javascript:void(0);">결제대행 서비스 약관 동의<span>보기</span></a>
											<div class="infotxt">
												결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.
										</div>
									</div>
								</div>
								<div class="agree_payment">
									위 주문내역을 확인 하였으며, 회원 본인은 결제에 동의합니다.
								</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.brandEnm} + ' ' + ${goods.brandKnm}"></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">
//결재하기
$("#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()
		,"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>