MypageCreCancelDetailFormWeb.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org"
  4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  5. layout:decorator="web/common/layout/MypageLayoutWeb">
  6. <!--
  7. *******************************************************************************
  8. * @source : MypageCreCancelDetailFormWeb.html
  9. * @desc : 마이페이지 > 취소/반품/교환내역 > 취소상세 Page
  10. *============================================================================
  11. * STYLE24
  12. * Copyright(C) 2021 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.04.12 card007 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <div class="content myOrderView"> <!-- 페이지특정 클래스 = myOrderView -->
  22. <div class="cont_body">
  23. <!-- CONT-BODY -->
  24. <div class="lnb">
  25. <div class="lnb_tit">
  26. <h2>마이페이지</h2>
  27. </div>
  28. <div class="lnb_list">
  29. <ul id="mypageLnbList"></ul>
  30. </div>
  31. </div>
  32. <div class="cont">
  33. <div class="sec_head">
  34. <h3 class="subH1">취소상세</h3>
  35. <span class="order_number">주문번호&nbsp;:&nbsp;<em th:text="${oneData.ordNo}"></em></span>
  36. </div>
  37. <div class="sec_body">
  38. <div class="part_goods">
  39. <div class="goods_head">
  40. <p th:unless="${oneData.giftPackYn == 'Y'}">주문일 <span th:text="${oneData.ordDt}"></span></p>
  41. <p th:if="${oneData.giftPackYn == 'Y'}">선물일 <span th:text="${oneData.ordDt}"></span></p>
  42. </div>
  43. <div class="goods_cont">
  44. <!-- 주문상품 -->
  45. <th:block th:if="${cancelDetailList.cancelDetailList}" th:each="cancelDtl, status : ${cancelDetailList.cancelDetailList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
  46. <div class="goods_info">
  47. <div class="order_desc">
  48. <div class="goods_box">
  49. <div class="gd_item">
  50. <a href="javascript:void(0)" th:attr="goodsCd=${cancelDtl.goodsCd}, optCd1=${cancelDtl.goodsType == 'G056_N' ? cancelDtl.optCd1 : ''}, ithrCd='IN21_02'" onclick="fnGoToGoodsDetail(this)">
  51. <span class="thumb">
  52. <img th:src="${imageUrl + '/' + cancelDtl.sysImgNm + '?RS=100'}" width="100%" alt="">
  53. </span>
  54. <p>
  55. <span class="brand" th:text="${cancelDtl.brandNm}"></span>
  56. <span class="tag primary" th:if="${cancelDtl.shotDelvYn == 'Y'}">총알배송</span>
  57. <span class="tag" th:if="${cancelDtl.shotDelvYn == 'N' and cancelDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
  58. <span class="tag" th:if="${cancelDtl.selfGoodsYn == 'N'}">업체직배송</span>
  59. </p>
  60. <p>
  61. <span class="name" th:text="${cancelDtl.goodsNm}"></span>
  62. </p>
  63. </a>
  64. </div>
  65. <div class="gd_opt">
  66. <div class="option_wrap">
  67. <span class="title sr-only">주문 옵션</span>
  68. <span class="option" th:if="${cancelDtl.goodsType == 'G056_S'}" th:each="option, status : ${cancelDtl.colorNmArr}" th:text="|${cancelDtl.itemNmArr[status.index]} / ${option} / ${cancelDtl.optCd2Arr[status.index]}|"></span>
  69. <span class="option" th:unless="${cancelDtl.goodsType == 'G056_S'}" th:text="|${cancelDtl.colorNm} / ${cancelDtl.optCd2}|"></span>
  70. </div>
  71. </div>
  72. <div class="gd_calc">
  73. <p>
  74. <span class="count"><em th:text="${cancelDtl.chgQty}"></em>개</span>
  75. </p>
  76. </div>
  77. </div>
  78. <div class="status_box">
  79. <p>
  80. <th:block th:if="${cancelDtl.chgStat == 'G685_17' or cancelDtl.chgStat == 'G685_18'}" th:text="|주문취소|"></th:block>
  81. <th:block th:unless="${cancelDtl.chgStat == 'G685_17' or cancelDtl.chgStat == 'G685_18'}" th:text="${cancelDtl.chgStatNm}"></th:block>
  82. <span class="date" th:text="${cancelDtl.chgDate}"></span>
  83. <span class="time" th:text="${cancelDtl.chgTime}"></span>
  84. </p>
  85. </div>
  86. <div class="button_box">
  87. <p><button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA);"><span>1:1 문의</span></button></p>
  88. </div>
  89. </div>
  90. </div>
  91. </th:block>
  92. <!-- //주문상품 -->
  93. </div>
  94. </div>
  95. <h4 class="subH3">상세 정보</h4>
  96. <div class="tbl type1">
  97. <table>
  98. <colgroup>
  99. <col width="210">
  100. <col width="*">
  101. </colgroup>
  102. <tbody>
  103. <tr>
  104. <th>취소접수 일자</th>
  105. <td th:text="${oneData.chgDt}"></td>
  106. </tr>
  107. <tr>
  108. <th>취소완료 일자</th>
  109. <td th:text="${oneData.completeDt}"></td>
  110. </tr>
  111. </tbody>
  112. </table>
  113. </div>
  114. <h4 class="subH3">환불정보</h4>
  115. <div class="tbl type6">
  116. <table>
  117. <colgroup>
  118. <col width="50%">
  119. <col width="50%">
  120. </colgroup>
  121. <tbody>
  122. <tr>
  123. <td>
  124. <dl>
  125. <div>
  126. <dt>환불 예정 금액</dt>
  127. <dd>
  128. <div class="price">
  129. <span class="return_total_price"><em th:text="${#numbers.formatInteger(oneData.refundAmt + oneData.rfPntAmt + oneData.rfGfcdUseAmt, 1, 'COMMA')}"></em>원</span>
  130. </div>
  131. </dd>
  132. </div>
  133. <div class="include_item"> <!-- 할인항목 표기 class명 include_item -->
  134. <dt>상품 취소 금액</dt>
  135. <dd><em th:text="${#numbers.formatInteger(oneData.rfCnclAmt, 1, 'COMMA')}"></em>원</dd>
  136. </div>
  137. <div class="include_item">
  138. <dt>배송비</dt>
  139. <dd><em th:text="${#numbers.formatInteger(oneData.rfDeliveryFee, 1, 'COMMA')}"></em>원</dd>
  140. </div>
  141. <div class="include_item">
  142. <dt>할인 금액 차감</dt>
  143. <dd><em th:text="${#numbers.formatInteger((oneData.rfCpn1Amt + oneData.rfTmtb1Amt + oneData.rfTmtb2Amt + oneData.rfGoodsCpnAmt + oneData.rfCartCpnAmt + oneData.rfDelvCpnAmt + oneData.rfPrePntAmt) * -1, 1, 'COMMA')}"></em>원</dd>
  144. </div>
  145. </dl>
  146. </td>
  147. <td>
  148. <dl>
  149. <div>
  150. <dt>결제 금액 환불</dt>
  151. <dd>
  152. <em th:text="${#numbers.formatInteger(oneData.refundAmt, 1, 'COMMA')}"></em>원
  153. </dd>
  154. </div>
  155. <div>
  156. <dt>포인트 환불</dt>
  157. <dd>
  158. <em th:text="${#numbers.formatInteger(oneData.rfPntAmt, 1, 'COMMA')}"></em>P
  159. </dd>
  160. </div>
  161. <div>
  162. <dt>상품권 환불</dt>
  163. <dd>
  164. <em th:text="${#numbers.formatInteger(oneData.rfGfcdUseAmt, 1, 'COMMA')}"></em>원
  165. </dd>
  166. </div>
  167. <div>
  168. <dt>환불 수단</dt>
  169. <dd th:if="${oneData.pgGb == 'KCP'}" th:text="${oneData.payMeansNm}"></dd>
  170. <dd th:if="${oneData.pgGb == 'NAVER'}">네이버페이</dd>
  171. <dd th:if="${oneData.pgGb == 'KAKAO'}">카카오페이</dd>
  172. <dd th:if="${oneData.pgGb == 'PAYCO'}">PAYCO</dd>
  173. </div>
  174. <div th:if="${oneData.pgGb == 'KCP' and oneData.payMeans == 'G014_30'}">
  175. <dt class="sr-only">영수증 확인</dt>
  176. <dd><button type="button" class="btn btn_default btn_sm" th:attr="ordChgSq=${oneData.ordChgSq}, refundYn=${refundYn}" onclick="fnReceipt('cancel')"><span>취소 전표 보기</span></button></dd>
  177. </div>
  178. </dl>
  179. </td>
  180. </tr>
  181. </tbody>
  182. </table>
  183. </div>
  184. <div class="txt_info">
  185. <ul>
  186. <li>
  187. 카드사로 결제 취소 요청이 전달된 후 환불까지는 평일 기준 3 ~7일이 소요될 수 있습니다.
  188. </li>
  189. </ul>
  190. </div>
  191. <div class="btn_footer_area">
  192. <button type="button" class="btn btn_dark btn_md" onclick="cfnGoToPage(_PAGE_MYPAGE_CRE_LIST);"><span>확인</span></button>
  193. </div>
  194. </div>
  195. </div>
  196. <!-- // CONT-BODY -->
  197. </div>
  198. </div>
  199. <script src="/ux/plugins/gaga/gaga.paging.js"></script>
  200. <script th:inline="javascript">
  201. /*<![CDATA[*/
  202. let oneData = [[${oneData}]];
  203. let kcpReceiptUrl = [[${kcpReceiptUrl}]];
  204. let refundYn = [[${refundYn}]];
  205. $(document).ready(function() {
  206. // 마이페이지 LNB 설정
  207. fnSetMypageLnbList(2);
  208. // 마이페이지 location 설정
  209. fnSetMypageLocation('취소/반품/교환 내역', '_PAGE_MYPAGE_CRE_LIST', '취소 상세');
  210. });
  211. /*]]>*/
  212. </script>
  213. </th:block>
  214. </body>
  215. </html>