Files
sake/src/main/webapp/WEB-INF/views/sopmal/ordr/NmbrPurchsC.jsp
2025-10-29 17:08:05 +09:00

2393 lines
130 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>
<%--
Class Name : NmbrPurchsC.jsp
Description : 비회원 구매하기
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-04-11 김혜인 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
<script src="<c:url value='/js/dlvylc/dlvylc.js'/>"></script>
<script>
$(document).ready(function() {
fn_init();
fn_event();
fn_modal_init();
});
/* ********************************************************
* 초기 설정
**********************************************************/
const fn_modal_init = function() {
$('.gcpayGuideSlick').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
});
$('#gcpay-info').on($.modal.OPEN, function (event, modal) {
$('.gcpayGuideSlick').slick('setPosition').slick(); // 모달 팝업 열었을 때 slick 재설정
});
// gcpay 사용안할 경우 기본 세팅
const gcpayAt = '${gcpayCardUseAt ? 'Y' : 'N'}';
const setleTy = $('#setleSetupTyCd').val();
const setleTyCd = (setleTy==='01')?'#pg04':'#pg03';
if (gcpayAt === 'N') {
$(setleTyCd).click();
}
}
const fn_init = function() {
//휴대폰번호 포매팅
if($("#lagacyMbtlnb").text() !== ''){
let mbtlnb = $("#lagacyMbtlnb").text();
$("#lagacyMbtlnb").text(fn_format_mbtlnb(mbtlnb));
}
$("#phoneAuthBtn").on("click",function(){
fn_sending_number();
});
localStorage.clear();
const sesionId = $('#sesionId').val();
const sopmalCd = $('#sopmalCd').val();
const cartDvCd = $('#cartDvCd').val();
let cartInnbs = $('#cartInnbs').val().replace(/\[|\]/g, '').split(', ');
let param = {
'sesionId': sesionId,
'sopmalCd': sopmalCd,
'cartDvCd': cartDvCd,
'cartInnbs' : cartInnbs
}
fn_get_goods_list(param);
fn_get_setle_amt();
}
/**
* 상품 목록 비교 함수
* @param list1
* @param list2
* @returns {boolean}
*/
const fn_compare_goodslists = function(list1, list2) {
// 리스트 길이 체크
if (list1.length !== list2.length) {
return false;
}
// 상품별 값 비교
for (let i = 0; i < list1.length; i++) {
const goods1 = list1[i];
const goods2 = list2[i];
if (
goods1.sopmalCd !== goods2.sopmalCd || // 쇼핑몰코드
goods1.goodsInnb !== goods2.goodsInnb || // 상품고유번호
goods1.goodsOptnInnb !== goods2.goodsOptnInnb || // 상품옵션 고유번호
goods1.qy !== goods2.qy // 주문 수량
) {
return false; // 상품 정보 중 하나로 다르면 false
}
}
return true;
}
/* ********************************************************
* 이벤트 설정
**********************************************************/
const fn_event = function() {
/* ****************************
* 공통
******************************/
/* input 숫자만 입력 */
$(document).on('input', '.number-only', function() {
$(this).val(($(this).val().replace(/[^0-9]/g, '')).replace(/^0+/, ''));
});
//배송지정보 > 배송 요청사항 직접입력 글자수제한 숫자표시
$('.deliveryRequestSelect').on("change", function () {
const value = $(this).val();
const input = $('input[name="dlvyMssageCn"]')
if ('write' === value) {
$('.deliveryRequestDetail').show();
$(input).val('');
} else {
$('.deliveryRequestDetail').hide();
$(input).val(value.trim());
}
});
// 배송지정보 > 배송 요청사항 직접입력 글자수제한 숫자표시
$('input[name="dlvyMssageCn"]').on("input", function () {
$(".inputLimit__current").text($(this).val().length);
});
/* 배송지정보 > 우편번호 찾기 버튼 선택 이벤트 */
$(document).on('click', '#btnPost', function() {
const button = $(this);
new daum.Postcode({
oncomplete: function (data) {
const postcode = data.zonecode;
const roadAddr = data.roadAddress;
const jibunAddress = data.jibunAddress;
let addressType = '';
let extraRoadAddr = '';
// userSelectedType R/J 검색 결과에서 사용자가 선택한 주소의 타입(R : 도로명, J : 지번)
if (data.userSelectedType === 'R') {
addressType = 'street';
} else {
addressType = 'zibun';
}
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if (data.buildingName !== '' && data.apartment === 'Y') {
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if (extraRoadAddr !== '' && roadAddr !== '') {
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
fn_set_dlvylc({
postcode:postcode,
roadAddress:roadAddr,
jibunAddress:jibunAddress,
addressType:'street' === addressType ? '01' : '02',
extraAddress:extraRoadAddr
}, button);
}
}).open();
// 배송 요청사항 직접입력 글자수제한 숫자표시
$('input[name="btnAllUseMlgAmt"]').on("input", function () {
$(".inputLimit__current").text($(this).val().length);
});
});
/* 주문자 정보 > 휴대폰 인증 버튼 선택 이벤트 */
$('#phoneAuthBtn').click(function () {
const div = $(this).closest('div');
const mbtlnb = $(div).find('#mbtlnb').val();
if (fn_is_empty(mbtlnb)) {
alert('휴대폰 번호를 입력해 주십시요.');
return false;
}
$('#phoneAuthContent').show();
});
/* 주문자 정보 > 휴대폰 인증 번호 발송 버튼 선택 이벤트 */
let timer;
$('.sendCrtfcNb').click(function () {
$('#timer').show();
$('#sendCrtfcConfirm').prop('disabled', false);
clearInterval(timer);
let time = 180;
timer = setInterval(function () {
if (time > 0) {
time = time - 1;
let min = Math.floor(time / 60);
let sec = String(time % 60).padStart(2, "0");
$('#timer').text(min + ':' + sec);
} else {
$('#sendCrtfcConfirm').prop('disabled', true);
}
}, 1000);
});
/* 결제정보 > 결제수단 버튼 선택 이벤트 */
$('input[name="pg"]').on('click', function() {
const form = $(this).closest('#setleForm')
const id = $(this).attr('id');
const pgCmpnyNm = $(this).val();
$(form).find('.pgContent').hide();
$(form).find('#' + id + 'Content').show();
$(form).find('#setleSetupTyCd').val() === '01' ? $(form).find('#pg04Content').show() : $(form).find('#pg03Content').show();
$('.order-method-normal__btn').removeClass('active');
$(form).find('#pgCmpnyNm').val(pgCmpnyNm);
if ('pg01' === id || 'pg02' === id) {
if ('pg02' === id) {
$('#gc-pay-bank-cash-receipt').prop('checked', true).trigger("click");
$(form).find('#gc-pay-bank-cash-receipt').on('click', function () {
const checked = $(this).is(':checked');
if (checked) {
$('#' + $(this).attr('id') + '-content-inner').show();
fn_set_csh_rcipt_issu($(this).attr('id'));
} else {
$('#' + $(this).attr('id') + '-content-inner').hide();
}
});
}
$(form).find('#setleTyCd').val('pg01' === id ? '01' : '03');
$('.bankSlideW, .cardSlideW').slick('setPosition');
} else if('pg05' === id){
//현금영수증 폼 show
$('#transfer-cash-receipt').prop('checked', true).trigger("click");
$(form).find('#transfer-cash-receipt').on('click', function () {
const checked = $(this).is(':checked');
if (checked) {
$('#' + $(this).attr('id') + '-content-inner').show();
fn_set_csh_rcipt_issu($(this).attr('id'));
} else {
$('#' + $(this).attr('id') + '-content-inner').hide();
}
});
$(form).find('#setleTyCd').val('03');
} else {
$(form).find('#setleTyCd').val('');
$('.order-method-normal__btn').removeClass('active');
$('.order-method-normal__content').hide();
}
});
/* 결제정보 > 일반결제 > 결제수단 버튼 선택 이벤트 */
$('.order-method-normal__btn').on('click', function() {
const index = $(this).index();
const content = $('.order-method-normal__content');
$('#setleSetupTyCd').val() === '01' ? $('#pg04').click() : $('#pg03').click();
$('.order-method-normal__btn').removeClass('active');
$(this).addClass('active');
$(content).hide();
$(content[index]).show();
const id = $(this).attr('id');
const setleTyCd = $(this).attr('name');
const form = $(this).closest('#setleForm')
$(form).find('#isKeyIn').val('N');
if ('tosspay' === id || 'naverpay' === id || 'kakaopay' === id) {
$(form).find('#pgCmpnyNm').val(id);
$(form).find('#setleTyCd').val('01');
} else {
$(form).find('#pgCmpnyNm').val($('input[name="pg"]:checked').val());
if ('hndwr-card' !== id) {
if ('payco' === id || 'card' === id) {
$('#' + id + '-content').show();
} else {
fn_set_csh_rcipt_issu(id);
}
} else {
$(form).find('#isKeyIn').val('Y');
$('#hndwr-card-content-inner').find('.order-method-hndwr-card').val('');
}
$(form).find('#setleTyCd').val(setleTyCd);
}
});
/* 결제예정금액 > 약관 전체동의 선택 이벤트 */
$('#termCheckAll').click(function () {
if ($('#termCheckAll').is(':checked')) {
$('.termCheck').prop('checked', true);
} else {
$('.termCheck').prop('checked', false);
}
});
/* 결제예정금액 > 약관 전체 선택 이벤트 */
$('.termCheck').click(function () {
if ($('.termCheck').length === $('.termCheck:checked').length) {
$('#termCheckAll').prop('checked', true);
} else {
$('#termCheckAll').prop('checked', false);
}
});
/* 결제예정금액 > 구매하기 버튼 선택 이벤트 */
$('#btnBuy').click(function () {
const data = fn_validate();
if (!data) {
return false;
}
disableButton('#btnBuy');
$.ajax({
type: 'post',
contentType: 'application/json',
url: '<c:url value="/sopmal/ordr/selectBlclist"/>',
data: JSON.stringify(data),
success: function (resultData) {
let result = JSON.parse(resultData.resBody.result);
if(result.result == 'Y') {
alert(result.message);
}else {
$.ajax({
type: 'post',
contentType: 'application/json',
url: '<c:url value="/sopmal/ordr/insertOrder"/>',
data:JSON.stringify(data),
success : function(html) {
$('#setleDiv').html(html);
},
error:function(data) {
enableButton('#btnBuy');
alert('<spring:message code="error.internal-server"/>');
}
});
}
}
});
});
$('.ordrrInfoSet').on('change', function () {
if ($(this).is(':checked')) {
$('input[name="recpntNm"]').val($('#mbrNm').val());
$('input[name="recpntMbtlnb"]').val($('#mbtlnb').val());
} else {
$('input[name="recpntNm"]').val('');
$('input[name="recpntMbtlnb"]').val('');
}
});
}
/* ********************************************************
* function
**********************************************************/
/* 배송지정보 > 신규 배송지 정보 세팅 */
const fn_set_dlvylc = function(data) {
const form = $('#dlvylcForm');
$(form).find('input[name="dlvylcZip"]').val(data.postcode);
$(form).find('input[name="dlvylcAdresDvCd"]').val(data.addressType);
$(form).find('input[name="dlvylcLnbAdres"]').val(data.jibunAddress);
$(form).find('input[name="dlvylcRnmAdres"]').val(data.roadAddress);
$(form).find('input[name="dlvylcAdres"]').val('01' === $(form).find('input[name="dlvylcAdresDvCd"]').val() ? $(form).find('input[name="dlvylcRnmAdres"]').val() : $(form).find('input[name="dlvylcLnbAdres"]').val());
}
/* 주문 상품 > 상품목록 조회 */
const fn_get_goods_list = function(param, obj) {
$.ajax({
type : 'post',
contentType: 'application/json',
url : '<c:url value="/sopmal/ordr/selectNmbrOrderGoodsList"/>',
data : JSON.stringify(param),
dataType: 'json',
async : false,
success : function(data) {
if (data.resBody != null) {
const result = JSON.parse(data.resBody.result);
if (!fn_is_empty(result.message)) {
alert(result.message);
if (!fn_is_empty(obj)) {
$(obj).val('0').attr('selected', true).niceSelect('update');
}
return false;
}
localStorage.setItem('goodsList', JSON.stringify(result.goodsList));
fn_set_goods_list(result.goodsList);
fn_set_prsnt_list(result.prsnt);
}
},
error: function(data) {
alert('<spring:message code="error.internal-server"/>');
}
});
}
/* 주문 상품 > 상품목록 세팅 */
const fn_set_goods_list = function(data) {
const tbody = $('#goodsList');
const sopmalCd = $('#sopmalCd').val();
const cdnurl = $('#cdnurl').val()
let tr = '';
if (!fn_is_empty(data)) {
for (let i = 0; i < data.length; i++) {
const goods = data[i];
tr += '<tr class="ordrGoods">';
tr += ' <td>';
tr += ' <div class="cartItem">';
tr += ' <div class="cartItem__image">';
tr += ' <a href="/sopmal/goods/selectGoodsDtl?sopmalCd=' + sopmalCd + '&goodsInnb=' + goods.goodsInnb + '">';
tr += ' <img src="' + cdnurl + goods.goodsImgCours + '" onerror="this.src=\'/pc/images/image_placeholder.png\'" alt="' + goods.goodsNm + '">';
tr += ' </a>';
tr += ' </div>';
tr += ' <div class="cartItem__productInfo">';
tr += ' <a href="javascript:void(0);" class="cartItem__productTitle">' + goods.goodsNm + '</a>';
tr += ' <span class="cartItem__productOption"><span class="option-badge">옵션</span> ' + goods.optn + '</span>';
if (!fn_is_empty(goods.inputOptnText)) {
tr += ' <span class="cartItem__productOption">' + goods.inputOptnText + '</span>';
}
tr += ' </div>';
tr += ' </div>'
tr += ' <input type="hidden" class="dplctLmttCoupon" value="' + fn_nvl(goods.dplctLmttCoupon, '') + '"/>';
tr += ' <input type="hidden" class="dplctLmttEvtnm" value="' + fn_nvl(goods.dplctLmttEvtnm, '') + '"/>';
tr += ' <input type="hidden" class="goodsInnb" value="' + fn_nvl(goods.goodsInnb, '') + '"/>';
tr += ' <input type="hidden" class="goodsOptnInnb" value="' + fn_nvl(goods.goodsOptnInnb, '') + '"/>';
tr += ' <input type="hidden" class="inputOptn" value="' + fn_nvl(goods.inputOptn, '') + '"/>';
tr += ' <input type="hidden" class="inputOptnText" value="' + fn_nvl(goods.inputOptnText, '') + '"/>';
tr += ' <input type="hidden" class="qy" value="' + fn_nvl(goods.qy, '') + '"/>';
tr += ' <input type="hidden" class="usedCoupons" value="' + fn_nvl(goods.usedCoupons, '') + '"/>';
tr += ' </td>';
tr += ' <td>';
tr += ' <span>' + goods.qy + '</span>';
tr += ' </td>';
tr += ' <td>';
tr += ' <span class="cartItem__discountPrice"><span class="cartItem__discountMinus">(-)</span><span class="comma">' + (goods.dscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
tr += ' </td>';
tr += ' <td>';
tr += ' <span class="cartItem__beforePrice"><span class="comma">' + (goods.subSlepric).toLocaleString() + '</span>원</span>';
tr += ' <span class="cartItem__afterPrice"><span class="comma">' + (goods.dscntApplyAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
tr += ' </td>';
tr += '</tr>';
}
} else {
tr += '<tr><td colSpan="100%"><spring:message code="common.nodata"/></td></tr>';
}
$(tbody).empty().append(tr);
$(tbody).closest('table').find('.select-box select').niceSelect();
}
/* 주문 상품 > 사은품 목록 세팅 */
const fn_set_prsnt_list = function(data) {
if (!fn_is_empty(data)) {
const tbody = $('#prsntList');
const keys = Object.keys(data);
const cdnurl = $('#cdnurl').val();
let tr = '';
for (let j = 0; j < keys.length; j++) {
const key = keys[j];
const prsntList = data[key];
for (let i = 0; i < prsntList.length; i++) {
const prsnt = prsntList[i];
tr += '<tr class="prsnt_' + key + '">';
tr += ' <td>';
tr += ' <div class="cartItem">';
tr += ' <div class="cartItem__image">';
tr += ' <a href=""><img src="' + cdnurl + prsnt.goodsImgCours + '" onerror="this.src=\'/pc/images/image_placeholder.png\'" alt="' + prsnt.goodsNm + '"/>"></a>';
tr += ' </div>';
tr += ' <div class="cartItem__productInfo">';
tr += ' <a href="javascript:void(0);" class="cartItem__productTitle">' + prsnt.goodsNm + '</a>';
tr += ' </div>';
tr += ' </div>';
tr += ' <input type="hidden" class="goodsInnb" value="' + fn_nvl(prsnt.goodsInnb, '') + '"/>';
tr += ' <input type="hidden" class="goodsOptnInnb" value="' + fn_nvl(prsnt.goodsOptnInnb, '') + '"/>';
tr += ' <input type="hidden" class="goodsNm" value="' + fn_nvl(prsnt.goodsNm, '') + '"/>';
tr += ' <input type="hidden" class="goodsImgCours" value="' + fn_nvl(prsnt.goodsImgCours, '') + '"/>';
tr += ' <input type="hidden" class="evtInnb" value="' + fn_nvl(prsnt.evtInnb, '') + '"/>';
tr += ' <input type="hidden" class="provdCnt" value="' + fn_nvl(prsnt.provdCnt, '') + '"/>';
tr += ' <input type="hidden" class="isRcvPrsnt" value="Y"/>';
tr += ' </td>';
tr += ' <td><span>' + (prsnt.provdCnt).toLocaleString() + '</span></td>';
if (i === 0) {
tr += ' <td rowspan="' + prsntList.length + '">';
tr += ' <div class="custom-radio-container">';
tr += ' <div class="custom-radio">';
tr += ' <input type="radio" name="isRcvPrsnt' + prsnt.evtInnb + '" id="Y' + prsnt.evtInnb + '" value="Y" class="rcvPrsnt" checked>';
tr += ' <label for="Y' + prsnt.evtInnb + '">수령</label>';
tr += ' </div>';
tr += ' <div class="custom-radio">';
tr += ' <input type="radio" name="isRcvPrsnt' + prsnt.evtInnb + '" id="N' + prsnt.evtInnb + '" value="N" class="rcvPrsnt">';
tr += ' <label for="N' + prsnt.evtInnb + '">미수령</label>';
tr += ' </div>';
tr += ' </div>';
tr += ' </td>';
}
tr += '</tr>';
}
}
$(tbody).empty().append(tr);
$(tbody).closest('table').find('.select-box select').niceSelect();
/* 수령여부 라디오 선택 이벤트 */
$(tbody).find('.rcvPrsnt').on('click', function () {
const evtInnb = $(this).closest('tr').find('.evtInnb').val();
const isRcvPrsnt = $(this).val();
$(this).closest('table').find('.prsnt_' + evtInnb).each(function() {
$(this).find('.isRcvPrsnt').val(isRcvPrsnt);
});
});
} else {
$('#prsnt').hide();
}
}
/* 주문 상품 > 사은품 데이타 세팅 */
const fn_get_prsnt_data = function(goodsInnb) {
const rows = $('#prsntList').find('[class*=prsnt_]');
let prsnts = [];
$(rows).each(function() {
const goodsInnb = $(this).find('.goodsInnb').val();
const goodsOptnInnb = $(this).find('.goodsOptnInnb').val();
const goodsNm = $(this).find('.goodsNm').val();
const goodsImgCours = $(this).find('.goodsImgCours').val();
const evtInnb = $(this).find('.evtInnb').val();
const provdCnt = $(this).find('.provdCnt').val();
const isRcvPrsnt = $(this).find('.isRcvPrsnt').val();
let prsnt = {
'goodsInnb' : Number(goodsInnb),
'goodsOptnInnb' : Number(goodsOptnInnb),
'goodsNm' : goodsNm,
'goodsImgCours' : goodsImgCours,
'evtInnb' : Number(evtInnb),
'provdCnt' : Number(provdCnt),
'isRcvPrsnt' : isRcvPrsnt
}
prsnts.push(prsnt);
});
if (!fn_is_empty(goodsInnb)) {
return prsnts.filter(data => data['goodsInnb'] === goodsInnb)[0];
}
return prsnts;
}
/* 결제정보 > 일반결제 현금영수증 화면 세팅*/
const fn_set_csh_rcipt_issu = function(id) {
const div = $('#' + id + '-content-inner');
let table = '';
if ('gc-pay-bank-cash-receipt' !== id && 'transfer-cash-receipt' !== id) {
table += '<table class="table-transparent" id="payCashReceipt">';
table += ' <colgroup>';
table += ' <col style="width:16%;">';
table += ' <col style="width:auto;">';
table += ' </colgroup>';
table += ' <tbody>';
if ('bank' === id) {
table += ' <tr>';
table += ' <th>입금자명</th>';
table += ' <td>';
table += ' <div class="td-inner">';
table += ' <input type="text" name="rcpmnyerNm" id="rcpmnyerNm" class="order-method-bank input-text md" maxlength="15" title="입금자명" placeholder="입금자명">';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
table += ' <tr>';
table += ' <th>입금은행</th>';
table += ' <td>';
table += ' <div class="td-inner">';
table += ' <input type="hidden" name="dpstrNm" id="dpstrNm" value="">';
table += ' <input type="hidden" name="bnnkNm" id="bnnkNm" value="">';
table += ' <div class="select-box">';
table += ' <select name="rcpmnyAcntnb" id="rcpmnyAcntnb" class="order-method-bank md" title="입금은행">';
table += ' <option value="" selected>입금은행을 선택해 주세요.</option>';
table += ' </select>';
table += ' </div>';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
}
table += ' <tr>';
table += ' <th>발급정보</th>';
table += ' <td>';
table += ' <div class="td-inner">';
table += ' <div class="custom-radio-container">';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="cshRciptIssuAt" id="cshRciptIssuAtN_' + id + '" value="" checked>';
table += ' <label for="cshRciptIssuAtN_' + id + '">발급안함</label>';
table += ' </div>';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="cshRciptIssuAt" id="cshRciptIssuAtY_' + id + '" value="01" >';
table += ' <label for="cshRciptIssuAtY_' + id + '">현금영수증</label>';
table += ' </div>';
table += ' </div>';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
table += ' <tr>';
table += ' <th></th>';
table += ' <td>';
table += ' <div id="cshRciptIssu" style="display: none">';
table += ' <div>';
table += ' <span class="visually-hidden">발급안함</span>';
table += ' </div>';
table += ' <div class="td-inner vertical">';
table += ' <div class="custom-radio-container cashReceipt-borderTop">';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="issuTrgetDvCd" id="issuTrgetDvCd0_' + id + '" value="01" checked>';
table += ' <label for="issuTrgetDvCd0_' + id + '">개인 소득공제</label>';
table += ' </div>';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="issuTrgetDvCd" id="issuTrgetDvCd1_' + id + '" value="02">';
table += ' <label for="issuTrgetDvCd1_' + id + '">사업자 지출증빙</label>';
table += ' </div>';
table += ' </div>';
table += ' <div class="w-full">';
table += ' <input type="text" name="issuTrgetMbtlnb" id="issuTrgetMbtlnb" oninput="fn_set_event(this, \'keyup\', fn_fmt_telno);" class="input-text md csh-rcipt-issu" maxlength="13" title="휴대폰번호" placeholder="휴대폰번호(\' - \'없이 입력)">';
table += ' <input type="text" name="issuTrgetBsnmNb" id="issuTrgetBsnmNb" class="number-only input-text md csh-rcipt-issu" maxlength="10" title="사업자번호" placeholder="사업자번호(\' - \'없이 입력)" style="display: none">';
table += ' </div>';
table += ' <p class="fyi gray-7 mt-10 ml-10">결제창에서 다시 현금영수증을 신청하지 마세요. 중복발행 됩니다.</p>';
table += ' </div>';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
table += ' </tbody>';
table += '</table>';
$('.easyPayCashReceipt').empty(); //기존의 발급영역 제거
} else {
table += '<div class="easyPayCashReceipt" id="cshRciptIssu">';
table += ' <table class="table-transparent">';
table += ' <colgroup>';
table += ' <col style="width:auto;">';
table += ' </colgroup>';
table += ' <tbody>';
table += ' <tr>';
table += ' <td>';
table += ' <div class="td-inner vertical">';
table += ' <div class="custom-radio-container radio-tab-trigger" data-radiotab="radio-tab-1">';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="issuTrgetDvCd" id="issuTrgetDvCd0_' + id + '" value="01" checked>';
table += ' <label for="issuTrgetDvCd0_' + id + '">개인 소득공제</label>';
table += ' </div>';
table += ' <div class="custom-radio is-medium">';
table += ' <input type="radio" name="issuTrgetDvCd" id="issuTrgetDvCd1_' + id + '" value="02">';
table += ' <label for="issuTrgetDvCd1_' + id + '">사업자 지출증빙</label>';
table += ' </div>';
table += ' </div>';
table += ' <div class="radio-tab-content w-full" id="radio-tab-1">';
table += ' <input type="text" name="issuTrgetMbtlnb" id="issuTrgetMbtlnb" oninput="fn_set_event(this, \'keyup\', fn_fmt_telno);" class="input-text md csh-rcipt-issu" maxlength="13" title="휴대폰번호" placeholder="휴대폰번호(\' - \'없이 입력)">';
table += ' <input type="text" name="issuTrgetBsnmNb" id="issuTrgetBsnmNb" class="number-only input-text md csh-rcipt-issu" maxlength="10" title="사업자번호" placeholder="사업자번호(\' - \'없이 입력)" style="display: none">';
table += ' <input type="hidden" name="cshRciptIssuAt" value="" >';
table += ' </div>';
table += ' <p class="textInfo">';
table += ' <p class="fyi gray-7 mt-10 ml-10">결제창에서 다시 현금영수증을 신청하지 마세요. 중복발행 됩니다.</p>';
table += ' </p>';
table += ' </div>';
table += ' </td>';
table += ' </tr>';
table += ' </tbody>';
table += ' </table>';
table += '</div>';
$('#payCashReceipt').empty(); //기존의 발급영역 제거
}
$(div).empty().append(table)
$(div).find('.select-box select').niceSelect();
if ('bank' === id) {
fn_get_rcpmny_acntnb_list();
}
/* 결제정보 > 일반결제 현금영수증 발급 라디오 선택 이벤트 */
$(div).find('input[name="cshRciptIssuAt"]').on('click', function () {
$(this).prop("checked", true);
if ('01' == $(this).val()) {
$(this).closest('table').find('#cshRciptIssu').show();
} else {
$(this).closest('table').find('#cshRciptIssu').hide();
}
});
/* 결제정보 > 일반결제 현금영수증 발급 라디오 선택 이벤트 */
$(div).find('input[name="issuTrgetDvCd"]').on('click', function () {
const div = $(this).closest('#cshRciptIssu');
$(div).find('.input-text').hide();
$(div).find('.input-text').val('');
if ('01' === $(this).val()) {
$(div).find('#issuTrgetMbtlnb').show();
} else {
$(div).find('#issuTrgetBsnmNb').show();
}
});
/* 결제정보 > 무통장 입금은행 선택 이벤트 */
$(div).find('#rcpmnyAcntnb').on('change', function () {
const option = $('option:selected', this);
const dpstrNm = $(option).attr('dpstr-nm');
const bnnkNm = $(option).attr('bnnk-nm');
const td = $(this).closest('td');
$(td).find('#dpstrNm').val(dpstrNm);
$(td).find('#bnnkNm').val(bnnkNm);
});
/* 결제정보 > 휴대폰번호 입력 이벤트 */
$(div).find('#issuTrgetMbtlnb').on('input', function () {
fn_set_event($(this), 'keyup', fn_fmt_telno)
});
}
/* 결제예정금액 > 결제금액 조회 */
const fn_get_setle_amt = function() {
let setle = {};
setle['sopmalCd'] = $('#sopmalCd').val();
setle['dlvylc'] = JSON.parse(localStorage.getItem('dlvylc'));
setle['goodsList'] = JSON.parse(localStorage.getItem('goodsList'));
setle['dlvylcZip'] = localStorage.getItem('dlvylcZip');
$.ajax({
type : 'post',
contentType: 'application/json',
url : '<c:url value="/sopmal/ordr/selectSetleExpectAmt"/>',
data : JSON.stringify(setle),
dataType: 'json',
async : false,
success : function(data) {
if (data.resBody != null) {
const result = JSON.parse(data.resBody.result);
fn_set_setle_amt(result.setleExpectAmt);
}
},
error: function(data) {
alert('<spring:message code="error.internal-server"/>');
}
});
}
/* 결제예정금액 > 결제금액 세팅 */
const fn_set_setle_amt = function(data) {
if (!fn_is_empty(data)) {
const ul = $('.cartOrderBox__list');
$(ul).find('#goodsAmtSapn').text((data.goodsAmt).toLocaleString());
$(ul).find('#dlvyAmtSapn').text((data.dlvyAmt).toLocaleString());
$(ul).find('#dscntAmtSapn').text((data.dscntAmt).toLocaleString());
$('#accmlMlgAmtSapn').text((data.accmlMlgAmt).toLocaleString());
$('#setleAmtSapn').text((data.setleAmt).toLocaleString());
let li = '';
if (data.evtDscntAmt > 0) {
li += '<li class="cartOrderBox__miscItem first">';
li += ' <span class="cartOrderBox__miscTh">이벤트</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.evtDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.goodsCouponDscntAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">상품 쿠폰</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.goodsCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.dlvyCouponDscntAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">배송비 쿠폰</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.dlvyCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.cartCouponDscntAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">장바구니 쿠폰</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.cartCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (data.useMlgAmt > 0) {
li += '<li class="cartOrderBox__miscItem">';
li += ' <span class="cartOrderBox__miscTh">마일리지 할인</span>';
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.useMlgAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
li += '</li>';
}
if (!fn_is_empty(data.dlvyAmtMap)) {
const form = $('#dlvylcForm');
const dlvyMap = data.dlvyAmtMap;
$(form).find('input[name="dlvyGroupInnb"]').val(dlvyMap.dlvyGroupInnb);
$(form).find('input[name="dftDlvyAmt"]').val(dlvyMap.dftDlvyAmt);
$(form).find('input[name="dlvyAmt"]').val(dlvyMap.dlvyAmt);
}
if (!fn_is_empty(data.setleAmt)) {
$('#setleForm').find('#rlSetleAmt').val(data.setleAmt);
}
if (!fn_is_empty(data.lmttUseMlg)) {
$('#lmttUseMlg').val(data.lmttUseMlg);
}
$(ul).find('.cartOrderBox__miscItem').remove();
$(ul).append(li);
}
}
/* 결제예정금액 > 정합성 검사 */
const fn_validate = function() {
let order = {};
let isValid = true;
let localGoods = localStorage.getItem('goodsList');
let goodsLists = JSON.parse(localGoods);
// 상품 고유번호로 그룹화
let groupedGoods = goodsLists.reduce((groups, item) => {
if (!groups[item.goodsInnb]) {
groups[item.goodsInnb] = [];
}
groups[item.goodsInnb].push(item);
return groups;
}, {});
Object.keys(groupedGoods).forEach(goodsInnb => {
let items = groupedGoods[goodsInnb];
let all03 = items.every(item => item.optnTy === '03');
if (all03) {
alert(`추가상품만 구매할 수 없습니다. 기본상품을 같이 구매해주세요.`);
isValid = false;
return false;
}
});
/* 배송지 정합성 검사 시작 */
$('#dlvylcForm').find('.required').each(function () {
const val = $(this).val();
if (fn_is_empty(val)) {
const name = $(this).attr('name');
const title = $(this).attr('title');
alert(title + ' 항목을 입력해 주십시요');
$('input[name="' + name + '"]').focus();
isValid = false;
return false;
}
});
if (!isValid) {
return false;
}
order['shipping'] = fn_get_form_obj('dlvylcForm');
/* 배송지 정합성 검사 종료 */
/* 주문자 정보 정합성 검사 시작 */
const purchsrForm = $('#purchsrForm');
$(purchsrForm).find('.required').each(function () {
const val = $(this).val();
if (fn_is_empty(val)) {
const id = $(this).attr('id');
const title = $(this).attr('title');
if(id !== 'email'){
alert(title + '항목을 입력해 주십시요');
$('#' + id).focus();
isValid = false;
return false;
}
}
});
if($("#isCrtfc").val() !== 'Y'){
alert("주문자 휴대폰번호를 인증해 주세요.");
$("#mbtlnb").focus();
isValid = false;
}
if (!isValid) {
return false;
}
let purchsr = {};
$(purchsrForm).find('input').each(function () {
const id = $(this).attr('id');
const value = $(this).val().trim();
purchsr[id] = value;
});
order['sopmalCd'] = $(purchsrForm).find('#sopmalCd').val();
order['purchsr'] = purchsr;
/* 주문자 정보 정합성 검사 종료 */
/* 결제정보 정합성 검사 시작 */
let pgCmpnyNm = $('input[name="pg"]:checked').val();
let setleTyCd = $('#setleTyCd').val();
if (fn_is_empty(pgCmpnyNm)) {
alert('결제유형을 선택해 주십시요.');
return false;
}
if ('kcp' === pgCmpnyNm || 'toss' === pgCmpnyNm) {
const div = $('#setleForm').find('.order-method-normal');
if (!$(div).find('.order-method-normal__btn-container button').hasClass('active')) {
alert('결제방법을 선택해 주십시요.');
isValid = false;
return false;
}
if ('02' === setleTyCd) {
const div = $('#bank-content-inner');
const input = $(div).find('#rcpmnyerNm');
if (fn_is_empty($(input).val())) {
alert($(input).attr('title') + ' 항목을 입력해 주십시요');
$('#' + $(input).attr('id')).focus();
isValid = false;
return false;
}
const rcpmnyAcntnb = $(div).find('#rcpmnyAcntnb option:selected');
if (fn_is_empty($(rcpmnyAcntnb).val())) {
alert($(div).find('#rcpmnyAcntnb').attr('title') + ' 항목을 선택해 주십시요');
return false;
}
}
const cshRciptIssuAt = $('input[name="cshRciptIssuAt"]:checked').val();
if (!fn_is_empty(cshRciptIssuAt) && '01' === cshRciptIssuAt) {
const issuTrgetDvCd = $('input[name="issuTrgetDvCd"]:checked').val();
const id = '01' === issuTrgetDvCd ? 'issuTrgetMbtlnb' : 'issuTrgetBsnmNb';
const setleTyId = $('kcp' === pgCmpnyNm ? '#pg04Content' : '#pg03Content').find('button[name="' + setleTyCd + '"]').attr('id');
const div = $('#' + setleTyId + '-content-inner');
const input = $(div).find('#' + id);
if (fn_is_empty($(input).val())) {
alert($(div).find('#' + id).attr('title') + ' 항목을 입력해 주십시요');
$(div).find('#' + id).focus();
isValid = false;
return false;
}
}
} else if ('toss03' === pgCmpnyNm){ //퀵계좌이체(추가된 결제수단이라 기존코드 유지위해 toss03이름으로 임시지정 후 toss로 변환)
const isChecked = $('#transfer-cash-receipt').is(':checked');
if (isChecked) {
const div = $('#transfer-cash-receipt').closest('.selectWrap');
const issuTrgetDvCd = $(div).find('input[name="issuTrgetDvCd"]:checked').val();
const id = '01' === issuTrgetDvCd ? 'issuTrgetMbtlnb' : 'issuTrgetBsnmNb';
const content = $(div).find('#transfer-cash-receipt-content-inner');
const input = $(content).find('#' + id);
if (fn_is_empty($(input).val())) {
alert($(content).find('#' + id).attr('title') + ' 항목을 입력해 주십시요');
$(content).find('#' + id).focus();
isValid = false;
return false;
}else{
$('#setleForm').find('input[name="cshRciptIssuAt"]').val('01');
}
}
pgCmpnyNm = "toss";
setleTyCd = "03";
$('#setleForm').find('#pgCmpnyNm').val(pgCmpnyNm);
$('#setleForm').find('#setleTyCd').val(setleTyCd);
} else {
if ('01' === setleTyCd) { // 카드
const index = $('.cardSlideW').slick('slickCurrentSlide');
const curCardId = $('#gcCardId' + index).val();
const curCardInstallmentPlan = $('#instl-month-' + index).val();
const curUseCardPoint = $('#use-card-point' + index);
if (!fn_is_empty(curCardId)) {
$('#gcpayMethodId').val(curCardId);
$('#gcpayCardInstallmentPlan').val(curCardInstallmentPlan);
$('#gcpayUseCardPoint').val(!!$(curUseCardPoint).is(':checked'));
} else {
alert('GCpay 간편결제의 선택된 카드가 없습니다.');
isValid = false;
return false;
}
} else { // 계좌이체
const accountId = $('.bankSlideW').slick('slickCurrentSlide');
const curAccountId = $('#gcAccId' + accountId).val();
if (!fn_is_empty(curAccountId)) {
$('#gcpayMethodId').val(curAccountId);
} else {
alert('GCpay 간편결제의 선택된 계좌가 없습니다.');
isValid = false;
return false;
}
const isChecked = $('#gc-pay-bank-cash-receipt').is(':checked');
if (isChecked) { // 현금영수증 정보
const div = $('#gc-pay-bank-cash-receipt').closest('.selectWrap');
const issuTrgetDvCd = $(div).find('input[name="issuTrgetDvCd"]:checked').val();
const id = '01' === issuTrgetDvCd ? 'issuTrgetMbtlnb' : 'issuTrgetBsnmNb';
const content = $(div).find('#gc-pay-bank-cash-receipt-content-inner');
const input = $(content).find('#' + id);
if (fn_is_empty($(input).val())) {
alert($(content).find('#' + id).attr('title') + ' 항목을 입력해 주십시요');
$(content).find('#' + id).focus();
isValid = false;
return false;
}
}
}
}
if (!isValid) {
return false;
}
order['setle'] = fn_get_form_obj('setleForm');
/* 결제정보 정합성 검사 종료 */
/* 주문상품, 사은품 데이터 세팅 시작 */
let goodsList = localStorage.getItem('goodsList');
if (!fn_is_empty(goodsList)) {
order['goodsList'] = JSON.parse(goodsList);
}
order['prsnt'] = fn_get_prsnt_data();
/* 주문상품, 사은품 데이터 세팅 종료 */
/* ********************* 실 결제금액 세팅 결제금액 비교 시작 ********************* */
const ordrCheckMsg = "구매 정보가 갱신되었습니다. 확인 후 다시 진행해주세요.";
const sopmalCd = $('#sopmalCd').val();
let stdrGoodsList = [];
$('#goodsList').find('.ordrGoods').each(function () {
const goodsInnb = $(this).find('.goodsInnb').val();
const goodsOptnInnb = $(this).find('.goodsOptnInnb').val();
const qy = $(this).find('.qy').val();
let goods = {
'sopmalCd': sopmalCd,
'goodsInnb': goodsInnb,
'goodsOptnInnb': goodsOptnInnb,
'qy': qy
};
stdrGoodsList.push(goods);
});
let storageGoodsList = [];
if (!fn_is_empty(goodsList)) {
let storageTempGoodsList = JSON.parse(goodsList);
storageTempGoodsList.forEach((item, index) => {
let goods = {
'sopmalCd': sopmalCd,
'goodsInnb': item.goodsInnb.toString(),
'goodsOptnInnb': item.goodsOptnInnb.toString(),
'qy': item.qy.toString()
};
storageGoodsList.push(goods);
});
}
if (!fn_compare_goodslists(stdrGoodsList, storageGoodsList)) {
alert(ordrCheckMsg);
location.reload();
return false;
}
const setleAmtFromOrder = order['setle']['rlSetleAmt']; // 실 결제금액
let setleAmtFromEnuri = "";
let dscntApplyAmtSum = 0;
if (!fn_is_empty(goodsList)) {
let parsedGoodsList = JSON.parse(goodsList);
parsedGoodsList.forEach((item, index) => {
dscntApplyAmtSum += item.dscntApplyAmt || 0;
});
setleAmtFromEnuri = dscntApplyAmtSum.toString();
}
// if (setleAmtFromOrder !== setleAmtFromEnuri) { // 비회원은 결제정보가 없어서 서버에서만 체크
// alert(ordrCheckMsg);
// location.reload();
// return false;
// }
/* ********************* 실 결제금액 세팅 결제금액 비교 종료 ********************* */
order['ordrTyCd'] = '01';
$('.nonMemberTerms ').find('.nonMemberTerms__item').each(function () {
const div = $(this).find('.b-checkbox-container');
const checkbox = $(div).find('.termCheck');
if ($(checkbox).hasClass('required')) {
const isChecked = $(checkbox).is(':checked');
if (!isChecked) {
const title = $(checkbox).closest('label').find('.control-label').text();
alert(title + ' 항목은 필수 입니다.');
isValid = false;
return false;
}
}
});
if (!isValid) {
return false;
}
/* 광고 수신 동의 체크 */
if ($("#marktRecptnAgreAt")) {
if ($("#marktRecptnAgreAt").is(":checked")) {
order['marktRecptnAgreAt'] = $("#marktRecptnAgreAt").val();
} else {
order['marktRecptnAgreAt'] = 'N';
}
}
return order;
}
/* 무통장 입금 계좌번호 목록 조회 */
const fn_get_rcpmny_acntnb_list = function() {
$.ajax({
type:'post',
contentType:'application/json',
url:'<c:url value="/sopmal/ordr/selectRcpmnyAcntnbList"/>',
data:JSON.stringify({'sopmalCd':$('#sopmalCd').val()}),
dataType:'json',
success:function(data) {
if (data.resBody != null) {
const result = JSON.parse(data.resBody.result);
if (!fn_is_empty(result)) {
const setupNbkDpstVOList = result.setupNbkDpstVOList;
const div = $('#bank-content #bank-content-inner');
for (let i = 0; i < setupNbkDpstVOList.length; i++) {
const setup = setupNbkDpstVOList[i];
const title = setup.bankNm + ' ' + setup.acntnb + ' ' + setup.dpstrNm;
const option = '<option value="' + setup.acntnb + '" bnnk-nm="' + setup.bankNm + '" dpstr-nm="' + setup.dpstrNm + '">' + title + '</option>';
$(div).find('table tr #rcpmnyAcntnb').append(option);
}
$(div).find('.select-box select').niceSelect('update');
}
}
},
error: function(data) {
alert('<spring:message code="error.internal-server"/>');
}
});
}
/* form 정보 조회 */
const fn_get_form_obj = function(id) {
let formObj = {};
const inputs = $('#' + id).serializeArray();
$.each(inputs, function (i, input) {
formObj[input.name] = input.value.trim();
});
return formObj;
}
/* ********************************************************
* 우편번호 찾기
******************************************************** */
const fn_set_postcode = function(data) {
$('input[name="dlvylcZip"]').val(data.postcode);
if (data.addressType == '02') {
$('input[name="dlvylcAdresDvCd"]').val(data.addressType);
$('input[name="dlvylcLnbAdres"]').val(data.jibunAddress);
$('input[name="dlvylcAdres"]').val($('input[name="dlvylcLnbAdres"]').val());
} else if (data.addressType == '01') {
$('input[name="dlvylcAdresDvCd"]').val(data.addressType);
$('input[name="dlvylcRnmAdres"]').val(data.roadAddress);
$('input[name="dlvylcAdres"]').val($('input[name="dlvylcRnmAdres"]').val());
}
const dlvylcZip = $('input[name="dlvylcZip"]').val();
localStorage.setItem("dlvylcZip", dlvylcZip);
fn_get_setle_amt();
}
/* ********************************************************
* 휴대폰 인증 카운터
******************************************************** */
let seconds;
let countdown;
let timerRunning = false;
const fn_set_timeOut = function() {
if (seconds >= 0) {
const minutes = Math.floor(seconds / 60).toString().padStart(2, '0');
const remainingSeconds = (seconds % 60).toString().padStart(2, '0');
$('#timer').text(minutes+":"+remainingSeconds);
seconds--;
} else {
fn_stop_timer();
alert('인증번호 유효시간이 만료되었습니다.');
}
}
/* ********************************************************
* 휴대폰 인증 번호 발송
******************************************************** */
let first = 0;
let mbtlCert = '';
const fn_sending_number = function(reAt) {
if (reAt !== 'Y') {
if (timerRunning) {
return;
}
}
if(mbtlCert === $('#mbtlnb').val()){
first++;
}else{
first = 0;
}
mbtlCert = $('#mbtlnb').val();
if(!fn_is_empty(mbtlCert)){
let mbrNm = $('#mbrNm').val();
let mbtlnb = mbtlCert.trim().replace(/-/g, '');
let params = {
'mbrNm' : mbrNm,
'mbtlnb': mbtlnb
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/insertPhoneAuth"/>',
data : params,
success : function (Data) {
let result = JSON.parse(Data.resBody.result);
if(result.result == "success"){
if (first > 0) {
alert('인증번호가 재발송되었습니다.');
} else if (first === 0) {
alert('인증번호가 발송되었습니다.');
first++;
} else {
return;
}
$('#sndngInnb').val(result.sndngInnb);
$("#phoneAuthContent").show();
}else {
alert('인증번호 발송에 실패했습니다.');
fn_stop_timer();
return;
}
}
});
clearInterval(countdown);
seconds = 180;
fn_set_timeOut();
countdown = setInterval(fn_set_timeOut, 1000);
timerRunning = true;
}else{
$('#mbtlnb').focus();
}
}
/* ********************************************************
* 타이머 정지 함수
******************************************************** */
const fn_stop_timer = function() {
if (timerRunning) {
clearInterval(countdown);
$('#timer').text('03:00');
$('#mbtlCert').val('');
$('#phoneAuthContent').hide();
$('#mbrNm').attr("readonly", false);
$('#mbtlnb').attr("readonly", false);
timerRunning = false;
}
}
/* ********************************************************
* 휴대폰 인증 확인
******************************************************** */
const fn_confim_own = function() {
if (first <= 0) return;
let sndngInnb = $('#sndngInnb').val();
let mbtlnb = $('#mbtlnb').val().trim().replace(/-/g, '');
let crtnb = $('#mbtlCert').val();
let params = {
'sndngInnb': sndngInnb,
'mbtlnb': mbtlnb,
'crtnb' : crtnb
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/selectPhoneAuth"/>',
data : params,
success : function (Data) {
let result = JSON.parse(Data.resBody.result);
if(result.result == "success"){
$('#phoneAuthOkBtn').show();
clearInterval(countdown);
$("#mbtlCert").val("");
$("#phoneAuthContent").hide();
$("#phoneAuthBtn").off("click");
$("#isCrtfc").val("Y");
$("#phoneAuthBtn").on("click", function () {
alert('인증되었습니다.');
});
}else {
alert('인증번호가 일치하지 않습니다.');
}
}
});
}
/* 인증 번호 인풋 이벤트*/
function fn_hide_alertTxt(obj,target) {
var inputVal = $(obj).val();
var isNumeric = /^\d+$/.test(inputVal);
if (isNumeric && inputVal.length > 0) {
$(target).hide();
} else {
$(target).show();
}
}
/* 약관 상세 보기*/
const fn_select_clause = (stplatDvCd) => {
$.ajax({
type: 'post',
url: "/sopmal/main/selectIndvdlInfoProcsCn",
data: {stplatDvCd: stplatDvCd},
success: function (data) {
data = JSON.parse(data.resBody.result);
//약관 내용
const clauseList = data.clauseList;
if (!fn_is_empty(clauseList)) {
let i = 0;
clauseList.forEach(function (item) {
if (i === 0) {
$("#nmbrClause-content").html(item.stplatCn);
$("#nmbrClause-sj").text(item.stplatNm);
return false;
}
});
$("#nmbrClause-content").addClass("ck-content");
}
$("#nmbrClause").modal('open');
}
});
}
</script>
<script>
/****************************************************************/
/* m_Completepayment 설명 */
/****************************************************************/
/* 인증완료시 재귀 함수 */
/* 해당 함수명은 절대 변경하면 안됩니다. */
/* 해당 함수의 위치는 kcp_spay_hub.js 보다먼저 선언되어여 합니다. */
/* Web 방식의 경우 리턴 값이 form 으로 넘어옴 */
/****************************************************************/
function m_Completepayment(FormOrJson, closeEvent) {
var frm = document.order_info;
/********************************************************************/
/* FormOrJson은 가맹점 임의 활용 금지 */
/* frm 값에 FormOrJson 값이 설정 된 frm 값으로 활용 하셔야 됩니다. */
/********************************************************************/
GetField(frm, FormOrJson);
if (frm.res_cd.value == "0000"){
/* 결제인증 완료 후 결제승인 요청을 위한 비즈니스 로직 구현 */
frm.submit();
} else {
/* 결제인증 실패에 대한 처리 */
alert( "[" + frm.res_cd.value + "] " + frm.res_msg.value );
location.reload();
closeEvent();
}
}
</script>
<c:choose>
<c:when test="${data.payInfo.kcpMid eq 'T0007'}">
<script type="text/javascript" src="https://testspay.kcp.co.kr/plugin/kcp_spay_hub.js"></script>
</c:when>
<c:otherwise>
<script type="text/javascript" src="https://spay.kcp.co.kr/plugin/kcp_spay_hub.js"></script>
</c:otherwise>
</c:choose>
<script>
/* 표준웹 실행 */
function jsf__pay(form) {
try {
KCP_Pay_Execute_Web(form);
} catch (e) {
console.log(e)
/* IE 에서 결제 정상종료시 throw로 스크립트 종료 */
}
}
</script>
<script src="https://js.tosspayments.com/v1"></script>
<script>
let tossPayments = TossPayments("${data.payInfo.tossClntKey}");
function pay(method, requestJson, pgNm) {
if(pgNm === "naverpay"||pgNm === "kakaopay")
tossPayments = TossPayments("${data.payInfo.easypayClntKey}");
tossPayments.requestPayment(method, requestJson).catch(function (error) {
if (error.code === "USER_CANCEL") {
alert("결제를 취소하였습니다.");
location.reload();
} else {
alert(error.message);
}
});
}
</script>
</head>
<body>
<%-- 공통 Header --%>
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
<!-- 메인 컨텐츠 영역 -->
<main>
<div class="sub-wrapper">
<div class="sub-content">
<div class="cartOrder">
<h2 class="cartOrder__title">주문결제</h2>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<input type="hidden" id="cdnurl" value="${cdnurl}"/>
<div class="cartOrder__inner">
<div class="cartOrder__left">
<div class="orderInfo">
<h3 class="orderInfo__sectionTitle">주문자 정보</h3>
<div class="table-wrapper orderInfo__table">
<form id="purchsrForm">
<input type="hidden" name="sesionId" id="sesionId" value="<c:out value="${data.paramVO.sesionId}"/>">
<input type="hidden" name="sopmalCd" id="sopmalCd" value="<c:out value="${data.paramVO.sopmalCd}"/>">
<input type="hidden" name="cartDvCd" id="cartDvCd" value="<c:out value="${data.paramVO.cartDvCd}"/>">
<input type="hidden" name="cartInnbs" id="cartInnbs" value="<c:out value="${cartInnbs}"/>">
<input type="hidden" name="deviceType" id="deviceType" value="<c:out value="${deviceType}"/>">
<div class="orderInfo__section">
<table class="table">
<caption>주문자 정보</caption>
<!-- 각 열 width 설정 -->
<colgroup>
<col style="width: 180px;">
<col style="width: auto;">
</colgroup>
<tbody>
<tr>
<th><span class="orderInfo__title">이름</span></th>
<td><input type="text" name="mbrNm" id="mbrNm" class="input-text required" title="주문자 이름"></td>
</tr>
<tr>
<th>
<span class="orderInfo__title">휴대폰 번호</span>
</th>
<td>
<input type = "hidden" id = "sndngInnb"/>
<input class="input-text" type="text" title="해당 인풋에 대한 설명" id="mbtlnb" name="mbtlnb" value="" placeholder="휴대폰번호 입력 (’-” 없이)" oninput="fn_fmt_telno($(this));" maxlength="13">
<input type="hidden" name="isCrtfc" id="isCrtfc" value="N">
<button type="button" id="phoneAuthBtn" class="btn md outline">
<spring:message code="button.sendung"/>
</button>
<div class="phoneAuth" id="phoneAuthContent">
<div>
<div class="inputWithBtn">
<div class="inputTimer">
<input class="input-text full number" id = "mbtlCert" type="text" title="해당 인풋에 대한 설명" placeholder="인증번호 입력" oninput="fn_hide_alertTxt(this,'#phoneAuth');">
<span class="inputTimer__time" id = "timer">02:59</span>
</div>
<button type="button" class="btn gray" onclick="fn_sending_number('Y');">재전송</button>
</div>
<p class="signUp__inputBox__alertText" id="phoneAuth">
인증번호를 입력해 주세요.
</p>
</div>
<button type="button" class="btn outline full lg" onclick="fn_confim_own();"><spring:message code="button.ok"/></button>
</div>
</td>
</tr>
<%--
<tr>
<th><span class="orderInfo__title">휴대폰 번호</span></th>
<td>
<div class="inputWithBtn">
<input type="text" name="mbtlnb" id="mbtlnb" oninput="fn_set_event(this, 'keyup', fn_fmt_telno)" maxlength="13" value="<c:out value="${purchsr.mbtlnb}"/>" class="input-text number required" title="주문자 휴대폰 번호" placeholder="휴대폰번호 입력 (’-’ 없이)">
<input type="hidden" name="isCrtfc" id="isCrtfc" value="N">
<button id="phoneAuthBtn" type="button" class="btn md theme outline">휴대폰 인증</button>
<button type="button" id="sucesCrtfc" class="btn md outline" style="display:none;">인증 완료</button>
</div>
<div class="phoneAuth" id="phoneAuthContent" style="display:none;">
<button type="button" class="sendCrtfcNb btn md dark">인증번호 발송</button>
<div>
<div class="inputWithBtn">
<div class="inputTimer">
<input type="text" id="crtfcNb" maxlength="10" class="input-text full number" title="인증번호" placeholder="인증번호 입력">
<span id="timer" class="inputTimer__time" style="display:none;">3:00</span>
</div>
<button type="button" class="sendCrtfcNb btn gray">재전송</button>
</div>
<p id="errMessage" class="signUp__inputBox__alertText number" style="display:none;">인증번호를 입력해 주세요.</p>
</div>
<button type="button" id="sendCrtfcConfirm" class="btn outline full lg">확인</button>
</div>
</td>
</tr>
--%>
<tr>
<th><span class="orderInfo__title">이메일</span></th>
<td><input type="text" name="email" id="email" class="input-text required" title="주문자 이메일" placeholder="이메일을 입력하세요."></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
<div class="orderInfo__section">
<h3 class="orderInfo__sectionTitle">배송지 정보</h3>
<form id="dlvylcForm">
<input type="hidden" name="dlvyGroupInnb" id="dlvyGroupInnb">
<input type="hidden" name="dftDlvyAmt" id="dftDlvyAmt">
<input type="hidden" name="dlvyAmt" id="dlvyAmt">
<div class="table-wrapper orderInfo__table">
<table class="table">
<caption>배송지 정보</caption>
<!-- 각 열 width 설정 -->
<colgroup>
<col style="width: 180px;">
<col style="width: auto;">
</colgroup>
<tbody>
<!-- 신규 배송지 선택 시 Start -->
<tr class="deliveryAddressNew">
<th><span class="orderInfo__title">받는분</span></th>
<td>
<input type="text" name="recpntNm" class="required input-text" title="배송지 정보 이름" placeholder="받는분 이름을 입력하세요.">
<label class="b-checkbox checkbox">
<input type="checkbox" class="ordrrInfoSet" value="">
<span class="check"></span>
<span class="control-label">주문자와 동일</span>
</label>
</td>
</tr>
<tr class="deliveryAddressNew">
<th><span class="orderInfo__title">주소</span></th>
<td>
<div class="inputAddress">
<div class="inputAddress__postalCode">
<input type="text" name="dlvylcZip" class="input-text required" title="우편번호" readonly>
<%-- <button type="button" id="btnPost" class="btn md theme outline">우편번호 찾기</button>--%>
<button type="button" id="btnPost1" onclick="fn_select_postcode(fn_set_postcode); return false;" class="btn md theme outline">우편번호 찾기</button>
</div>
<input type="text" name="dlvylcAdres" class="required input-text full" title="배송지 정보 주소" readonly>
<input type="text" name="dlvylcAdresDtl" class="required input-text full" title="배송지 정보 나머지 주소" placeholder="나머지 주소를 입력해 주세요.">
<input type="hidden" name="dlvylcAdresDvCd" class="new">
<input type="hidden" name="dlvylcLnbAdres" class="new">
<input type="hidden" name="dlvylcRnmAdres" class="new">
</div>
</td>
</tr>
<tr class="deliveryAddressNew">
<th> <span class="orderInfo__title">휴대폰번호</span></th>
<td>
<input type="text" name="recpntMbtlnb" oninput="fn_set_event(this, 'keyup', fn_fmt_telno)" maxlength="13" class="required input-text number" title="배송지 정보 휴대폰번호" placeholder="휴대폰번호 입력 (’-’ 없이)">
</td>
</tr>
<!-- 신규 배송지 선택 시 End -->
<tr>
<th><span class="orderInfo__title">배송요청사항</span></th>
<td>
<div class="orderInfo__deliveryRequest">
<div class="select-box">
<select class="deliveryRequestSelect" title="배송요청사항">
<option value="" selected>배송 시 요청 사항을 선택해주세요</option>
<option value="배송 전 연락 주세요">배송 전 연락 주세요.</option>
<option value="부재 시 문 앞에 놓아 주세요">부재 시 문 앞에 놓아 주세요</option>
<option value="부재 시 경비실에 맡겨 주세요.">부재 시 경비실에 맡겨 주세요.</option>
<option value="write">직접입력</option>
</select>
</div>
<div class="inputLimit deliveryRequestDetail" style="display:none;">
<input type="text" name="dlvyMssageCn" maxlength="50" class="input-text" title="배송요청사항" placeholder="50자 이내로 입력해 주세요.">
<span class="inputLimit__text">
<span class="inputLimit__current">0</span>
<span class="inputLimit__divider">/</span>
<span class="inputLimit__total">50</span>
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
<div class="orderInfo__section">
<h3 class="orderInfo__sectionTitle">주문 상품</h3>
<div class="cartOrder__list">
<div class="table-wrapper">
<table class="table vertical">
<caption>주문 상품</caption>
<colgroup>
<col style="width: 400px;">
<col style="width: 120px">
<col style="width: 128px">
<col style="width: 128px">
<col style="width: auto;">
</colgroup>
<thead>
<tr>
<th>상품명</th>
<th>주문수량</th>
<th>할인금액</th>
<th>상품금액</th>
</tr>
</thead>
<tbody id="goodsList"></tbody>
</table>
</div>
</div>
</div>
<div id="prsnt" class="orderInfo__section">
<h3 class="orderInfo__sectionTitle">사은품</h3>
<div class="cartOrder__list">
<div class="table-wrapper">
<table class="table vertical">
<caption>사은품</caption>
<colgroup>
<col style="width: 400px;">
<col style="width: 128px">
<col style="width: 128px">
<col style="width: auto;">
</colgroup>
<thead>
<tr>
<th>상품명</th>
<th>수량</th>
<th>수령여부</th>
</tr>
</thead>
<tbody id="prsntList"></tbody>
</table>
</div>
</div>
</div>
<div class="orderInfo__section">
<c:set var="payInfo" value="${data.payInfo}"/>
<c:set var="gcpayCardUseAt" value="${'Y' == payInfo.gcpayCardUseAt}"/>
<c:set var="gcpayAcntnbUseAt" value="${'Y' == payInfo.gcpayAcntnbUseAt}"/>
<c:choose>
<c:when test="${gcpayCardUseAt || gcpayAcntnbUseAt}"><%-- GCpay 일때만 보여줌 --%>
<div class="orderInfo__sectionHeader">
<h3 class="orderInfo__sectionTitle">결제 정보</h3>
<div class="orderInfo__btnContainer">
<a href="#gcpay-cardInfo-pop" rel="modal:open" class="btn sm outline"><i class="icon icon_info"></i>GC PAY 카드 무이자 할부 행사 안내</a>
<a href="#gcpay-info" rel="modal:open" class="btn sm outline"><i class="icon icon_info"></i>GC PAY 안내</a>
<a href="javascript:void(0);" id="gcpay_set" class="btn sm outline">GC PAY 설정</a>
</div>
</div>
<div class="orderInfo__orderInfoTop">
<div class="gcpayEvent">
<img class="gcpayEvent__icon" src="/pc/images/icon_couponEvent.png" alt="">
<p class="gcpayEvent__title">[EVENT] GC PAY 간편결제 등록 시 5,000원 쿠폰 증정 <span class="misc">(계정당 최초 1회)</span></p>
<p class="gcpayEvent__content">사용 조건 : 3만원 이상 구매 시 사용 가능 (자사몰, 오프라인 매장)<br>유효 기간 : 발급일 기준 15일 이내 사용 가능</p>
</div>
<p class="textInfo textInfo--dot">GC PAY 기존 등록 고객은 <em>"[GC PAY 설정]을 눌러 본인인증 후 좌측상단의 [&#60;]를 클릭"</em>하시면 목록에 보입니다.</p>
</div>
</c:when>
<c:otherwise>
<div class="orderInfo__sectionHeader">
<h3 class="orderInfo__sectionTitle">결제 정보</h3>
</div>
</c:otherwise>
</c:choose>
<form id="setleForm">
<input type="hidden" name="rlSetleAmt" id="rlSetleAmt" value="">
<input type="hidden" name="lmttUseMlg" id="lmttUseMlg" value="">
<input type="hidden" name="siteCdMid" id="siteCdMid" value="<c:out value="${payInfo.kcpMid}"/>">
<input type="hidden" name="dueDt" id="dueDt" value="<c:out value="${payInfo.dueDt}"/>">
<c:choose>
<c:when test="${gcpayCardUseAt || gcpayAcntnbUseAt}">
<input type="hidden" name="pgCmpnyNm" id="pgCmpnyNm" value="gcpay">
<input type="hidden" name="setleTyCd" id="setleTyCd" value="${gcpayCardUseAt ? '01' : '03'}">
</c:when>
<c:otherwise>
<input type="hidden" name="pgCmpnyNm" id="pgCmpnyNm" value="">
<input type="hidden" name="setleTyCd" id="setleTyCd" value="">
</c:otherwise>
</c:choose>
<input type="hidden" name="ordrDvCd" id="ordrDvCd" value="01">
<input type="hidden" name="gcpayCardUseAt" id="gcpayCardUseAt" value="${payInfo.gcpayCardUseAt}">
<input type="hidden" name="gcpayAcntnbUseAt" id="gcpayAcntnbUseAt" value="${payInfo.gcpayAcntnbUseAt}">
<input type="hidden" name="gcpayMethodId" id="gcpayMethodId" value="">
<input type="hidden" name="gcpayCardInstallmentPlan" id="gcpayCardInstallmentPlan" value="">
<input type="hidden" name="gcpayUseCardPoint" id="gcpayUseCardPoint" value="">
<input type="hidden" name="setleSetupTyCd" id="setleSetupTyCd" value="${payInfo.setleSetupTyCd}">
<div class="order-method ${gcpayCardUseAt || gcpayAcntnbUseAt ? 'order_gcPay' : ''}">
<c:if test="${gcpayCardUseAt}">
<div class="custom-radio is-medium listW chk_on">
<input type="radio" name="pg" id="pg01" value="gcpay" checked>
<label for="pg01"><i class="icon icon_gcpay ml-5 mr-5"></i>카드간편결제</label>
</div>
<!--간편결제 영역-->
<div id="pg01Content" class="conW pgContent">
<div class="slideW cardSlideW">
</div>
<!--무이자 할부 하단영역-->
<div class="slideDep selectWrap">
</div>
<!--//무이자 할부 영역-->
</div>
<!--//간편결제 영역-->
</c:if>
<c:if test="${gcpayAcntnbUseAt}">
<div class="custom-radio is-medium ${gcpayCardUseAt ? '' : 'listW chk_on'}">
<input type="radio" name="pg" id="pg02" value="gcpay" ${gcpayCardUseAt ? '' : 'checked'}>
<label for="pg02"><i class="icon icon_gcpay ml-5 mr-5"></i>계좌간편결제</label>
</div>
<div id="pg02Content" class="conW pgContent" ${gcpayCardUseAt ? 'style="display: none"' : ''}>
<div class="slideW bankSlideW">
</div>
<div class="selectWrap">
<div class="b-checkbox-container cashReceipt-container">
<label class="b-checkbox checkbox is-medium" id="cashReceipt-check">
<input type="checkbox" id="gc-pay-bank-cash-receipt" value="">
<span class="check"></span>
<span class="control-label">현금영수증 신청하기</span>
</label>
</div>
<div id="gc-pay-bank-cash-receipt-content-inner"></div>
</div>
</div>
</c:if>
<%-- 퀵계좌이체 시작 --%>
<c:if test="${'Y' eq payInfo.rltmAcntUseAt}">
<div class="custom-radio is-medium">
<input type="radio" name="pg" id="pg05" value="toss03">
<label for="pg05">퀵계좌이체(0.5% 즉시할인)</label>
</div>
<div id="pg05Content" class="pgContent" style="display: none">
<div class="selectWrap">
<div class="b-checkbox-container cashReceipt-container">
<label class="b-checkbox checkbox is-medium" id="transfer-cashReceipt-check">
<input type="checkbox" id="transfer-cash-receipt" value="">
<span class="check"></span>
<span class="control-label">현금영수증 신청하기</span>
</label>
</div>
<div id="transfer-cash-receipt-content-inner"></div>
</div>
</div>
</c:if>
<%-- 퀵계좌이체 끝 --%>
<!-- toss 결제 시작 -->
<c:if test="${'02' eq payInfo.setleSetupTyCd}">
<div class="custom-radio is-medium">
<input type="radio" name="pg" id="pg03" value="toss">
<label for="pg03">일반결제</label>
</div>
<div id="pg03Content" class="pgContent order-method-normal" <%-- style="display: none"--%>>
<div class="order-method-normal__btn-container">
<c:if test="${'Y' eq payInfo.cardUseAt}">
<button type="button" name="01" id="card" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--card"></div>신용카드
</button>
</c:if>
<%--
<c:if test="${'Y' eq payInfo.rltmAcntUseAt}">
<button type="button" name="03" id="acount" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--transfer"></div>실시간 계좌이체
</button>
</c:if>
--%>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt}">
<button type="button" name="04" id="virtual" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--account"></div>가상계좌
</button>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt}">
<button type="button" name="05" id="escrow-virtual" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--account"></div>가상계좌(에스크로)
</button>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt}">
<button type="button" name="02" id="bank" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--deposit"></div>무통장
</button>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt}">
<button type="button" name="10" id="payco" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--payco"></div>PAYCO
</button>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt}">
<button type="button" name="tosspay" id="tosspay" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--toss"></div>토스페이
</button>
</c:if>
<c:if test="${'Y' eq payInfo.npayUseAt}">
<button type="button" name="naverpay" id="naverpay" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--naver"></div>네이버페이
</button>
</c:if>
<c:if test="${'Y' eq payInfo.kpayUseAt}">
<button type="button" name="kakaopay" id="kakaopay" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--kakao"></div>카카오페이
</button>
</c:if>
</div>
<div class="order-method-normal__content-wrapper">
<c:if test="${'Y' eq payInfo.cardUseAt}">
<div id="card-content" class="order-method-normal__content" style="display: none">
<div id="card-content-inner" class="order-method-normal__content-inner">
<p class="fyi gray-7 mt-10 ml-10">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<%--
<c:if test="${'Y' eq payInfo.rltmAcntUseAt}">
<div id="acount-content" class="order-method-normal__content" style="display: none">
<div id="acount-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
--%>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt}">
<div id="virtual-content" class="order-method-normal__content" style="display: none">
<div id="virtual-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt}">
<div id="escrow-virtual-content" class="order-method-normal__content" style="display: none">
<div id="escrow-virtual-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt}">
<div id="bank-content" class="order-method-normal__content" style="display: none">
<div id="bank-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt}">
<div id="payco-content" class="order-method-normal__content" style="display: none">
<div id="payco-content-inner" class="order-method-normal__content-inner">
<div class="infoBox">
<h6 class="infoBox__title">PAYCO 간편결제 안내</h6>
<ol class="infoBox__list">
<li>PAYCO는 온/오프라인 쇼핑은 물론 송금, 멤버십 적립까지 가능한 통합 서비스입니다.</li>
<li>휴대폰과 카드 명의자가 동일해야 결제 가능하며, 결제금액 제한은 없습니다.
<br>- 지원카드: 모든 국내 신용/체크카드
</li>
</ol>
</div>
<p class="textInfo"><i class="icon icon_textInfo--sm"></i>발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt}">
<div id="acount-content" class="order-method-normal__content" style="display: none">
<div id="acount-content-inner" class="order-method-normal__content-inner">
<p class="fyi gray-7 mt-10 ml-10">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
</div>
</div>
</c:if>
<!-- toss 결제 종료 -->
<!-- kcp 결제 시작 -->
<c:if test="${'01' eq payInfo.setleSetupTyCd}">
<div class="custom-radio is-medium">
<input type="radio" name="pg" id="pg04" value="kcp">
<label for="pg04">일반결제</label>
</div>
<div id="pg04Content" class="pgContent order-method-normal" <%-- style="display: none"--%>>
<div class="order-method-normal__btn-container">
<c:if test="${'Y' eq payInfo.cardUseAt}">
<button type="button" name="01" id="card" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--card"></div>신용카드
</button>
</c:if>
<%--
<c:if test="${'Y' eq payInfo.rltmAcntUseAt}">
<button type="button" name="03" id="acount" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--transfer"></div>실시간 계좌이체
</button>
</c:if>
--%>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt}">
<button type="button" name="04" id="virtual" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--account"></div>가상계좌
</button>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt}">
<button type="button" name="05" id="escrow-virtual" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--account"></div>가상계좌(에스크로)
</button>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt}">
<button type="button" name="02" id="bank" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--deposit"></div>무통장
</button>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt}">
<button type="button" name="10" id="payco" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--payco"></div>PAYCO
</button>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt}">
<button type="button" name="tosspay" id="tosspay" class="order-method-normal__btn">
<div class="order-method-normal__icon order-method-normal__icon--toss"></div>토스페이
</button>
</c:if>
<c:if test="${'Y' eq payInfo.npayUseAt}">
<button type="button" name="naverpay" id="naverpay" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--naver"></div>네이버페이
</button>
</c:if>
<c:if test="${'Y' eq payInfo.kpayUseAt}">
<button type="button" name="kakaopay" id="kakaopay" class="order-method-normal__btn gift_pay">
<div class="order-method-normal__icon order-method-normal__icon--kakao"></div>카카오페이
</button>
</c:if>
</div>
<div class="order-method-normal__content-wrapper">
<c:if test="${'Y' eq payInfo.cardUseAt}">
<div id="card-content" class="order-method-normal__content" style="display: none">
<div id="card-content-inner" class="order-method-normal__content-inner">
<p class="fyi gray-7 mt-10 ml-10">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<%--
<c:if test="${'Y' eq payInfo.rltmAcntUseAt}">
<div id="acount-content" class="order-method-normal__content" style="display: none">
<div id="acount-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
--%>
<c:if test="${'Y' eq payInfo.virtlAcntUseAt}">
<div id="virtual-content" class="order-method-normal__content" style="display: none">
<div id="virtual-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.virtlAcntEscwUseAt}">
<div id="escrow-virtual-content" class="order-method-normal__content" style="display: none">
<div id="escrow-virtual-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.nbkkUseAt}">
<div id="bank-content" class="order-method-normal__content" style="display: none">
<div id="bank-content-inner" class="order-method-normal__content-inner"></div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.paycoUseAt}">
<div id="payco-content" class="order-method-normal__content" style="display: none">
<div id="payco-content-inner" class="order-method-normal__content-inner">
<div class="infoBox">
<h6 class="infoBox__title">PAYCO 간편결제 안내</h6>
<ol class="infoBox__list">
<li>PAYCO는 온/오프라인 쇼핑은 물론 송금, 멤버십 적립까지 가능한 통합 서비스입니다.</li>
<li>휴대폰과 카드 명의자가 동일해야 결제 가능하며, 결제금액 제한은 없습니다.
<br>- 지원카드: 모든 국내 신용/체크카드
</li>
</ol>
</div>
<p class="textInfo"><i class="icon icon_textInfo--sm"></i>발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
<c:if test="${'Y' eq payInfo.tpayUseAt}">
<div id="acount-content" class="order-method-normal__content" style="display: none">
<div id="acount-content-inner" class="order-method-normal__content-inner">
<p class="fyi gray-7 mt-10 ml-10">발급정보 : 카드매출전표(또는 휴대폰결제전표)로 대체합니다.</p>
</div>
</div>
</c:if>
</div>
</div>
</c:if>
<!-- kcp 결제 종료 -->
</div>
</form>
</div>
</div>
</div>
<div class="cartOrder__right">
<div class="cartOrder__sticky">
<div class="cartOrderBox">
<h5 class="cartOrderBox__title">결제예정금액</h5>
<ul class="cartOrderBox__list">
<li>
<span class="cartOrderBox__th">총 주문금액</span>
<span class="cartOrderBox__td"><span class="comma" id="goodsAmtSapn">0</span><span class="priceUnit">원</span></span>
</li>
<li>
<span class="cartOrderBox__th">배송비</span>
<span class="cartOrderBox__td"><span class="comma" id="dlvyAmtSapn">0</span><span class="priceUnit">원</span></span>
</li>
<li>
<span class="cartOrderBox__th">총 할인금액</span>
<span class="cartOrderBox__td"><span class="cartOrderBox__discountMinus">(-)</span><span id="dscntAmtSapn" class="comma">0</span><span class="priceUnit">원</span></span>
</li>
</ul>
<div class="cartOrderBox__total">
<span class="cartOrderBox__totalTh">총 결제금액</span>
<span class="cartOrderBox__totalTd"><span id="setleAmtSapn" class="comma">0</span><span class="priceUnit">원</span></span>
</div>
<div class="nonMemberTerms">
<div class="nonMemberTerms__item nonMemberTerms__item--checkAll">
<div class="b-checkbox-container">
<label class="b-checkbox checkbox is-medium">
<input id="termCheckAll" type="checkbox" value="">
<span class="check"></span>
<span class="control-label">전체동의</span>
</label>
</div>
</div>
<c:if test = "${not empty stplat.resultList}">
<c:forEach var = "stplat" items = "${stplat.resultList}">
<div class="nonMemberTerms__item">
<div class="b-checkbox-container">
<label class="b-checkbox checkbox">
<input class="termCheck <c:if test = "${stplat.essntlAt eq 'Y'}">required</c:if>" type="checkbox" <c:if test = "${stplat.stplatDvCd eq '05'}">value="Y" name="marktRecptnAgreAt" id="marktRecptnAgreAt"</c:if>>
<span class="check"></span>
<span class="control-label"><c:if test = "${stplat.essntlAt eq 'Y'}">[필수]</c:if> <c:out value="${stplat.stplatDvNm}"/></span>
</label>
</div>
<c:if test = "${stplat.cnWritngAt eq 'Y'}">
<a class="nonMemberTerms__detail"
href="javascript:fn_select_clause('<c:out value="${stplat.stplatDvCd}"/>');">보기</a>
</c:if>
</div>
</c:forEach>
</c:if>
</div>
<button type="button" id="btnBuy" class="btn theme large cartOrderBox__buyBtn">구매하기</button>
<%--
<div class="product-btn-container">
<button class="gift-btn">선물</button>
<button class="btn large outline">여러곳 배송</button>
<button class="btn large gray2">정기배송</button>
</div>
--%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<%-- 공통 Footer --%>
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
<c:if test="${'Y' == data.payInfo.gcpayCardUseAt || 'Y' == payInfo.gcpayAcntnbUseAt}">
<script src="https://js.tosspayments.com/v1/brandpay"></script>
<script>
const gcPayClientKey = '${data.payInfo.bpayClntKey}';
</script>
<script type="text/javascript" src="<c:url value='/pc/js/gcpay.js'/>"></script>
<script type="text/javascript" src="<c:url value='/pc/css/jqueryui/slick.min.js'/>"></script>
<link rel="stylesheet" href="<c:url value='/pc/css/gcpay.css'/>">
<link rel="stylesheet" href="<c:url value='/pc/css/slick.css'/>">
<link rel="stylesheet" href="<c:url value='/pc/css/slick-theme.css'/>">
<script>
set_slick(true);
gcpay_add_info();
get_promotion_data();
</script>
<!-- GC PAY 카드 무이자 할부 행사 안내 모달 -->
<div id="gcpay-cardInfo-pop" class="modal" style="max-width: 540px;">
<div class="modal-header">
<h4>GC PAY 카드 무이자 할부 행사 안내</h4>
</div>
<div class="modal-content">
<div class="table-wrapper">
<table class="table vertical tight">
<caption>카드 무이자 할부 행사</caption>
<colgroup>
<col style="width: 24%;">
<col style="width: 38%;">
<col style="width: 38%;">
</colgroup>
<thead>
<tr>
<th>카드명</th>
<th>금액기준(이상)</th>
<th>행사 개월수</th>
</tr>
</thead>
<tbody>
<tr class="row-no-data">
<td colspan="100%" class="text-center">조회된 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
<div class="gcpay-eventInfo">
<p class="fyi">GC PAY 카드간편결제 시 무이자 할부 결제 금액과 행사 개월수에 대한 안내입니다.</p>
<p class="fyi">일반결제의 신용카드 및 타 결제 수단에 대한 무이자 할부 기준은 다르며, 별도 안내를 참고해 이용해주세요.</p>
<p class="fyi">법인(개인사업자카드 포함)/체크/기프트카드 등 일부 카드 제외.</p>
<p class="fyi">제휴사이트를 통한 접속 시 무이자 혜택이 제외될 수 있습니다.</p>
<p class="fyi">※ 별도 고지없이 행사 내용/기간 변경될 수 있으며, 자세한 문의는 각 카드사로 확인 부탁드립니다.</p>
</div>
</div>
</div>
<!-- GC PAY 사용안내 모달 -->
<div id="gcpay-info" class="modal default" style="max-width: 500px;">
<div class="modal-header">
<div class="modal-header__title">GC PAY 안내</div>
</div>
<div class="modal-content">
<div class="gcpayGuide">
<img src="/pc/images/popup_setting_top.png" alt="">
<div class="gcpayGuideSlick">
<div class="gcpayGuideSlick__item">
<img src="/pc/images/popup_setting_01.png" alt="">
</div>
<div class="gcpayGuideSlick__item">
<img src="/pc/images/popup_setting_02.png" alt="">
</div>
<div class="gcpayGuideSlick__item">
<img src="/pc/images/popup_setting_03.png" alt="">
</div>
</div>
</div>
<div class="infoBox">
<div class="infoBox__title">GCPay 간편결제의 장점</div>
<ul class="infoBox__list">
<li>주로 사용하는 결제 수단(카드, 계좌)을 쉽게 등록 관리할 수 있어요.</li>
<li>결제 비밀번호만 입력하면 등록 결제 수단으로 빠르게 결제할 수 있어요.</li>
<li>간편결제로 등록한 신용카드도 각 카드사의 혜택은 그대로 받을 수 있어요.</li>
<li>※ 카드사 행사에 따라 무이자 할부 가능. 카드사에 따라 카드사 포인트 사용 가능</li>
</ul>
</div>
</div>
</div>
</c:if>
<!-- 약관 팝업 -->
<div id="nmbrClause" class="modal default" style="max-width: 620px;">
<div class="modal-header">
<div class="modal-header__title" id = "nmbrClause-sj"></div>
</div>
<div class="modal-content" id = "nmbrClause-content">
</div>
<div class="modal-footer">
<a href="#" rel="modal:close" class="btn theme large">확인</a>
</div>
</div>
<div id="modalDiv"></div>
<div id="setleDiv"></div>
<script>
//변경 버튼 클릭시, 변경할 내용 노출
var editBtn = $('.editAccount__editBtn');
var editContent = $('.editAccount__editContent');
// editContent.hide();
editBtn.on('click', function () {
var $this = $(this);
var $thisContent = $this.closest('td').find('.editAccount__editContent');
if ($thisContent.is(':visible')) {
$thisContent.hide();
} else {
editContent.hide();
$thisContent.show();
}
});
//휴대폰 인증 버튼 클릭시, 휴대폰 인증 박스 노출
var phoneAuthBtn = $('#phoneAuthBtn');
var phoneAuthContent = $('#phoneAuthContent');
phoneAuthContent.hide();
<%--
phoneAuthBtn.click(function () {
phoneAuthContent.show();
});
--%>
</script>
</body>
</html>