style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
							<!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/SubLayoutMob">
<!--
 *******************************************************************************
 * @source  : PlanningCustGradeBenefitFormMob.html
 * @desc    : 회원등급 혜택 Page
 *============================================================================
 * Pastelmall
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021. 05. 03     jsshin     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<main class="container ev">
	<section class="content ev_rank">
	<th:block th:if="${isLogin}">
		<div class="inner wide" >
			<div class="my_rank_info">
				<div class="desc">
					<div th:class="'icon '+${#strings.toLowerCase(customerInfo.custGradeNm)}">
						<span th:text="${#strings.substring(customerInfo.custGradeNm, 0, 1)}">G</span>
					</div>
					<p>
						<span class="my_name" th:text="${customerInfo.custNm}">홍길동</span>님의
						이번 달 회원등급은<br/>
						<span class="my_rank" th:text="${customerInfo.custGradeNm}">GOLD</span> 입니다.
					</p>
				</div>
				<button type="button" id="btnGradeCoupon" class="btn cou_btn">등급 쿠폰 다운로드</button>
			</div>
		</div>
		<div class="inner">
			<!-- 회원 등급 progress바 -->
			<div class="my_rank_progress">
				<div th:class="'pro_wrap '+${#strings.toLowerCase(customerInfo.custGradeNm)}"> <!-- welcome, bronze, silver, gold, vip 각각 클래스 넣으면 상태가 달라집니다. -->
					<div class="rank_txt clear">
						<ul class="clear">
							<li>
								<div class="txt">
									<span>WELCOME</span>
								</div>
							</li>
							<li>
								<div class="txt">
									<span>BRONZE</span>
								</div>
							</li>
							<li>
								<div class="txt">
									<span>SILVER</span>
								</div>
							</li>
							<li>
								<div class="txt">
									<span>GOLD</span>
								</div>
							</li>
							<li>
								<div class="txt">
									<span>VIP</span>
								</div>
							</li>
						</ul>
					</div>
					<div class="progress_bar">
						<span class="current_bar"></span>
					</div>
				</div>
				<!-- 등급 상승까지 남은 정보 안내 -->
				<div class="benefit_txt">
					<p id="etcGrade">
						<span id="ordSpan">	구매 건수 <strong id="ordCnt" class="c_primary">0회</strong> </span>
						<span id="realOrdAmtSpan">또는 구매 금액 <strong id="realOrdAmt" class="c_primary">0원 </span>
						</strong> 더 구매하시면 <strong>
						<span id="nextGrde" class="c_black"></span>로 등급UP!</strong>
					</p> <!-- 등급 상승까지 남은 정보 안내 -->
					<p id="sameVipGrade" style="display: none;">
						<strong>등급 유지 조건 달성!</strong> 다음달에도
						<strong class="c_primary"><span>VIP</span> 등급 혜택</strong>을 받으실 수 있습니다.
					</p>
					<p id="vipGrade" style="display: none;">
						다음달에 <strong class="c_primary"><span>VIP</span> 등급 혜택</strong>을 받으실 수 있습니다.
					</p>
				</div>
				<!-- //등급 유지 조건 달성 -->
			</div>
			<!-- //회원 등급 progress바 -->
		</div>
	</th:block>
	<th:block th:unless="${isLogin}">
		<div class="inner wide">
			<div class="my_rank_info no_member"> <!-- 비회원일 경우 -->
				<p>
					로그인 후 이번 달 나의 회원 등급을 확인하고<br>쿠폰혜택을 받아보세요.
				</p>
				<button type="button" class="btn btn_dark login_btn" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인</button>
			</div>
		</div>
	</th:block>
		<div class="inner">
			<div class="level_wrap">
				<div class="member_level_area"> <!-- VIP -->
					<div class="level_head">
						<div class="icon vip"><span>V</span></div>
						<div class="desc">
							<span>VIP</span>
							<p>최근 3개월 30만원 또는 6건 이상 구매</p>
						</div>
					</div>
					<div class="level_content">
						<div class="coupon">
							<p class="coupon_txt">쿠폰 혜택</p>
							<div class="coupon_box clear">
								<div class="coupon_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_12.png'" alt="12% 할인 쿠폰">
									<p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p> <!-- 210415_수정 : 텍스트 수정. -->
								</div>
								<div class="coupon_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_20000.png'" alt="20,000원 할인 쿠폰">
									<p>10만원 이상 구매 시</p>
								</div>
							</div>
						</div>
						<div class="birth">
							<p class="birth_txt">생일 혜택</p>
							<div class="birth_box clear">
								<div class="birth_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_15.png'" alt="15% 할인 쿠폰">
									<p>최대 3만원 할인</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="member_level_area"> <!-- 골드 -->
					<div class="level_head">
						<div class="icon gold"><span>G</span></div>
						<div class="desc">
							<span>GOLD</span>
							<p>최근 3개월 20만원 또는 4건 이상 구매</p>
						</div>
					</div>
					<div class="level_content">
						<div class="coupon">
							<p class="coupon_txt">쿠폰 혜택</p>
							<div class="coupon_box clear">
								<div class="coupon_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_10.png'" alt="10% 할인 쿠폰"> <!-- 210415_수정 : 이미지 수정. -->
									<p>최대 1만 할인<br>(3만원 이상 구매 시)</p> <!-- 210415_수정 : 텍스트 수정. -->
								</div>
								<div class="coupon_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_15000.png'" alt="15,000원 할인 쿠폰">
									<p>10만원 이상 구매 시</p>
								</div>
							</div>
						</div>
						<div class="birth">
							<p class="birth_txt">생일 혜택</p>
							<div class="birth_box clear">
								<div class="birth_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_15.png'" alt="15% 할인 쿠폰">
									<p>최대 2만원 할인</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="member_level_area"> <!-- 실버 -->
					<div class="level_head">
						<div class="icon silver"><span>S</span></div>
						<div class="desc">
							<span>SILVER</span>
							<p>최근 3개월 10만원 또는 2  건 이상 구매</p>
						</div>
					</div>
					<div class="level_content one_row">
						<div class="coupon">
							<p class="coupon_txt">쿠폰 혜택</p>
							<div class="coupon_box clear">
								<div class="coupon_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_7.png'" alt="7% 할인 쿠폰"> <!-- 210415_수정 : 이미지 수정. -->
									<p>최대 7천원 할인<br>(3만원 이상 구매 시)</p>
								</div>
							</div>
						</div>
						<div class="birth">
							<p class="birth_txt">생일 혜택</p>
							<div class="birth_box clear">
								<div class="birth_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_15.png'" alt="15% 할인 쿠폰">
									<p>최대 1만원 할인</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="member_level_area"> <!-- 브론즈 -->
					<div class="level_head">
						<div class="icon bronze"><span>B</span></div>
						<div class="desc">
							<span>BRONZE</span>
							<p>최근 3개월 1건 이상 구매</p>
						</div>
					</div>
					<div class="level_content one_row">
						<div class="coupon">
							<p class="coupon_txt">쿠폰 혜택</p>
							<div class="coupon_box clear">
								<div class="coupon_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_5.png'" alt="5% 할인 쿠폰">
									<p>최대 3천원 할인<br>(2만원 이상 구매 시)</p>
								</div>
							</div>
						</div>
						<div class="birth">
							<p class="birth_txt">생일 혜택</p>
							<div class="birth_box clear">
								<div class="birth_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_10.png'" alt="10% 할인 쿠폰">
									<p>최대 1만원 할인</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="member_level_area"> <!-- 웰컴 -->
					<div class="level_head">
						<div class="icon welcome"><span>W</span></div>
						<div class="desc">
							<span>WELCOME</span>
							<p>신규회원 및 최근 3개월 미구매</p>
						</div>
					</div>
					<div class="level_content one_row">
						<div class="coupon">
							<p class="coupon_txt">쿠폰 혜택</p>
							<div class="coupon_box clear">
								<div class="coupon_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_15.png'" alt="15% 할인 쿠폰">
									<p><strong>신규회원 한정 1회 발급</strong><br>최대 3만원 할인</p>
								</div>
							</div>
						</div>
						<div class="birth">
							<p class="birth_txt">생일 혜택</p>
							<div class="birth_box clear">
								<div class="birth_info">
									<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_coupon_10.png'" alt="10% 할인 쿠폰">
									<p>최대 1만원 할인</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="inner">
			<div class="announce_txt">
				<div class="note_txt">
					<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_content_find03.png'" alt="유의사항">
					<p>유의사항</p>
				</div>
				<!-- 210414_수정 : 안내사항 문구 추가. -->
				<div class="announce_list">
					<p class="tit">회원등급 안내사항</p>
					<ul>
						<li>회원등급은 직전 3개월의 구매금액 또는 구매건수 기준으로 산정되며, 익월 1일에 확정됩니다.</li>
						<li>구매금액 1만원 미만의 구매건수는 SILVER등급 이상의 등급산정에서 제외됩니다.</li>
						<li>주문 취소/반품 건에 대한 결제금액은 등급산정에서 제외됩니다.</li>
						<li>구매금액은 구매확정건에 대한 순수주문금액(할인쿠폰, 스타일포인트, 배송비, 취소/반품 내역을 제외한 실결제금액)을 의미합니다.</li>
						<li>신규회원 한정 할인쿠폰을 제외한 회원등급 쿠폰은 매월 1월 다운로드 가능합니다.</li>
						<li>회원등급 쿠폰은 입점상품에 적용이 불가합니다.</li>
					</ul>
					<p class="tit">생일쿠폰 안내사항</p>
					<ul>
						<li>등급 별 생일 쿠폰은 생일 당월 1일부터 말일까지 다운로드 가능합니다. (생일 당월의 기준은 회원정보 내 생년월일 정보를 기준으로 합니다.)</li>
						<li>쿠폰이 지급되는 당월 말일까지 사용 가능합니다.</li>
						<li>쿠폰 사용가능기간 내 미사용 시 소멸됩니다.</li>
						<li>생일 쿠폰은 입점상품에 적용이 불가합니다.</li>
					</ul>
				</div>
				<!-- //210414_수정 : 안내사항 문구 추가. -->
			</div>
		</div>

	</section>
