OrderFormWeb.html 55 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270
  1. <!DOCTYPE html>
  2. <html lang="ko" xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4. layout:decorator="web/common/layout/DefaultLayoutWeb">
  5. <!--
  6. *******************************************************************************
  7. * @source : OrderFormWeb.html
  8. * @desc : 주문/결제 Page
  9. *============================================================================
  10. * STYLE24
  11. * Copyright(C) 2020 TSIT, All rights reserved.
  12. *============================================================================
  13. * VER DATE AUTHOR DESCRIPTION
  14. * === =========== ========== =============================================
  15. * 1.0 2021.02.01 jsh77b 최초 작성
  16. *******************************************************************************
  17. -->
  18. <body>
  19. <th:block layout:fragment="content">
  20. <link rel="stylesheet" type="text/css" href="/ux/pc/css/swiper.min.css">
  21. <script type="text/javascript" src="/ux/pc/js/swiper.min.js"></script>
  22. <script type="text/javascript" src="/ux/pc/js/slick.min.js"></script>
  23. <script type="text/javascript" src="/ux/pc/js/jquery-ui.js"></script>
  24. <!--
  25. <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  26. <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  27. <script type="text/javascript" src="/ux/pc/js/jquery.modal.min.js"></script>
  28. <script type="text/javascript" src="/ux/pc/js/common-ui.js"></script>
  29. -->
  30. <!-- container -->
  31. <form id="payForm" name="payForm">
  32. <input type="hidden" name="delvMemo" th:value="${deliveryAddrInfo.delvMemo}">
  33. <div id="container" class="container od">
  34. <div class="wrap">
  35. <div class="content odPayment">
  36. <!-- 페이지특정 클래스 = odPayment -->
  37. <div class="cont_head">
  38. <h2>주문&#47;결제</h2>
  39. <div class="oder_steps">
  40. <ul>
  41. <li>01 쇼핑백</li>
  42. <li class="on">02 주문/결제</li>
  43. <li>03 주문완료</li>
  44. </ul>
  45. </div>
  46. </div>
  47. <div class="cont_body">
  48. <!-- CONT-BODY -->
  49. <form class="form_wrap">
  50. <div class="od_cont">
  51. <div class="sec_head">
  52. <div class="tbl type4">
  53. <table>
  54. <colgroup>
  55. <col width="240">
  56. <col width="*">
  57. </colgroup>
  58. <tbody>
  59. <tr>
  60. <th>총 <span class="c_primary bold" th:text="${delvTotCnt}"></span> 건으로 나뉘어 배송 예정</th>
  61. <td class="t_l">
  62. <span>총알배송<em class="c_primary bold" th:text="${wmsCnt}" id="shotDelv"></em>건</span>
  63. <span>STYLE24<em class="c_primary bold" th:text="${wmsCnt}" id="wmsDelv"></em>건</span>
  64. <span>업체직배송<em class="c_primary bold" th:text="${delvCnt}"></em>건</span>
  65. <span>예약배송<em class="c_primary bold" th:text="${resCnt}"></em>건</span>
  66. </td>
  67. </tr>
  68. </tbody>
  69. </table>
  70. </div>
  71. </div>
  72. <div class="sec_body">
  73. <!-- -->
  74. <div class="foldGroup">
  75. <ul>
  76. <li class="fold_mbinfo">
  77. <!-- 주문고객정보 -->
  78. <div class="fold_head">
  79. <a href="javascript:void(0)">
  80. <div>
  81. <div class="fold_tit">
  82. <span>주문고객</span>
  83. </div>
  84. <div class="data">
  85. <span th:text="${custemerInfo.custNm}"></span>
  86. <span th:text="${custemerInfo.email}"></span>
  87. <span th:text="${custemerInfo.cellPhnno}"></span>
  88. </div>
  89. </div>
  90. </a>
  91. </div>
  92. <div class="fold_cont" style="display: none;">
  93. <div class="area_mbinfo">
  94. <dl>
  95. <div>
  96. <dt>
  97. <span class="sr-only">주문자명</span>
  98. </dt>
  99. <dd th:text="${custemerInfo.custNm}"></dd>
  100. </div>
  101. <div>
  102. <dt>
  103. <span class="sr-only">이메일</span>
  104. </dt>
  105. <dd th:text="${custemerInfo.email}">/dd>
  106. </div>
  107. <div>
  108. <dt>
  109. <span class="sr-only">휴대폰 번호</span>
  110. </dt>
  111. <dd>
  112. <span th:text="${custemerInfo.cellPhnno}"></span>
  113. <th:block th:if="${custemerInfo.ci} == null or ${custemerInfo.ci} == ''">
  114. <button type="button" class="btn_popup" id="">
  115. <span>본인인증하기</span>
  116. </button>
  117. </th:block>
  118. </dd>
  119. </div>
  120. </dl>
  121. </div>
  122. </div> <!-- //주문고객정보 -->
  123. </li>
  124. <li class="fold_mbinfo">
  125. <!-- 배송지정보 -->
  126. <div class="fold_head">
  127. <a href="javascript:void(0)">
  128. <div>
  129. <div class="fold_tit">
  130. <span>배송지 정보</span>
  131. </div>
  132. <div class="data" th:text="${deliveryAddrInfo.recipBaseAddr} + ${deliveryAddrInfo.recipDtlAddr}"></div>
  133. </div>
  134. </a>
  135. </div>
  136. <div class="fold_cont" style="display: none;">
  137. <div class="area_mbinfo">
  138. <dl>
  139. <div>
  140. <dt><span class="sr-only">배송지명</span></dt>
  141. <dd>
  142. <span th:text="${deliveryAddrInfo.delvAddrNm}"></span>
  143. <span class="icon_tag">
  144. <em class="tag_stype1">기본 배송지</em>
  145. <em class="tag_stype2">총알배송</em>
  146. </span>
  147. </dd>
  148. </div>
  149. <div>
  150. <dt>
  151. <span class="sr-only">배송주소</span>
  152. </dt>
  153. <dd>
  154. <span th:text="${deliveryAddrInfo.recipBaseAddr} + ${deliveryAddrInfo.recipDtlAddr}"></span>
  155. <button type="button" class="btn_popup" id="btn_adrsChange_pop">
  156. <span>배송지 선택</span>
  157. </button>
  158. </dd>
  159. </div>
  160. <div>
  161. <dt>
  162. <span class="sr-only">휴대폰 번호</span>
  163. </dt>
  164. <dd th:text="${custemerInfo.cellPhnno}"></dd>
  165. </div>
  166. <div>
  167. <dt>배송요청 사항</dt>
  168. <dd>
  169. <span th:text="${deliveryAddrInfo.delvMemo}" id="delvMemo"></span>
  170. <button type="button" class="btn_popup" id="btn_rqstModify_pop">
  171. <span>변경하기</span>
  172. </button>
  173. </dd>
  174. </div>
  175. </dl>
  176. </div>
  177. <!-- 해외배송상품일 경우 노출 -->
  178. <div class="area_overseas">
  179. <dl>
  180. <div>
  181. <dt>개인통관고유부호</dt>
  182. <dd>
  183. <div class="form_field">
  184. <div>
  185. <input type="radio" name="rdi-overseas" id="rdi-overs1" checked>
  186. <label for="rdi-overs1"><span>받는사람 개인통관고유부호</span></label>
  187. </div>
  188. <div>
  189. <input type="radio" name="rdi-overseas" id="rdi-overs2">
  190. <label for="rdi-overs2"><span>입력 안 함</span></label>
  191. </div>
  192. <div class="info_box overs1">
  193. <div class="input_wrap">
  194. <input type="text" class="form_control err" maxlength="13" placeholder="P로 시작하는 13자리">
  195. <!-- 유효하지 않은 개인통관고유부호 일때 class명 'err' 추가 -->
  196. </div>
  197. <div class="t_err">개인통관고유부호가 유효하지 않습니다.</div>
  198. <!-- 유효하지 않은 개인통관고유부호 일때 노출 -->
  199. <div class="agree_overs">
  200. <input id="chk-overs-agr" type="checkbox" checked="">
  201. <label for="chk-overs-agr">
  202. <span>
  203. 위 정보는 원활한 통관을 위해 수집 및 판매자에게 제공하며,계속 사용하도록 안전하게 STYLE24에서 저장 &#47; 관리 합니다.&nbsp;&nbsp;
  204. <em class="tmark_required">(필수)</em>
  205. </span>
  206. </label>
  207. </div>
  208. </div>
  209. <div class="info_box overs2" style="display: none;">
  210. <p>개인통관고유부호를 입력하지 않아도 관세사무소에서 개인정보 확인을 위해 별도 연락을 드릴 예정입니다.</p>
  211. </div>
  212. </div>
  213. <div class="info_txt">
  214. <ul>
  215. <li>물품가액이 $150초과할 경우 관/부과세가 발생 할 수 있습니다.</li>
  216. <li>물품 종류와 해외공급자 관계없이 같은 날 입항하게 되면 합산과세 대상이 됩니다.</li>
  217. </ul>
  218. </div>
  219. </dd>
  220. </div>
  221. </dl>
  222. </div>
  223. <!-- //해외배송상품일 경우 노출 -->
  224. <!-- 주문제작상품일 경우 노출 -->
  225. <div class="area_customitem">
  226. <div class="form_field">
  227. <div class="agree_custom">
  228. <input id="chk-custom-agr1" type="checkbox" checked="">
  229. <label for="chk-custom-agr1">
  230. <span>고객님께서 주문하신 상품에는 주문제작상품이 포함되어 있습니다.<br>주문제작상품에 대한 안내를 확인하였으며 배송에 동의합니다.&nbsp;&nbsp;
  231. <em class="tmark_required">(필수)</em>
  232. </span>
  233. </label>
  234. </div>
  235. </div>
  236. <div class="info_txt">
  237. <ul>
  238. <li>주문 제작 상품은 주문 후 제작이 진행되며, 제작 완료 후 배송이 시작됩니다.</li>
  239. <li>주문 제작 상품의 특성상 주문 완료 후 취소/교환이 불가능합니다. (상품 하자에 한해 가능)</li>
  240. </ul>
  241. </div>
  242. </div>
  243. <!-- //주문제작상품일 경우 노출 -->
  244. </div> <!-- //배송지정보 -->
  245. </li>
  246. <!-- 사은품선택 -->
  247. <th:block th:if="${freegiftList != null && #lists.size(freegiftList) > 0}">
  248. <li>
  249. <div class="fold_head">
  250. <a href="javascript:void(0)">
  251. <div>
  252. <div class="fold_tit">
  253. <span>사은품 선택</span>
  254. </div>
  255. <div class="data">
  256. <span>사은품 총 <em class="total_gift">0</em>&nbsp;개 선택</span>
  257. <span><em class="total_deduct">0</em>&nbsp;P 차감</span>
  258. </div>
  259. </div>
  260. </a>
  261. </div>
  262. <div class="fold_cont" style="display: none;">
  263. <div class="area_selgift">
  264. <th:block th:each="freegift, i : ${freegiftList}">
  265. <div class="gift_box">
  266. <p class="txt">
  267. <span th:text="'사은품선택' + ${i.count} + '' + ${freegift.freegiftNm}"></span>
  268. </p>
  269. <div class="form_field">
  270. <th:block th:each="freegiftGoods, k : ${freegiftGoodsList}">
  271. <th:block th:if="${freegift.freegiftSq} == ${freegiftGoods.freegiftSq}">
  272. <div class="gift">
  273. <input type="radio" th:name="'rdi-gift'+${i.count}" th:id="'rdi-gift'+${i.count}+${k.count}" class="chk_img freegiftRdo" th:value="${freegiftGoods.freegiftValSq}" th:usepoint="${freegiftGoods.usePoint}">
  274. <label th:for="'rdi-gift'+${i.count}+${k.count}">
  275. <span class="thumb"><img src="http://ts5000.ipdisk.co.kr:89/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
  276. <span class="name" th:text="${freegiftGoods.goodsNm}"></span>
  277. <span th:if="${freegiftGoods.usePoint} < 1" class="deduct" th:text="무료"></span>
  278. <span th:if="${freegiftGoods.usePoint} > 0" class="deduct" th:text="|- ${freegiftGoods.usePoint} P|"></span>
  279. </label>
  280. </div>
  281. </th:block>
  282. </th:block>
  283. <div class="gift">
  284. <input type="radio" th:name="'rdi-gift'+${i.count}" th:id="${i.count}+'0'" class="chk_img freegiftRdo" value="noSel" usepoint="0">
  285. <label th:for="${i.count}+'0'">
  286. <span class="thumb"><img src="/images/pc/thumb/tmp_gift_empty.jpg" width=""alt=""></span>
  287. <span class="name">사은품 수령안함</span>
  288. <span class="deduct">수령거부</span>
  289. </label>
  290. </div>
  291. </div>
  292. </div>
  293. </th:block>
  294. <div class="form_field">
  295. <div class="agree_gift">
  296. <p>
  297. <input id="chk-agree_gift" type="checkbox">
  298. <label for="chk-agree_gift"><span>동의합니다</span></label>
  299. </p>
  300. <p class="txt">
  301. 사은품 지금에 대한 내용을 확인하였으며, 이에 동의합니다.
  302. <button type="button" class="btn_link_popup" id="btn_infoGift_pop">
  303. <span>보기</span>
  304. </button>
  305. </p>
  306. </div>
  307. </div>
  308. </div>
  309. </div> <!-- //사은품선택 -->
  310. </li>
  311. </th:block>
  312. <li>
  313. <!-- 할인/혜택 사용 -->
  314. <div class="fold_head">
  315. <a href="javascript:void(0)">
  316. <div>
  317. <div class="fold_tit">
  318. <span>할인/혜택 사용</span>
  319. </div>
  320. <div class="data maxdisc">
  321. <div class="form_field">
  322. <input id="chk-maxdisc" type="checkbox" checked="">
  323. <label for="chk-maxdisc">
  324. <span>최대 할인혜택을 바로 적용하세요 <em class="maxdisc_amount">(-3,000원)</em></span>
  325. </label>
  326. </div>
  327. </div>
  328. </div>
  329. </a>
  330. </div>
  331. <div class="fold_cont" style="display: none;">
  332. <div class="area_seldiscount">
  333. <dl>
  334. <div>
  335. <dt><span class="mid">할인코드</span></dt>
  336. <dd>
  337. <div class="form_field">
  338. <div class="input_wrap">
  339. <input type="text" class="form_control" maxlength="13" placeholder="할인코드를 입력해주세요.">
  340. <button type="button" class="btn btn_dark">적용</button>
  341. </div>
  342. </div>
  343. </dd>
  344. </div>
  345. <div>
  346. <dt>할인쿠폰</dt>
  347. <dd>
  348. <a href="" class="btn_coupon_toggle">할인쿠폰 <span>3장</span>적용</a>
  349. <div class="coupon_list">
  350. <ul>
  351. <!-- 상품쿠폰 -->
  352. <th:block th:each="goods, i : ${goodsApplyCpnList}">
  353. <th:block th:if="${goods.goodsCpnList.size() > 0}">
  354. <li>
  355. <div class="coupon">
  356. <div class="item_gd">
  357. <figure>
  358. <span class="thumb"><img src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
  359. <figcaption>
  360. <div class="brand" th:text="${goods.brandEnm}+' '+${goods.brandKnm}"></div>
  361. <div class="name" th:text="${goods.goodsNm}"></div>
  362. <div class="price">
  363. <span th:text="${goods.goodsCd}"></span>
  364. <th:block th:if="${goods.tmtbDcAmt} > 0">
  365. <span class="selling_price" th:text="${#numbers.formatInteger(goods.tmtbDcAmt, 1, 'COMMA')}"></span>
  366. </th:block>
  367. <th:block th:if="${goods.tmtbDcAmt} < 1">
  368. <span class="selling_price" th:text="${#numbers.formatInteger(goods.currPrice, 1, 'COMMA')}"></span>
  369. </th:block>
  370. </div>
  371. </figcaption>
  372. </figure>
  373. </div>
  374. <div class="form_field">
  375. <select id="" class="select_hidden cpnSelect">
  376. <option value="">선택안함</option>
  377. <th:block th:each="goodsCpn, k : ${goods.goodsCpnList}">
  378. <option th:value="${goodsCpn.cpnId}" th:text="${goodsCpn.cpnId}+'|'+${goodsCpn.cpnNm}+'|'+${goodsCpn.cpnDcAmt}"></option>
  379. </th:block>
  380. </select>
  381. </div>
  382. <div class="cp_discount">
  383. <span class="cp_amount">-10,000원 할인적용</span>
  384. <button type="button" class="btn_del_coupon" id="">
  385. <span>쿠폰적용해제</span>
  386. </button>
  387. </div>
  388. </div>
  389. </li>
  390. </th:block>
  391. </th:block>
  392. <!-- 상품쿠폰 -->
  393. <!-- 장바구니쿠폰 -->
  394. <th:block th:if="${cartCpnList.size() > 0}">
  395. <li>
  396. <div class="coupon">
  397. <div class="form_field">
  398. <label for="">장바구니 할인쿠폰</label>
  399. <select id="" class="select_hidden">
  400. <option value="">선택안함</option>
  401. <th:block th:each="cartCpn, k : ${cartCpnList}">
  402. <option th:value="${cartCpn.cpnId}" th:text="${cartCpn.cpnId}+'|'+${cartCpn.cpnNm}"></option>
  403. </th:block>
  404. </select>
  405. </div>
  406. <div class="cp_discount">
  407. <span class="cp_amount">-10,000원 할인적용</span>
  408. <button type="button" class="btn_del_coupon" id="">
  409. <span>쿠폰적용해제</span>
  410. </button>
  411. </div>
  412. </div>
  413. </li>
  414. </th:block>
  415. <!-- 장바구니쿠폰 -->
  416. <!-- 배송비쿠폰 -->
  417. <th:block th:if="${delvCpnList.size() > 0}">
  418. <li>
  419. <div class="coupon">
  420. <div class="form_field">
  421. <label for="">배송비 할인쿠폰</label>
  422. <select id="" class="select_hidden">
  423. <th:block th:each="delvCpn, k : ${delvCpnList}">
  424. <option th:value="${delvCpn.cpnId}" th:text="${delvCpn.cpnNm}"></option>
  425. </th:block>
  426. </select>
  427. </div>
  428. <div class="cp_discount">
  429. <span class="cp_amount">-10,000원 할인적용</span>
  430. <button type="button" class="btn_del_coupon" id="">
  431. <span>쿠폰적용해제</span>
  432. </button>
  433. </div>
  434. </div>
  435. </li>
  436. </th:block>
  437. <!-- 배송비쿠폰 -->
  438. </ul>
  439. </div>
  440. </dd>
  441. </div>
  442. </dl>
  443. </div>
  444. <div class="area_selpoint">
  445. <dl>
  446. <div>
  447. <dt>선 포인트 사용</dt>
  448. <dd>
  449. <div class="form_field">
  450. <div>
  451. <input type="radio" name="rdi-beforpoint" id="rdi-beforpoint1" value="" checked="">
  452. <label for="rdi-beforpoint1"><span>사용 안함</span></label>
  453. </div>
  454. <div>
  455. <input type="radio" name="rdi-beforpoint" id="rdi-beforpoint2" value="">
  456. <label for="rdi-beforpoint2"><span>사용함</span></label>
  457. <span class="remain_point" th:text="|사용가능 포인트 : ${#numbers.formatInteger(prePntDcAmt, 1, 'COMMA')} P|">사용가능 포인트:1,500P</span>
  458. </div>
  459. </div>
  460. </dd>
  461. </div>
  462. <div>
  463. <dt>
  464. <span class="mid">스타일 포인트</span>
  465. </dt>
  466. <dd>
  467. <div class="form_field">
  468. <!-- 스타일 포인트 3만원 이상 결제시 노출 -->
  469. <div class="input_wrap">
  470. <input type="text" class="form_control" maxlength="" placeholder="사용할 포인트를 입력해주세요.">
  471. <button type="button" class="btn btn_dark">적용</button>
  472. </div>
  473. <!-- 스타일 포인트 3만원 이상 결제시 노출 -->
  474. <!-- 스타일 포인트 3만원 미만 결제시 노출 -->
  475. <div class="input_wrap">
  476. <input type="text" class="form_control" maxlength="" placeholder="3만원 이상 결제시에만 포인트 사용이 가능합니다." disabled>
  477. <button type="button" class="btn btn_dark">적용</button>
  478. </div>
  479. <!-- //스타일 포인트 3만원 미만 결제시 노출 -->
  480. <p><span class="remain_point" th:text="|보유 : ${#numbers.formatInteger(rmPntAmt, 1, 'COMMA')} P|"></span>(결제금액의 최대 40%까지 사용가능)</p>
  481. </div>
  482. </dd>
  483. </div>
  484. <div>
  485. <dt>
  486. <span class="mid">상품권</span>
  487. </dt>
  488. <dd>
  489. <div class="form_field">
  490. <div class="input_wrap">
  491. <input type="text" class="form_control" maxlength="" placeholder="사용할 금액을 입력해주세요.">
  492. <button type="button" class="btn btn_dark">적용</button>
  493. </div>
  494. <p><span class="remain_point" th:text="|보유 : ${#numbers.formatInteger(rmGfcdAmt, 1, 'COMMA')} 원|"></span></p>
  495. <div class="agree_receipt">
  496. <input id="chk-receipt" type="checkbox">
  497. <label for="chk-receipt"><span>상품권 현금영수증 신청</span></label>
  498. <div class="info_box">
  499. <div class="input_wrap">
  500. <input type="text" class="form_control" maxlength="11" placeholder="">
  501. </div>
  502. </div>
  503. </div>
  504. </div>
  505. </dd>
  506. </div>
  507. </dl>
  508. </div>
  509. </div> <!-- //할인/혜택 사용 -->
  510. </li>
  511. <li class="fold_paymethod">
  512. <!-- 결제수단 선택 -->
  513. <div class="fold_head">
  514. <a href="javascript:void(0)">
  515. <div>
  516. <div class="fold_tit"><span>결제수단 선택</span></div>
  517. <div class="data"><span>STYLE24 간편결제</span></div>
  518. </div>
  519. </a>
  520. </div>
  521. <div class="fold_cont" style="display: none;">
  522. <div class="area_paymethod">
  523. <div class="form_field">
  524. <div class="radio_blk">
  525. <div class="paymethod_radio">
  526. <input type="radio" name="rdi-paymethod" id="rdi-paymethod-quick" value="">
  527. <label for="rdi-paymethod-quick"><span>STYLE24 간편결제</span></label>
  528. <div class="quickpay_bnr">
  529. <span>3초면 결제 끝! 추가 혜택 할인과 함께 만나는 STYLE24 간편결제! 지금 바로 등록하세요!</span>
  530. <button type="button" class="btn_close_bnr">
  531. <span class="sr-only">닫기</span>
  532. </button>
  533. </div>
  534. </div>
  535. <div class="paymethod_box" style="display: none;">
  536. <div class="card_quickpay">
  537. <!-- 등록카드 없을때 -->
  538. <div class="empty">
  539. <button type="button" class="btn_addcard">
  540. <span>결제수단 등록</span>
  541. </button>
  542. </div>
  543. <!-- //등록카드 없을때 -->
  544. <!-- 등록카드 있을때 -->
  545. <div class="list_card swiper-container">
  546. <div class="swiper-wrapper">
  547. <div class="swiper-slide">
  548. <!-- 등록된 카드 -->
  549. <div class="card">
  550. <span class="logo_samsung">삼성카드</span>
  551. <p class="number">
  552. <span>9410</span> <span>09**</span> <span>****</span>
  553. <span>1287</span>
  554. </p>
  555. <p class="name">삼성개인특별카드</p>
  556. <select name="" id="" class="select_month">
  557. <option value="">일시불</option>
  558. <option value="">2개월 무이자</option>
  559. <option value="">3개월 무이자</option>
  560. <option value="">4개월 무이자</option>
  561. <option value="">5개월 무이자</option>
  562. <option value="">6개월 무이자</option>
  563. <option value="">7개월</option>
  564. <option value="">8개월</option>
  565. <option value="">9개월</option>
  566. <option value="">10개월</option>
  567. <option value="">11개월</option>
  568. <option value="">12개월</option>
  569. </select>
  570. <div class="etc">
  571. <button type="button" class="btn_favorcard">
  572. <span><i class="ico ico_star"></i><em class="sr-only">즐겨찾기</em></span>
  573. </button>
  574. <button type="button" class="btn_delcard">
  575. <span><i class="ico ico_trash_wh"></i><em class="sr-only">카드삭제</em></span>
  576. </button>
  577. </div>
  578. </div>
  579. <!-- //등록된 카드 -->
  580. </div>
  581. <div class="swiper-slide">
  582. <!-- 등록된 카드 -->
  583. <div class="card">
  584. <span class="logo_hyundai">현대카드</span>
  585. <p class="number">
  586. <span>9410</span> <span>09**</span> <span>****</span>
  587. <span>1287</span>
  588. </p>
  589. <p class="name">현대 M3 카드</p>
  590. <select name="" id="" class="select_month">
  591. <option value="">일시불</option>
  592. <option value="">2개월 무이자</option>
  593. <option value="">3개월 무이자</option>
  594. <option value="">4개월 무이자</option>
  595. <option value="">5개월 무이자</option>
  596. <option value="">6개월 무이자</option>
  597. <option value="">7개월</option>
  598. <option value="">8개월</option>
  599. <option value="">9개월</option>
  600. <option value="">10개월</option>
  601. <option value="">11개월</option>
  602. <option value="">12개월</option>
  603. </select>
  604. <div class="etc">
  605. <button type="button" class="btn_favorcard active">
  606. <span><i class="ico ico_star"></i><em class="sr-only">즐겨찾기</em></span>
  607. </button>
  608. <button type="button" class="btn_delcard">
  609. <span><i class="ico ico_trash_wh"></i><em class="sr-only">카드삭제</em></span>
  610. </button>
  611. </div>
  612. </div>
  613. <!-- //등록된 카드 -->
  614. </div>
  615. <div class="swiper-slide">
  616. <!-- 카드추가버튼 -->
  617. <button type="button" class="btn_addcard">
  618. <span>결제수단 등록</span>
  619. </button>
  620. <!-- //카드추가버튼 -->
  621. </div>
  622. </div>
  623. <div class="swiper-button-next"></div>
  624. <div class="swiper-button-prev"></div>
  625. </div>
  626. <!-- //등록카드 있을때 -->
  627. </div>
  628. <ul class="info_quick">
  629. <li>결제수단 등록 한번으로 간편하게 결제하실 수 있습니다.</li>
  630. <li>국내 8개 카드에 대해 이용 가능합니다. (법인카드,기프트카드,해외카드 제외)</li>
  631. <li>일반 신용카드의 할인혜택은 적용되지 않습니다.</li>
  632. </ul>
  633. </div>
  634. </div>
  635. <div class="radio_blk">
  636. <div class="paymethod_radio">
  637. <input type="radio" name="rdi-paymethod" id="rdi-paymethod-normal" value="">
  638. <label for="rdi-paymethod-normal"><span>일반 결제</span></label>
  639. </div>
  640. <div class="paymethod_box" style="display: none;">
  641. <ul class="sel_method">
  642. <li>
  643. <input type="radio" name="rdi-paynormal" id="rdi-paynormal1" value="">
  644. <label for="rdi-paynormal1"><span>신용카드</span></label>
  645. </li>
  646. <li>
  647. <input type="radio" name="rdi-paynormal" id="rdi-paynormal2" value="">
  648. <label for="rdi-paynormal2"><span>실시간계좌이체</span></label>
  649. </li>
  650. <li>
  651. <input type="radio" name="rdi-paynormal" id="rdi-paynormal3" value="">
  652. <label for="rdi-paynormal3"><span>무통장입금</span></label>
  653. </li>
  654. <li>
  655. <input type="radio" name="rdi-paynormal" id="rdi-paynormal4" value="">
  656. <label for="rdi-paynormal4"><span>휴대폰 결제</span></label>
  657. </li>
  658. <li>
  659. <input type="radio" name="rdi-paynormal" id="rdi-paynormal5" value="">
  660. <label for="rdi-paynormal5">
  661. <span>
  662. <em class="sr-only">카카오페이 결제</em>
  663. <em class="payimg kakao"></em>
  664. </span>
  665. </label>
  666. </li>
  667. <li>
  668. <input type="radio" name="rdi-paynormal" id="rdi-paynormal6" value="">
  669. <label for="rdi-paynormal6">
  670. <span>
  671. <em class="sr-only">네이버페이 결제</em>
  672. <em class="payimg naver"></em>
  673. </span>
  674. </label>
  675. </li>
  676. <li>
  677. <input type="radio" name="rdi-paynormal" id="rdi-paynormal7" value="">
  678. <label for="rdi-paynormal7">
  679. <span>
  680. <em class="sr-only">페이코 결제</em>
  681. <em class="payimg payco"></em>
  682. </span>
  683. </label>
  684. </li>
  685. </ul>
  686. <div class="agree_insurance">
  687. <input id="chk-insurance" type="checkbox">
  688. <label for="chk-insurance">
  689. <span>소비자 피해 보상보험 신청&nbsp;&nbsp;<em class="tmark_optional">(선택)</em></span>
  690. <button type="button" class="btn_link_popup" id="">
  691. <span>FAQ확인</span>
  692. </button>
  693. </label>
  694. <p>
  695. ‘전자상거래 등에서의 소비자보호에 관한 법률‘에 따라 현금 결제 시 서울보증보험㈜가 제공하는
  696. 소비자 피해보상보험을<br>신청할 수 있도록 해드리고 있습니다.
  697. (2013.11.28부터 시행)
  698. </p>
  699. </div>
  700. </div>
  701. </div>
  702. </div>
  703. <div class="form_field">
  704. <div class="agree_paymethod">
  705. <input id="chk-agree_paymethod" type="checkbox">
  706. <label for="chk-agree_paymethod">
  707. <span>선택한 결제수단으로 향후 결제 이용에 동의합니다.&nbsp;&nbsp;<em class="tmark_optional">(선택)</em>
  708. </span>
  709. </label>
  710. </div>
  711. </div>
  712. </div>
  713. <div class="area_paymentinfo">
  714. <div class="paymentinfo">
  715. <div class="payinfo_blk on">
  716. <a href=""> 개인정보 제공에 대한 동의 <span>닫기</span>
  717. </a>
  718. <div class="infotxt">개인정보제공에 대한 동의 내용입니다.개인정보제공에
  719. 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
  720. 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
  721. 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
  722. 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
  723. 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
  724. 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
  725. 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
  726. 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
  727. 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
  728. 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
  729. 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
  730. 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에
  731. 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
  732. 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.</div>
  733. </div>
  734. <div class="payinfo_blk">
  735. <a href=""> 결제대행 서비스 약관 동의 <span>보기</span>
  736. </a>
  737. <div class="infotxt">결제대행서비스 약관 동의 내용입니다.결제대행서비스
  738. 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
  739. 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
  740. 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
  741. 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
  742. 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
  743. 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
  744. 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
  745. 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
  746. 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
  747. 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
  748. 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
  749. 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스
  750. 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
  751. 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.</div>
  752. </div>
  753. </div>
  754. <div class="agree_payment">위 주문내역을 확인 하였으며, 회원 본인은 결제에 동의합니다.</div>
  755. </div>
  756. <div class="area_paybtn">
  757. <div class="form_field">
  758. <button type="button" class="btn btn_primary btn_block">동의 후 123,456,789원 결제하기</button>
  759. </div>
  760. </div>
  761. </div> <!-- //결제수단 선택 -->
  762. </li>
  763. </ul>
  764. </div>
  765. </div>
  766. </div>
  767. <div class="od_side">
  768. <div class="area_order">
  769. <div class="tit_box">
  770. <h3 class="subH2">주문내역</h3>
  771. <span> <em class="number" th:text="${delvTotCnt}"></em>개의 상품
  772. </span>
  773. </div>
  774. <div class="od_item_box">
  775. <!-- 총알배송, 일반배송-->
  776. <th:block th:if="${wmsCartList != null and #lists.size(wmsCartList) > 0}">
  777. <div class="part_dlvr">
  778. <h4 class="subH3 mb20" id="shotDelvTitle">STYLE24 총알배송<span>오늘 자정까지 도착</span></h4>
  779. <h4 class="subH3 mb20" id="wmsDelvTitle">STYLE24 일반배송</h4>
  780. <div class="gd_list">
  781. <th:block th:each="goods, i : ${wmsCartList}">
  782. <div class="item_gd">
  783. <figure>
  784. <span class="thumb"><img src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
  785. <figcaption>
  786. <div class="brand" th:text="${goods.brandEnm} + ' ' + ${goods.brandKnm}"></div>
  787. <div class="name" th:text="${goods.goodsNm}"></div>
  788. <div class="option" th:each="opt, index : ${goods.itemNmArr}">
  789. <span th:text="${goods.optCdArr[index.index]}"></span>
  790. <span>수량:<em th:text="${goods.goodsQty}"></em>개</span>
  791. </div>
  792. <div class="price">
  793. <th:block th:if="${goods.tmtbDcAmt} > 0">
  794. <span class="selling_price" th:text="${#numbers.formatInteger(goods.tmtbDcAmt, 1, 'COMMA')}"></span>
  795. </th:block>
  796. <th:block th:if="${goods.tmtbDcAmt} < 1">
  797. <span class="selling_price" th:text="${#numbers.formatInteger(goods.currPrice, 1, 'COMMA')}"></span>
  798. </th:block>
  799. </div>
  800. </figcaption>
  801. </figure>
  802. </div>
  803. </th:block>
  804. </div>
  805. </div>
  806. </th:block>
  807. <!-- //총알배송, 일반배송 -->
  808. <!-- 업체직배송 -->
  809. <th:block th:if="${delvCartList != null and #lists.size(delvCartList) > 0}">
  810. <div class="part_dlvr">
  811. <h4 class="subH3 mb20">업체직배송</h4>
  812. <div class="gd_list">
  813. <th:block th:each="goods, i : ${delvCartList}">
  814. <div class="item_gd">
  815. <figure>
  816. <span class="thumb"><img src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
  817. <figcaption>
  818. <div class="brand" th:text="${goods.brandEnm} + ' ' + ${goods.brandKnm}"></div>
  819. <div class="name" th:text="${goods.goodsNm}"></div>
  820. <div class="option">
  821. <span th:text="${goods.optCd}"></span>
  822. <span>수량:<em th:text="${goods.goodsQty}"></em>개</span>
  823. </div>
  824. <div class="price">
  825. <th:block th:if="${goods.tmtbDcAmt} > 0">
  826. <span class="selling_price" th:text="${#numbers.formatInteger(goods.tmtbDcAmt, 1, 'COMMA')}"></span>
  827. </th:block>
  828. <th:block th:if="${goods.tmtbDcAmt} < 1">
  829. <span class="selling_price" th:text="${#numbers.formatInteger(goods.currPrice, 1, 'COMMA')}"></span>
  830. </th:block>
  831. </div>
  832. </figcaption>
  833. </figure>
  834. </div>
  835. </th:block>
  836. </div>
  837. </div>
  838. </th:block>
  839. <!-- //업체직배송 -->
  840. <!-- 예약배송 -->
  841. <th:block th:if="${resCartList != null and #lists.size(resCartList) > 0}">
  842. <div class="part_dlvr">
  843. <h4 class="subH3 mb20">예약배송</h4>
  844. <div class="gd_list">
  845. <th:block th:each="goods, i : ${resCartList}">
  846. <div class="item_gd">
  847. <figure>
  848. <span class="thumb"><img src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
  849. <figcaption>
  850. <div class="brand" th:text="${goods.brandEnm} + ' ' + ${goods.brandKnm}"></div>
  851. <div class="name" th:text="${goods.goodsNm}"></div>
  852. <div class="option">
  853. <span th:text="${goods.optCd}"></span>
  854. <span>수량:<em th:text="${goods.goodsQty}"></em>개</span>
  855. </div>
  856. <div class="price">
  857. <th:block th:if="${goods.tmtbDcAmt} > 0">
  858. <span class="selling_price" th:text="${#numbers.formatInteger(goods.tmtbDcAmt, 1, 'COMMA')}"></span>
  859. </th:block>
  860. <th:block th:if="${goods.tmtbDcAmt} < 1">
  861. <span class="selling_price" th:text="${#numbers.formatInteger(goods.currPrice, 1, 'COMMA')}"></span>
  862. </th:block>
  863. </div>
  864. </figcaption>
  865. </figure>
  866. <p class="info_reserv">
  867. <i class="ico ico_calender"></i><span th:text="${goods.delvResDt}"></span>
  868. 배송예정상품
  869. </p>
  870. </div>
  871. </th:block>
  872. </div>
  873. </div>
  874. </th:block>
  875. <!-- //예약배송 -->
  876. </div>
  877. <div class="od_amount_box">
  878. <dl>
  879. <div>
  880. <dt>상품금액</dt>
  881. <dd>1,590,000 원</dd>
  882. </div>
  883. <div>
  884. <dt>배송비</dt>
  885. <dd>0원</dd>
  886. </div>
  887. <div>
  888. <dt>할인금액</dt>
  889. <dd><span class="disc_amount">-1,746,500원</span></dd>
  890. </div>
  891. <div>
  892. <dt>다다익선할인금액</dt>
  893. <dd><span class="disc_amount">25,000원</span></dd>
  894. </div>
  895. <div>
  896. <dt>쿠폰할인금액</dt>
  897. <dd><span class="disc_amount">3,000원</span></dd>
  898. </div>
  899. <div>
  900. <dt>선포인트 사용</dt>
  901. <dd><span class="disc_amount">-1,500P</span></dd>
  902. </div>
  903. <div>
  904. <dt>포인트 사용</dt>
  905. <dd><span class="disc_amount">-5,500P</span></dd>
  906. </div>
  907. <div>
  908. <dt>상품권 사용</dt>
  909. <dd><span class="disc_amount">-50,000원</span></dd>
  910. </div>
  911. </dl>
  912. </div>
  913. <div class="totalprice_box">
  914. <dl>
  915. <dt>총 결제 예정 금액</dt>
  916. <dd data-weight="price" data-font="lato">
  917. <span>3,546,200</span>원
  918. </dd>
  919. </dl>
  920. <p class="info_point">
  921. 스타일 포인트 <span class="save_point">3,500 P</span> 적립예정
  922. </p>
  923. </div>
  924. </div>
  925. </div>
  926. </form>
  927. <!-- // CONT-BODY -->
  928. </div>
  929. </div>
  930. </div>
  931. </div>
  932. </form>
  933. <!-- // container -->
  934. <footer id="footer"></footer>
  935. <!-- 배송지변경팝업 -->
  936. <div class="modal fade od_pop adrsChange_pop" id="adrsChangePop" tabindex="-1" role="dialog" aria-labelledby="adrsChangeLabel" aria-hidden="true"></div>
  937. <!-- 배송지수정팝업 -->
  938. <div class="modal fade od_pop adrsModify_pop" id="adrsModifyPop" tabindex="-1" role="dialog" aria-labelledby="adrsModifyLabel" aria-hidden="true"></div>
  939. <!-- 배송지추가팝업 -->
  940. <div class="modal fade od_pop adrsAdd_pop" id="adrsAddPop" tabindex="-1" role="dialog" aria-labelledby="adrsAddLabel" aria-hidden="true"></div>
  941. <!-- 배송요청사항수정 팝업 -->
  942. <div class="modal fade od_pop rqstModify_pop" id="rqstModifyPop" tabindex="-1" role="dialog" aria-labelledby="rqstModifyLabel" aria-hidden="true"></div>
  943. <!-- 사은품지급안내 팝업 -->
  944. <div class="modal fade od_pop infoGift_pop" id="infoGiftPop" tabindex="-1" role="dialog" aria-labelledby="infoGiftLabel" aria-hidden="true"></div>
  945. <script th:inline="javascript">
  946. $(document).ready( function() {
  947. // 배송지변경 팝업열기
  948. $(document).on('click','#btn_adrsChange_pop',function(e){
  949. $.ajax( {
  950. type : "POST",
  951. url : '/order/delvAddrChangePop',
  952. dataType : 'html',
  953. success : function(result) {
  954. if (result != null) {
  955. $("#adrsChangePop").html(result);
  956. $("#adrsChangePop").modal("show");
  957. }
  958. }
  959. });
  960. return false;
  961. });
  962. // 배송지추가 팝업열기
  963. $(document).on('click','#btn_addrAdd_pop',function(e){
  964. $.ajax( {
  965. type : "POST",
  966. url : '/order/delvAddrAddPop',
  967. dataType : 'html',
  968. success : function(result) {
  969. if (result != null) {
  970. $("#adrsAddPop").html(result);
  971. $("#adrsAddPop").modal("show");
  972. }
  973. }
  974. });
  975. return false;
  976. });
  977. // 배송지수정 팝업열기
  978. $("#btn_addrModify_pop").on("click", function(e){
  979. $.ajax( {
  980. type : "POST",
  981. url : '/order/delvAddrModifyPop',
  982. dataType : 'html',
  983. success : function(result) {
  984. if (result != null) {
  985. $("#adrsModifyPop").html(result);
  986. $("#adrsModifyPop").modal("show");
  987. }
  988. }
  989. });
  990. return false;
  991. });
  992. // 배송요청사항 팝업열기
  993. $("#btn_rqstModify_pop").on("click", function(e){
  994. var jsonObj = new Object();
  995. jsonObj.delvMemo = $("input[name='delvMemo']").val();
  996. $.ajax({
  997. type : "POST",
  998. url : "/order/delvMemoChangePop",
  999. data : jsonObj,
  1000. dataType : "html",
  1001. success : function(result) {
  1002. if (result != null) {
  1003. $("#rqstModifyPop").html(result);
  1004. $("#rqstModifyPop").modal("show");
  1005. }
  1006. }
  1007. });
  1008. return false;
  1009. });
  1010. // 해외배송 입력
  1011. $(document).on('change','.odPayment .area_overseas #rdi-overs1', function(e){
  1012. $('.info_box.overs2').hide();
  1013. $('.info_box.overs1').show();
  1014. return false;
  1015. }).on('change','.odPayment .area_overseas #rdi-overs2', function(e){
  1016. $('.info_box.overs1').hide();
  1017. $('.info_box.overs2').show();
  1018. return false;
  1019. });
  1020. // 사은품지급안내 팝업열기
  1021. $("#btn_infoGift_pop").on("click",function(e){
  1022. $.ajax({
  1023. type : "POST",
  1024. url : "/order/freegiftInfoPop",
  1025. dataType : "html",
  1026. success : function(result) {
  1027. if (result != null) {
  1028. $("#infoGiftPop").html(result);
  1029. $("#infoGiftPop").modal("show");
  1030. }
  1031. }
  1032. });
  1033. return false;
  1034. });
  1035. // 할인쿠폰 확인
  1036. $(document).on('click','.odPayment .area_seldiscount .btn_coupon_toggle',function(e){
  1037. $('.coupon_list').toggle();
  1038. $(this).toggleClass('on');
  1039. return false;
  1040. });
  1041. // 결제수단 선택
  1042. $(document).on('change','.odPayment .area_paymethod .paymethod_radio input',function(e){
  1043. $('.radio_blk').removeClass('on');
  1044. $(this).parents('.radio_blk').addClass('on');
  1045. $(this).parents('.radio_blk').find('.paymethod_box').show();
  1046. $(this).parents('.radio_blk').siblings('div').find('.paymethod_box').hide();
  1047. var paymethodlabel = $(this).prop('labels');
  1048. $(this).parents('li').find('.fold_head .data span').text($(paymethodlabel).text());
  1049. // 간편결제 카드추가 슬라이드
  1050. var swiper = new Swiper('.paymethod_box .card_quickpay .list_card', {
  1051. slidesPerView: 'auto',
  1052. spaceBetween: 160,
  1053. centeredSlides: true,
  1054. navigation: {
  1055. nextEl: '.list_card .swiper-button-next',
  1056. prevEl: '.list_card .swiper-button-prev',
  1057. },
  1058. });
  1059. return false;
  1060. });
  1061. // STYLE24 간편결제 배너닫기
  1062. $(document).on('click','.odPayment .area_paymethod .quickpay_bnr .btn_close_bnr',function(e){
  1063. $('.quickpay_bnr').hide();
  1064. });
  1065. // 결제수단 선택 > 즐겨찾기 추가시
  1066. $(document).on('click','.odPayment .area_paymethod .paymethod_box .card .etc .btn_favorcard',function(e){
  1067. $(this).toggleClass('active');
  1068. return false;
  1069. });
  1070. // 결제수단 > 일반결제> 실시간계좌이체 선택시
  1071. $(document).on('change','.odPayment input:radio[name=rdi-paynormal]',function(e){
  1072. var paynormalValue = $(this).attr('id');
  1073. if (paynormalValue == 'rdi-paynormal2') {
  1074. $('.area_paymethod .agree_insurance').show();
  1075. } else {
  1076. $('.area_paymethod .agree_insurance').hide();
  1077. }
  1078. return false;
  1079. });
  1080. // 개인정보동의 열고닫기
  1081. $(document).on('click','.area_paymentinfo .payinfo_blk a',function(e){
  1082. e.preventDefault();
  1083. $(this).parents('.payinfo_blk').toggleClass('on');
  1084. var privacyToggle = $(this).find('span');
  1085. $(privacyToggle).text($(privacyToggle).text() == '보기' ? '닫기' : '보기');
  1086. return false;
  1087. });
  1088. // 간편결제등록 > STEP1.이용약관 팝업열기
  1089. $(document).on('click','.btn_addcard',function(e){
  1090. $("#qPayAgree_pop").modal("show");
  1091. return false;
  1092. });
  1093. // 간편결제등록 > STEP1.이용약관 체크
  1094. $(document).on('click','.area_QpayCk .agr_select button',function(e){
  1095. $(this).parents('.area_QpayCk').find('.info_agrQpay').toggle();
  1096. var payagrToggle = $(this).find('span');
  1097. $(payagrToggle).text($(payagrToggle).text() == '약관열기' ? '약관닫기' : '약관열기');
  1098. return false;
  1099. });
  1100. // 간편결제등록 > STEP1.이용약관 체크박스 전체선택
  1101. $(document).on('click','#chk-Qpay-agrAll',function(e){
  1102. $(this).parents(".qPayAgree_pop").find('.agree_Qpay input').prop("checked", $(this).is(":checked"));
  1103. });
  1104. // 간편결제등록 > STEP1.이용약관 체크박스 개별선택
  1105. $(document).on("click", ".agree_Qpay input",function(e){
  1106. var is_checked = true;
  1107. $(".agree_Qpay input").each(function(){
  1108. is_checked = is_checked && $(this).is(":checked");
  1109. });
  1110. $("#chk-Qpay-agrAll").prop("checked", is_checked);
  1111. });
  1112. // 간편결제등록 > 본인인증 팝업열기
  1113. $(document).on('click','#btn_qPayidConfirm_pop',function(e){
  1114. $("#qPayidConfirm_pop").modal("show");
  1115. return false;
  1116. });
  1117. });
  1118. </script>
  1119. <script th:inline="javascript">
  1120. // 배송관련정보 변수선언
  1121. var wmsCnt = [[${wmsCnt}]]; // 자사 일반,촐알 배송건수
  1122. var resCnt = [[${resCnt}]]; // 자사 예약 배송건수
  1123. var delvCnt = [[${delvCnt}]]; // 입전 일반 배송건수
  1124. var shotDelvYn = [[${shotDelvYn}]]; // 총알배송여부
  1125. // 할인관련정보 변수선언
  1126. var freegiftList = [[${freegiftList}]]; // 사은품 프로모션 목록
  1127. var freegiftGoodsList = [[${freegiftGoodsList}]]; // 사은품 프로모션 상품 목록
  1128. // 총알배송가능 지역, 총알배송 가능 시간 체크
  1129. var fnGetDailyDeliveryCheck = function () {
  1130. // TODO
  1131. var jsonObj = {"zipNo" : 12345};
  1132. var jsonData = JSON.stringify(jsonObj);
  1133. gagajf.ajaxJsonSubmit(
  1134. "/order/getDailyDeliveryCheck"
  1135. , jsonData
  1136. , function (result) {
  1137. // 자사몰 일반배송
  1138. $("#shotDelv").text(0);
  1139. $("#wmsDelv").text(wmsCnt);
  1140. $("#wmsDelvTitle").css("display", "block");
  1141. $("#shotDelvTitle").css("display", "none");
  1142. $(".tag_stype2").css("display", "none");
  1143. // 자사몰 총알배송
  1144. if (shotDelvYn == "Y") {
  1145. if (parseInt(result) > 0) {
  1146. $("#shotDelv").text(wmsCnt);
  1147. $("#wmsDelv").text(0);
  1148. $("#wmsDelvTitle").css("display", "none");
  1149. $("#shotDelvTitle").css("display", "block");
  1150. $(".tag_stype2").css("display", "block");
  1151. }
  1152. }
  1153. }
  1154. )
  1155. }
  1156. </script>
  1157. <script th:inline="javascript">
  1158. // 컨텐츠 호출
  1159. $(document).ready( function() {
  1160. // 1. 총알배송가능 지역, 총알배송 가능 시간 체크
  1161. fnGetDailyDeliveryCheck();
  1162. // 2. 배송목록 화면 노출, 비노출 처리
  1163. // 2.1 자사일반배송노출
  1164. if (wmsCnt > 0) {
  1165. $("#wmsDelvArea").css("display", "block");
  1166. }
  1167. // 2.2 입점업체일반배송노출
  1168. if (delvCnt > 0) {
  1169. $("#delvDelvArea").css("display", "block");
  1170. }
  1171. // 2.3 자사예약배송노출
  1172. if (resCnt > 0) {
  1173. $("#resDelvArea").css("display", "block");
  1174. }
  1175. // 3. 최적의 할인으로 쿠폰 설정
  1176. //$(".cpnSelect option:eq(1)").attr("selected", "selected");
  1177. $(".cpnSelect").each(function(i){
  1178. $(this).find("option:eq(1)").attr("selected", "selected");
  1179. });
  1180. });
  1181. // 사은품선택 라디오 버튼 기능
  1182. $(".freegiftRdo").on("click", function() {
  1183. var total_gift = 0;
  1184. var total_deduct = 0;
  1185. $(".freegiftRdo").each(function(){
  1186. // 라디오버튼 사은품 체크
  1187. if ($(this).is(":checked")) {
  1188. // 수령거부가 아닐때 체크
  1189. if ($(this).val() != "noSel") {
  1190. total_gift += 1;
  1191. total_deduct += parseInt($(this).attr("usepoint"));
  1192. }
  1193. }
  1194. });
  1195. $(".total_gift").text(total_gift); // 사은품총선택개수
  1196. $(".total_deduct").text(total_deduct); // 사은품총사용포인트
  1197. });
  1198. </script>
  1199. </th:block>
  1200. </body>
  1201. </html>