|
@@ -0,0 +1,238 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="ko"
|
|
|
|
|
+ xmlns:th="http://www.thymeleaf.org"
|
|
|
|
|
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
|
|
+ layout:decorator="web/common/layout/MypageLayoutWeb">
|
|
|
|
|
+<!--
|
|
|
|
|
+ *******************************************************************************
|
|
|
|
|
+ * @source : MypagePointForm.html
|
|
|
|
|
+ * @desc : 마이페이지 > STYLE24포인트 Page
|
|
|
|
|
+ *============================================================================
|
|
|
|
|
+ * STYLE24
|
|
|
|
|
+ * Copyright(C) 2021 TSIT, All rights reserved.
|
|
|
|
|
+ *============================================================================
|
|
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
|
|
+ * === =========== ========== =============================================
|
|
|
|
|
+ * 1.0 2021.02.25 csh9191 최초 작성
|
|
|
|
|
+ *******************************************************************************
|
|
|
|
|
+ -->
|
|
|
|
|
+<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>
|
|
|
|
|
+ </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">등록</button>
|
|
|
|
|
+ </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">
|
|
|
|
|
+ <select id="searchDt" onchange="fnChangeDate(this)">
|
|
|
|
|
+
|
|
|
|
|
+ </select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="giftcardList">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+<!-- // CONT-BODY -->
|
|
|
|
|
+<script th:inline="javascript">
|
|
|
|
|
+//동적으로 날짜 년도 append
|
|
|
|
|
+function appendYear(){
|
|
|
|
|
+
|
|
|
|
|
+ var date = new Date();
|
|
|
|
|
+ var year = date.getFullYear();
|
|
|
|
|
+ var month = date.getMonth()+1;
|
|
|
|
|
+
|
|
|
|
|
+ for(var i=year; i<=year; i++){
|
|
|
|
|
+ for (var j= 1; j <=month; j++) {
|
|
|
|
|
+ $("#searchDt").prepend("<option value='"+year+"-"+j+"'>"+i+"년"+ j +"월 </option>");
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ $("#searchDt").find("option:eq(0)").prop("selected", true); // 현재년도 선택
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+appendYear($("#searchDt"));
|
|
|
|
|
+
|
|
|
|
|
+// 사용내역 조회
|
|
|
|
|
+$("#SearchUseGiftcard").click(function(){
|
|
|
|
|
+ // class제거 추가
|
|
|
|
|
+ $("#SearchOwnGiftcard").removeClass("on");
|
|
|
|
|
+ $("#SearchUseGiftcard").addClass("on");
|
|
|
|
|
+ $("#giftcardList").attr("class","order_list");
|
|
|
|
|
+
|
|
|
|
|
+ let data = {};
|
|
|
|
|
+
|
|
|
|
|
+ var jsonData = JSON.stringify(data);
|
|
|
|
|
+
|
|
|
|
|
+ $.ajax(
|
|
|
|
|
+ {
|
|
|
|
|
+ type : "POST",
|
|
|
|
|
+ data : jsonData,
|
|
|
|
|
+ url : '/mypage/gift/use/list',
|
|
|
|
|
+ contentType: 'application/json',
|
|
|
|
|
+ dataType : 'json',
|
|
|
|
|
+ success : function(result){
|
|
|
|
|
+ useGiftcard(result);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ )
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+function useGiftcard(result) {
|
|
|
|
|
+
|
|
|
|
|
+ let giftcardUseList = result.giftcardUseList;
|
|
|
|
|
+
|
|
|
|
|
+ let tmtbHtml = "";
|
|
|
|
|
+
|
|
|
|
|
+ tmtbHtml += '<section class="order_row mt30">';
|
|
|
|
|
+ tmtbHtml += '<div class="tbl track_tbl type2">';
|
|
|
|
|
+ tmtbHtml += '<table>';
|
|
|
|
|
+ tmtbHtml += '<colgroup>';
|
|
|
|
|
+ tmtbHtml += '<col width="750px">';
|
|
|
|
|
+ tmtbHtml += '<col width="150px">';
|
|
|
|
|
+ tmtbHtml += '<col width="*">';
|
|
|
|
|
+ tmtbHtml += '</colgroup>';
|
|
|
|
|
+ tmtbHtml += '<thead>';
|
|
|
|
|
+ tmtbHtml += '<tr>';
|
|
|
|
|
+ tmtbHtml += '<th>내용</th>';
|
|
|
|
|
+ tmtbHtml += '<th>증감/차감</th>';
|
|
|
|
|
+ tmtbHtml += '<th>일자</th>';
|
|
|
|
|
+ tmtbHtml += '</tr>';
|
|
|
|
|
+ tmtbHtml += '</thead>';
|
|
|
|
|
+ tmtbHtml += '<tbody>';
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ 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>';
|
|
|
|
|
+ }
|
|
|
|
|
+ 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 += '</section>';
|
|
|
|
|
+
|
|
|
|
|
+ $("#giftcardList").html(tmtbHtml);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 보유상품권 조회
|
|
|
|
|
+$("#SearchOwnGiftcard").click(function(){
|
|
|
|
|
+ $("#SearchUseGiftcard").removeClass("on");
|
|
|
|
|
+ $("#SearchOwnGiftcard").addClass("on");
|
|
|
|
|
+ $("#giftcardList").attr("class","gift_list");
|
|
|
|
|
+
|
|
|
|
|
+ let data = {};
|
|
|
|
|
+
|
|
|
|
|
+ var jsonData = JSON.stringify(data);
|
|
|
|
|
+
|
|
|
|
|
+ $.ajax(
|
|
|
|
|
+ {
|
|
|
|
|
+ type : "POST",
|
|
|
|
|
+ data : jsonData,
|
|
|
|
|
+ url : '/mypage/gift/own/list',
|
|
|
|
|
+ contentType: 'application/json',
|
|
|
|
|
+ dataType : 'json',
|
|
|
|
|
+ success : function(result){
|
|
|
|
|
+ ownGiftcard(result);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ )
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+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(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>';
|
|
|
|
|
+ tmtbHtml2 += '</div>';
|
|
|
|
|
+ tmtbHtml2 += '</li>';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ tmtbHtml2 += '</ul>';
|
|
|
|
|
+
|
|
|
|
|
+ $("#giftcardList").html(tmtbHtml2);
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function fnChangeDate(obj) {
|
|
|
|
|
+ console.log(obj);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+$(document).ready(function() {
|
|
|
|
|
+
|
|
|
|
|
+ // 마이페이지 LNB 설정
|
|
|
|
|
+ fnSetMypageLnbList(6);
|
|
|
|
|
+
|
|
|
|
|
+ // 마이페이지 location 설정
|
|
|
|
|
+ fnSetMypageLocation('상품권', '_PAGE_MYPAGE_GIFTCARD');
|
|
|
|
|
+
|
|
|
|
|
+ // 전체내역 표시
|
|
|
|
|
+ $("#SearchUseGiftcard").trigger('click');
|
|
|
|
|
+
|
|
|
|
|
+});
|
|
|
|
|
+</script>
|
|
|
|
|
+</th:block>
|
|
|
|
|
+
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|