itfirst/sake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

구독서비스 결제 화면 적용(모바일)

Browse Source
This commit is contained in:
이대환
2026-03-04 11:20:53 +09:00
parent 38f85a7409
commit fdeb8ae26d
3 changed files with 95 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/main/webapp/WEB-INF/views/sopmal/main/SubscribeR.jsp
View File

@@ -77,6 +77,27 @@
}); });
} }
/*************************************************************
구매하기 버튼
**************************************************************/
const fn_purchs_subsvc = function() {
var checkedValue = $("select[name='subsvcInnb']").val();
var tempForm = $('<form>', {
method: 'post',
action: '/sopmal/ordr/selectSubsvcPurchsForm'
});
$('<input>', {
type: 'hidden',
name: 'subsvcInnb',
value: checkedValue
}).appendTo(tempForm);
tempForm.appendTo('body');
tempForm.submit();
tempForm.remove();
}
/****************************************************** /******************************************************
* 숫자 자릿점 포메팅 * 숫자 자릿점 포메팅
* ****************************************************/ * ****************************************************/
@@ -179,7 +200,7 @@
<main> <main>
<div class="sub-wrapper"> <div class="sub-wrapper">
<div class="sub-content"> <div class="sub-content">
<form method="post" action="/sopmal/ordr/selectSubsvcPurchsForm"> <form>
<h2 class="subList__title">구독 서비스</h2> <h2 class="subList__title">구독 서비스</h2>
<div class="ck-content" style="border: 1px solid #e9ecef; background-color: #f8f9fB;"> <div class="ck-content" style="border: 1px solid #e9ecef; background-color: #f8f9fB;">
<c:out value="${ resultMap.sopmalInfo[0].subsvcGuidanceWords }" escapeXml="false"/> <c:out value="${ resultMap.sopmalInfo[0].subsvcGuidanceWords }" escapeXml="false"/>
@@ -218,7 +239,7 @@
<span id="selpric" class="product-unit-price__current"></span> <span id="selpric" class="product-unit-price__current"></span>
<span id="dscntRaito" style="color: red">%</span> <span id="dscntRaito" style="color: red">%</span>
</div> </div>
<button id="subscribeBtn" class="btn theme large">구독하기</button> <button type="button" id="subscribeBtn" class="btn theme large" onclick="fn_purchs_subsvc();">구독하기</button>
</div> </div>
</div> </div>
</c:when> </c:when>
@@ -241,7 +262,7 @@
</div> </div>
</div> </div>
<div class="fixedProduct__right"> <div class="fixedProduct__right">
<button type="button" id="fixedButton" class="btn theme lg purchsOrdr">구독하기</button> <button type="button" id="fixedButton" class="btn theme lg purchsOrdr" onclick="fn_purchs_subsvc();">구독하기</button>
</div> </div>
</div> </div>
</div> </div>

7
src/main/webapp/WEB-INF/views/sopmal_m/main/SubscribeR.jsp
View File

@@ -43,7 +43,9 @@
$('#cnsmrpric').text(fn_format_number(data.cnsmrpric) + curUnit); $('#cnsmrpric').text(fn_format_number(data.cnsmrpric) + curUnit);
$('#selpric').text(fn_format_number(data.selpric) + curUnit); $('#selpric').text(fn_format_number(data.selpric) + curUnit);
$('#dscntRaito').text(data.dscntRaito + '%'); $('#dscntRaito').text(data.dscntRaito + '%');
$('#subsvcDc').html(data.subsvcDc); $('#subsvcDc').html(
data.mblSubsvcDcPcSameAt === "N" ? data.mblSubsvcDc : data.subsvcDc
);
switch (data.subsvcSttusCd) { switch (data.subsvcSttusCd) {
case '01': case '01':
@@ -86,6 +88,9 @@
tempForm.remove(); tempForm.remove();
} }
/******************************************************
* 숫자 자릿점 포메팅
* ****************************************************/
const fn_format_number = function(number) { const fn_format_number = function(number) {
return Number(number).toLocaleString(); return Number(number).toLocaleString();
} }

103
src/main/webapp/WEB-INF/views/sopmal_m/ordr/SubsvcPurchsC.jsp
View File

