|
|
@@ -1,6 +1,5 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="ko"
|
|
|
- xmlns:th="http://www.thymeleaf.org"
|
|
|
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
|
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
layout:decorator="web/common/layout/MypageLayoutWeb">
|
|
|
<!--
|
|
|
@@ -18,72 +17,98 @@
|
|
|
-->
|
|
|
<body>
|
|
|
|
|
|
-<th:block layout:fragment="content">
|
|
|
-<!-- container -->
|
|
|
- <div class="my_cont">
|
|
|
- <div class="sec_head">
|
|
|
- <h3>STYLE24 상품권</h3>
|
|
|
- </div>
|
|
|
- <div class="sec_body">
|
|
|
- <div class="save_area mypage_coupon">
|
|
|
- <p>사용 가능한 보유 금액<strong th:text="${#numbers.formatInteger(giftcardInfo.useGift,0,'COMMA')}"></strong>원</p>
|
|
|
- <ul>
|
|
|
- <li>보유 상품권 <span th:text="${#numbers.formatInteger(giftcardInfo.totalCount,0,'COMMA')} + '장'"></span></li>
|
|
|
- <li>한달 이내 소멸 예정 <span th:text="${#numbers.formatInteger(giftcardInfo.expireCount,0,'COMMA')} + '장'"></span></li>
|
|
|
- </ul>
|
|
|
+ <th:block layout:fragment="content">
|
|
|
+ <!-- container -->
|
|
|
+ <div class="cont">
|
|
|
+ <div class="sec_head">
|
|
|
+ <h3 class="subH1">상품권</h3>
|
|
|
</div>
|
|
|
- <div class="gift_search">
|
|
|
- <div class="gift_sea_wrap clear">
|
|
|
- <label for="gift_input">상품권 등록</label>
|
|
|
- <input type="text" id="gift_input" placeholder="상품권 번호를 입력해주세요.">
|
|
|
- <button type="button" class="btn btn_dark" onclick="giftcardSave()">등록</button>
|
|
|
+ <div class="sec_body">
|
|
|
+ <div class="highlight_area">
|
|
|
+ <div class="have_amount">
|
|
|
+ <div class="total_amount">
|
|
|
+ 나의 보유 금액 <span><em th:text="${#numbers.formatInteger(giftcardInfo.useGift,0,'COMMA')}"></em>원</span>
|
|
|
+ </div>
|
|
|
+ <dl>
|
|
|
+ <div>
|
|
|
+ <dt>보유 상품권</dt>
|
|
|
+ <dd>
|
|
|
+ <em th:text="${#numbers.formatInteger(giftcardInfo.totalCount,0,'COMMA')}"></em>장
|
|
|
+ </dd>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <dt>
|
|
|
+ <span class="tag primary_line">D-<em>30</em></span>한 달 이내 소멸 예정
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <em th:text="${#numbers.formatInteger(giftcardInfo.expireCount,0,'COMMA')}"></em>원
|
|
|
+ </dd>
|
|
|
+ </div>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="com_info_txt">
|
|
|
- <p class="tit">상품권 등록 안내</p>
|
|
|
- <ul>
|
|
|
- <li>상품권은 상품 구매시 현금과 동일하게 사용됩니다.</li>
|
|
|
- <li>상품권은 등록한 해당 몰에서만 사용이 가능합니다.</li>
|
|
|
- <li>사용 후 남은 잔액은 상품권 잔액으로 환불되며,유효기간 내에 사용 가능합니다.</li>
|
|
|
- <li>유효기간이 지난 상품권의 잔액은 자동 소멸됩니다.</li>
|
|
|
- <li>상품권은 현금성 결제 수단에 포함되어 주문시 포인트 적립이 가능합니다.</li>
|
|
|
- <li>상품권으로 결제한 금액은 마이페이지>주문상세페이지에서 현금영수증을 발급 받으실 수 있습니다.</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="my_tab coupon_tab">
|
|
|
- <ul>
|
|
|
- <li><a href="javascript:void(0);" id="SearchUseGiftcard">사용내역</a></li>
|
|
|
- <li><a href="javascript:void(0);" id="SearchOwnGiftcard">보유 상품권</a></li>
|
|
|
- </ul>
|
|
|
- <!-- <div class="form_field" id="dateField">
|
|
|
- <select id="searchDt" onchange="fnChangeDate(this)">
|
|
|
-
|
|
|
- </select>
|
|
|
- </div> -->
|
|
|
- <div class="form_field" id="dateField">
|
|
|
- <div class="select_custom type1">
|
|
|
- <div class="combo">
|
|
|
- <div class="select"></div> <!-- 셀렉박스 -->
|
|
|
- <ul id="searchDt" class="list" style="width:200px; margin:0 auto">
|
|
|
+ <div class="input_area">
|
|
|
+ <form class="form_wrap">
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label"><span>상품권 등록</span></label>
|
|
|
+ <div class="input_wrap">
|
|
|
+ <input type="text" class="form_control" id="gift_input" placeholder="상품권 번호를 입력해주세요">
|
|
|
+ </div>
|
|
|
+ <button type="button" class="btn btn_dark" onclick="giftcardSave()">
|
|
|
+ <span>등록</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="com_info_txt">
|
|
|
+ <p class="tit">상품권 등록 안내</p>
|
|
|
+ <ul>
|
|
|
+ <li>상품권은 상품 구매시 현금과 동일하게 사용됩니다.</li>
|
|
|
+ <li>상품권은 등록한 해당 몰에서만 사용이 가능합니다.(YES24와 중복 사용불가)</li>
|
|
|
+ <li>사용 후 남은 잔액은 상품권 잔액으로 환불되며, 유효기간 내에 사용 가능합니다.</li>
|
|
|
+ <li>유효기간이 지난 상품권의 잔액은 자동 소멸됩니다.</li>
|
|
|
+ <li>상품권은 현금성 결제 수단에 포함되어 주문시 포인트 적립이 가능합니다.</li>
|
|
|
+ <li>상품권으로 결제한 금액은 마이페이지 > 주문상세페이지에서 현금영수증을 발급 받으실 수 있습니다.</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="content_area">
|
|
|
+ <div class="taps">
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li><a href="javascript:void(0);" id="SearchUseGiftcard">사용내역</a></li>
|
|
|
+ <li><a href="javascript:void(0);" id="SearchOwnGiftcard">보유 상품권</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select_box" id="dateField">
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom month">
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select"></div>
|
|
|
+ <ul class="list" id="searchDt">
|
|
|
</ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 데이터 있을 시 -->
|
|
|
+ <div class="list_box" id="giftcardList">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- //데이터 있을 시 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div id="giftcardList">
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-<!-- // CONT-BODY -->
|
|
|
+ <!-- // CONT-BODY -->
|
|
|
<script th:inline="javascript">
|
|
|
var date = new Date();
|
|
|
var year = date.getFullYear();
|
|
|
var month = date.getMonth()+1;
|
|
|
|
|
|
+
|
|
|
//동적으로 날짜 년도 append
|
|
|
function appendYear(){
|
|
|
-
|
|
|
+
|
|
|
for(var i=year; i<=year; i++){
|
|
|
for (var j= 1; j <=month; j++) {
|
|
|
$("#searchDt").prepend("<li onclick='fnChangeDate(this.value)' value='"+year+""+j+"'>"+i+"년"+j +"월 </li>");
|
|
|
@@ -97,8 +122,8 @@ appendYear($("#searchDt"));
|
|
|
// 사용내역 조회
|
|
|
$("#SearchUseGiftcard").click(function(){
|
|
|
// class제거 추가
|
|
|
- $("#SearchOwnGiftcard").removeClass("on");
|
|
|
- $("#SearchUseGiftcard").addClass("on");
|
|
|
+ $("#SearchOwnGiftcard").removeClass("active");
|
|
|
+ $("#SearchUseGiftcard").addClass("active");
|
|
|
$("#giftcardList").attr("class","order_list");
|
|
|
|
|
|
// 날짜 필드
|
|
|
@@ -128,50 +153,66 @@ function useGiftcard(result) {
|
|
|
let giftcardUseList = result.giftcardUseList;
|
|
|
|
|
|
let tmtbHtml = "";
|
|
|
-
|
|
|
- tmtbHtml += '<section class="order_row mt30">';
|
|
|
- tmtbHtml += '<div class="tbl track_tbl type2">';
|
|
|
+ tmtbHtml += '<div class="tbl type5">';
|
|
|
tmtbHtml += '<table>';
|
|
|
tmtbHtml += '<colgroup>';
|
|
|
- tmtbHtml += '<col width="750px">';
|
|
|
- tmtbHtml += '<col width="150px">';
|
|
|
- tmtbHtml += '<col width="*">';
|
|
|
+ tmtbHtml += '<col width="10%">';
|
|
|
+ tmtbHtml += '<col width="*">';
|
|
|
+ tmtbHtml += '<col width="18%">';
|
|
|
+ tmtbHtml += '<col width="18%">';
|
|
|
tmtbHtml += '</colgroup>';
|
|
|
- tmtbHtml += '<thead>';
|
|
|
- tmtbHtml += '<tr>';
|
|
|
- tmtbHtml += '<th>내용</th>';
|
|
|
- tmtbHtml += '<th>증감/차감</th>';
|
|
|
- tmtbHtml += '<th>일자</th>';
|
|
|
- tmtbHtml += '</tr>';
|
|
|
- tmtbHtml += '</thead>';
|
|
|
- tmtbHtml += '<tbody>';
|
|
|
+ tmtbHtml += '<thead>';
|
|
|
+ tmtbHtml += '<tr>';
|
|
|
+ tmtbHtml += '<th scope="col"><span class="sr-only">차감</span></th>';
|
|
|
+ tmtbHtml += '<th scope="col">내용</th>';
|
|
|
+ tmtbHtml += '<th scope="col">사용금액</th>';
|
|
|
+ tmtbHtml += '<th scope="col">일자</th>';
|
|
|
+ tmtbHtml += '</tr>';
|
|
|
+ tmtbHtml += '</thead>';
|
|
|
|
|
|
-
|
|
|
- for(let i=0; i<giftcardUseList.length; i++){
|
|
|
- let useGiftcard = giftcardUseList[i];
|
|
|
- tmtbHtml +='<tr>';
|
|
|
- if(useGiftcard.goodsNm != null){
|
|
|
- tmtbHtml +='<td class="t_l pl40">'+ useGiftcard.goodsNm + '</td>';
|
|
|
- }else{
|
|
|
- tmtbHtml +='<td class="t_l pl40">'+ useGiftcard.balanceName + '</td>';
|
|
|
+ if(giftcardUseList.length<=0){
|
|
|
+ tmtbHtml += '<tbody>';
|
|
|
+ tmtbHtml += '</tbody>';
|
|
|
+ tmtbHtml += '</table>';
|
|
|
+ tmtbHtml += '</div>';
|
|
|
+ tmtbHtml += '<div class="nodata">';
|
|
|
+ tmtbHtml += '<div class="txt_box">';
|
|
|
+ tmtbHtml += '<p>현재 노출 할 수 있는 이용내역이 없습니다.<br></p>';
|
|
|
+ tmtbHtml += '</div>';
|
|
|
+ tmtbHtml += '</div>';
|
|
|
+
|
|
|
+ }else{
|
|
|
+ tmtbHtml += '<tbody>';
|
|
|
+
|
|
|
+ for(let i=0; i<giftcardUseList.length; i++){
|
|
|
+ let useGiftcard = giftcardUseList[i];
|
|
|
+ tmtbHtml += '<tr>';
|
|
|
+ tmtbHtml += '<td><span class="tag deepgray">차감</span></td>';
|
|
|
+ tmtbHtml += '<td>';
|
|
|
+ if(useGiftcard.goodsNm.length>0){
|
|
|
+ tmtbHtml +='<div class="txt_content">'+ useGiftcard.goodsNm + '</div>';
|
|
|
+ }else{
|
|
|
+ tmtbHtml +='<div class="txt_content">'+ useGiftcard.balanceName + '</div>';
|
|
|
+ }
|
|
|
+ tmtbHtml += '</td>';
|
|
|
+ tmtbHtml += '<td><span class="amount_minus"> <em>'+ useGiftcard.balance + ' ' + useGiftcard.gfcdAmt.addComma() + '</em>원';
|
|
|
+ tmtbHtml += '</span></td>';
|
|
|
+ tmtbHtml += '<td>'+useGiftcard.regDt +'</td>';
|
|
|
+ tmtbHtml += '</tr>';
|
|
|
}
|
|
|
- tmtbHtml += '<td class="c_primary">'+ useGiftcard.balance + ' ' + useGiftcard.gfcdAmt.addComma() + '</td>';
|
|
|
- tmtbHtml += '<td>'+ useGiftcard.regDt + '</td>';
|
|
|
- tmtbHtml += '</tr>';
|
|
|
+ tmtbHtml += '</tbody>';
|
|
|
+ tmtbHtml += '</table>';
|
|
|
+ tmtbHtml += '</div>';
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- tmtbHtml += '</tbody>';
|
|
|
- tmtbHtml += '</table>';
|
|
|
- tmtbHtml += '</div>';
|
|
|
- tmtbHtml += '</section>';
|
|
|
-
|
|
|
+
|
|
|
$("#giftcardList").html(tmtbHtml);
|
|
|
}
|
|
|
|
|
|
// 보유상품권 조회
|
|
|
$("#SearchOwnGiftcard").click(function(){
|
|
|
- $("#SearchUseGiftcard").removeClass("on");
|
|
|
- $("#SearchOwnGiftcard").addClass("on");
|
|
|
+ $("#SearchUseGiftcard").removeClass("active");
|
|
|
+ $("#SearchOwnGiftcard").addClass("active");
|
|
|
$("#giftcardList").attr("class","gift_list");
|
|
|
|
|
|
// 날짜 필드
|
|
|
@@ -199,33 +240,47 @@ function ownGiftcard(result) {
|
|
|
let giftcardOwnList = result.giftcardOwnList;
|
|
|
|
|
|
let tmtbHtml2 = "";
|
|
|
-
|
|
|
-
|
|
|
- tmtbHtml2 += '<ul class="clear">';
|
|
|
|
|
|
- for(let i=0; i<giftcardOwnList.length; i++){
|
|
|
- let ownGiftcard = giftcardOwnList[i];
|
|
|
+ if(giftcardOwnList == null){
|
|
|
+ tmtbHtml2 += '<div class="nodata">';
|
|
|
+ tmtbHtml2 += '<div class="txt_box">';
|
|
|
+ tmtbHtml2 += '<p>현재 노출 할 수 있는 상품권이 없습니다.<br></p>';
|
|
|
+ tmtbHtml2 += '</div>';
|
|
|
+ tmtbHtml2 += '</div>';
|
|
|
+ }else{
|
|
|
+
|
|
|
+ tmtbHtml2 += '<div class="voucher_list">';
|
|
|
+ tmtbHtml2 += '<ul>';
|
|
|
+
|
|
|
+ for(let i=0; i<giftcardOwnList.length; i++){
|
|
|
+ let ownGiftcard = giftcardOwnList[i];
|
|
|
|
|
|
- if(ownGiftcard.rmGfcdAmt > 0){
|
|
|
tmtbHtml2 += '<li>';
|
|
|
- }else{
|
|
|
- tmtbHtml2 += '<li class="off">';
|
|
|
- }
|
|
|
- tmtbHtml2 += '<div class="gift_shape">';
|
|
|
- tmtbHtml2 += '<strong>' + ownGiftcard.gfcdNm + '</strong>';
|
|
|
- tmtbHtml2 += '<div class="gift_price01">' +ownGiftcard.chgGfcdAmt.addComma() + ' 원권' +'</div>';
|
|
|
- tmtbHtml2 += '<div class="gift_price02">';
|
|
|
- tmtbHtml2 += '<span class="pr_t">잔액</span><span class="pr_num">'+ownGiftcard.rmGfcdAmt.addComma()+'</span>원'
|
|
|
- tmtbHtml2 += '<div>';
|
|
|
- tmtbHtml2 += '<div class="gift_price03">' +ownGiftcard.gfcdNo + '</div>';
|
|
|
- tmtbHtml2 += '</div>';
|
|
|
- tmtbHtml2 += '<div class="gift_date">';
|
|
|
- tmtbHtml2 += '~ <span>' +ownGiftcard.useExpDate + '</span>';
|
|
|
+ if(ownGiftcard.rmGfcdAmt > 0){
|
|
|
+ tmtbHtml2 += '<div class="voucher">';
|
|
|
+ }else{
|
|
|
+ tmtbHtml2 += '<div class="voucher disable">';
|
|
|
+ }
|
|
|
+
|
|
|
+ tmtbHtml2 += '<div>';
|
|
|
+ tmtbHtml2 += '<p class="vch_name">'+ownGiftcard.gfcdNm +'</p>';
|
|
|
+ tmtbHtml2 += '<p class="vch_price"><span class="tag primary_line"><em>'+ownGiftcard.chgGfcdAmt.addComma() +'</em>원권</span></p>';
|
|
|
+ if(ownGiftcard.rmGfcdAmt > 0){
|
|
|
+ tmtbHtml2 += '<p class="vch_remain">'+ownGiftcard.rmGfcdAmt.addComma() +'</p>';
|
|
|
+ }else{
|
|
|
+ tmtbHtml2 += '<p class="vch_remain">전액소진</p>';
|
|
|
+ }
|
|
|
+
|
|
|
+ tmtbHtml2 += '<p class="vch_code">'+ownGiftcard.gfcdNo +'</p>';
|
|
|
+ tmtbHtml2 += '</div>';
|
|
|
+ tmtbHtml2 += '<div class="vch_date">~ <span>'+ownGiftcard.useExpDate+'</span></div>';
|
|
|
+ tmtbHtml2 += '</div>';
|
|
|
+ tmtbHtml2 += '<li>';
|
|
|
+ }
|
|
|
+ tmtbHtml2 += '</ul>';
|
|
|
tmtbHtml2 += '</div>';
|
|
|
- tmtbHtml2 += '</li>';
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- tmtbHtml2 += '</ul>';
|
|
|
|
|
|
$("#giftcardList").html(tmtbHtml2);
|
|
|
|
|
|
@@ -291,12 +346,12 @@ $(document).ready(function() {
|
|
|
$("#SearchUseGiftcard").trigger('click');
|
|
|
|
|
|
// 셀렉트박스 활성화
|
|
|
- $('.select_custom.type1').each(function(index) {
|
|
|
+ $('.select_custom.month').each(function(index) {
|
|
|
var selecter01 = new sCombo($(this));
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
-</th:block>
|
|
|
+ </th:block>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
sowon4187