|
|
@@ -0,0 +1,281 @@
|
|
|
+<!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">
|
|
|
+ <!-- container -->
|
|
|
+ <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 ev_rank">
|
|
|
+ <div class="cont_head">
|
|
|
+ <div>
|
|
|
+ <h3>회원등급 혜택</h3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cont_body">
|
|
|
+ <div class="my_rank_info no_member" th:if=""> <!-- 비회원일 경우 -->
|
|
|
+ <div class="inner">
|
|
|
+ <p>
|
|
|
+ 로그인 후 이번 달 나의 회원 등급을 확인하고 쿠폰혜택을 받아보세요.
|
|
|
+ </p>
|
|
|
+ <button type="button" class="btn btn_dark login_btn" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="my_rank_info"> <!-- 회원일 경우 -->
|
|
|
+ <div class="inner">
|
|
|
+ <div class="desc">
|
|
|
+ <p>
|
|
|
+ <span class="my_name">홍길동</span>님의<br />
|
|
|
+ 이번 달 회원등급은<br />
|
|
|
+ <span class="my_rank">GOLD</span> 입니다.
|
|
|
+ </p>
|
|
|
+ <button type="button" id="btnDownGradeCoupon" class="btn btn_dark cou_btn" >등급 쿠폰 다운로드</button>
|
|
|
+ </div>
|
|
|
+ <!-- 회원 등급 progress바 -->
|
|
|
+ <div class="my_rank_progress">
|
|
|
+ <div class="pro_wrap gold"> <!-- 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>구매 건수 <strong class="c_primary">6회</strong>, 구매 금액 <strong class="c_primary">300,000원</strong> 더 구매하시면 <strong><span class="c_black">VIP</span>로 등급UP!</strong></p> <!-- 등급 상승까지 남은 정보 안내 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //회원 등급 progress바 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content inner 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 src="/images/pc/ico_coupon_12.png" alt="7% 할인 쿠폰"></div>
|
|
|
+ <p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p>
|
|
|
+ </td>
|
|
|
+ <td class="bbn">
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_10.png" alt="12% 할인 쿠폰"></div>
|
|
|
+ <p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p>
|
|
|
+ </td>
|
|
|
+ <td class="vt" rowspan="2">
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_7.png" alt="10% 할인 쿠폰"></div>
|
|
|
+ <p>최대 7천원 할인<br>(3만원 이상 구매 시)</p>
|
|
|
+ </td>
|
|
|
+ <td class="vt" rowspan="2">
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_5.png" alt="10% 할인 쿠폰"></div>
|
|
|
+ <p>최대 3천원 할인<br>(2만원 이상 구매 시)</p>
|
|
|
+ </td>
|
|
|
+ <td class="bbn">
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="15% 할인 쿠폰"></div>
|
|
|
+ <p>최대 3만원 할인<br><strong>신규회원 한정 1회 발급</strong></p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_20000.png" alt="20,000원 할인 쿠폰"></div>
|
|
|
+ <p>10만원 이상 구매 시</p>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_15000.png" alt="15,000원 할인 쿠폰"></div>
|
|
|
+ <p>10만원 이상 구매 시</p>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_3000.png" alt="15,000원 할인 쿠폰"></div>
|
|
|
+ <p>2만원 이상 구매 시</p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>생일쿠폰</th>
|
|
|
+ <td>
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="7% 할인 쿠폰"></div>
|
|
|
+ <p>최대 3만원 할인</p>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="12% 할인 쿠폰"></div>
|
|
|
+ <p>최대 2만원 할인</p>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="10% 할인 쿠폰"></div>
|
|
|
+ <p>최대 1만원 할인</p>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_10.png" alt="10% 할인 쿠폰"></div>
|
|
|
+ <p>최대 1만원 할인</p>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="15% 할인 쿠폰"></div>
|
|
|
+ <p>최대 1만원 할인</p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="announce_txt inner">
|
|
|
+ <div class="note_txt">
|
|
|
+ <img src="/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>
|
|
|
+ </ul>
|
|
|
+ <p class="tit">생일쿠폰 안내사항</p>
|
|
|
+ <ul>
|
|
|
+ <li>등급 별 생일 쿠폰은 생일 당월 1일부터 말일까지 다운로드 가능합니다. (생일 당월의 기준은 회원정보 내 생년월일 정보를 기준으로 합니다.)</li>
|
|
|
+ <li>쿠폰이 지급되는 당월 말일까지 사용 가능합니다.</li>
|
|
|
+ <li>쿠폰 사용가능기간 내 미사용 시 소멸됩니다.</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- // container -->
|
|
|
+ <footer id="footer"></footer>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+ // 컨텐츠 호출
|
|
|
+ $(document).ready( function() {
|
|
|
+ $("#header").load("head.html");
|
|
|
+ $("#footer").load("foot.html");
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ $(function(){
|
|
|
+ $('.cou_btn').click(function(){
|
|
|
+ alert('모두 다운로드되었습니다.\n쿠폰 정보는 마이페이지 > 나의 쿠폰에서 확인하실 수 있습니다.');
|
|
|
+ //alert('이미 쿠폰을 다운로드하셨습니다.'); 이미 다운로드 받은 경우, 클릭 시 얼럿 노출
|
|
|
+ })
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+
|
|
|
+
|
jsshin