style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="mob/common/layout/MypageLayoutMob">
<!--
 *******************************************************************************
 * @source  : MypagePointFormMob.html
 * @desc    : 마이페이지 > 포인트 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.19   sowon     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<main role="" id="" class="container my">
			<section class="content point">

				<div class="inner">
					<div class="highlight_area">
						<div class="have_amount">
							<div class="total_amount">
								보유 포인트&nbsp;<span><em th:text="${#numbers.formatDecimal(rmPntAmt, 0, 'COMMA', 0, 'POINT')}"></em>P</span>
							</div>
						</div>
					</div>
					<div class="have_amount">
						<dl>
							<div>
								<dt>적립 예정 포인트</dt>
								<dd><em th:text="${#numbers.formatDecimal(expectedPntAmt, 0, 'COMMA', 0, 'POINT')}"></em>P</dd>
							</div>
						</dl>
						<dl>
							<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="inner wide">
					<div class="select_box ">
						<div class="form_field">
							<div class="select_custom month sup">
								<!-- 210408_ 수정 : 스크립트없는 기본 셀렉터 사용으로 변경 -->
								<div class="select pure">
									<select name="month" id="month" onchange='fnChangeDate(this.value)' >
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="tabWrap">
						<ul class="tabIndex">
							<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 class="tabContents">
							<div class="tab_cont active" id="pointAjaxList">
	
								<!-- // tab_cont End -->
							</div>
						</div>
						
						 <div class="nodata">
							<div class="txt_box">
								<p>
									STYLE 포인트 적립/사용내역이 없습니다.<br>
	
								</p>
							</div>
						</div> 
					</div>
				</div>

			</section>
		</main>
<script th:inline="javascript">
let accumulatePointList = [[${accumulatePointList}]];
let usePointList = [[${usePointList}]];
let allPointList = [[${allPointList}]];
let date = [[${date}]];
var year = date[0].year;
var month = date[0].month;

//동적으로 날짜 년도 append
function appendYear() {
	for (var i = 0; i < date.length; i++) {
		$("#month").append(	"<option value='"+ date[i].year + "" + date[i].month + "'>" + date[i].year	+ "년" +'   '+ date[i].month + "월 </option>")
	}
	//$(".month").append("<option class='selected' value='"+date[0].year+""+date[0].month+"'>"+ date[0].year + "년" + date[0].month + "월 </option>"); // 현재년도 선택 */ 
}
appendYear($("#month"));

//날짜변경 이벤트
var fnChangeDate = function(param) {
	let url = '/mypage/allpoint/list';
	let searchDt;
	
	if (typeof param == 'undefined') {
		searchDt = year + month;
	}else{
		searchDt = param;
	}
	// 포인트화면 로딩시 이번달 설정 리스트 표시하기 위함
	let data = {
			searchDt  : searchDt
	};
	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("active")){
				$("#accumulatePointList").click();
				// 첫화면 전체내역 조회
				fnGetPointTableInfo(result.accumulatePointList);
			}else if($("#usePointList").hasClass("active")){
				$("#usePointList").click();
				fnGetPointTableInfo(usePointList);
			}else if($("#allPointList").hasClass("active")) {
				$("#allPointList").click();
				fnGetPointTableInfo(allPointList);
			}
	});
}

// HTML 그리기
var fnGetPointTableInfo = function(param) {
	$('.nodata').hide();
	$("#pointAjaxList").html('');
	let tag = "";
	if(param != null && param.length > 0){
		$.each(param, function(idx,item){
			tag += '<ul>';
			tag += ' <li>';
			tag += ' 	<div>';
			if(item.pntAmt > 0){
				tag += '		<span class="tag primary">적립</span>';
			}else{
				tag += ' 		<span class="tag deepgray">차감</span>';
			}
			
			tag += ' 		<span class="tag_name">'+item.occurGb+'</span>';
			tag += ' 		<span class="txt_content">'+ item.occurDtlDesc + '</span>';
			tag += ' 		<span class="txt_time">'+item.pntUploadDt+'</span>';
			tag += ' 	</div>';
			tag += ' 	<div>';
			if(item.pntAmt > 0){
				tag += '		<span class="amount_plus">';
				tag += '			<em>+'+item.pntAmt.addComma()+'</em>P';
				tag += '		</span>';
			}else{
				tag += '		<span class="amount_minus">';
				tag += '			<em>'+item.pntAmt.addComma()+'</em>P';
				tag += '		</span>';
			}
			tag += ' 	</div>';
			tag += ' </li>';
			tag += '</ul>';
		});
		$("#pointAjaxList").html(tag);
	}else{
		$('.nodata').show();
		
	}
}

// 전체내역 조회
$("#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() {
	$('#htopTitle').text('STYLE 포인트');
	// 전체내역 표시
	$("#allPointList").trigger("click");
	

	// 셀렉트박스 활성화
	$('.select_custom').each(function(index) {
		var selecter01 = new sCombo($(this));
	});

	// 셀렉트박스 데이터 설정
	fnChangeDate();

});

</script>
	</th:block>

</body>
</html>