|
|
@@ -0,0 +1,291 @@
|
|
|
+<!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/MypageLayoutWeb">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : MypageExchangeFormWeb.html
|
|
|
+ * @desc : 마이페이지 > 교환신청 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2021 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.02.22 card007 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <div class="my_cont">
|
|
|
+ <div class="sec_head">
|
|
|
+ <h3>교환 신청</h3>
|
|
|
+ <div class="od_detail">
|
|
|
+ (주문번호 : <span class="num" th:text="${ordNo}"></span>)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sec_body mypage_body">
|
|
|
+ <div class="order_list return_list">
|
|
|
+ <section class="order_row">
|
|
|
+ <th:block th:if="${orderList}" th:each="oneData, status : ${orderList}">
|
|
|
+ <div class="part_deliver">
|
|
|
+ <div class="tbl_tit">
|
|
|
+ <!-- 주문일/선물일 설정 -->
|
|
|
+ <span class="start_t" th:unless="${oneData.giftPackYn == 'Y'}">주문일</span>
|
|
|
+ <span class="gift_t" th:if="${oneData.giftPackYn == 'Y'}">선물일</span>
|
|
|
+ <!-- //주문일/선물일 설정 -->
|
|
|
+
|
|
|
+ <span class="order_date" th:text="${oneData.ordDt}"></span>
|
|
|
+
|
|
|
+ <!-- 배송구분 설정 -->
|
|
|
+ <span class="order_label02" th:if="${oneData.shotDelvYn == 'Y'}">총알배송</span>
|
|
|
+ <span class="order_label01" th:if="${oneData.shotDelvYn == 'N' and oneData.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
|
|
|
+ <span class="order_label01" th:if="${oneData.selfGoodsYn == 'N'}">업체직배송</span>
|
|
|
+ <!-- //배송구분 설정 -->
|
|
|
+ <a href="javascript:void(0)" class="detail_btn" th:attr="ordNo=${oneData.ordNo}" onclick="fnGoToOrderDetail(this)">주문상세보기</a>
|
|
|
+ </div>
|
|
|
+ <th:block th:if="${oneData.orderList}" th:each="order, status : ${oneData.orderList}">
|
|
|
+ <div class="tbl type2">
|
|
|
+ <table id="exchangeList">
|
|
|
+ <colgroup>
|
|
|
+ <col width="1020">
|
|
|
+ <col width="180">
|
|
|
+ </colgroup>
|
|
|
+ <tbody>
|
|
|
+ <th:block th:if="${order.ordDtlList}" th:each="ordDtl, status : ${order.ordDtlList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
|
|
|
+ <input type="hidden" name="ordDtlNo" th:value="${ordDtl.ordDtlNo}"/>
|
|
|
+ <input type="hidden" name="ordDtlStat" th:value="${ordDtl.ordDtlStat}"/>
|
|
|
+ <input type="hidden" name="reviewSq" th:value="${ordDtl.reviewSq}"/>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="info_item">
|
|
|
+ <div class="thumb_box">
|
|
|
+ <a href="">
|
|
|
+ <img th:src="${imageUrl + '/' + ordDtl.sysImgNm}" width="100%" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="info_box">
|
|
|
+ <p class="od_name">
|
|
|
+ <a href="">
|
|
|
+ <span class="brand" th:text="${ordDtl.brandNm}"></span>
|
|
|
+ <span class="name" th:text="${ordDtl.goodsNm}"></span>
|
|
|
+ </a>
|
|
|
+ </p>
|
|
|
+ <p class="od_opt">
|
|
|
+ <span class="option"><em th:text="${ordDtl.optCd1}"></em><em th:text="${ordDtl.optCd2}"></em></span>
|
|
|
+ <span class="count">수량 <em th:text="${ordDtl.ordQty}"></em>개</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="info_calc">
|
|
|
+ <p class="price">
|
|
|
+ <span class="selling_price" th:text="|${#numbers.formatInteger(ordDtl.ordAmt, 1, 'COMMA')}원|"></span>
|
|
|
+ </p>
|
|
|
+ <p class="point"><span th:text="${#numbers.formatInteger(ordDtl.savePntAmt, 1, 'COMMA')}"></span>p</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td class="cnt_sel">
|
|
|
+ <span class="cnt_t">수량</span>
|
|
|
+ <select class="select_dress" name="chgQty">
|
|
|
+ <option value="">선택</option>
|
|
|
+ <option th:if="${ordDtl.ordQty > 0}" th:each="num : ${#numbers.sequence(1,ordDtl.ordQty)}" th:value="${num}" th:text="${num}"></option>
|
|
|
+ </select>
|
|
|
+ <button class="btn btn_dark btn_sm" th:attr="ordDtlNo=${ordDtl.ordDtlNo}" onclick="fnChangeOption(this);">옵션 변경</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </th:block>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ <div class="order_confirm">
|
|
|
+ <p class="cf_txt cf_desc c_primary">교환하실 상품의 수량 및 옵션을 선택하신 후 교환 신청을 하실 수 있습니다.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </section>
|
|
|
+ <section class="order_row">
|
|
|
+ <div class="tbl_tit">
|
|
|
+ <h3 class="subH3">교환 사유</h3>
|
|
|
+ </div>
|
|
|
+ <div class="tbl type1">
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col width="*">
|
|
|
+ </colgroup>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <select id="mounth" name="chgReason" onchange="fnChangeReason(this);">
|
|
|
+ <option value="">교환 사유를 선택하세요</option>
|
|
|
+ <option th:if="${exchangeReason}" th:each="oneData, status : ${exchangeReason}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
|
|
|
+ </select>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <textarea class="doc_exchange" name="chgMemo" id="chgMemo" placeholder="자세한 사유를 입력해주세요." onkeyup="cfnGetTextLength(this, 500, $('#exchange_cnt'));"></textarea>
|
|
|
+ <p class="txt_cnt"><span id="exchange_cnt" class="c_primary">0</span>/500</p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="order_row" id="chgerLocation">
|
|
|
+ <div class="order_tit">
|
|
|
+ <h3 class="subH3">상품 회수지</h3>
|
|
|
+ <span class="del_t">교환받을 상품을 수령할 장소 선택</span>
|
|
|
+ <button type="button" class="btn_popup" onclick="fnChangeDeliveryAddr('chger');"><span>회수지 선택</span></button>
|
|
|
+ </div>
|
|
|
+ <div class="tbl type1">
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col width="200">
|
|
|
+ <col width="*">
|
|
|
+ </colgroup>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <th>성명</th>
|
|
|
+ <td id="chgerNm" th:text="${deliveryAddrInfo.recipNm}"></td>
|
|
|
+ <input type="hidden" name="chgerNm" th:value="${deliveryAddrInfo.recipNm}">
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>연락처</th>
|
|
|
+ <td id="chgerPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
|
|
|
+ <input type="hidden" name="chgerPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>주소</th>
|
|
|
+ <td id="chgerAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></td>
|
|
|
+ <input type="hidden" name="chgerBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
|
|
|
+ <input type="hidden" name="chgerDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="order_row" id="returnLocation">
|
|
|
+ <div class="order_tit">
|
|
|
+ <h3 class="subH3">반품하실 배송지</h3>
|
|
|
+ </div>
|
|
|
+ <div class="tbl type1">
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col width="200">
|
|
|
+ <col width="*">
|
|
|
+ </colgroup>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <th>성명</th>
|
|
|
+ <td th:text="${deliveryAddrInfo.rtnLocNm}"></td>
|
|
|
+ <input type="hidden" name="rtnLocNm" th:value="${deliveryAddrInfo.rtnLocNm}">
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>연락처</th>
|
|
|
+ <td th:text="${deliveryAddrInfo.rtnLocTelno}"></td>
|
|
|
+ <input type="hidden" name="rtnLocTelno" th:value="${deliveryAddrInfo.rtnLocTelno}">
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>주소</th>
|
|
|
+ <td th:text="|${deliveryAddrInfo.rtnLocBaseAddr} ${deliveryAddrInfo.rtnLocDtlAddr}|"></td>
|
|
|
+ <input type="hidden" name="rtnLocBaseAddr" th:value="${deliveryAddrInfo.rtnLocBaseAddr}">
|
|
|
+ <input type="hidden" name="rtnLocDtlAddr" th:value="${deliveryAddrInfo.rtnLocDtlAddr}">
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="order_row">
|
|
|
+ <div class="order_tit">
|
|
|
+ <h3 class="subH3">교환 상품 받으실 주소</h3>
|
|
|
+ <span class="del_t">택배사에서 반품 상품을 직접 회수할 장소 선택</span>
|
|
|
+ <button type="button" class="btn_popup" onclick="fnChangeDeliveryAddr('recip');"><span>회수지 선택</span></button>
|
|
|
+ </div>
|
|
|
+ <div class="tbl type1">
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col width="200">
|
|
|
+ <col width="*">
|
|
|
+ </colgroup>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <th>성명</th>
|
|
|
+ <td id="recipNm" th:text="${deliveryAddrInfo.recipNm}"></td>
|
|
|
+ <input type="hidden" name="recipNm" th:value="${deliveryAddrInfo.recipNm}">
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>연락처</th>
|
|
|
+ <td id="recipPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
|
|
|
+ <input type="hidden" name="recipPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>주소</th>
|
|
|
+ <td id="recipAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></td>
|
|
|
+ <input type="hidden" name="recipBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
|
|
|
+ <input type="hidden" name="recipDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="order_row" id="addDeliveryFee" style="display:none">
|
|
|
+ <div class="ship_fee">
|
|
|
+ <p><span class="c_primary" id="addPayCost">2,500원</span> 배송비 추가 결제가 필요합니다.</p>
|
|
|
+ <input type="hidden" name="addPayCost"/>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <div class="btn_wrap">
|
|
|
+ <button type="button" class="btn btn_default cancle_btn" onclick="cfnGoToPage(_PAGE_MYPAGE_CRS_LIST)"><span>교환 취소</span></button>
|
|
|
+ <button tyep="submit" class="btn btn_primary submit_btn" onclick="fnExchange()"><span id="exchangeButton">교환 신청</span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+<script src="/ux/plugins/gaga/gaga.paging.js"></script>
|
|
|
+<script th:inline="javascript">
|
|
|
+ $(document).ready(function() {
|
|
|
+ // 마이페이지 LNB 설정
|
|
|
+ fnSetMypageLnbList(2);
|
|
|
+
|
|
|
+ // 마이페이지 location 설정
|
|
|
+ fnSetMypageLocation('취소/반품/환불내역', '_PAGE_MYPAGE_CRS_LIST', '교환 신청');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 교환 옵션 변경 팝업
|
|
|
+ var fnChangeOption = function(param) {
|
|
|
+ // TODO
|
|
|
+ // 옵션변경 처리
|
|
|
+ }
|
|
|
+
|
|
|
+ // 회수지, 교환지 설정 팝업
|
|
|
+ var fnChangeDeliveryAddr = function(param) {
|
|
|
+ // TODO
|
|
|
+ // 회수지, 교환지 설정
|
|
|
+ }
|
|
|
+
|
|
|
+ // 교환 처리
|
|
|
+ var fnExchange = function() {
|
|
|
+ // TODO
|
|
|
+ // 교환신청 처리
|
|
|
+ }
|
|
|
+
|
|
|
+ // 교환 사유 변경 이벤트
|
|
|
+ var fnChangeReason = function(param) {
|
|
|
+ let chgReason = $(param).val();
|
|
|
+ // TODO
|
|
|
+ // 사유 변경 처리
|
|
|
+ alert('a');
|
|
|
+ console.log($('#exchangeList tr'));
|
|
|
+ $.each($('#exchangeList tr'), function(idx, item) {
|
|
|
+ console.log(item);
|
|
|
+ })
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|