|
|
@@ -0,0 +1,421 @@
|
|
|
+<!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/DefaultLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @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> <!-- 210416_수정 : id 추가. -->
|
|
|
+ </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 src="/images/mo/ico_coupon_12.png" alt="12% 할인 쿠폰">
|
|
|
+ <p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p> <!-- 210415_수정 : 텍스트 수정. -->
|
|
|
+ </div>
|
|
|
+ <div class="coupon_info">
|
|
|
+ <img src="/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 src="/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 src="/images/mo/ico_coupon_10.png" alt="10% 할인 쿠폰"> <!-- 210415_수정 : 이미지 수정. -->
|
|
|
+ <p>최대 1만 할인<br>(3만원 이상 구매 시)</p> <!-- 210415_수정 : 텍스트 수정. -->
|
|
|
+ </div>
|
|
|
+ <div class="coupon_info">
|
|
|
+ <img src="/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 src="/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 src="/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 src="/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 src="/images/mo/ico_coupon_5.png" alt="5% 할인 쿠폰"> <!-- 210415_수정 : 이미지 수정. -->
|
|
|
+ <p>최대 3천원 할인<br>(3만원 이상 구매 시)</p> <!-- 210415_수정 : 텍스트 수정. -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="birth">
|
|
|
+ <p class="birth_txt">생일 혜택</p>
|
|
|
+ <div class="birth_box clear">
|
|
|
+ <div class="birth_info">
|
|
|
+ <img src="/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> <!-- 210415_수정 : 텍스트 수정. -->
|
|
|
+ </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 src="/images/mo/ico_coupon_15.png" alt="15% 할인 쿠폰">
|
|
|
+ <p><strong>신규회원 한정 1회 발급</strong><br>최대 3만원 할인</p> <!-- 210415_추가 : strong태그 추가. -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="birth">
|
|
|
+ <p class="birth_txt">생일 혜택</p>
|
|
|
+ <div class="birth_box clear">
|
|
|
+ <div class="birth_info">
|
|
|
+ <img src="/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 src="/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 isLogin = [[${isLogin}]];
|
|
|
+
|
|
|
+ var fnInit = function () {
|
|
|
+ let expctCustGrade = exptCustGradeMap.expctCustGrade; // 예상등급
|
|
|
+
|
|
|
+ //expctCustGrade.custGradeNo 10:VIP, 20: GOLD, 30:SILVER, 40:BRONZE, 50:WELCOME
|
|
|
+
|
|
|
+ // 예정등급이 VIP가 아닌경우
|
|
|
+ if (Number(expctCustGrade.gradeCdNo) > 10) {
|
|
|
+ let nextGradeNo = Number(expctCustGrade.gradeCdNo)-10; // 다음등급번호
|
|
|
+ let nextCustGradePolicy = fnGetNextGradePolicyInfo(nextGradeNo); // 다음등급정책정보
|
|
|
+ fnNextGradeCondition(nextCustGradePolicy, expctCustGrade); // 다음조건 알림
|
|
|
+ } else {
|
|
|
+ fnDisplayVipText(expctCustGrade);
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ // 다음 등급정책
|
|
|
+ var fnGetNextGradePolicyInfo = function (nextGradeNo) {
|
|
|
+ let custGradePolicy = exptCustGradeMap.custGradePolicy; // 등급별정책
|
|
|
+ let nextCustGradePolicy;
|
|
|
+ $(custGradePolicy).each(function(idx, item) {
|
|
|
+ if (Number(item.gradeCdNo) === nextGradeNo ) {
|
|
|
+ nextCustGradePolicy = item;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return nextCustGradePolicy;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 다음등급 조건 알림
|
|
|
+ var fnNextGradeCondition = function (nextCustGradePolicy, expctCustGrade) {
|
|
|
+ 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 > expctCustGrade.sumRealOrdAmt) {
|
|
|
+ remnantBuyAmt = nextCustGradePolicy.minBuyAmt - expctCustGrade.sumRealOrdAmt;
|
|
|
+ }
|
|
|
+
|
|
|
+ let remnantBuyCnt = 0;
|
|
|
+ if (nextCustGradePolicy.minBuyCnt > expctCustGrade.ordCnt) {
|
|
|
+ remnantBuyCnt = nextCustGradePolicy.minBuyCnt - expctCustGrade.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>
|
jsshin