style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
							<!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/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : PlanningCustGradeBenefitFormWeb.html
 * @desc    : 회원등급 혜택 Page
 *============================================================================
 * Pastelmall
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021. 04. 05     jsshin     최초 작성
 *******************************************************************************
 -->

<body>
<th:block layout:fragment="content">
	<div id="container" class="container ev">
		<div class="breadcrumb">
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
				<li class="bread_2depth" ><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_EVENT_MAIN);">이벤트/혜택</a></li>
				<li class="bread_2depth">회원등급 혜택</li>
			</ul>
		</div>
		<div class="wrap">
			<div class="content wide ev_rank">
				<div class="cont_head">
					<div>
						<h3>회원등급 혜택</h3>
					</div>
				</div>
				<div class="cont_body">
					<div class="my_rank_info" th:if="${isLogin}"> <!-- 회원일 경우 -->
						<div class="inner">
							<div class="desc">
								<p>
									<span class="my_name" th:text="${customerInfo.custNm}">홍길동</span>님의<br />
									이번 달 회원등급은<br />
									<span class="my_rank" th:text="${customerInfo.custGradeNm}">GOLD</span> 입니다.
								</p>
								<button type="button" id="btnGradeCoupon" class="btn btn_dark cou_btn" >등급 쿠폰 다운로드</button>
							</div>
							<!-- 회원 등급 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="icon welcome">
													<span>W</span>
												</div>
												<div class="txt">
													<span>WELCOME</span>
												</div>
											</li>
											<li>
												<div class="icon bronze">
													<span>B</span>
												</div>
												<div class="txt">
													<span>BRONZE</span>
												</div>
											</li>
											<li>
												<div class="icon silver">
													<span>S</span>
												</div>
												<div class="txt">
													<span>SILVER</span>
												</div>
											</li>
											<li>
												<div class="icon gold">
													<span>G</span>
												</div>
												<div class="txt">
													<span>GOLD</span>
												</div>
											</li>
											<li>
												<div class="icon vip">
													<span>V</span>
												</div>
												<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>
					</div>
					<div class="my_rank_info no_member" th:unless="${isLogin}"> <!-- 비회원일 경우 -->
						<div class="inner">
							<p>
								로그인 후 이번 달 나의 회원 등급을 확인하고 쿠폰혜택을 받아보세요.
							</p>
							<button type="button" class="btn btn_dark login_btn" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인</button>
						</div>
					</div>
				</div>
			</div>
			<div class="content ev_benefit_tbl">
				<div class="cont_head">
					<h3>등급 혜택</h3>
				</div>
				<div class="cont_body">
					<div class="rank_tbl_wrap inner">
						<div class="tbl_wrap">
							<table>
								<caption>등급 혜택 표</caption>
								<tr>
									<th>회원등급</th>
									<td>
										<div class="icon vip"><span>V</span></div>
										<span>VIP</span>
									</td>
									<td>
										<div class="icon gold"><span>G</span></div>
										<span>GOLD</span>
									</td>
									<td>
										<div class="icon silver"><span>S</span></div>
										<span>SILVER</span>
									</td>
									<td>
										<div class="icon bronze"><span>B</span></div>
										<span>BRONZE</span>
									</td>
									<td>
										<div class="icon welcome"><span>W</span></div>
										<span>WELCOME</span>
									</td>
								</tr>
								<tr class="td_30">
									<th>선정기준</th>
									<td>
										<p>최근 3개월<br />30만원 또는6건 이상 구매</p>
									</td>
									<td>
										<p>최근 3개월<br />20만원 또는4건 이상 구매</p>
									</td>
									<td>
										<p>최근 3개월<br />10만원 또는2건 이상 구매</p>
									</td>
									<td>
										<p>최근 3개월<br />1건 이상 구매</p>
									</td>
									<td>
										<p>신규 회원 및<br />최근 3개월 미구매</p>
									</td>
								</tr>
								<tr>
									<th rowspan="2">혜택</th>
									<td class="bbn">
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_12.png'" alt="12% 할인 쿠폰"></div> <!--VIP-->
										<p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p>
									</td>
									<td class="bbn">
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_10.png'" alt="10% 할인 쿠폰"></div> <!--GOLD-->
										<p>최대 1만원 할인<br>(3만원 이상 구매 시)</p>
									</td>
									<td class="vt" rowspan="2">
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_7.png'" alt="7% 할인 쿠폰"></div> <!--SILVER-->
										<p>최대 7천원 할인<br>(3만원 이상 구매 시)</p>
									</td>
									<td class="vt" rowspan="2">
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_5.png'" alt="5% 할인 쿠폰"></div> <!--BRONZE-->
										<p>최대 3천원 할인<br>(2만원 이상 구매 시)</p>
									</td>
									<td class="bbn">
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_15.png'" alt="15% 할인 쿠폰"></div> <!--WELCOME-->
										<p>최대 3만원 할인<br><strong>신규회원 한정 1회 발급</strong></p>
									</td>
								</tr>
								<tr>
									<td>
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_20000.png'" alt="20,000원 할인 쿠폰"></div> <!--VIP-->
										<p>10만원 이상 구매 시</p>
									</td>
									<td>
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_15000.png'" alt="15,000원 할인 쿠폰"></div> <!--GOLD-->
										<p>10만원 이상 구매 시</p>
									</td>
									<td>

									</td>
								</tr>
								<tr>
									<th>생일쿠폰</th>
									<td>
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_15.png'" alt="15% 할인 쿠폰"></div> <!--VIP-->
										<p>최대 3만원 할인</p>
									</td>
									<td>
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_15.png'" alt="15% 할인 쿠폰"></div> <!--GOLD-->
										<p>최대 2만원 할인</p>
									</td>
									<td>
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_15.png'" alt="15% 할인 쿠폰"></div> <!--SILVER-->
										<p>최대 1만원 할인</p>
									</td>
									<td>
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_10.png'" alt="10% 할인 쿠폰"></div> <!--BRONZE-->
										<p>최대 1만원 할인</p>
									</td>
									<td>
										<div class="cou_img"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_coupon_10.png'" alt="10% 할인 쿠폰"></div> <!--WELCOME-->
										<p>최대 1만원 할인</p>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="announce_txt">
						<div class="note_txt">
							<img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/ico_content_find.png'" alt="유의사항">
							<p>유의사항</p>
						</div>
						<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>
					</div>
				</div>
			</div>
		</div>
	</div>

<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() {

		if (isLogin) {
			fnInit();
		}

	});

/*]]>*/
</script>

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