|
|
@@ -0,0 +1,430 @@
|
|
|
+<!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/NoMemberLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : NoMemberOrderListFormMob.html
|
|
|
+ * @desc : 비회원 > 주문확인/배송조회 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2021 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.05.13 card007 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+
|
|
|
+<th:block layout:fragment="content">
|
|
|
+
|
|
|
+<!-- 주문목록조회 -->
|
|
|
+<form id="searchForm" name="searchForm">
|
|
|
+ <input type="hidden" name="pageNo" value=1 />
|
|
|
+ <input type="hidden" name="pageSize" value=5 />
|
|
|
+ <input type="hidden" name="pageUnit" value=10 />
|
|
|
+ <input type="hidden" name="ordDtlStat" value="" />
|
|
|
+ <input type="hidden" name="stDate" value="" />
|
|
|
+ <input type="hidden" name="edDate" value="" />
|
|
|
+ <input type="hidden" name="ordNo" th:value ="${ordNo}"/>
|
|
|
+ <input type="hidden" name="ordNm" th:value ="${ordNm}"/>
|
|
|
+ <input type="hidden" name="ordPhnno" th:value ="${ordPhnno}"/>
|
|
|
+</form>
|
|
|
+<!-- //주문목록조회 -->
|
|
|
+
|
|
|
+<main role="" id="" class="container my">
|
|
|
+ <section class="content my">
|
|
|
+ <!-- page nav -->
|
|
|
+ <nav class="pnb">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="" class="on">주문확인/배송조회</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="my_return_non.html">취소/반품/교환내역</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <!-- only 주문목록 -->
|
|
|
+ <th:block th:if="${mypageMainYn} == 'N'">
|
|
|
+ <div class="inner">
|
|
|
+ <div class="order_sort">
|
|
|
+ <a href="javascript:void(0);" class="od_date_btn">최근 3개월</a>
|
|
|
+ <a href="javascript:void(0);" class="od_status_btn">전체상태</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ <!-- only 주문목록 -->
|
|
|
+
|
|
|
+ <!-- common 주문목록 -->
|
|
|
+ <div data-id="layer_infinite_item" >
|
|
|
+ <section id="infiniteContainer">
|
|
|
+ <div id="listBoxOuter">
|
|
|
+ <div class="area_list" id="listBox">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ <!-- common 주문목록 -->
|
|
|
+
|
|
|
+ <!-- only 마이페이지메인 -->
|
|
|
+ <th:block th:if="${mypageMainYn} == 'Y'">
|
|
|
+ <div class="inner wide">
|
|
|
+ <div class="lnb_list">
|
|
|
+ <ul>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_ORDER_LIST);">주문확인/배송조회</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_CRE_LIST);">취소/반품/교환내역</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_RESTOCK);">재입고 알림내역</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_COUPON);">쿠폰</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_POINT);">STYLE 포인트</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_GIFTCARD);">상품권</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_REVIEW);">리뷰</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_DELIVERY_ADDR);">배송지 관리</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_WISHLIST);">위시리스트</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_CUSTOMER);">내 정보 관리</a></li>
|
|
|
+ <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_SECEDE);">회원 탈퇴</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ <!-- //only 마이페이지메인 -->
|
|
|
+
|
|
|
+ </section>
|
|
|
+</main>
|
|
|
+
|
|
|
+<!-- 기간 선택 팝업 -->
|
|
|
+<div id="odDatePop" class="popup_box odDatePop">
|
|
|
+ <div class="lap">
|
|
|
+ <div class="popup_close">카테고리닫기</div>
|
|
|
+ <div class="popup_head sr-only">
|
|
|
+ <h2 class="">기간 선택 팝업</h2>
|
|
|
+ </div>
|
|
|
+ <div class="popup_con">
|
|
|
+ <div class="button_list clear">
|
|
|
+ <button type="button" onclick="fnSetSearchPeriod(1);" period="1"><span>최근 1개월</span></button>
|
|
|
+ <button type="button" onclick="fnSetSearchPeriod(3);" period="3"><span>최근 3개월</span></button>
|
|
|
+ <button type="button" onclick="fnSetSearchPeriod(6);" period="6"><span>최근 6개월</span></button>
|
|
|
+ <button type="button" onclick="fnSetSearchPeriod(9);" period="9"><span>최근 9개월</span></button>
|
|
|
+ <button type="button" onclick="fnSetSearchPeriod(12);" period="12"><span>최근 12개월</span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<!-- //기간 선택 팝업 -->
|
|
|
+<!-- 주문상태 선택 팝업 -->
|
|
|
+<div id="odStatusPop" class="popup_box odStatusPop">
|
|
|
+ <div class="lap">
|
|
|
+ <div class="popup_close">카테고리닫기</div>
|
|
|
+ <div class="popup_head sr-only">
|
|
|
+ <h2 class="">주문상태 선택 팝업</h2>
|
|
|
+ </div>
|
|
|
+ <div class="popup_con">
|
|
|
+ <div class="button_list clear">
|
|
|
+ <button type="button" code="" class="ordDtlStat on"><span>전체상태</span></button>
|
|
|
+ <th:block th:each="ordDtlStat , i : ${ordDtlStatList}">
|
|
|
+ <button type="button" class="ordDtlStat" th:code="${ordDtlStat.cd}">
|
|
|
+ <span th:text="${ordDtlStat.cdNm}"></span>
|
|
|
+ </button>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<!-- //주문상태 선택 팝업 -->
|
|
|
+
|
|
|
+<!-- <script src="/ux/plugins/jquery/jquery.history.min.js"></script> -->
|
|
|
+<!-- <script src="/ux/plugins/gaga/gaga.infinite.scrollLayer.js"></script> -->
|
|
|
+<!-- <script src="/ux/plugins/gaga/gaga.paging.js"></script> -->
|
|
|
+
|
|
|
+<script th:inline="javascript">
|
|
|
+// 변수설정
|
|
|
+var custNo = [[${customerInfo.custNo}]];
|
|
|
+var totalCnt = [[${totalCnt}]];
|
|
|
+var totalPage = 0;
|
|
|
+var remainList = 0;
|
|
|
+var jsonObj = {};
|
|
|
+var scrollTemp = true;
|
|
|
+var mypageMainYn = [[${mypageMainYn}]];
|
|
|
+let customerInfo = [[${customerInfo}]];
|
|
|
+
|
|
|
+// 초기설정
|
|
|
+$(document).ready(function() {
|
|
|
+
|
|
|
+ // 인피니티스크롤 초기화
|
|
|
+ //fnGoodsReviewInfiniteScrollInit();
|
|
|
+
|
|
|
+ // AJAX 로드를 위한 변수 설정
|
|
|
+ jsonObj = {
|
|
|
+ "pageNo" : 0
|
|
|
+ , "pageSize" : 5
|
|
|
+ , "pageUnit" : 10
|
|
|
+ , "ordDtlStat" : ""
|
|
|
+ , "stDate" : ""
|
|
|
+ , "edDate" : ""
|
|
|
+ , "custNo" : custNo
|
|
|
+ }
|
|
|
+
|
|
|
+ // AJAX 변수 설정
|
|
|
+ jsonData = JSON.stringify(jsonObj);
|
|
|
+
|
|
|
+ // 마이페이지 메인화면일때 초기 1개월 조회
|
|
|
+ if (mypageMainYn == 'Y') {
|
|
|
+ // 타이틀명
|
|
|
+ $('#htopTitle').text('마이페이지');
|
|
|
+
|
|
|
+ jsonObj.pageSize = 1;
|
|
|
+ jsonObj.pageUnit = 1;
|
|
|
+ fnSetSearchPeriod(1);
|
|
|
+ }
|
|
|
+ // 마이페이지 주문목록화면일때
|
|
|
+ else {
|
|
|
+ // 타이틀명
|
|
|
+ $('#htopTitle').text('주문확인/배송조회');
|
|
|
+
|
|
|
+ // 전체페이지 구하기
|
|
|
+ totalPage = parseInt(totalCnt / 10);
|
|
|
+ remainList = totalCnt % 10;
|
|
|
+
|
|
|
+ // 나머지가 있으면 전체 페이지 + 1
|
|
|
+ if (remainList > 0) {
|
|
|
+ totalPage = totalPage + 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ fnSetSearchPeriod(3);
|
|
|
+
|
|
|
+ var win = $(window);
|
|
|
+
|
|
|
+ // Each time the user scrolls
|
|
|
+ win.scroll(function() {
|
|
|
+ // End of the document reached?
|
|
|
+ if ($(document).height() - win.height() == win.scrollTop()) {
|
|
|
+ if (scrollTemp) {
|
|
|
+ var tempPage = parseInt($("#searchForm input[name=pageNo]").val());
|
|
|
+ tempPage = tempPage + 1;
|
|
|
+
|
|
|
+ if (totalPage > tempPage) {
|
|
|
+ scrollTemp = false;
|
|
|
+ fnGetInfiniteScrollDataList(tempPage);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 주문상세상태코드 셀렉트박스 변경 이벤트
|
|
|
+ $('#odStatusPop .popup_con .button_list .ordDtlStat').on('click', function() {
|
|
|
+ $('#searchForm input[name=ordDtlStat]').val($(this).attr('code'));
|
|
|
+ jsonObj.ordDtlStat = $(this).attr('code');
|
|
|
+
|
|
|
+ // 상태값 명칭
|
|
|
+ var ordDtlStatNm = $(this).find("span").text();
|
|
|
+ $(".container .my_order .od_status_btn").text(ordDtlStatNm);
|
|
|
+
|
|
|
+ // 리헷
|
|
|
+ $("#listBox").html("");
|
|
|
+
|
|
|
+ // 초기화설정
|
|
|
+ fnGetInfiniteScrollDataList(0);
|
|
|
+
|
|
|
+ // 팝업닫기
|
|
|
+ $(".popup_close").trigger("click");
|
|
|
+ });
|
|
|
+
|
|
|
+ // GNB Background Color 변경
|
|
|
+ if (mypageMainYn == 'Y') {
|
|
|
+ $('#htopSub').addClass('my_main');
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 주문 목록 조회
|
|
|
+var fnGetInfiniteScrollDataList = function(pageNo) {
|
|
|
+
|
|
|
+ // 페이지번호가 없으면 1페이지 설정
|
|
|
+ if (pageNo == null) {
|
|
|
+ pageNo = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 페이지설정
|
|
|
+ $("#searchForm input[name=pageNo]").val(pageNo);
|
|
|
+
|
|
|
+ jsonObj.pageNo = pageNo;
|
|
|
+ jsonObj.stDate = $("#searchForm input[name=stDate]").val();
|
|
|
+ jsonObj.edDate = $("#searchForm input[name=edDate]").val();
|
|
|
+
|
|
|
+ $.ajax( {
|
|
|
+ type : "POST",
|
|
|
+ url : '/mypage/order/listInfo',
|
|
|
+ data : JSON.stringify(jsonObj),
|
|
|
+ dataType : 'html',
|
|
|
+ beforeSend : function(xhr, settings) {
|
|
|
+ xhr.setRequestHeader("AJAX" , "true");
|
|
|
+ xhr.setRequestHeader('Accept' , 'application/json');
|
|
|
+ xhr.setRequestHeader('Content-Type' , 'application/json');
|
|
|
+ },
|
|
|
+ success : function(result) {
|
|
|
+ if (result != null) {
|
|
|
+ $("#listBox").css("display", "block");
|
|
|
+ $("#listBox").append(result);
|
|
|
+ scrollTemp = true;
|
|
|
+
|
|
|
+ // 인피니티 스크롤 기억기능
|
|
|
+ //gagaInfiniteScroll.draw(result);
|
|
|
+ //gagaInfiniteScroll.draw('not');
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //$("#searchForm input[name=pageNo]").val(pageNo+1);
|
|
|
+ //gagajf.ajaxFormSubmit("/mypage/order/listInfo2", document.searchForm, gagaInfiniteScroll.jsonToHtml);
|
|
|
+}
|
|
|
+
|
|
|
+//검색기간 버튼 클릭 이벤트 처리
|
|
|
+var fnSetSearchPeriod = function(period) {
|
|
|
+ let date = new Date();
|
|
|
+ let edDate = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + (date.getDate() + 1)).slice(-2);
|
|
|
+ date.setMonth(date.getMonth() - period);
|
|
|
+ let stDate = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + (date.getDate() + 1)).slice(-2);
|
|
|
+
|
|
|
+ $('#searchForm input[name=edDate]').val(edDate);
|
|
|
+ $('#searchForm input[name=stDate]').val(stDate);
|
|
|
+
|
|
|
+ // 리헷
|
|
|
+ $("#listBox").html("");
|
|
|
+
|
|
|
+ // 초기화설정
|
|
|
+ fnGetInfiniteScrollDataList(0);
|
|
|
+
|
|
|
+ $("#odDatePop .popup_con button").removeClass("on");
|
|
|
+
|
|
|
+ // 기간설정
|
|
|
+ $("#odDatePop .popup_con button").each(function() {
|
|
|
+ var tempPeriod = $(this).attr("period");
|
|
|
+ if (tempPeriod == period) {
|
|
|
+ $(this).addClass("on");
|
|
|
+
|
|
|
+ // 텍스트설정
|
|
|
+ var periodStr = $(this).find("span").text();
|
|
|
+ $(".container .my_order .od_date_btn").text(periodStr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 팝업닫기
|
|
|
+ $(".popup_close").trigger("click");
|
|
|
+}
|
|
|
+
|
|
|
+// 2021.04.21 인피니티 스크롤 기능 구현전 추후 수정
|
|
|
+// 인피니트 스크롤 초기화
|
|
|
+/*
|
|
|
+var fnGoodsReviewInfiniteScrollInit = function(){
|
|
|
+ // sessionStorage.removeItem(document.location.href);
|
|
|
+ History.replaceState(null, null);
|
|
|
+ gagaInfiniteScroll.pageStatus = {
|
|
|
+ pageNum : [] // [0,1,2...] 로드된 페이지 (Array)
|
|
|
+ , loadPage : 0 // 로드할 페이지
|
|
|
+ , loadAlign : 'not' // 로드 상태(prev, next, not)
|
|
|
+ , historyScroll : 0 //
|
|
|
+ , nowPage : null // 현재 페이지
|
|
|
+ , pageUrl : { // page url
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //History 초기화
|
|
|
+ $("#listBox").html("");
|
|
|
+}
|
|
|
+
|
|
|
+var fnDrawInfiniteScrollData = function (result){
|
|
|
+ let totalCnt = result.totalCnt;
|
|
|
+ gagaInfiniteScroll.pageStatus.totalCount = result.totalCnt;
|
|
|
+
|
|
|
+ var htm = fnCreateGoodsList(result);
|
|
|
+ gagaInfiniteScroll.draw(htm);
|
|
|
+}
|
|
|
+
|
|
|
+$(function() { gagaInfiniteScroll.getHistory(); });
|
|
|
+*/
|
|
|
+</script>
|
|
|
+
|
|
|
+<script>
|
|
|
+ $(document).ready(function(){
|
|
|
+ $(document).on('click','.popup_box .button_list button',function(){
|
|
|
+ $('.popup_box .button_list button').removeClass('on');
|
|
|
+ $(this).addClass('on');
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ //기간 선택 팝업
|
|
|
+ $(document).on("click", ".order_sort .od_date_btn", function(){
|
|
|
+ $('#odDatePop').show().addClass("active");
|
|
|
+ $("body").css({"overflow":"hidden"});
|
|
|
+ });
|
|
|
+
|
|
|
+ //주문상태 선택 팝업
|
|
|
+ $(document).on("click", ".order_sort .od_status_btn", function(){
|
|
|
+ $('#odStatusPop').show().addClass("active");
|
|
|
+ $("body").css({"overflow":"hidden"});
|
|
|
+ });
|
|
|
+
|
|
|
+ //팝업_닫기
|
|
|
+ $('.popup_close').on("click",function(){
|
|
|
+ $('.popup_box').hide().removeClass('active');
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 210409_추가 : alert 모음 */
|
|
|
+ $(document).on("click", "#btn_purchase_confirm", function(){
|
|
|
+ mcxDialog.confirm("구매확정 후에는 반품/교환이 불가합니다. 구매확정하시겠습니까?", {
|
|
|
+ cancelBtnText: "취소",
|
|
|
+ sureBtnText: "확인", // Confirmation button text
|
|
|
+ sureBtnClick: function() { // Confirm button click callback
|
|
|
+ alert("9,999P가 적립되었습니다.");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).on("click", "#btn_sms_alert", function(){
|
|
|
+ mcxDialog.alert("SMS로 선물내역을 다시 전송하였습니다.", {
|
|
|
+ //alert("선물하기 SMS를 조금 전 다시 발송하였습니다. 잠시 후 다시 시도해주세요."); : SMS 발송한지 10분이 지나지 않았을 경우
|
|
|
+ sureBtnText: "닫기",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ /* //210409_추가 : alert 모음 */
|
|
|
+
|
|
|
+ // 등급쿠폰 다운 클릭 이벤트
|
|
|
+ var fnDownloadCoupon = function() {
|
|
|
+ let url = '/mypage/coupon/download/all';
|
|
|
+
|
|
|
+ let data = {};
|
|
|
+ data.custNo = customerInfo.custNo;
|
|
|
+
|
|
|
+ let jsonData = JSON.stringify(data);
|
|
|
+
|
|
|
+ gagajf.ajaxJsonSubmit(url, jsonData, function() {
|
|
|
+ fnReloadCouponCount();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 보유쿠폰 수량 업데이트 처리
|
|
|
+ var fnReloadCouponCount = function() {
|
|
|
+ let url = '/mypage/coupon/count';
|
|
|
+
|
|
|
+ let data = {};
|
|
|
+ data.custNo = customerInfo.custNo;
|
|
|
+
|
|
|
+ let jsonData = JSON.stringify(data);
|
|
|
+
|
|
|
+ gagajf.ajaxJsonSubmit(url, jsonData, function(result) {
|
|
|
+ $('#couponCnt').text(result.couponCnt);
|
|
|
+ $('#expiredSoonCouponCnt').text(result.expiredSoonCouponCnt);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 등급혜택 보기 클릭 이벤트
|
|
|
+ var fnGoToCustomerBenefit = function() {
|
|
|
+ cfnGoToPage(_PAGE_CUSTOMER_GRADE_BENEFIT);
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</th:block>
|
|
|
+</body>
|
|
|
+</html>
|
card007