merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
24
build/resources/main/static/sopmall/pc/js/common.js
Normal file
24
build/resources/main/static/sopmall/pc/js/common.js
Normal file
@@ -0,0 +1,24 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
// 서브 탭 메뉴 타입 2
|
||||
var boxTabs = document.querySelectorAll(".boxTab__tabBtn");
|
||||
var contents = document.querySelectorAll(".boxTab__content");
|
||||
|
||||
function resetBoxTabs() {
|
||||
boxTabs.forEach(function(tab) {
|
||||
tab.classList.remove("current");
|
||||
});
|
||||
contents.forEach(function(content) {
|
||||
content.classList.remove("current");
|
||||
});
|
||||
}
|
||||
|
||||
boxTabs.forEach(function(tab, index) {
|
||||
tab.addEventListener("click", function() {
|
||||
resetBoxTabs();
|
||||
tab.classList.add("current");
|
||||
contents[index].classList.add("current");
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
934
build/resources/main/static/sopmall/pc/js/gcpay.js
Normal file
934
build/resources/main/static/sopmall/pc/js/gcpay.js
Normal file
@@ -0,0 +1,934 @@
|
||||
const cardCodes = [
|
||||
{cd: '3K', nm: '기업비씨'},
|
||||
{cd: '46', nm: '광주'},
|
||||
{cd: '71', nm: '롯데'},
|
||||
{cd: '30', nm: '산업'},
|
||||
{cd: '31', nm: '비씨'},
|
||||
{cd: '51', nm: '삼성'},
|
||||
{cd: '38', nm: '새마을'},
|
||||
{cd: '41', nm: '신한'},
|
||||
{cd: '62', nm: '신협'},
|
||||
{cd: '36', nm: '씨티'},
|
||||
{cd: '33', nm: '우리'},
|
||||
{cd: 'W1', nm: '우리'},
|
||||
{cd: '37', nm: '우체국'},
|
||||
{cd: '39', nm: '저축'},
|
||||
{cd: '35', nm: '전북'},
|
||||
{cd: '42', nm: '제주'},
|
||||
{cd: '15', nm: '카카오뱅크'},
|
||||
{cd: '3A', nm: '케이뱅크'},
|
||||
{cd: '24', nm: '토스뱅크'},
|
||||
{cd: '21', nm: '하나'},
|
||||
{cd: '61', nm: '현대'},
|
||||
{cd: '11', nm: '국민'},
|
||||
{cd: '91', nm: '농협'},
|
||||
{cd: '34', nm: '수협'}
|
||||
];
|
||||
|
||||
const bankCodes = [
|
||||
{cd: '39', nm: '경남'},
|
||||
{cd: '34', nm: '광주'},
|
||||
{cd: '12', nm: '단위농협'},
|
||||
{cd: '32', nm: '부산'},
|
||||
{cd: '45', nm: '새마을'},
|
||||
{cd: '64', nm: '산림'},
|
||||
{cd: '88', nm: '신한'},
|
||||
{cd: '48', nm: '신협'},
|
||||
{cd: '27', nm: '씨티'},
|
||||
{cd: '20', nm: '우리'},
|
||||
{cd: '71', nm: '우체국'},
|
||||
{cd: '50', nm: '저축'},
|
||||
{cd: '37', nm: '전북'},
|
||||
{cd: '35', nm: '제주'},
|
||||
{cd: '90', nm: '카카오'},
|
||||
{cd: '89', nm: '케이'},
|
||||
{cd: '92', nm: '토스'},
|
||||
{cd: '81', nm: '하나'},
|
||||
{cd: '54', nm: '-'},
|
||||
{cd: '03', nm: '기업'},
|
||||
{cd: '06', nm: '국민'},
|
||||
{cd: '31', nm: '대구'},
|
||||
{cd: '02', nm: '산업'},
|
||||
{cd: '11', nm: '농협'},
|
||||
{cd: '23', nm: 'SC제일'},
|
||||
{cd: '07', nm: '수협'}
|
||||
];
|
||||
|
||||
let card_mileage_rate = '0';
|
||||
let account_mileage_rate = '0';
|
||||
|
||||
let customerKey = ''; // 고객을 식별할 수 있는 키
|
||||
|
||||
let cardCnt; // 등록된 카드 수
|
||||
let accCnt; // 등록된 계좌 수
|
||||
let gcpayAuthYn = false;
|
||||
let oldGcpayAuthYn = false;
|
||||
|
||||
let gcTokenYn = false;
|
||||
|
||||
|
||||
// 브랜드 페이 초기화
|
||||
/*
|
||||
let brandpay = BrandPay(gcPayClientKey, customerKey, {
|
||||
redirectUrl: 'http://loc.allfree.kr:18310/sopmal/ordr/selectGcpayToken', //window.location.origin + '/sopmal/ordr/selectGcpayToken',
|
||||
// UI 커스터마이징 옵션 설정 (optional)
|
||||
ui: {
|
||||
highlightColor: '#26C2E3',
|
||||
buttonStyle: 'full',
|
||||
labels: {
|
||||
oneTouchPay: '지씨페이',
|
||||
},
|
||||
},
|
||||
});
|
||||
*/
|
||||
$(document).ready(function() {
|
||||
// 카드 추가 버튼 클릭
|
||||
$(document).on('click', '#gcpay_card_add', function() {
|
||||
brandpay.addPaymentMethod('카드')
|
||||
.then(function (methods) {
|
||||
gcpayAuthYn = true;
|
||||
set_gcpay_method(methods, false);
|
||||
})
|
||||
.catch(function (error) {
|
||||
if (error.code === 'USER_CANCEL') { // 사용자가 결제창을 닫은 경우 에러 처리
|
||||
if ('sopmal_m' === $('#deviceType').val()) {
|
||||
fn_call_alert_modal('GC PAY 카드 간편결제가 취소되었습니다.');
|
||||
} else {
|
||||
alert('GC PAY 카드 간편결제가 취소되었습니다.');
|
||||
}
|
||||
|
||||
//as_is는 alert 대신 get_gcpay_methods(); 옴
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// 계좌 추가 버튼 클릭
|
||||
$(document).on('click', '#gcpay_account_add', function() {
|
||||
brandpay
|
||||
.addPaymentMethod('계좌')
|
||||
.then(function (methods) {
|
||||
gcpayAuthYn = true;
|
||||
set_gcpay_method(methods, false);
|
||||
})
|
||||
.catch(function (error) {
|
||||
if (error.code === 'USER_CANCEL') {
|
||||
if ('sopmal_m' === $('#deviceType').val()) {
|
||||
fn_call_alert_modal('GC PAY 계좌 간편결제가 취소되었습니다.');
|
||||
} else {
|
||||
alert('GC PAY 계좌 간편결제가 취소되었습니다.');
|
||||
}
|
||||
|
||||
//as_is는 alert 대신 get_gcpay_methods(); 옴
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// 이전/다음 버튼 클릭
|
||||
$(document).on('click', '.slick-arrow', function() {
|
||||
const div = $(this).closest('.slideW');
|
||||
const classs = $(div).attr('class');
|
||||
|
||||
const isCard = classs.includes('card');
|
||||
|
||||
if (isCard) {
|
||||
const wrap = $(this).closest('.pgContent').find('.selectWrap');
|
||||
|
||||
$(wrap).find('.card-installment-plan option:first').prop('selected', true);
|
||||
$(wrap).find('.use-card-point').prop('checked', false);
|
||||
}
|
||||
|
||||
const isBank = classs.includes('bank');
|
||||
|
||||
if (isBank) {
|
||||
const wrap = $(this).closest('.pgContent').find('.selectWrap');
|
||||
|
||||
$(wrap).find('#gc-pay-bank-cash-receipt').prop('checked', true);
|
||||
$(wrap).find('#gc-pay-bank-cash-receipt').trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
// 설정 버튼 클릭
|
||||
$('#gcpay_set').bind('click', function () {
|
||||
if (!customerKey) {
|
||||
if ('sopmal_m' === $('#deviceType').val()) {
|
||||
fn_call_alert_modal('회원가입 후 사용하실 수 있습니다.');
|
||||
} else {
|
||||
alert('회원가입 후 사용하실 수 있습니다.');
|
||||
}
|
||||
} else {
|
||||
brandpay.openSettings().catch(function (error) {
|
||||
if (error.code === 'USER_CANCEL') {
|
||||
// 사용자가 결제창을 닫은 경우 에러 처리
|
||||
console.log(error.code);
|
||||
|
||||
get_gcpay_methods(gcTokenYn);
|
||||
} else {
|
||||
console.log('openSettings error');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 브랜드 페이 초기화
|
||||
function initBrandPay(mbrInnb, tokenYn) {
|
||||
customerKey = mbrInnb;
|
||||
gcTokenYn = tokenYn;
|
||||
|
||||
console.log('-------- initBrandPay gcTokenYn --------',gcTokenYn);
|
||||
console.log('-------- initBrandPay customerKey --------',customerKey);
|
||||
|
||||
brandpay = BrandPay(gcPayClientKey, customerKey, {
|
||||
redirectUrl: window.location.origin + '/sopmal/ordr/selectGcpayToken', //'http://loc.allfree.kr:18310/sopmal/ordr/selectGcpayToken',
|
||||
// UI 커스터마이징 옵션 설정 (optional)
|
||||
ui: {
|
||||
highlightColor: '#26C2E3',
|
||||
buttonStyle: 'full',
|
||||
labels: {
|
||||
oneTouchPay: '지씨페이',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
//cardCnt = 0;
|
||||
//accCnt = 0;
|
||||
|
||||
get_gcpay_methods(true); // 등록된 카드 정보로 출력 - 최초호출여부 ture
|
||||
}
|
||||
|
||||
// 슬라이딩 초기화
|
||||
function set_slick(isInit) {
|
||||
if (!isInit) {
|
||||
$('.cardSlideW').slick('slickRemove', null, null, true);
|
||||
$('.slideDep').slick('slickRemove', null, null, true);
|
||||
$('.bankSlideW').slick('slickRemove', null, null, true);
|
||||
}
|
||||
|
||||
$('.bankSlideW').not('.slick-initialized').slick({
|
||||
initialSlide: 0, //처음보여줄 슬라이드 번호
|
||||
slidesToShow: 1, //한 화면에 보여줄 아이템수
|
||||
slidesToScroll: 1, // 한번에 슬라이드 시킬 아이템 개수
|
||||
dots: false,
|
||||
arrows: true,
|
||||
autoplay: false,
|
||||
infinite: false,
|
||||
centerMode: true,
|
||||
variableWidth: true,
|
||||
focusOnSelect: true,
|
||||
speed: 300
|
||||
});
|
||||
|
||||
$('.cardSlideW').not('.slick-initialized').slick({
|
||||
initialSlide: 0, // 처음보여줄 슬라이드 번호
|
||||
slidesToShow: 1, // 한 화면에 보여줄 아이템수
|
||||
slidesToScroll: 1, // 한번에 슬라이드 시킬 아이템 개수
|
||||
dots: false,
|
||||
arrows: true,
|
||||
autoplay: false,
|
||||
infinite: false,
|
||||
centerMode: true,
|
||||
variableWidth: true,
|
||||
focusOnSelect: true,
|
||||
speed: 300,
|
||||
asNavFor: '.slideDep'
|
||||
});
|
||||
|
||||
$('.slideDep').not('.slick-initialized').slick({
|
||||
initialSlide: 0, // 처음보여줄 슬라이드 번호
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: false,
|
||||
autoplay: false,
|
||||
infinite: false,
|
||||
centerMode: true,
|
||||
focusOnSelect: true,
|
||||
fade: true,
|
||||
speed: 300,
|
||||
adaptiveHeight: true,
|
||||
draggable: false,
|
||||
asNavFor: '.cardSlideW'
|
||||
});
|
||||
}
|
||||
|
||||
// 결제정보 조회 (인증포함)
|
||||
function get_payment_method(first_check) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
contentType: 'application/json',
|
||||
dataType: 'json',
|
||||
url: '/sopmal/ordr/selectGcpayMethod',
|
||||
success: function (data) {
|
||||
if (data.resBody != null) {
|
||||
const result = JSON.parse(data.resBody.result);
|
||||
|
||||
console.log('-------- get_payment_method --------');
|
||||
console.log(result.response);
|
||||
console.log('-----------------------------');
|
||||
|
||||
if (result.response.code) { // 에러 코드 있을 경우 처리
|
||||
console.log(result.response.message);
|
||||
display_default_methods(); // 등록 정보 가져오기 못할 경우 기본 Display
|
||||
} else {
|
||||
|
||||
console.log("oldGcpayAuthYn1===",oldGcpayAuthYn);
|
||||
|
||||
gcpayAuthYn = result.response.isIdentified; // 본인 확인 완료 여부 (브랜드페이 가입여부)
|
||||
console.log("gcpayAuthYn===",gcpayAuthYn);
|
||||
|
||||
if (first_check == true)
|
||||
oldGcpayAuthYn = gcpayAuthYn; // 페이지 로딩 후 처음 호출시 초기 값 설정 =============================
|
||||
|
||||
console.log("oldGcpayAuthYn2===",oldGcpayAuthYn);
|
||||
|
||||
if (gcpayAuthYn) { // 본인 확인 했을 경우 결제 수단 Display 호출
|
||||
set_gcpay_method(result.response);
|
||||
return;
|
||||
} else {
|
||||
console.log('NO AUTH');
|
||||
display_default_methods(); // 등록 정보 가져오기 못할 경우 기본 Display
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
display_default_methods(); // 등록 정보 가져오기 못할 경우 기본 Display
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 무이자할부, 포인트 등 프로모션 정보 조회
|
||||
function get_promotion_data() {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
contentType: 'application/json',
|
||||
dataType: 'json',
|
||||
url: '/sopmal/ordr/selectGcpayCardPromtns',
|
||||
success: function (data) {
|
||||
if (data.resBody != null) {
|
||||
const result = JSON.parse(data.resBody.result);
|
||||
|
||||
// console.log('-------- cardPromtns --------');
|
||||
// console.log(result.response);
|
||||
// console.log('-----------------------------');
|
||||
|
||||
get_promotion_html(result.response);
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 무이자할부, 포인트 등 프로모션 정보 세팅
|
||||
function get_promotion_html(data){
|
||||
if (fn_is_empty(data)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const div = $('#gcpay-cardInfo-pop');
|
||||
const tbody = $(div).find('tbody');
|
||||
const cards = data.interestFreeCards;
|
||||
|
||||
let freecard_html= '';
|
||||
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const card = cards[i];
|
||||
|
||||
freecard_html += '<tr>';
|
||||
freecard_html += ' <td>' + get_card_cmpny_nm(card.companyCode) + '</td>';
|
||||
freecard_html += ' <td><span class="comma">' + card.minimumPaymentAmount.toLocaleString() + '원</span></td>';
|
||||
freecard_html += ' <td>' + card.installmentFreeMonths + '</td>';
|
||||
freecard_html += '</tr>';
|
||||
}
|
||||
|
||||
$(tbody).empty().append(freecard_html);
|
||||
}
|
||||
|
||||
// 간편결제 카드, 계좌 추가 버튼 Dislay
|
||||
function gcpay_add_info() {
|
||||
let card_html;
|
||||
let card_msg = '간편결제 카드를 등록하시고 간편한 결제를 경험해 보세요.</span></p>';
|
||||
|
||||
if (card_mileage_rate > 0) {
|
||||
card_msg = '간편결제 카드를 등록하시고 결제하면<br/> <span class="po">결제금액의 ' + card_mileage_rate + '% <br>마일리지 추가 적립 혜택을 드려요.</span></p>';
|
||||
$('#card_rate').text('GC PAY 카드 간편 결제로 결제시 통합 마일리지 ' + card_mileage_rate + '% 추가 적립');
|
||||
}
|
||||
|
||||
let acc_msg = '간편결제 계좌 등록하시고 간편한 결제를 경험해 보세요.</span></p>';
|
||||
|
||||
if (account_mileage_rate > 0) {
|
||||
acc_msg = '간편결제 계좌 등록하고 결제하면<br/> <span class="po">결제금액의 ' + account_mileage_rate + '% <br>마일리지 추가 적립 혜택을 드려요.</span></p>';
|
||||
$('#account_rate').text('GC PAY 계좌 간편 결제로 결제시 통합 마일리지 ' + account_mileage_rate + '% 추가 적립');
|
||||
}
|
||||
|
||||
let card_div_nm = 'id="gcpay_card_add"';
|
||||
let acc_div_nm = 'id="gcpay_account_add"';
|
||||
let add_slide = '#';
|
||||
|
||||
if (!customerKey) {
|
||||
const member_button = ' <a href="/sopmal/mbr/selectJoinForm">회원가입하러 가기</a>';
|
||||
card_msg = '회원가입 후 ' + card_msg + member_button;
|
||||
acc_msg = '회원가입 후 ' + acc_msg + member_button;
|
||||
card_div_nm = '';
|
||||
acc_div_nm = '';
|
||||
|
||||
if ('sopmal_m' === $('#deviceType').val()) {
|
||||
add_slide = 'javascript:fn_call_alert_modal(\'회원가입 후 사용하실 수 있습니다\');'
|
||||
} else {
|
||||
add_slide = 'javascript:alert(\'회원가입 후 사용하실 수 있습니다\');'
|
||||
}
|
||||
}
|
||||
|
||||
if (cardCnt === 0 || !cardCnt) {
|
||||
card_html = '<div><div class="boxW ca_point">' + '<div class="contW"><p class="txt">' + card_msg + '</div></div></div>';
|
||||
|
||||
$('.cardSlideW').slick('slickAdd', card_html);
|
||||
$('.slideDep').slick('slickAdd', '<div class="no_content"></div>');
|
||||
}
|
||||
|
||||
card_html = '<div><div class="boxW ca_new"' + card_div_nm + '"><a href="' + add_slide + '"><i class="ico"><svg viewBox="0 0 512 512" xml:space="preserve">' +
|
||||
'<path d="M256,0C114.833,0,0,114.833,0,256s114.833,256,256,256s256-114.853,256-256S397.167,0,256,0z M256,472.341' +
|
||||
'c-119.275,0-216.341-97.046-216.341-216.341S136.725,39.659,256,39.659S472.341,136.705,472.341,256S375.295,472.341,256,472.341z"/>' +
|
||||
'<path d="M355.148,234.386H275.83v-79.318c0-10.946-8.864-19.83-19.83-19.83s-19.83,8.884-19.83,19.83v79.318h-79.318' +
|
||||
'c-10.966,0-19.83,8.884-19.83,19.83s8.864,19.83,19.83,19.83h79.318v79.318c0,10.946,8.864,19.83,19.83,19.83' +
|
||||
's19.83-8.884,19.83-19.83v-79.318h79.318c10.966,0,19.83-8.884,19.83-19.83S366.114,234.386,355.148,234.386z"/>' +
|
||||
'</svg></i><span class="txt">새로운 카드 등록하기</span></a></div></div>';
|
||||
|
||||
$('.cardSlideW').slick('slickAdd', card_html);
|
||||
|
||||
$('.slideDep').slick('slickAdd', '<div class="no_content"></div>');
|
||||
|
||||
if (accCnt === 0 || !accCnt) {
|
||||
$('.bankSlideW').slick('slickAdd', '<div><div class="boxW ca_point"><div class="contW"><p class="txt">' + acc_msg + '</div></div></div>');
|
||||
}
|
||||
|
||||
const account_html = '<div><div class="boxW ca_new"' + acc_div_nm + '><a href="' + add_slide + '"><i class="ico">' +
|
||||
'<svg viewBox="0 0 512 512" xml:space="preserve">' +
|
||||
'<path d="M256,0C114.833,0,0,114.833,0,256s114.833,256,256,256s256-114.853,256-256S397.167,0,256,0z M256,472.341' +
|
||||
'c-119.275,0-216.341-97.046-216.341-216.341S136.725,39.659,256,39.659S472.341,136.705,472.341,256S375.295,472.341,256,472.341z"/>' +
|
||||
'<path d="M355.148,234.386H275.83v-79.318c0-10.946-8.864-19.83-19.83-19.83s-19.83,8.884-19.83,19.83v79.318h-79.318' +
|
||||
'c-10.966,0-19.83,8.884-19.83,19.83s8.864,19.83,19.83,19.83h79.318v79.318c0,10.946,8.864,19.83,19.83,19.83' +
|
||||
's19.83-8.884,19.83-19.83v-79.318h79.318c10.966,0,19.83-8.884,19.83-19.83S366.114,234.386,355.148,234.386z"/>' +
|
||||
'</svg></i><span class="txt">새로운 계좌 등록하기</span></a></div></div>';
|
||||
|
||||
$('.bankSlideW').slick('slickAdd', account_html);
|
||||
}
|
||||
|
||||
// 등록된 카드 정보 가져오기
|
||||
function get_gcpay_methods(first_check){
|
||||
if (fn_is_empty(customerKey)) {
|
||||
return false;
|
||||
}
|
||||
console.log('-------- get_gcpay_methods customerKey --------',customerKey);
|
||||
//.getPaymentMethods() 시에 토큰발급
|
||||
console.log('-------- get_gcpay_methods gcTokenYn --------',gcTokenYn);
|
||||
console.log('-------- get_gcpay_methods first_check --------',first_check);
|
||||
if(!gcTokenYn && first_check){ console.log('-------- get_gcpay_methods if --------');
|
||||
brandpay
|
||||
.getPaymentMethods()
|
||||
.then(function (methods) {
|
||||
console.log('-------- get_gcpay_methods methods --------');
|
||||
console.log(methods);
|
||||
console.log('-------------------------');
|
||||
|
||||
set_gcpay_method(methods);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('-------- get_gcpay_methods error --------');
|
||||
console.log(error)
|
||||
console.log('-------------------------');
|
||||
|
||||
display_default_methods(); // 등록 정보 가져오기 못할 경우 기본 Display
|
||||
});
|
||||
}else{ console.log('-------- get_gcpay_methods else --------');
|
||||
get_payment_method(first_check);
|
||||
}
|
||||
}
|
||||
|
||||
// 등록된 카드 정보로 Display
|
||||
function set_gcpay_method(methods){
|
||||
set_slick(false); // slick 슬라이딩 init
|
||||
|
||||
const oldCardCnt = cardCnt;
|
||||
const oldAccCnt = accCnt;
|
||||
cardCnt = 0;
|
||||
accCnt = 0;
|
||||
|
||||
const cards = methods['cards']; // 등록된 카드 정보
|
||||
cards.forEach(function(card, index) {
|
||||
const dsplyCardNumber = card.cardNumber.substring(0, 4) + ' ' + card.cardNumber.substring(4, 8) + ' ' + card.cardNumber.substring(8, 12) + ' ' + card.cardNumber.substring(12, 16); // 노출 하기 위한 카드 번호
|
||||
const cardCss = get_card_css(get_card_cmpny_nm(card.acquirerCode));
|
||||
|
||||
let isPromotion = false; // 무이자 할부 사용 여부
|
||||
let isPoint = false; // 포인트 사용 여부
|
||||
|
||||
let cardHtml = '';
|
||||
let optionHtml = ''; // 포인트 사용 및 무이자 할부 html 초기화
|
||||
|
||||
const date = new Date();
|
||||
const today = date.getFullYear() + '-' + ((date.getMonth() + 1) < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + ((date.getDate()) < 9 ? '0' + (date.getDate()) : (date.getDate()));
|
||||
|
||||
const rlSetleAmt = $('#rlSetleAmt').val();
|
||||
|
||||
if ('ENABLED' === card.status) {
|
||||
const promotions = card['promotions']; // 프로모션
|
||||
|
||||
if (!fn_is_empty(promotions)) {
|
||||
promotions.forEach(function (promotion) {
|
||||
const type = promotion.type;
|
||||
|
||||
if ('CARD_POINT' === type) { // 카드 포인트 할인
|
||||
const cardPoint = promotion['cardPoint'];
|
||||
|
||||
if (!fn_is_empty(cardPoint)) {
|
||||
if (cardPoint.issuerCode === card.acquirerCode) {
|
||||
if (cardPoint.dueDate >= today) {
|
||||
optionHtml += '<li>';
|
||||
optionHtml += ' <label class="b-checkbox checkbox">';
|
||||
optionHtml += ' <input type="checkbox" id="use-card-poin' + index + '" class="use-card-point">';
|
||||
optionHtml += ' <span class="check"></span>';
|
||||
optionHtml += ' <span class="control-label">' + card.cardName + '카드 포인트 사용</span>';
|
||||
optionHtml += ' </label>';
|
||||
optionHtml += '</li>';
|
||||
|
||||
isPoint = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ('CARD_INTEREST_FREE' === type) { // 카드 포인트 할인
|
||||
const interestFreeCards = promotion['cardInterestFree'];
|
||||
|
||||
if (!fn_is_empty(interestFreeCards)) {
|
||||
if (interestFreeCards.issuerCode === card.acquirerCode) {
|
||||
if (diff_date(interestFreeCards.dueDate, today) <= 0) {
|
||||
if (card.ownerType === '개인' && card.cardType === '신용') {
|
||||
optionHtml += get_free_month_html(index, interestFreeCards.installmentFreeMonths, interestFreeCards.minimumPaymentAmount, rlSetleAmt, card.cardType);
|
||||
} else {
|
||||
if (card.ownerType === '법인') {
|
||||
optionHtml += get_free_month_html(index, interestFreeCards.installmentFreeMonths, 1, 2, card.cardType);
|
||||
} else {
|
||||
optionHtml += get_free_month_html(index, interestFreeCards.installmentFreeMonths, 2, 1, card.cardType);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isPromotion = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (isPromotion === false) { // 프로모션 없을 경우
|
||||
optionHtml += get_free_month_html(index, null, 2, 1, el.cardType);
|
||||
}
|
||||
|
||||
cardHtml += '<div class="gcpay_cards">';
|
||||
cardHtml += ' <div class="boxW ca_code_' + cardCss + '">';
|
||||
cardHtml += ' <span class="card_logo"></span>';
|
||||
cardHtml += ' <div class="detaW">';
|
||||
cardHtml += ' <span class="txt">' + card.cardName + '</span>';
|
||||
cardHtml += ' <strong class="number">' + dsplyCardNumber + '</strong>';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += ' <input type="hidden" id="gcRegisteredAt' + index + '" value="' + card.registeredAt + '">';
|
||||
cardHtml += ' <input type="hidden" id="gcCardId' + index + '" value="' + card.id + '">';
|
||||
cardHtml += ' <input type="hidden" id="gcCardCompay' + index + '" value="' + card.issuerCode + '">';
|
||||
cardHtml += ' <input type="hidden" id="gcCardNum' + index + '" value="' + card.cardNumber + '">';
|
||||
cardHtml += ' <input type="hidden" id="gcCardAlias' + index + '" value="' + card.alias + '">';
|
||||
cardHtml += ' <input type="hidden" id="gcCompanyCode' + index + '" value="' + card.issuerCode + '">';
|
||||
cardHtml += ' <input type="hidden" id="gcStatus' + index + '" value="' + card.status + '">';
|
||||
cardHtml += ' <input type="hidden" id="gcCardType' + index + '" value="' + card.cardType + '">';
|
||||
cardHtml += ' <input type="hidden" id="gcCardOwnerType' + index + '" value="' + card.ownerType + '">';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += '</div>';
|
||||
} else { // 사용불가 카드
|
||||
cardHtml += '<div>';
|
||||
cardHtml += ' <div class="boxW ca_code_' + cardCss + ' none">';
|
||||
cardHtml += ' <div class="noneTxt">사용 불가능한 카드입니다.</div>';
|
||||
cardHtml += ' <span class="card_logo"></span>';
|
||||
cardHtml += ' <div class="detaW">';
|
||||
cardHtml += ' <span class="txt">' + card.cardName + '</span>';
|
||||
cardHtml += ' <strong class="number">' + dsplyCardNumber + '</strong>';
|
||||
cardHtml += ' <input type="hidden" id="gcCardId' + index + '" value="none">';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += '</div>';
|
||||
}
|
||||
|
||||
if (!isPoint) { // 포인트 사용 정보 없을 경우
|
||||
optionHtml = '<li></li>' + optionHtml;
|
||||
}
|
||||
|
||||
optionHtml = '<div style="margin-bottom:10px;" ><ul style="display: flex; justify-content: space-between;">' + optionHtml + '</ul></div>';
|
||||
|
||||
$('.cardSlideW').slick('slickAdd', cardHtml); // 카드 슬라인딩 추가
|
||||
$('.slideDep').slick('slickAdd', optionHtml); // 카드 행사 ( 포인트 사용, 무이자 할부 ) 슬라이딩 추가
|
||||
$('.slideDep').find('.select-box select').niceSelect();
|
||||
|
||||
cardCnt++; // 카드 등록 수 추가
|
||||
});
|
||||
|
||||
const accounts = methods['accounts']; // 등록된 계좌 정보
|
||||
|
||||
if (!fn_is_empty(accounts)) {
|
||||
accounts.forEach(function(account, index) {
|
||||
let accountHtml = '';
|
||||
|
||||
const bankCss = get_bank_css(get_bank_nm(account.bankCode)); // css 계좌 코드 가져오기
|
||||
|
||||
if ('ENABLED' === account.status) {
|
||||
accountHtml += '<div class="gcpay_accounts">';
|
||||
accountHtml += ' <div class="boxW ba_code_' + bankCss + '">';
|
||||
accountHtml += ' <span class="card_logo"></span>';
|
||||
accountHtml += ' <div class="detaW">';
|
||||
accountHtml += ' <span class="txt">' + account.accountName + '</span>';
|
||||
accountHtml += ' <strong class="number">' + account.accountNumber + '</strong>';
|
||||
accountHtml += ' </div>';
|
||||
accountHtml += ' </div>';
|
||||
accountHtml += ' <input type="hidden" id="gcRegisteredAt' + index + '" value="' + account.registeredAt + '">';
|
||||
accountHtml += ' <input type="hidden" id="gcAccId' + index + '" value="' + account.id + '">';
|
||||
accountHtml += ' <input type="hidden" id="gcAcoNm' + index + '" value="' + account.accountName + '">';
|
||||
accountHtml += ' <input type="hidden" id="gcAccNum' + index + '" value="' + account.accountNumber + '">';
|
||||
accountHtml += ' <input type="hidden" id="gcAccAlias' + index + '" value="' + account.alias + '">';
|
||||
accountHtml += ' <input type="hidden" id="gcBank' + index + '" value="' + account.bank + '">';
|
||||
accountHtml += ' <input type="hidden" id="gcBankCode' + index + '" value="' + account.bankCode + '">';
|
||||
accountHtml += ' <input type="hidden" id="gcStatus' + index + '" value="' + account.status + '"></div>';
|
||||
accountHtml += '</div>';
|
||||
} else {
|
||||
accountHtml += '<div class="gcpay_accounts">';
|
||||
accountHtml += ' <div class="boxW ba_code_' + bankCss + ' none">';
|
||||
accountHtml += ' <div class="noneTxt">사용 불가능한 계좌입니다.</div>';
|
||||
accountHtml += ' <span class="card_logo"></span>';
|
||||
accountHtml += ' <div class="detaW">';
|
||||
accountHtml += ' <span class="txt">' + account.accountName + '</span>';
|
||||
accountHtml += ' <strong class="number">' + account.accountNumber + '</strong>';
|
||||
accountHtml += ' <input type="hidden" id="gcAccId' + index + '" value="none"></div></div>';
|
||||
accountHtml += ' </div>';
|
||||
accountHtml += '</div>';
|
||||
|
||||
$('.selectWrap').hide();
|
||||
}
|
||||
|
||||
$('.bankSlideW').slick("slickAdd", accountHtml); // 계좌 슬라이딩 추가
|
||||
|
||||
accCnt++; // 계좌 등록 수 추가
|
||||
});
|
||||
}
|
||||
|
||||
//TODO : 최초등록일을 가져와서 쿠폰을 발급해야 함
|
||||
// ( 기존 결제 수단 갯수와 받아온 결제 수단 갯수가 다를 경우 & 처음 로딩이 아닐 경우 ) or
|
||||
// ( 기존 본인 확인 완료 여부 == false && 현재 가져온 본인 확인 완료 여부 == true )
|
||||
console.log('card : '+oldCardCnt +' : '+cardCnt);
|
||||
console.log('account : '+oldAccCnt +' : '+accCnt);
|
||||
console.log('auth_yn : '+oldGcpayAuthYn + ' : ' + gcpayAuthYn );
|
||||
if((( oldCardCnt !== cardCnt || oldAccCnt !== accCnt ) && oldCardCnt!==undefined && oldAccCnt!==undefined )
|
||||
|| ( gcpayAuthYn !== oldGcpayAuthYn && oldGcpayAuthYn ===false )) {
|
||||
// 갱신 결과 쿠폰이 발급되었으면 안내
|
||||
console.log('coupon 발급');
|
||||
// set_gcpay_info(methods); // 간편 결제 정보 Hub저장
|
||||
}
|
||||
|
||||
gcpay_add_info(); // 결제 수단 추가 버튼 노출
|
||||
|
||||
oldGcpayAuthYn = gcpayAuthYn;
|
||||
}
|
||||
|
||||
// 무이자 할부 개월수 가져오기
|
||||
function get_free_month_html(index, installmentFreeMonths, p_amount, t_price, cardType) {
|
||||
let option_html = '';
|
||||
let option_list = '';
|
||||
let month_disabled = '';
|
||||
|
||||
if (cardType === '신용') {
|
||||
if (Number(p_amount) <= Number(t_price)) {
|
||||
if (installmentFreeMonths) {
|
||||
for (let i = 2; i <= 12; i++) {
|
||||
if (installmentFreeMonths.indexOf(parseInt(i)) !== -1) {
|
||||
option_list += '<option value="' + i + '">' + i + '개월 무이자</option>';
|
||||
} else {
|
||||
option_list += '<option value="' + i + '">' + i + '개월</option>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (option_list === '') {
|
||||
for (let i = 2; i <= 12; i++) {
|
||||
option_list += '<option value="' + i + '">' + i + '개월</option>';
|
||||
}
|
||||
}
|
||||
|
||||
if (option_list !== '') {
|
||||
month_disabled = '';
|
||||
}
|
||||
} else {
|
||||
month_disabled = 'disabled';
|
||||
}
|
||||
} else {
|
||||
month_disabled = 'disabled';
|
||||
}
|
||||
|
||||
option_html += '<li>';
|
||||
option_html += ' <div class="select-box">';
|
||||
option_html += ' <select name="instl-month" id="instl-month-' + index + '" ' + month_disabled + ' class="card-installment-plan">';
|
||||
option_html += ' <option value="0">일시불</option>';
|
||||
option_html += option_list;
|
||||
option_html += ' </select>';
|
||||
option_html += ' </div>';
|
||||
option_html += '</li>';
|
||||
|
||||
return option_html;
|
||||
}
|
||||
|
||||
|
||||
// TODO : 간편 결제 정보 Hub 저장 (코드진행중)
|
||||
function set_gcpay_info(methods){
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
contentType: 'application/json',
|
||||
dataType: 'json',
|
||||
data : methods ,
|
||||
url: '/sopmal/ordr/selectGcpayInfo',
|
||||
success: function (data) {
|
||||
if ( data ) {
|
||||
if (data.first_ck === 'Y' && data.coupon_num !== undefined ) {
|
||||
var tmp = confirm('GC PAY 이벤트 쿠폰 발행되었습니다.\n쿠폰 적용하여 결제하시려면 현재 페이지를 새로고침 하셔야 합니다.\n새로고침 하시겠습니까?');
|
||||
if ( tmp ) {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
, error: function (data) {
|
||||
console.log('error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 결제 수단 기본 레이아웃 ( 안내 슬라이딩 , 등록 슬라이딩 ) Display
|
||||
function display_default_methods() {
|
||||
set_slick(false);
|
||||
|
||||
gcpay_add_info();
|
||||
}
|
||||
|
||||
/* 카드사 코드명 조회 */
|
||||
function get_card_cmpny_nm(cd) {
|
||||
return cardCodes.filter(() => true).find(o => o.cd === cd).nm;
|
||||
}
|
||||
|
||||
/* 은행 코드명 조회 */
|
||||
function get_bank_nm(cd) {
|
||||
return bankCodes.filter(() => true).find(o => o.cd === cd).nm;
|
||||
}
|
||||
|
||||
/* 날자 비교 */
|
||||
function diff_date(strDate1, strDate2) {
|
||||
const dateArray1 = strDate1.split('-');
|
||||
const dateArray2 = strDate2.split('-');
|
||||
|
||||
const dateObj1 = new Date(dateArray1[0], Number(dateArray1[1]) - 1, dateArray1[2]);
|
||||
const dateObj2 = new Date(dateArray2[0], Number(dateArray2[1]) - 1, dateArray2[2]);
|
||||
|
||||
return (dateObj2.getTime() - dateObj1.getTime()) / 1000 / 60 / 60 / 24;
|
||||
}
|
||||
|
||||
// 카드 CSS 코드
|
||||
function get_card_css(company) {
|
||||
var cardCode = '';
|
||||
switch (company) {
|
||||
case '농협':
|
||||
cardCode = '001';
|
||||
break;
|
||||
case '우리':
|
||||
cardCode = '002';
|
||||
break;
|
||||
case '신한':
|
||||
cardCode = '003';
|
||||
break;
|
||||
case '국민':
|
||||
cardCode = '004';
|
||||
break;
|
||||
case '하나':
|
||||
cardCode = '005';
|
||||
break;
|
||||
case '씨티':
|
||||
cardCode = '006';
|
||||
break;
|
||||
case '삼성':
|
||||
cardCode = '025';
|
||||
break;
|
||||
case '현대':
|
||||
cardCode = '026';
|
||||
break;
|
||||
case '롯데':
|
||||
cardCode = '027';
|
||||
break;
|
||||
case 'VISA':
|
||||
cardCode = '028';
|
||||
break;
|
||||
case '마스터':
|
||||
cardCode = '029';
|
||||
break;
|
||||
case '비씨':
|
||||
cardCode = '030';
|
||||
break;
|
||||
case 'BC':
|
||||
cardCode = '030';
|
||||
break;
|
||||
case '현대백화점':
|
||||
cardCode = '031';
|
||||
break;
|
||||
case '갤러리아':
|
||||
cardCode = '032';
|
||||
break;
|
||||
case '기업':
|
||||
cardCode = '007';
|
||||
break;
|
||||
case '산업':
|
||||
cardCode = '008';
|
||||
break;
|
||||
case 'SC제일':
|
||||
cardCode = '009';
|
||||
break;
|
||||
case '대구':
|
||||
cardCode = '010';
|
||||
break;
|
||||
case '부산':
|
||||
cardCode = '011';
|
||||
break;
|
||||
case '전북':
|
||||
cardCode = '012';
|
||||
break;
|
||||
case '경남':
|
||||
cardCode = '013';
|
||||
break;
|
||||
case '제주':
|
||||
cardCode = '014';
|
||||
break;
|
||||
case '광주':
|
||||
cardCode = '015';
|
||||
break;
|
||||
case '새마을':
|
||||
cardCode = '016';
|
||||
break;
|
||||
case '수협':
|
||||
cardCode = '017';
|
||||
break;
|
||||
case '신협':
|
||||
cardCode = '018';
|
||||
break;
|
||||
case '우체국':
|
||||
cardCode = '019';
|
||||
break;
|
||||
case '케이':
|
||||
cardCode = '020';
|
||||
break;
|
||||
case '카카오':
|
||||
cardCode = '021';
|
||||
break;
|
||||
case '저축':
|
||||
cardCode = '022';
|
||||
break;
|
||||
case '산림':
|
||||
cardCode = '023';
|
||||
break;
|
||||
case '토스':
|
||||
cardCode = '024';
|
||||
break;
|
||||
}
|
||||
|
||||
return cardCode;
|
||||
}
|
||||
|
||||
// 계좌 CSS
|
||||
function get_bank_css(bank) {
|
||||
var bankCode = '';
|
||||
|
||||
switch (bank) {
|
||||
case '농협':
|
||||
bankCode = '001';
|
||||
break;
|
||||
case '우리':
|
||||
bankCode = '002';
|
||||
break;
|
||||
case '신한':
|
||||
bankCode = '003';
|
||||
break;
|
||||
case '국민':
|
||||
bankCode = '004';
|
||||
break;
|
||||
case '하나':
|
||||
bankCode = '005';
|
||||
break;
|
||||
case '씨티':
|
||||
bankCode = '006';
|
||||
break;
|
||||
case '기업':
|
||||
bankCode = '007';
|
||||
break;
|
||||
case '산업':
|
||||
bankCode = '008';
|
||||
break;
|
||||
case 'SC제일':
|
||||
bankCode = '009';
|
||||
break;
|
||||
case '대구':
|
||||
bankCode = '010';
|
||||
break;
|
||||
case '부산':
|
||||
bankCode = '011';
|
||||
break;
|
||||
case '전북':
|
||||
bankCode = '012';
|
||||
break;
|
||||
case '경남':
|
||||
bankCode = '013';
|
||||
break;
|
||||
case '제주':
|
||||
bankCode = '014';
|
||||
break;
|
||||
case '광주':
|
||||
bankCode = '015';
|
||||
break;
|
||||
case '새마을':
|
||||
bankCode = '016';
|
||||
break;
|
||||
case '수협':
|
||||
bankCode = '017';
|
||||
break;
|
||||
case '신협':
|
||||
bankCode = '018';
|
||||
break;
|
||||
case '우체국':
|
||||
bankCode = '019';
|
||||
break;
|
||||
case '케이':
|
||||
bankCode = '020';
|
||||
break;
|
||||
case '카카오':
|
||||
bankCode = '021';
|
||||
break;
|
||||
case '저축':
|
||||
bankCode = '022';
|
||||
break;
|
||||
case '산림':
|
||||
bankCode = '023';
|
||||
break;
|
||||
case '토스':
|
||||
bankCode = '024';
|
||||
break;
|
||||
}
|
||||
|
||||
return bankCode;
|
||||
}
|
||||
|
||||
401
build/resources/main/static/sopmall/pc/js/script.js
Normal file
401
build/resources/main/static/sopmall/pc/js/script.js
Normal file
@@ -0,0 +1,401 @@
|
||||
// script.js : 모든 페이지에서 공통으로 사용되는 스크립트를 모아놓은 파일입니다.
|
||||
// 선택적으로 사용하시면 됩니다.
|
||||
//
|
||||
|
||||
// 검색창 관련 스크립트
|
||||
|
||||
var searchPopup = $(".header-search-pop");
|
||||
var searchBar = $("#header-search-bar");
|
||||
var searchTextDeleteBtn = $(".header-search-pop__text-delete-btn");
|
||||
var searchBody = $(".header-search-pop__body");
|
||||
var searchAutoComplete = $(".header-search-pop__auto-complete");
|
||||
var recentSearchList = $(".header-search-pop__recent-search-list");
|
||||
var recentSearchDelete = $(".header-search-pop__recent-search-delete");
|
||||
var recentSearchDeleteAll = $(".header-search-pop__recent-search-deleteAll");
|
||||
|
||||
// 메인 검색창 클릭시 검색 팝업 띄우기
|
||||
$("#header-search-trigger").click(function (e) {
|
||||
e.stopPropagation();
|
||||
searchPopup.addClass("active");
|
||||
searchBody.addClass("active");
|
||||
searchBar.focus();
|
||||
});
|
||||
|
||||
// 메인 검색창 포커스시 검색 팝업 띄우기
|
||||
$("#header-search-trigger").keyup(function (e) {
|
||||
searchPopup.addClass("active");
|
||||
searchBody.addClass("active");
|
||||
searchBar.focus();
|
||||
});
|
||||
|
||||
// 검색 팝업 외 클릭 시 검색 팝업 닫기, "닫기" 버튼 클릭 시 검색 팝업 닫기
|
||||
$("header, main").click(function (e) {
|
||||
if (searchPopup.hasClass("active")) {
|
||||
searchPopup.removeClass("active");
|
||||
searchAutoComplete.removeClass("active");
|
||||
searchTextDeleteBtn.removeClass("active");
|
||||
searchBar.val("");
|
||||
}
|
||||
});
|
||||
|
||||
$(".header-search-pop__close").click(function (e) {
|
||||
e.preventDefault();
|
||||
searchPopup.removeClass("active");
|
||||
searchBar.val("");
|
||||
});
|
||||
|
||||
$(".header-search-pop__close").blur(function (e) {
|
||||
e.preventDefault();
|
||||
searchPopup.removeClass("active");
|
||||
searchAutoComplete.removeClass("active");
|
||||
});
|
||||
|
||||
$(searchPopup).click(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 검색창 입력시 자동완성 띄우기, 검색창 값 없을시 자동완성 숨기기
|
||||
searchBar.on("keyup", function (e) {
|
||||
if (e.currentTarget.value !== "") {
|
||||
searchTextDeleteBtn.addClass("active");
|
||||
searchBody.removeClass("active");
|
||||
searchAutoComplete.addClass("active");
|
||||
} else {
|
||||
searchTextDeleteBtn.removeClass("active");
|
||||
searchBody.addClass("active");
|
||||
searchAutoComplete.removeClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
// x 버튼 클릭시 검색창 값 초기화
|
||||
searchTextDeleteBtn.click(function (e) {
|
||||
e.preventDefault();
|
||||
searchBar.val("");
|
||||
searchTextDeleteBtn.removeClass("active");
|
||||
searchAutoComplete.removeClass("active");
|
||||
searchBody.addClass("active");
|
||||
searchBar.focus();
|
||||
});
|
||||
|
||||
// 검색 내용 없을 시, 레이어팝업 띄우기
|
||||
$("#search-form").on("submit", function (e) {
|
||||
if (searchBar.val() === "") {
|
||||
e.preventDefault();
|
||||
$("#enter-keyword").modal();
|
||||
$(".close-modal").focus();
|
||||
}
|
||||
});
|
||||
|
||||
// 최근 검색어 삭제
|
||||
recentSearchDelete.on("click", function (e) {
|
||||
$(this).parent().remove();
|
||||
if (recentSearchList.children().length === 0) {
|
||||
createNoResult();
|
||||
}
|
||||
});
|
||||
|
||||
// 최근 검색어 전체 삭제
|
||||
recentSearchDeleteAll.on("click", function (e) {
|
||||
recentSearchList.empty();
|
||||
createNoResult();
|
||||
});
|
||||
|
||||
// 최근 검색어 없을 시, "최근 검색어가 없습니다." 문구 생성
|
||||
$(document).ready(function () {
|
||||
if (recentSearchList.children().length === 0) {
|
||||
createNoResult();
|
||||
}
|
||||
});
|
||||
|
||||
function createNoResult() {
|
||||
var noResult = $("<p>")
|
||||
.addClass("header-search-pop__recent-search-noResult")
|
||||
.text("최근 검색한 검색어가 없습니다.");
|
||||
recentSearchList.append(noResult);
|
||||
}
|
||||
|
||||
// 실시간 검색 스크립트
|
||||
|
||||
// 실시간 검색
|
||||
$("#search-trend").vTicker({
|
||||
speed: 500,
|
||||
pause: 3000,
|
||||
showItems: 1,
|
||||
mousePause: true,
|
||||
height: 0,
|
||||
animate: true,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
startPaused: false,
|
||||
});
|
||||
|
||||
var isSearchTrendOpen = false;
|
||||
|
||||
$(".search-trend__drop-down-trigger").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
isSearchTrendOpen = !isSearchTrendOpen;
|
||||
$(this).closest(".header-trend").css("overflow", "visible");
|
||||
if (isSearchTrendOpen) {
|
||||
$(".search-trend__drop-down").addClass("active");
|
||||
} else {
|
||||
$(".search-trend__drop-down").removeClass("active");
|
||||
}
|
||||
|
||||
$(this).toggleClass("active");
|
||||
});
|
||||
|
||||
$("header, main, #header-search-trigger").click(function (e) {
|
||||
if (isSearchTrendOpen) {
|
||||
$(".search-trend__drop-down").removeClass("active");
|
||||
$(".search-trend__drop-down-trigger").removeClass("active");
|
||||
isSearchTrendOpen = false;
|
||||
}
|
||||
});
|
||||
|
||||
$(".search-trend__drop-down, .search-trend__drop-down-trigger").click(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 상단 띠 배너 스크립트
|
||||
|
||||
// 상단 띠 배너
|
||||
$(".top-banner-slick").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
variableWidth: true,
|
||||
speed: 900,
|
||||
infinite: true,
|
||||
centerMode: true,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 4000,
|
||||
});
|
||||
|
||||
// 상단 띠 배너 닫기 버튼
|
||||
$(".top-banner__close").click(function () {
|
||||
$(".top-banner img").fadeOut(340);
|
||||
$(".top-banner").slideUp(500);
|
||||
});
|
||||
|
||||
// 상품옵션 팝업
|
||||
|
||||
// 상품옵션 팝업 띄우기
|
||||
$(".product-unit-addToCart").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$("#product-option-popUp").modal({ clickClose: false });
|
||||
});
|
||||
|
||||
// 체크박스 주변 박스 클릭 시, 체크박스 체크/해제
|
||||
$(".product-option__item").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this)
|
||||
.find("input[type=checkbox]")
|
||||
.prop("checked", !$(this).find("input[type=checkbox]").prop("checked"));
|
||||
});
|
||||
|
||||
// 숫자 3자리 마다 "," 찍기
|
||||
|
||||
var threeDigitComma = $(".three-digit-comma");
|
||||
|
||||
threeDigitComma.each(function () {
|
||||
var num = $(this).text();
|
||||
$(this).text(num.replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
});
|
||||
|
||||
// 테이블 행 열기/닫기
|
||||
|
||||
var trFoldableTrigger = $(".tr-foldable-trigger");
|
||||
var trFoldable = $(".tr-foldable");
|
||||
trFoldableTrigger.on("click", function () {
|
||||
trFoldable.not($(this).next()).removeClass("active");
|
||||
$(this).next().toggleClass("active");
|
||||
});
|
||||
|
||||
// 커스텀 셀렉트박스
|
||||
|
||||
if ($(".select-box > select").length > 0) {
|
||||
$(".select-box > select").niceSelect();
|
||||
}
|
||||
|
||||
// 푸터 패밀리 사이트 링크
|
||||
|
||||
$(".family-site-link").niceSelect();
|
||||
$(".family-site-link").on("change", function () {
|
||||
var url = $(this).val();
|
||||
if (url) {
|
||||
window.open(url, "_blank");
|
||||
$(this).closest("div").find(".nice-select li").removeClass("selected");
|
||||
$(this).closest("div").find(".nice-select .current").text("FAMILY SITE");
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// 서브 탭 메뉴
|
||||
|
||||
var subTabBtn = $(".sub-tab__trigger .sub-tab__btn");
|
||||
var subTabContent = $(".sub-tab__content");
|
||||
|
||||
subTabBtn.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
var tabBtnIndex = $(this).index();
|
||||
subTabBtn.removeClass("current");
|
||||
$(this).addClass("current");
|
||||
subTabContent.removeClass("current");
|
||||
subTabContent.eq(tabBtnIndex).addClass("current");
|
||||
});
|
||||
|
||||
// 서브 탭 메뉴 타입 2
|
||||
|
||||
var boxTabs = $(".boxTab__tabBtn");
|
||||
var contents = $(".boxTab__content");
|
||||
|
||||
function resetboxTabs() {
|
||||
boxTabs.removeClass("current");
|
||||
contents.removeClass("current");
|
||||
}
|
||||
|
||||
boxTabs.each(function (index) {
|
||||
$(this).on("click", function () {
|
||||
resetboxTabs();
|
||||
$(this).addClass("current");
|
||||
contents.eq(index).addClass("current");
|
||||
});
|
||||
});
|
||||
|
||||
// 인풋 텍스트 숫자만 입력 (콤마 X, 휴대폰번호 등)
|
||||
$(".input-text.number").on("input", function () {
|
||||
this.value = this.value.replace(/[^0-9]/g, "");
|
||||
});
|
||||
|
||||
// 인풋 텍스트 숫자만 입력 (콤마 O, 금액 등)
|
||||
$(".input-text.numberComma").on("input", function () {
|
||||
var input = $(this).val();
|
||||
$(this).val(input.replace(/[^0-9]/g, "").replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
|
||||
});
|
||||
|
||||
//해당 클래스를 가진 요소 3자리 마다 콤마
|
||||
$(".comma").each(function () {
|
||||
var text = $(this).text();
|
||||
$(this).text(text.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,"));
|
||||
});
|
||||
|
||||
// 모달 팝업 옵션
|
||||
|
||||
$.modal.defaults = {
|
||||
// 페이드 애니메이션
|
||||
fadeDuration: 70,
|
||||
|
||||
// 우측 상단 닫기 버튼
|
||||
showClose: true,
|
||||
|
||||
// 모달 안에 모달 열었을 때, 기존 모달 닫히지 않게 하기
|
||||
closeExisting: false,
|
||||
|
||||
// 모달 바깥영역 클릭 시 닫히지 않게 하기
|
||||
clickClose: false,
|
||||
};
|
||||
|
||||
// 모달에 띄울때, 레이아웃 움직이는 현상 수정
|
||||
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
||||
|
||||
$(document).on($.modal.BEFORE_BLOCK, function (event, modal) {
|
||||
document.body.style.paddingRight = scrollbarWidth + "px";
|
||||
});
|
||||
|
||||
$(document).on($.modal.AFTER_CLOSE, function (event, modal) {
|
||||
document.body.style.paddingRight = "";
|
||||
});
|
||||
|
||||
// 데이트 피커
|
||||
//
|
||||
$(".datepicker").each(function () {
|
||||
$(this).datepicker({
|
||||
dateFormat: "yy-mm-dd",
|
||||
prevText: "이전 달",
|
||||
nextText: "다음 달",
|
||||
changeMonth: "true",
|
||||
changeYear: "true",
|
||||
dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
|
||||
dayNamesMin: ["일", "월", "화", "수", "목", "금", "토"],
|
||||
monthNames: [
|
||||
"1월",
|
||||
"2월",
|
||||
"3월",
|
||||
"4월",
|
||||
"5월",
|
||||
"6월",
|
||||
"7월",
|
||||
"8월",
|
||||
"9월",
|
||||
"10월",
|
||||
"11월",
|
||||
"12월",
|
||||
],
|
||||
monthNamesShort: [
|
||||
"1월",
|
||||
"2월",
|
||||
"3월",
|
||||
"4월",
|
||||
"5월",
|
||||
"6월",
|
||||
"7월",
|
||||
"8월",
|
||||
"9월",
|
||||
"10월",
|
||||
"11월",
|
||||
"12월",
|
||||
],
|
||||
showMonthAfterYear: true,
|
||||
yearSuffix: "년",
|
||||
firstDay: 0,
|
||||
maxDate: 0, // 오늘로부터 1년 전까지의 날짜까지 선택 가능
|
||||
// beforeShowDay: function (date) {
|
||||
// // 오늘로부터 1년 전까지의 날짜를 비활성화
|
||||
// let currentDate = new Date();
|
||||
// currentDate.setDate(currentDate.getDate() - 366);
|
||||
// return [date.getTime() > currentDate.getTime() - 1, ""];
|
||||
// },
|
||||
});
|
||||
});
|
||||
|
||||
// 기간 선택 탭버튼
|
||||
|
||||
var dateRangeBtn = $(".dateRange-btn");
|
||||
dateRangeBtn.click(function (e) {
|
||||
if (e.detail === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
var otherBtn = $(this).siblings();
|
||||
otherBtn.removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
});
|
||||
|
||||
// 라디오 버튼 선택 시, 테이블 숨기기/보이기
|
||||
//
|
||||
var radioTab = $(".radio-tab-content");
|
||||
var radioTabTrigger = $(".radio-tab-trigger > .custom-radio > input[type=radio]");
|
||||
radioTab.children().hide();
|
||||
radioTab.each(function () {
|
||||
$(this).children().eq(0).show();
|
||||
});
|
||||
|
||||
radioTabTrigger.click(function () {
|
||||
if (!$(this).prop("checked")) {
|
||||
return;
|
||||
}
|
||||
// data-radiotab 값과 id같아야함
|
||||
var radioTabId = $(this).closest(".radio-tab-trigger").attr("data-radiotab");
|
||||
var radioTab = $("#" + radioTabId);
|
||||
radioTab.children().hide();
|
||||
// var index = $(this).closest(".custom-radio").index();
|
||||
var index = $(this)
|
||||
.closest(".radio-tab-trigger")
|
||||
.find(".custom-radio")
|
||||
.index($(this).closest(".custom-radio"));
|
||||
|
||||
console.log(index);
|
||||
radioTab.children().eq(index).show();
|
||||
});
|
||||
Reference in New Issue
Block a user