fix : 쇼핑몰 구독서비스 관련
This commit is contained in:
이대환
@@ -15,63 +15,92 @@
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
|
||||
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var subsvcInnb = $('#subsvcInnb').val();
|
||||
fn_select_subsvcDetail(subsvcInnb);
|
||||
});
|
||||
|
||||
/******************************************************
|
||||
* 구독서비스 상세 조회
|
||||
* ****************************************************/
|
||||
const fn_select_subsvcDetail = function(subsvcInnb) {
|
||||
$.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;
|
||||
|
||||
$('#subPd').val(data.subPd);
|
||||
$('#dlvyCnt').val(data.dlvyCnt);
|
||||
$('#dlvyCycle').val(data.dlvyCycle);
|
||||
$('#cnsmrpric').val(data.cnsmrpric);
|
||||
$('#selpric').val(data.selpric);
|
||||
$('#saleRatio').val(data.saleRatio);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border: 1px solid #e9ecef;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e9ecef;
|
||||
display: flex;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.box {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e9ecef;
|
||||
display: flex;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box:last-child {
|
||||
display: flex;
|
||||
border-right: none;
|
||||
justify-content: center;
|
||||
}
|
||||
.box:last-child {
|
||||
display: flex;
|
||||
border-right: none;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.box > span {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.box > span {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.box ul {
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
.box ul {
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.box ul li {
|
||||
list-style-type: disc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.box ul li {
|
||||
list-style-type: disc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.box button {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.box button {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box button:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.box button:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<%-- 공통 Header --%>
|
||||
@@ -79,43 +108,47 @@
|
||||
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
|
||||
<!-- 메인 컨텐츠 영역 -->
|
||||
<main>
|
||||
<div class="sub-wrapper">
|
||||
<div class="sub-content">
|
||||
<form>
|
||||
<h2 class="subList__title">구독 서비스</h2>
|
||||
<div class="container">
|
||||
<div class="box">
|
||||
<span>구독서비스</span>
|
||||
<div class="select-box">
|
||||
<select class="" title="">
|
||||
<option value="" selected>구독서비스 안내</option>
|
||||
<option value="">구독서비스 준비중</option>
|
||||
<option value="">프리미엄 구독 (잔여 : 100)</option>
|
||||
<option value="">Top10 선정 (잔여 : 10)</option>
|
||||
<option value="">Top100 선정 (잔여 : 100)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<span>구독서비스 내역</span>
|
||||
<ul>
|
||||
<li>구독기간 : 12개월</li>
|
||||
<li>배송횟수 : 12회</li>
|
||||
<li>배송주기 : 매달 1회</li>
|
||||
<li>상품금액 : 99,000${curUnit} <span style="color: red">58%</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<button>구독하기</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ck-content">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-wrapper">
|
||||
<div class="sub-content">
|
||||
<form>
|
||||
<h2 class="subList__title">구독 서비스</h2>
|
||||
<div class="ck-content" style="border: 1px solid #e9ecef">
|
||||
<c:out value="${ resultMap.sopmalInfo[0].subsvcGuidanceWords }" escapeXml="false"/>
|
||||
</div>
|
||||
<c:choose>
|
||||
<c:when test="${not empty resultMap.subsvcList}">
|
||||
<div class="container">
|
||||
<div class="box">
|
||||
<span>구독서비스</span>
|
||||
<div class="select-box">
|
||||
<select title="구독 서비스 선택" id="subsvcInnb" name="subsvcInnb" onchange="fn_select_subsvcDetail(this.value);">
|
||||
<c:forEach var="subsvcList" items="${resultMap.subsvcList}" varStatus="status">
|
||||
<option value="${subsvcList.subsvcInnb}" <c:if test="${status.first}">selected</c:if>>${subsvcList.subsvcConcatNm}</option>
|
||||
</c:forEach>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<span>구독서비스 내역</span>
|
||||
<ul>
|
||||
<li>구독기간 : <span id="subPd"></span>개월</li>
|
||||
<li>배송횟수 : <span id="dlvyCnt"></span>회</li>
|
||||
<li>배송주기 : <span id="dlvyCycle"></span></li>
|
||||
<li>상품금액 : <span id="cnsmrpric" style="font-size: 12px; color: grey; text-decoration: line-through;"></span><span id="selpric"></span>${curUnit} <span id="saleRatio" style="color: red">%</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<button>구독하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<span style="display: block; width: 100%; text-align: center; font-size: 32px;">구독 서비스 상품 준비중</span>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
|
||||
|
||||
Reference in New Issue
Block a user