|
|
@@ -19,171 +19,212 @@
|
|
|
<body>
|
|
|
|
|
|
<th:block layout:fragment="content">
|
|
|
- <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.formatDecimal(rmPntAmt, 0, 'COMMA', 0, 'POINT')}"></strong>P</p>
|
|
|
- <ul>
|
|
|
- <li>적립 예정 포인트 <span>
|
|
|
- <th:block th:text="${#numbers.formatDecimal(expectedPntAmt, 0, 'COMMA', 0, 'POINT')}"></th:block>P
|
|
|
- </span></li>
|
|
|
- <li>한달 이내 소멸 예정 <span>
|
|
|
- <th:block th:text="${#numbers.formatDecimal(expectedExpirePntAmt, 0, 'COMMA', 0, 'POINT')}"></th:block>P
|
|
|
- </span></li>
|
|
|
- </ul>
|
|
|
+<div class="content myPoint"> <!-- 페이지특정 클래스 = myPoint -->
|
|
|
+ <div class="cont_body">
|
|
|
+ <!-- CONT-BODY -->
|
|
|
+ <div class="lnb">
|
|
|
+ <div class="lnb_tit">
|
|
|
+ <h2>마이페이지</h2>
|
|
|
+ </div>
|
|
|
+ <div class="lnb_list">
|
|
|
+ <ul id="mypageLnbList"></ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="my_tab coupon_tab">
|
|
|
- <ul>
|
|
|
- <li><a href="javascript:void(0);" id="allPointList">전체내역</a></li>
|
|
|
- <li><a href="javascript:void(0);" id="accumulatePointList">적립내역</a></li>
|
|
|
- <li><a href="javascript:void(0);" id="usePointList">사용내역</a></li>
|
|
|
- </ul>
|
|
|
- <!-- <div class="form_field"> -->
|
|
|
- <!-- <select id="searchDt" name="searchDt" onchange="fnSearchDate(this);"> -->
|
|
|
- <!-- </select> -->
|
|
|
- <!-- </div> -->
|
|
|
- <div class="form_field">
|
|
|
- <div class="select_custom type1">
|
|
|
- <div class="combo">
|
|
|
- <input type="hidden" name="pointDate" value="0"/>
|
|
|
- <div class="select"></div> <!-- 셀렉박스 -->
|
|
|
- <ul id="searchDt" class="list" style="width:200px; margin:0 auto">
|
|
|
+ <div class="cont">
|
|
|
+ <div class="sec_head">
|
|
|
+ <h3 class="subH1">STYLE 포인트</h3>
|
|
|
+ </div>
|
|
|
+ <div class="sec_body">
|
|
|
+ <div class="highlight_area">
|
|
|
+ <div class="have_amount">
|
|
|
+ <div class="total_amount">
|
|
|
+ 나의 보유 포인트 <span><em th:text="${#numbers.formatDecimal(rmPntAmt, 0, 'COMMA', 0, 'POINT')}"></em>P</span>
|
|
|
+ </div>
|
|
|
+ <dl>
|
|
|
+ <div>
|
|
|
+ <dt>적립 예정 포인트</dt>
|
|
|
+ <dd><em th:text="${#numbers.formatDecimal(expectedPntAmt, 0, 'COMMA', 0, 'POINT')}"></em>P</dd>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <dt><span class="tag primary_line">D-<em >30</em></span>한 달 이내 소멸 예정</dt>
|
|
|
+ <dd><em th:text="${#numbers.formatDecimal(expectedExpirePntAmt, 0, 'COMMA', 0, 'POINT')}"></em>P</dd>
|
|
|
+ </div>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content_area">
|
|
|
+ <div class="taps">
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li id="allPointList"><a href="javascript:void(0);">전체내역</a></li>
|
|
|
+ <li id="accumulatePointList"><a href="javascript:void(0);">적립내역</a></li>
|
|
|
+ <li id="usePointList"><a href="javascript:void(0);">사용내역</a></li>
|
|
|
</ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select_box">
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom month">
|
|
|
+ <div class="combo">
|
|
|
+ <input type="hidden" name="pointDate" value="0" id="pointDate"/>
|
|
|
+ <div class="select"></div>
|
|
|
+ <ul id="searchDt" class="list">
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 데이터 있을 시 -->
|
|
|
+ <div class="list_box">
|
|
|
+ <div class="tbl type5">
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col width="10%">
|
|
|
+ <col width="12%">
|
|
|
+ <col width="42%">
|
|
|
+ <col width="18%">
|
|
|
+ <col width="18%">
|
|
|
+ </colgroup>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th scope="col"><span class="sr-only">증감여부</span></th>
|
|
|
+ <th scope="col">사유</th>
|
|
|
+ <th scope="col">내용</th>
|
|
|
+ <th scope="col">포인트</th>
|
|
|
+ <th scope="col">일자</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="pointAjaxList">
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- //데이터 있을 시 -->
|
|
|
+ <!-- 데이터 없을 시 -->
|
|
|
+ <div class="nodata">
|
|
|
+ <div class="txt_box">
|
|
|
+ <p>
|
|
|
+ STYLE 포인트 적립/사용내역이 없습니다.<br>
|
|
|
+
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //데이터 없을 시 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="order_list">
|
|
|
- <section class="order_row">
|
|
|
- <div class="tbl point_tbl track_tbl type2">
|
|
|
- <table>
|
|
|
- <colgroup>
|
|
|
- <col width="150px">
|
|
|
- <col width="660px">
|
|
|
- <col width="*">
|
|
|
- <col width="200px">
|
|
|
- </colgroup>
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>사유</th>
|
|
|
- <th>내용</th>
|
|
|
- <th id="plusMinus"></th>
|
|
|
- <th>일자</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="pointAjaxList">
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script th:inline="javascript">
|
|
|
let accumulatePointList = [[${accumulatePointList}]];
|
|
|
let usePointList = [[${usePointList}]];
|
|
|
let allPointList = [[${allPointList}]];
|
|
|
-
|
|
|
- // select 날짜 생성
|
|
|
- var date = new Date();
|
|
|
- var year = date.getFullYear();
|
|
|
- var month = date.getMonth() +1;
|
|
|
-
|
|
|
+ let date = [[${date}]];
|
|
|
+ var year = date[0].year;
|
|
|
+ var month = date[0].month;
|
|
|
// TODO - 퍼블확정시
|
|
|
- var oneYearAgo = year -1;
|
|
|
- var twoYearAgo = year -2;
|
|
|
|
|
|
// 이번년도
|
|
|
- for(var i = 1;i <= 12; i++){
|
|
|
- if(i < 10 && i != month){
|
|
|
- $("#searchDt").append("<li onclick='fnChangeDate(this);' class='selected' value='"+ year + "" + 0 + i +"'>"+ year + "년" + " " + i + "월" +"</li>");
|
|
|
- }
|
|
|
- else if(i < 10 && i == month){
|
|
|
- //셀렉트박스 이번 달 표시설정
|
|
|
- $('.select').append("<li style='pointer-events: none' onclick='fnChangeDate(this);' class='selected' value='"+ year + "" + 0 + i +"'>" + year + "년" + " " + i + "월" +"</li>");
|
|
|
- $("#searchDt").append("<li onclick='fnChangeDate(this);' class='selected' value='"+ year + "" + 0 + i +"'>" + year + "년" + " " + i + "월" +"</li>");
|
|
|
- }
|
|
|
- else if(i > 9 && i != month){
|
|
|
- $("#searchDt").append("<li onclick='fnChangeDate(this);' class='selected' value='"+ year + "" + i +"'>"+ year + "년" + " " + i + "월" +"</li>");
|
|
|
- }
|
|
|
- else if(i > 9 && i == month){
|
|
|
- $('.select').append("<li onclick='fnChangeDate(this);' class='selected' value='"+ year + "" + i +"'>" + year + "년" + " " + i + "월" +"</li>");
|
|
|
- $("#searchDt").append("<li onclick='fnChangeDate(this);' class='selected' value='"+ year + "" + i +"'>"+ year + "년" + " " + i + "월" +"</li>");
|
|
|
+ //동적으로 날짜 년도 append
|
|
|
+ function appendYear() {
|
|
|
+ for (var i = 0; i < date.length; i++) {
|
|
|
+ $("#searchDt").append( "<li onclick='fnChangeDate(this.value)' value='"+ date[i].year + "" + date[i].month + "'>" + date[i].year + "년" + date[i].month + "월 </li>")
|
|
|
}
|
|
|
+ $(".select").append("<li class='selected' value='"+date[0].year+""+date[0].month+"'>"+ date[0].year + "년" + date[0].month + "월 </li>"); // 현재년도 선택 */
|
|
|
}
|
|
|
+ appendYear($("#searchDt"));
|
|
|
|
|
|
// 날짜변경 이벤트
|
|
|
var fnChangeDate = function(param) {
|
|
|
let url = '/mypage/allpoint/list';
|
|
|
|
|
|
- $(param).parent().parent().find('input[name=pointDate]').val($(param).val());
|
|
|
- var pointData = $(param).parent().parent().find('input[name=pointDate]').val();
|
|
|
-
|
|
|
- if(10 > month){
|
|
|
- month = "0" + month;
|
|
|
- }
|
|
|
+
|
|
|
+ //$(param).parent().parent().find('input[name=pointDate]').val($(param).val());
|
|
|
+ //var pointData = $(param).parent().parent().find('input[name=pointDate]').val();
|
|
|
|
|
|
// 포인트화면 로딩시 이번달 설정 리스트 표시하기 위함
|
|
|
- if(pointData == null){
|
|
|
- pointData = year + "" + month;
|
|
|
+ var data = {};
|
|
|
+ if(typeof param == 'undefined'){
|
|
|
+ data.searchDt = year.toString() + "" + month.toString();
|
|
|
+ }else{
|
|
|
+ data.searchDt = param;
|
|
|
}
|
|
|
-
|
|
|
- let data = {};
|
|
|
-
|
|
|
- data.searchDt = pointData;
|
|
|
-
|
|
|
- console.log(data);
|
|
|
-
|
|
|
var jsonData = JSON.stringify(data);
|
|
|
|
|
|
gagajf.ajaxJsonSubmit('/mypage/allpoint/list', jsonData, function(result){
|
|
|
+
|
|
|
accumulatePointList = result.accumulatePointList;
|
|
|
usePointList = result.usePointList;
|
|
|
allPointList = result.allPointList;
|
|
|
-
|
|
|
// 클릭상태 확인
|
|
|
- if($("#accumulatePointList").hasClass("on")){
|
|
|
+ if($("#accumulatePointList").hasClass("active")){
|
|
|
$("#accumulatePointList").click();
|
|
|
- }else if($("#usePointList").hasClass("on")){
|
|
|
+ // 첫화면 전체내역 조회
|
|
|
+ fnGetPointTableInfo(result.accumulatePointList);
|
|
|
+ }else if($("#usePointList").hasClass("active")){
|
|
|
$("#usePointList").click();
|
|
|
- }else if($("#allPointList").hasClass("on")) {
|
|
|
+ fnGetPointTableInfo(usePointList);
|
|
|
+ }else if($("#allPointList").hasClass("active")) {
|
|
|
$("#allPointList").click();
|
|
|
+ fnGetPointTableInfo(allPointList);
|
|
|
}
|
|
|
- // 첫화면 전체내역 조회
|
|
|
- fnGetPointTableInfo();
|
|
|
+
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// HTML 그리기
|
|
|
var fnGetPointTableInfo = function(param) {
|
|
|
+ $('.nodata').hide();
|
|
|
let tag = "";
|
|
|
- $.each(param, function(idx,item){
|
|
|
- tag +='<tr>';
|
|
|
- tag +='<td>'+ item.occurGb + '</td>';
|
|
|
- tag += '<td class="t_l pl40">'+ item.occurDtlDesc + '</td>';
|
|
|
- // 증감 : 파랑, 차감 : 빨강으로 표시
|
|
|
- if(item.pntAmt > 0){
|
|
|
- tag += '<td class="c_blue">'+ item.pntAmt + '</td>';
|
|
|
- }else{
|
|
|
- tag += '<td class="c_primary">'+ item.pntAmt + '</td>';
|
|
|
- }
|
|
|
- tag += '<td>'+ item.pntUploadDt + '</td>';
|
|
|
- tag += '</tr>';
|
|
|
- });
|
|
|
+ if(param != null && param.length > 0){
|
|
|
+ $.each(param, function(idx,item){
|
|
|
+ tag += '<tr>';
|
|
|
+ tag += ' <td>';
|
|
|
+ if(item.pntAmt > 0){
|
|
|
+ tag += ' <span class="tag primary">적립</span>';
|
|
|
+ }else{
|
|
|
+ tag += ' <span class="tag deepgray">차감</span>';
|
|
|
+ }
|
|
|
+
|
|
|
+ tag += ' </td>';
|
|
|
+ tag += ' <td>'+item.occurGb+'</td>';
|
|
|
+ tag += ' <td>';
|
|
|
+ tag += ' <div class="txt_content">'+ item.occurDtlDesc + '</div>';
|
|
|
+ tag += ' </td>';
|
|
|
+ tag += ' <td>';
|
|
|
+ if(item.pntAmt > 0){
|
|
|
+ tag += ' <span class="amount_plus">';
|
|
|
+ tag += ' <em>'+item.pntAmt.addComma()+'</em>P';
|
|
|
+ tag += ' </span>';
|
|
|
+ }else{
|
|
|
+ tag += ' <span class="c_primary">';
|
|
|
+ tag += ' <em>'+item.pntAmt+'</em>P';
|
|
|
+ tag += ' </span>';
|
|
|
+ }
|
|
|
+
|
|
|
+ tag += ' </td>';
|
|
|
+ tag += ' <td>'+item.pntUploadDt;
|
|
|
+ tag += ' </td>';
|
|
|
+ tag += '</tr> ';
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ $('.nodata').show();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
$("#pointAjaxList").html(tag);
|
|
|
}
|
|
|
|
|
|
// 전체내역 조회
|
|
|
$("#allPointList").click(function(){
|
|
|
|
|
|
- $("#accumulatePointList").removeClass("on");
|
|
|
- $("#usePointList").removeClass("on");
|
|
|
+ $("#accumulatePointList").removeClass("active");
|
|
|
+ $("#usePointList").removeClass("active");
|
|
|
|
|
|
- $("#allPointList").addClass("on");
|
|
|
- $("#plusMinus").text("증감/차감");
|
|
|
+ $("#allPointList").addClass("active");
|
|
|
+ //$("#plusMinus").text("증감/차감");
|
|
|
|
|
|
fnGetPointTableInfo(allPointList);
|
|
|
});
|
|
|
@@ -191,11 +232,11 @@
|
|
|
// 적립내역 조회
|
|
|
$("#accumulatePointList").click(function(){
|
|
|
|
|
|
- $("#allPointList").removeClass("on");
|
|
|
- $("#usePointList").removeClass("on");
|
|
|
+ $("#allPointList").removeClass("active");
|
|
|
+ $("#usePointList").removeClass("active");
|
|
|
|
|
|
- $("#accumulatePointList").addClass("on");
|
|
|
- $("#plusMinus").text("증감");
|
|
|
+ $("#accumulatePointList").addClass("active");
|
|
|
+ //$("#plusMinus").text("증감");
|
|
|
|
|
|
fnGetPointTableInfo(accumulatePointList);
|
|
|
});
|
|
|
@@ -203,27 +244,28 @@
|
|
|
// 사용내역 조회
|
|
|
$("#usePointList").click(function(){
|
|
|
|
|
|
- $("#accumulatePointList").removeClass("on");
|
|
|
- $("#allPointList").removeClass("on");
|
|
|
+ $("#accumulatePointList").removeClass("active");
|
|
|
+ $("#allPointList").removeClass("active");
|
|
|
|
|
|
- $("#usePointList").addClass("on");
|
|
|
- $("#plusMinus").text("차감");
|
|
|
+ $("#usePointList").addClass("active");
|
|
|
+ //$("#plusMinus").text("차감");
|
|
|
|
|
|
fnGetPointTableInfo(usePointList);
|
|
|
});
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
+ // 전체내역 표시
|
|
|
+ $("#allPointList").trigger("click");
|
|
|
// 마이페이지 LNB 설정
|
|
|
fnSetMypageLnbList(5);
|
|
|
|
|
|
// 마이페이지 location 설정
|
|
|
fnSetMypageLocation('STYLE24 포인트', '_PAGE_MYPAGE_POINT');
|
|
|
|
|
|
- // 전체내역 표시
|
|
|
- $("#allPointList").trigger('click');
|
|
|
+
|
|
|
|
|
|
// 셀렉트박스 활성화
|
|
|
- $('.select_custom.type1').each(function(index) {
|
|
|
+ $('.select_custom').each(function(index) {
|
|
|
var selecter01 = new sCombo($(this));
|
|
|
});
|
|
|
|
sowon4187