@@ -1943,66 +1943,62 @@
if (!fn_is_empty(data)) { if (!fn_is_empty(data)) {
let div = ''; let div = '';
for (let i = 0; i < data.length; i++) {
const goods = data[i];
div += '<div class="orderInfo__item">'; div += '<div class="orderInfo__item">';
div += ' <div class="cartItem" data-product-id="' + fn_nvl(goods.goodsOptnInnb, '') + '">'; div += ' <div class="cartItem" data-product-id="' + fn_nvl(data.subsvcInnb, '') + '">';
div += ' <div class="cartItem__image">'; div += ' <div class="cartItem__image">';
div += ' <a href="/sopmal/goods/selectGoodsDtl?sopmalCd=' + sopmalCd + '&goodsInnb=' + goods.goodsInnb + '">'; div += ' <a href="/sopmal/goods/selectGoodsDtl?subsvcInnb=' + data.subsvcInnb + '">';
div += ' <img src="' + cdnurl + goods.goodsImgCours + '" onerror="this.src=\'<c:url value="/pc/images/image_placeholder.png"/>\'" alt="' + goods.goodsNm + '">'; div += ' <img src="' + cdnurl + data.img + '" onerror="this.src=\'<c:url value="/pc/images/image_placeholder.png"/>\'" alt="' + data.subsvcConcatNm + '">';
div += ' </a>'; div += ' </a>';
div += ' </div>'; div += ' </div>';
div += ' <div class="cartItem__productInfo">'; div += ' <div class="cartItem__productInfo">';
div += ' <a href="/sopmal/goods/selectGoodsDtl?sopmalCd=' + sopmalCd + '&goodsInnb=' + goods.goodsInnb + '" class="cartItem__productTitle">' + goods.goodsNm + '</a>'; div += ' <a href="/sopmal/goods/selectGoodsDtl?subsvcInnb=' + data.subsvcInnb + '" class="cartItem__productTitle">' + data.subsvcNm + '</a>';
div += ' <span class="cartItem__productOption">'; div += ' <span class="cartItem__productOption">';
div += ' <span class="option-badge">옵션</span> ' + goods.optn; div += ' <span class="option-badge">옵션</span> ' + data.subsvcGnrNm;
div += ' </span>'; div += ' </span>';
if (!fn_is_empty(goods.inputOptnText)) { // if (!fn_is_empty(goods.inputOptnText)) {
div += ' <span class="cartItem__productOption">'; // div += ' <span class="cartItem__productOption">';
div += ' <span class="option-badge">입력</span> ' + goods.inputOptnText; // div += ' <span class="option-badge">입력</span> ' + goods.inputOptnText;
div += ' </span>'; // div += ' </span>';
} // }
div += ' <p class="cartItem__productBottom">'; div += ' <p class="cartItem__productBottom">';
div += ' <span class="cartItem__productPrice">'; div += ' <span class="cartItem__productPrice">';
div += ' <span class="comma product-dscntApplyAmt">' + (goods.dscntApplyAmt).toLocaleString() + '</span><span class="priceUnit">' + curUnit + '</span>'; div += ' <span class="comma product-dscntApplyAmt">' + (data.selpric).toLocaleString() + '</span><span class="priceUnit">' + curUnit + '</span>';
div += ' </span>'; div += ' </span>';
div += ' <span class="cartItem__productDot">·</span>'; div += ' <span class="cartItem__productDot">·</span>';
div += ' <span class="cartItem__productQuantity">' + goods.qy + '개</span>'; div += ' <span class="cartItem__productQuantity">' + 1 + '개</span>';
div += ' </p>'; div += ' </p>';
div += ' </div>'; div += ' </div>';
div += ' <input type="hidden" class="dplctLmttCoupon" value="' + fn_nvl(goods.dplctLmttCoupon, '') + '"/>'; // div += ' <input type="hidden" class="dplctLmttCoupon" value="' + fn_nvl(goods.dplctLmttCoupon, '') + '"/>';
div += ' <input type="hidden" class="dplctLmttEvtnm" value="' + fn_nvl(goods.dplctLmttEvtnm, '') + '"/>'; // div += ' <input type="hidden" class="dplctLmttEvtnm" value="' + fn_nvl(goods.dplctLmttEvtnm, '') + '"/>';
div += ' <input type="hidden" class="goodsInnb" value="' + fn_nvl(goods.goodsInnb, '') + '"/>'; // div += ' <input type="hidden" class="goodsInnb" value="' + fn_nvl(goods.goodsInnb, '') + '"/>';
div += ' <input type="hidden" class="goodsOptnInnb productGoodsOptnInnb" value="' + fn_nvl(goods.goodsOptnInnb, '') + '"/>'; // div += ' <input type="hidden" class="goodsOptnInnb productGoodsOptnInnb" value="' + fn_nvl(goods.goodsOptnInnb, '') + '"/>';
div += ' <input type="hidden" class="inputOptn" value="' + fn_nvl(goods.inputOptn, '') + '"/>'; // div += ' <input type="hidden" class="inputOptn" value="' + fn_nvl(goods.inputOptn, '') + '"/>';
div += ' <input type="hidden" class="inputOptnText" value="' + fn_nvl(goods.inputOptnText, '') + '"/>'; // div += ' <input type="hidden" class="inputOptnText" value="' + fn_nvl(goods.inputOptnText, '') + '"/>';
div += ' <input type="hidden" class="qy productQtyInput" value="' + fn_nvl(goods.qy, '') + '"/>'; // div += ' <input type="hidden" class="qy productQtyInput" value="' + fn_nvl(goods.qy, '') + '"/>';
div += ' <input type="hidden" class="usedCoupons" value="' + fn_nvl(goods.usedCoupons, '') + '"/>'; // div += ' <input type="hidden" class="usedCoupons" value="' + fn_nvl(goods.usedCoupons, '') + '"/>';
div += ' <input type="hidden" class="product-dlvyGroupInnb" value="' + fn_nvl(goods.dlvyGroupInnb, '') + '"/>'; // div += ' <input type="hidden" class="product-dlvyGroupInnb" value="' + fn_nvl(goods.dlvyGroupInnb, '') + '"/>';
div += ' <input type="hidden" class="product-slepric" value="' + fn_nvl(goods.slepric, '') + '"/>'; // div += ' <input type="hidden" class="product-slepric" value="' + fn_nvl(goods.slepric, '') + '"/>';
div += ' <input type="hidden" class="product-dscntAmt" value="' + fn_nvl(goods.dscntAmt, '') + '"/>'; // div += ' <input type="hidden" class="product-dscntAmt" value="' + fn_nvl(goods.dscntAmt, '') + '"/>';
div += ' <input type="hidden" class="product-mbrInnb" value="' + fn_nvl(goods.mbrInnb, '') + '"/>'; // div += ' <input type="hidden" class="product-mbrInnb" value="' + fn_nvl(goods.mbrInnb, '') + '"/>';
div += ' </div>';
div += ' <div class="orderInfo__item__couponSelect select-box">';
div += ' <select class="useCoupons lg" title="상품쿠폰">';
div += ' <option value="0" selected>상품 쿠폰 선택</option>';
for (let j = 0; j < goods.goodsCouponList.length; j++) {
const coupon = goods.goodsCouponList[j];
div += ' <option value="' + coupon.dwldCouponInnb + '" coupon-innb="' + coupon.couponInnb + '" dplct-dscnt-at="' + coupon.dplctDscntAt + '" otr-coupon-smtm_use-at="' + coupon.otrCouponSmtmUseAt + '" ' + ('Y' == coupon.isUse ? 'selected' : '') + '/>';
div += ' ' + ('Y' === coupon.otrCouponSmtmUseAt ? '' : '') + coupon.coupNm;
div += ' </option>';
}
div += ' </select>';
div += ' </div>'; div += ' </div>';
// div += ' <div class="orderInfo__item__couponSelect select-box">';
//
// div += ' <select class="useCoupons lg" title="상품쿠폰">';
// div += ' <option value="0" selected>상품 쿠폰 선택</option>';
//
// for (let j = 0; j < goods.goodsCouponList.length; j++) {
// const coupon = goods.goodsCouponList[j];
//
// div += ' <option value="' + coupon.dwldCouponInnb + '" coupon-innb="' + coupon.couponInnb + '" dplct-dscnt-at="' + coupon.dplctDscntAt + '" otr-coupon-smtm_use-at="' + coupon.otrCouponSmtmUseAt + '" ' + ('Y' == coupon.isUse ? 'selected' : '') + '/>';
// div += ' ' + ('Y' === coupon.otrCouponSmtmUseAt ? '' : '') + coupon.coupNm;
// div += ' </option>';
// }
//
// div += ' </select>';
// div += ' </div>';
div += '</div>'; div += '</div>';
}
$(list).empty().append(div); $(list).empty().append(div);
$(list).closest('#goodsList').find('.select-box select').niceSelect(); $(list).closest('#goodsList').find('.select-box select').niceSelect();
@@ -2488,15 +2484,15 @@
let setle = {}; let setle = {};
// let dlvylc = JSON.parse(localStorage.getItem('dlvylc')); let dlvylc = JSON.parse(localStorage.getItem('dlvylc'));
//
// if (!fn_is_empty(dlvylc)) {
// dlvylc = Object.assign({}, fn_get_dlvylc_data(), dlvylc);
// } else {
// dlvylc = fn_get_dlvylc_data();
// }
// order['shipping'] = dlvylc; if (!fn_is_empty(dlvylc)) {
dlvylc = Object.assign({}, fn_get_dlvylc_data(), dlvylc);
} else {
dlvylc = fn_get_dlvylc_data();
}
setle['shipping'] = dlvylc;
setle['sopmalCd'] = $('#sopmalCd').val(); setle['sopmalCd'] = $('#sopmalCd').val();
setle['dlvylc'] = JSON.parse(localStorage.getItem('dlvylc')); setle['dlvylc'] = JSON.parse(localStorage.getItem('dlvylc'));
@@ -3356,9 +3352,10 @@
} }
} }
let goodsList = localStorage.getItem('goodsList'); let goodsList = localStorage.getItem('subsvcOne');
let parsedGoodsList = JSON.parse(goodsList); let parsedGoodsList = JSON.parse(goodsList);
let goodsDscntDtlsList = parsedGoodsList[0].goodsDscntDtlsList; // let goodsDscntDtlsList = parsedGoodsList[0].goodsDscntDtlsList;
let goodsDscntDtlsList = [];
let totalDscntAmt = 0; let totalDscntAmt = 0;