</main>
<script th:inline="javascript">
/*<![CDATA[*/
 	let exptCustGradeMap = [[${exptCustGradeMap}]];
 	let customerInfo = [[${customerInfo}]];
	let isLogin = [[${isLogin}]];

 	var fnInit = function () {
		let expctCustGrade = exptCustGradeMap.expctCustGrade;	// 예상등급
		
		// 2022.01.06 현재등급으로 대체
		var gradeCdNo = customerInfo.custGrade.substring(5,8);
		
		// 현재등급이 VIP가 아닐때
		if (Number(gradeCdNo) > 10) {
			// 현재등급이 > 주문금액등급보다 클때
			if (Number(gradeCdNo) < Number(expctCustGrade.gradeCdNo)) {
				expctCustGrade.gradeCdNo = gradeCdNo;
			}
		}
		// 현재등급이 VIP 일때
		else {
			// 현재등급 VIP, 주문금액등급이 VIP 가 아닐때 무조건 GOLD로 설정 
			if (Number(expctCustGrade.gradeCdNo) > 10) {
				expctCustGrade.gradeCdNo = 20;
			}
		}

		//expctCustGrade.custGradeNo 10:VIP, 20: GOLD, 30:SILVER, 40:BRONZE, 50:WELCOME

		// 예정등급이 VIP가 아닌경우
		if (Number(expctCustGrade.gradeCdNo) > 10) {
			let nextGradeNo = 'G110_'+(Number(expctCustGrade.gradeCdNo)-10); // 다음등급번호
			fnGetNextGradePolicyInfo(nextGradeNo);							 // 다음등급정책정보
		} else {
			fnDisplayVipText(expctCustGrade);
		}

	};

 	// 다음 등급정책
 	var fnGetNextGradePolicyInfo = function (nextGradeNo) {
		$.get('/planning/next/custgrade/info/' + nextGradeNo
			, function (data) {
				fnNextGradeCondition(data.nextCustGradePolicy);			// 다음조건 알림
		});
	}

	// 다음등급 조건 알림
	var fnNextGradeCondition = function (nextCustGradePolicy) {
		let $etcGrade = $('#etcGrade');
		let $sameVipGrade = $('#sameVipGrade');
		let $vipGrade = $('#vipGrade');
		let $ordCnt = $('#ordCnt');
		let $ordSpan = $('#ordSpan');
		let $realOrdAmt = $('#realOrdAmt');
		let $realOrdAmtSpan = $('#realOrdAmtSpan');
		let $nextGrde = $('#nextGrde');

		let remnantBuyAmt = 0;
		if (nextCustGradePolicy.minBuyAmt > nextCustGradePolicy.sumRealOrdAmt) {
			remnantBuyAmt = nextCustGradePolicy.minBuyAmt - nextCustGradePolicy.sumRealOrdAmt;
		}

		let remnantBuyCnt = 0;
		if (nextCustGradePolicy.minBuyCnt > nextCustGradePolicy.ordCnt) {
			remnantBuyCnt = nextCustGradePolicy.minBuyCnt -  nextCustGradePolicy.ordCnt;
		}

		$etcGrade.show();
		$sameVipGrade.hide();
		$vipGrade.hide();

		if (remnantBuyAmt > 0) {
			$realOrdAmtSpan.show();
			$realOrdAmt.text(remnantBuyAmt.addComma()+'원');
		} else {
			$realOrdAmtSpan.hide();
		}

		if (remnantBuyCnt > 0) {
			$ordSpan.show();
			$ordCnt.text(remnantBuyCnt.addComma()+'회');
		} else {
			$ordSpan.hide();
		}

		if (remnantBuyAmt > 0 || remnantBuyCnt > 0) {
			$nextGrde.text(nextCustGradePolicy.gradeCdNm);
		}

	}

	// 기존 VIP / 새로운 VIP 구분
	var fnDisplayVipText = function (expctCustGrade) {
 		let custGradeNm = customerInfo.custGradeNm;
		let $etcGrade = $('#etcGrade');
		let $sameVipGrade = $('#sameVipGrade');
		let $vipGrade = $('#vipGrade');
		$etcGrade.hide();
		if (expctCustGrade.gradeCdNm === custGradeNm) {
			$vipGrade.hide();
			$sameVipGrade.show();
		} else {
			$sameVipGrade.hide();
			$vipGrade.show();
		}
	}

	$('#btnGradeCoupon').on('click', function () {
		let params = JSON.stringify({});
		gagajf.ajaxJsonSubmit('/planning/event/custgrade/coupon/down', params, fnDownloadCallback)
	});

 	var fnDownloadCallback = function (result) {
 		let message = '이미 쿠폰을 다운로드하셨습니다.';
		if (result.isDownload) {
			message = '모두 다운로드되었습니다. 쿠폰 정보는 마이페이지 > 나의 쿠폰에서 확인하실 수 있습니다.';
		}

		mcxDialog.alertC(message, {
			sureBtnText: "확인",
			sureBtnClick: function () {
			}
		});

	}

	$(document).ready(function() {
		$('#htopTitle').text('회원등급혜택');
		if (isLogin) {
			fnInit();
		}


	});

/*]]>*/
</script>

</th:block>
</body>
</html>