merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
@@ -0,0 +1,307 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
init();
|
||||
});
|
||||
|
||||
function init() {
|
||||
initStampCardSlider();
|
||||
initModal();
|
||||
loadImages();
|
||||
updateTotalStamps();
|
||||
checkStampStatus();
|
||||
|
||||
// 새로고침 버튼 클릭 이벤트 처리
|
||||
$('.stampCardWrap').on('click', '.btn_reply', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // 슬라이드 이벤트와 충돌 방지
|
||||
var couponIndex = $(this).closest('.stampCard').data('coupon-index');
|
||||
refreshStamps(couponIndex);
|
||||
});
|
||||
}
|
||||
|
||||
function checkStampStatus() {
|
||||
// 데이터가 없는 경우 또는 교환권이 모두 사용된 경우
|
||||
if (screenInfo.totalStamps === 0 || screenInfo.availableExchangeTickets === 0) {
|
||||
// 교환권 화면을 예시 HTML처럼 변경
|
||||
$('.sub-box').html(`
|
||||
<div style="height: 200px; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;">
|
||||
<button class="btn outline lg fullscreen-trigger" data-micromodal-trigger="modal-1">적립중 스탬프가 없는경우</button>
|
||||
<br><br>
|
||||
<button class="btn outline lg" id="acorn_toast">교환권발급완료</button>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
function loadImages() {
|
||||
console.log('Starting to load images');
|
||||
loadImage('reward', screenInfo.rewardImagePath, $('#rewardImage'));
|
||||
}
|
||||
|
||||
function loadImage(imageType, imagePath, $img) {
|
||||
if ($img.length) {
|
||||
$img.attr('src', imagePath);
|
||||
console.log(`${imageType} image loaded successfully`);
|
||||
} else {
|
||||
console.warn(`Image element not found for ${imageType}`);
|
||||
}
|
||||
}
|
||||
|
||||
function initStampCardSlider() {
|
||||
const $stampCardWrap = $('.stampCardWrap');
|
||||
const couponCount = screenInfo.coupons.length;
|
||||
let currentCouponIndex = 0;
|
||||
let startX, moveX;
|
||||
|
||||
// 모든 쿠폰 카드를 미리 생성
|
||||
function createAllCouponCards() {
|
||||
screenInfo.coupons.forEach((coupon, index) => {
|
||||
const $card = createCouponCard(coupon, index);
|
||||
$stampCardWrap.append($card);
|
||||
});
|
||||
|
||||
// 페이지네이션 생성
|
||||
const $pagination = $('<div class="pagination"></div>');
|
||||
for (let i = 0; i < couponCount; i++) {
|
||||
const $button = $(`<button data-index="${i}"></button>`);
|
||||
$pagination.append($button);
|
||||
}
|
||||
$stampCardWrap.append($pagination);
|
||||
}
|
||||
|
||||
function createCouponCard(coupon, index) {
|
||||
return $(`
|
||||
<div class="stampCard" data-coupon-index="${index}" style="display: none;">
|
||||
<div class="stampCardTop">
|
||||
<p class="shopName">
|
||||
<span>${coupon.storeName}</span>
|
||||
<a href="javascript:void(0);" class="btn_reply">새로고침</a>
|
||||
</p>
|
||||
<p class="cardCnt"><b>${coupon.extiketStmpCnt}</b> / 10</p>
|
||||
</div>
|
||||
<ul class="stampArea">
|
||||
${Array(10).fill().map((_, i) => `<li class="${i < coupon.extiketStmpCnt ? 'on' : ''}"><span>${i + 1}</span></li>`).join('')}
|
||||
</ul>
|
||||
<div class="stampCardbm">
|
||||
<p class="useDate">유효기간 ${formatDate(coupon.stmpValidDt)} 까지</p>
|
||||
<p class="giftInfo">스탬프 <b>10개 적립</b>시 이달의 <b>선물 교환권</b>을 드려요.</p>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
function showCouponCard(index) {
|
||||
$('.stampCard').hide();
|
||||
$(`.stampCard[data-coupon-index="${index}"]`).fadeIn(300);
|
||||
$('.pagination button').removeClass('active');
|
||||
$(`.pagination button[data-index="${index}"]`).addClass('active');
|
||||
|
||||
const coupon = screenInfo.coupons[index];
|
||||
if (coupon.extiketStmpCnt === 10 && coupon.exchngAt === 'Y') {
|
||||
showToast('교환권 발급이 완료되었습니다!');
|
||||
}
|
||||
}
|
||||
|
||||
function nextCoupon() {
|
||||
currentCouponIndex = (currentCouponIndex + 1) % couponCount;
|
||||
showCouponCard(currentCouponIndex);
|
||||
}
|
||||
|
||||
function previousCoupon() {
|
||||
currentCouponIndex = (currentCouponIndex - 1 + couponCount) % couponCount;
|
||||
showCouponCard(currentCouponIndex);
|
||||
}
|
||||
|
||||
// 페이지네이션 버튼 이벤트 핸들러
|
||||
$stampCardWrap.on('click', '.pagination button', function(e) {
|
||||
e.stopPropagation(); // 버블링 방지
|
||||
currentCouponIndex = $(this).data('index');
|
||||
showCouponCard(currentCouponIndex);
|
||||
});
|
||||
|
||||
// 전체 영역 클릭 이벤트 핸들러
|
||||
$stampCardWrap.on('click', function(e) {
|
||||
const clickX = e.clientX;
|
||||
const wrapWidth = $stampCardWrap.width();
|
||||
const halfWidth = wrapWidth / 2;
|
||||
|
||||
if (clickX < halfWidth) {
|
||||
previousCoupon();
|
||||
} else {
|
||||
nextCoupon();
|
||||
}
|
||||
});
|
||||
|
||||
// 터치 이벤트 핸들러
|
||||
$stampCardWrap.on('touchstart', function(e) {
|
||||
startX = e.touches[0].clientX;
|
||||
});
|
||||
|
||||
$stampCardWrap.on('touchmove', function(e) {
|
||||
moveX = e.touches[0].clientX;
|
||||
});
|
||||
|
||||
$stampCardWrap.on('touchend', function(e) {
|
||||
if (startX - moveX > 50) {
|
||||
nextCoupon();
|
||||
} else if (moveX - startX > 50) {
|
||||
previousCoupon();
|
||||
}
|
||||
});
|
||||
|
||||
// function startAutoSlide() {
|
||||
// if (isAutoSlideActive) {
|
||||
// interval = setInterval(nextCoupon, 3000);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// function stopAutoSlide() {
|
||||
// clearInterval(interval);
|
||||
// }
|
||||
//
|
||||
// function restartAutoSlide() {
|
||||
// stopAutoSlide();
|
||||
// startAutoSlide();
|
||||
// }
|
||||
|
||||
// 슬라이더 초기화
|
||||
if (couponCount > 0) {
|
||||
createAllCouponCards();
|
||||
showCouponCard(currentCouponIndex);
|
||||
} else {
|
||||
$stampCardWrap.html('<p>사용 가능한 스탬프 카드가 없습니다.</p>');
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function initModal() {
|
||||
MicroModal.init({
|
||||
disableScroll: true,
|
||||
awaitCloseAnimation: true,
|
||||
});
|
||||
|
||||
$('.fullscreen-trigger').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
var modalId = $(this).attr('data-micromodal-trigger');
|
||||
openModal(modalId);
|
||||
});
|
||||
|
||||
$('.microModal .microModal__close').on('click', function() {
|
||||
var modalId = $(this).closest('.microModal').attr('id');
|
||||
closeModal(modalId);
|
||||
});
|
||||
|
||||
window.addEventListener('popstate', function(event) {
|
||||
var modalId = window.location.hash.replace('#', '');
|
||||
if (modalId) {
|
||||
closeModal(modalId);
|
||||
} else {
|
||||
$('.microModal').each(function() {
|
||||
MicroModal.close($(this).attr('id'));
|
||||
});
|
||||
}
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
|
||||
if (window.location.hash) {
|
||||
var modalId = window.location.hash.replace('#', '');
|
||||
openModal(modalId);
|
||||
}
|
||||
}
|
||||
|
||||
function openModal(modalId) {
|
||||
MicroModal.show(modalId, {
|
||||
onShow: function(modal) {
|
||||
if (window.location.hash !== '#' + modalId) {
|
||||
window.history.pushState({ modal: 'open' }, '', '#' + modalId);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function closeModal(modalId) {
|
||||
document.body.style.overflow = '';
|
||||
MicroModal.close(modalId);
|
||||
window.history.replaceState({}, '', window.location.pathname);
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const $toastPop = $('#modal_exchange_ticket_toast');
|
||||
$toastPop.text(message);
|
||||
$toastPop.addClass('show');
|
||||
setTimeout(() => {
|
||||
$toastPop.removeClass('show');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function refreshStamps(couponIndex) {
|
||||
const coupon = screenInfo.coupons[couponIndex];
|
||||
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/refreshStamps',
|
||||
method: 'POST',
|
||||
data: JSON.stringify({
|
||||
bnfInnb: screenInfo.bnfInnb,
|
||||
strInnb: coupon.strInnb,
|
||||
bnfExtiketInnb: coupon.bnfExtiketInnb,
|
||||
mbrInnb: screenInfo.mbrInnb,
|
||||
mbrDvCd: screenInfo.mbrDvCd,
|
||||
sopmalCd: screenInfo.sopmalCd
|
||||
}),
|
||||
contentType: 'application/json',
|
||||
success: function(response) {
|
||||
try {
|
||||
const responseBody = JSON.parse(response.resBody.result);
|
||||
const success = responseBody.success;
|
||||
if (success) {
|
||||
updateStampCard(couponIndex, responseBody.cardInfo);
|
||||
showToast('스탬프 정보가 새로고침되었습니다.');
|
||||
} else {
|
||||
showToast(responseBody.message || '스탬프 정보를 새로고침하는데 실패했습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('응답을 처리하는 동안 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
showToast('스탬프 정보를 새로고침하는데 실패했습니다.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateStampCard(couponIndex, data) {
|
||||
const previousExchngAt = screenInfo.coupons[couponIndex].exchangeable;
|
||||
|
||||
// 새로운 데이터로 coupon 객체 업데이트
|
||||
Object.assign(screenInfo.coupons[couponIndex], data.cardInfo);
|
||||
|
||||
const coupon = screenInfo.coupons[couponIndex];
|
||||
const $card = $(`.stampCard[data-coupon-index="${couponIndex}"]`);
|
||||
|
||||
$card.find('.cardCnt b').text(coupon.extiketStmpCnt);
|
||||
$card.find('.stampArea li').each((index, el) => {
|
||||
$(el).toggleClass('on', index < coupon.extiketStmpCnt);
|
||||
});
|
||||
$card.find('.useDate').text(`유효기간 ${formatDate(coupon.stmpValidDt)} 까지`);
|
||||
$card.find('.shopName span').text(coupon.branchName);
|
||||
|
||||
// 페이드 효과 적용
|
||||
$card.fadeOut(150).fadeIn(150);
|
||||
|
||||
// 교환권 발급 완료 시 토스트 메시지 표시
|
||||
if (coupon.extiketStmpCnt === 10 && coupon.exchangeable === 'Y' && previousExchngAt !== 'Y') {
|
||||
showToast('교환권 발급이 완료되었습니다!');
|
||||
}
|
||||
|
||||
// 전체 스탬프 수 업데이트
|
||||
updateTotalStamps();
|
||||
}
|
||||
|
||||
function updateTotalStamps() {
|
||||
const totalCoupons = screenInfo.coupons.length;
|
||||
$('.card_title b').text(totalCoupons);
|
||||
screenInfo.totalStamps = totalCoupons;
|
||||
}
|
||||
Reference in New Issue
Block a user