2393 lines
130 KiB
Plaintext
2393 lines
130 KiB
Plaintext
<%@ 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 설정]을 눌러 본인인증 후 좌측상단의 [<]를 클릭"</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>
|