|
|
@@ -0,0 +1,298 @@
|
|
|
+<!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.26 csh9191 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+
|
|
|
+<th:block layout:fragment="content">
|
|
|
+<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="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"/>
|
|
|
+ <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>
|
|
|
+ </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;
|
|
|
+
|
|
|
+ // 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>");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 날짜변경 이벤트
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 포인트화면 로딩시 이번달 설정 리스트 표시하기 위함
|
|
|
+ if(pointData == null){
|
|
|
+ pointData = year + "" + month;
|
|
|
+ }
|
|
|
+
|
|
|
+ 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")){
|
|
|
+ $("#accumulatePointList").click();
|
|
|
+ }else if($("#usePointList").hasClass("on")){
|
|
|
+ $("#usePointList").click();
|
|
|
+ }else if($("#allPointList").hasClass("on")) {
|
|
|
+ $("#allPointList").click();
|
|
|
+ }
|
|
|
+ // 첫화면 전체내역 조회
|
|
|
+ fnGetPointTableInfo();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // HTML 그리기
|
|
|
+ var fnGetPointTableInfo = function(param) {
|
|
|
+ $('.nodata').hide();
|
|
|
+ let tag = "";
|
|
|
+ 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+'</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("active");
|
|
|
+ $("#usePointList").removeClass("active");
|
|
|
+
|
|
|
+ $("#allPointList").addClass("active");
|
|
|
+ //$("#plusMinus").text("증감/차감");
|
|
|
+
|
|
|
+ fnGetPointTableInfo(allPointList);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 적립내역 조회
|
|
|
+ $("#accumulatePointList").click(function(){
|
|
|
+
|
|
|
+ $("#allPointList").removeClass("active");
|
|
|
+ $("#usePointList").removeClass("active");
|
|
|
+
|
|
|
+ $("#accumulatePointList").addClass("active");
|
|
|
+ //$("#plusMinus").text("증감");
|
|
|
+
|
|
|
+ fnGetPointTableInfo(accumulatePointList);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 사용내역 조회
|
|
|
+ $("#usePointList").click(function(){
|
|
|
+
|
|
|
+ $("#accumulatePointList").removeClass("active");
|
|
|
+ $("#allPointList").removeClass("active");
|
|
|
+
|
|
|
+ $("#usePointList").addClass("active");
|
|
|
+ //$("#plusMinus").text("차감");
|
|
|
+
|
|
|
+ fnGetPointTableInfo(usePointList);
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ // 마이페이지 LNB 설정
|
|
|
+ fnSetMypageLnbList(5);
|
|
|
+
|
|
|
+ // 마이페이지 location 설정
|
|
|
+ fnSetMypageLocation('STYLE24 포인트', '_PAGE_MYPAGE_POINT');
|
|
|
+
|
|
|
+ // 전체내역 표시
|
|
|
+ $("#allPointList").trigger('click');
|
|
|
+
|
|
|
+ // 셀렉트박스 활성화
|
|
|
+ $('.select_custom').each(function(index) {
|
|
|
+ var selecter01 = new sCombo($(this));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 셀렉트박스 데이터 설정
|
|
|
+ fnChangeDate();
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+</script>
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
gagamel