240 lines
7.6 KiB
Plaintext
240 lines
7.6 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"%>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<%-- 공통 include --%>
|
|
<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
|
|
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
|
|
</head>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$(".header__title").text("구독 서비스");
|
|
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.has('subsvcInnb')) {
|
|
$('input[name="subsvcInnb"][value="' + urlParams.get("subsvcInnb") + '"]').prop('checked', true);
|
|
}
|
|
|
|
var subsvcInnb = $('[name="subsvcInnb"]:checked').val();
|
|
fn_select_subsvcDetail(subsvcInnb);
|
|
});
|
|
|
|
/******************************************************
|
|
* 구독서비스 상세 조회
|
|
* ****************************************************/
|
|
const fn_select_subsvcDetail = function(subsvcInnb) {
|
|
var curUnit = '${curUnit}';
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url : '<c:url value="/sopmal/main/selectSubscribeDetail"/>',
|
|
data : {
|
|
subsvcInnb : subsvcInnb
|
|
},
|
|
success: function (data) {
|
|
data = JSON.parse(data.resBody.result);
|
|
data = data.resultMap;
|
|
|
|
$('#subsvcNm').text(data.subsvcConcatNm);
|
|
$('#subPd').text(data.subPd);
|
|
$('#dlvyCnt').text(data.dlvyCnt);
|
|
$('#dlvyCycle').text(data.dlvyCycle);
|
|
$('#cnsmrpric').text(fn_format_number(data.cnsmrpric) + curUnit);
|
|
$('#slepric').text(fn_format_number(data.slepric) + curUnit);
|
|
$('#dscntRaito').text(data.dscntRaito + '%');
|
|
$('#subsvcDc').html(
|
|
data.mblSubsvcDcPcSameAt === "N" ? data.mblSubsvcDc : data.subsvcDc
|
|
);
|
|
fn_hide_subsvcDetail(data.subPd, data.dlvyCnt, data.slepric);
|
|
|
|
switch (data.subsvcSttusCd) {
|
|
case '01':
|
|
$('#subscribeBtn').text('구독하기');
|
|
$('#subscribeBtn').prop('disabled', false);
|
|
break;
|
|
case '02':
|
|
case '03':
|
|
$('#subscribeBtn').text(data.subsvcSttus);
|
|
$('#subscribeBtn').prop('disabled', true);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
// 화면 최상단으로 스크롤
|
|
$("html, body").animate({ scrollTop: 0 }, 400);
|
|
}
|
|
});
|
|
}
|
|
|
|
/******************************************************
|
|
* 구독서비스 상세 숨기기
|
|
* ****************************************************/
|
|
const fn_hide_subsvcDetail = function(subPd, dlvyCnt, slepric) {
|
|
function isEmpty(val) {
|
|
return !val || val === 0;
|
|
}
|
|
function hideIf(condition, find, base) {
|
|
let target = base ? $(base).closest(find) : $(find);
|
|
$(target).toggle(!condition);
|
|
}
|
|
|
|
hideIf(isEmpty(subPd), 'dl', '#subPd');
|
|
hideIf(isEmpty(dlvyCnt), 'dl', '#dlvyCnt');
|
|
hideIf(isEmpty(subPd) && isEmpty(dlvyCnt), '.productDetailInfo__info');
|
|
hideIf(isEmpty(slepric), '.productDetailInfo__price');
|
|
hideIf(isEmpty(slepric), '#subscribeBtn');
|
|
}
|
|
|
|
/*************************************************************
|
|
구매하기 버튼
|
|
**************************************************************/
|
|
const fn_purchs_subsvc = function() {
|
|
var checkedValue = $("input[name='subsvcInnb']:checked").val();
|
|
location.href = "/sopmal/ordr/selectSubsvcPurchsForm" +
|
|
"?subsvcInnb=" + encodeURIComponent(checkedValue);
|
|
|
|
// 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();
|
|
}
|
|
|
|
/******************************************************
|
|
* 숫자 자릿점 포메팅
|
|
* ****************************************************/
|
|
const fn_format_number = function(number) {
|
|
return Number(number).toLocaleString();
|
|
}
|
|
</script>
|
|
<style>
|
|
.sub-box {
|
|
padding: 16px;
|
|
}
|
|
|
|
.productDetailInfo__info > dl > dt,
|
|
.productDetailInfo__info > dl > dd {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#subsvcDc {
|
|
padding: clamp(12px, 3%, 18px);
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="screen-wrap">
|
|
<!-- 헤더 영역 -->
|
|
<header class="header header--sub">
|
|
<jsp:include page="/WEB-INF/views/comm/mobile/Header.jsp"/>
|
|
</header>
|
|
|
|
<!-- 하단 탭바 -->
|
|
<%-- <jsp:include page="/WEB-INF/views/comm/mobile/TabBar.jsp"/>--%>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<div class="content-wrap">
|
|
<main class="main">
|
|
<div class="sub-page">
|
|
<div class="sub-box">
|
|
<div class="ck-content" style="background-color: #f8f9fB;">
|
|
<c:out value="${ resultMap.sopmalInfo[0].subsvcGuidanceWords }" escapeXml="false"/>
|
|
</div>
|
|
</div>
|
|
<div class="sub-box">
|
|
<div class="productDetailInfo">
|
|
<div class="productDetailInfo__titleWrap">
|
|
<span id="subsvcNm" class="productDetailInfo__title">
|
|
구독서비스명
|
|
</span>
|
|
</div>
|
|
<div class="productDetailInfo__price">
|
|
<div class="productDetailInfo__price__price">
|
|
<span id="cnsmrpric" class="productDetailInfo__price__original"></span>
|
|
<span id="slepric" class="productDetailInfo__price__current"></span>
|
|
</div>
|
|
<div class="productDetailInfo__price__sale">
|
|
<span id="dscntRaito" class="percent" style="color: red">%</span>
|
|
</div>
|
|
</div>
|
|
<div class="productDetailInfo__info">
|
|
<dl>
|
|
<dt>구독기간</dt>
|
|
<dd>
|
|
<span id="subPd"></span>개월
|
|
</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>배송횟수</dt>
|
|
<dd>
|
|
<span id="dlvyCnt"></span>회
|
|
</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>배송주기</dt>
|
|
<dd>
|
|
<span id="dlvyCycle"></span>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<div id="subsvcDc" class="ck-content">
|
|
구독 서비스 상품 설명
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottomFixedControls">
|
|
<div class="bottomFixedControls__inner">
|
|
<button type="button" class="btn outline theme" onclick="openModal('product-option-sheet')">
|
|
다른 구독서비스
|
|
</button>
|
|
<button type="button" id="subscribeBtn" class="btn theme" onclick="fn_purchs_subsvc();">구독하기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- 푸터 -->
|
|
<jsp:include page="/WEB-INF/views/comm/mobile/Footer.jsp"/>
|
|
</div>
|
|
</div>
|
|
<div class="microModal microBottomSheet" id="product-option-sheet" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<button class="microModal__close" aria-label="창 닫기" data-micromodal-close></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<div class="modalSelect">
|
|
<div class="modalSelect__list">
|
|
<c:forEach var="subsvcList" items="${resultMap.subsvcList}" varStatus="status">
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="subsvcInnb" value="${subsvcList.subsvcInnb}" onchange="fn_select_subsvcDetail(this.value); MicroModal.close('product-option-sheet');" <c:if test="${status.first}">checked</c:if>>
|
|
<span>${subsvcList.subsvcConcatNm}</span>
|
|
</label>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body> |