OrderGiftInfoMob.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html lang="ko" xmlns:th="http://www.thymeleaf.org">
  3. <!--
  4. *******************************************************************************
  5. * @source : OrderGiftInfoMob.html
  6. * @desc : 선물받기정보 Page
  7. *============================================================================
  8. * STYLE24
  9. * Copyright(C) 2020 TSIT, All rights reserved.
  10. *============================================================================
  11. * VER DATE AUTHOR DESCRIPTION
  12. * === =========== ========== =============================================
  13. * 1.0 2021.04.13 jsh77b 최초 작성
  14. *******************************************************************************
  15. -->
  16. <div class="gift_tab">
  17. <div class="foldGroup">
  18. <ul>
  19. <li class="fold_mbinfo">
  20. <!-- 주문고객정보 -->
  21. <div class="fold_head">
  22. <a href="javascript:void(0)">
  23. <div>
  24. <div class="fold_tit">
  25. <span>선물 받으실 분</span>
  26. </div>
  27. </div>
  28. </a>
  29. </div>
  30. <div class="fold_cont" style="display: none;">
  31. <!-- 210419_ : 모바일웹에서만 .inner 사용 -->
  32. <th:block th:unless="${frontGb} == 'A'">
  33. <div class="inner">
  34. <div class="form_field">
  35. <div class="input_wrap">
  36. <input type="text" name="recipNm" class="form_control" value="" maxlength="10" placeholder="받는 분" style="ime-mode:active">
  37. </div>
  38. <div class="input_wrap">
  39. <input type="text" name="recipPhnno" class="form_control" value="" minlength="12" maxlength="13" placeholder="받는 분 휴대폰번호" data-valid-type="numeric">
  40. <p class="desc_txt">선물이 타인에게 전송될수 있으니 받으실분 연락처를 정확하게 입력해주세요.</p> <!-- 210421_삭제 : 전화번호를 텍스트 삭제 -->
  41. </div>
  42. <div class="textarea_wrap">
  43. <textarea class="doc_review" name="review" id="giftMsg" placeholder="선물 메시지 입력&#13;&#10;(미 입력시 ‘감사합니다’로 발송됩니다.)"></textarea>
  44. <p class="txt_cnt"><span id="review_cnt" class="c_primary">0</span>/200</p>
  45. </div>
  46. </div>
  47. </div>
  48. </th:block>
  49. <!-- 210419_ : APP 전용 : 탭 전체/ '연락처불러오기'는 모바일웹에서 사용하지않음. -->
  50. <th:block th:if="${frontGb} == 'A'">
  51. <div class="tabWrap">
  52. <ul class="tabIndex">
  53. <li class="" value="Call"><a href="javascript:void(0);"><span>연락처 불러오기</span></a></li>
  54. <li class="active" value="Direct"><a href="javascript:void(0);"><span>직접입력</span></a></li>
  55. </ul>
  56. <div class="tabContents">
  57. <div class="form_field">
  58. <div class="tab_cont active">
  59. <div class="input_wrap">
  60. <input type="text" name="recipNm" class="form_control" value="" maxlength="10" placeholder="받는 분" style="ime-mode:active">
  61. </div>
  62. <div class="form_field">
  63. <div class="input_wrap">
  64. <input type="text" name="recipPhnno" class="form_control" value="" minlength="11" maxlength="13" placeholder="받으실분 휴대폰번호" data-valid-type="numeric">
  65. <p class="desc_txt">선물이 타인에게 전송될수 있으니 전화번호를 받으실분 연락처를 정확하게 입력해주세요.</p>
  66. </div>
  67. <div class="textarea_wrap">
  68. <textarea class="doc_review" name="review" id="giftMsg" placeholder="선물 메시지 입력&#13;&#10;(미 입력시 ‘감사합니다’로 발송됩니다.)" style="ime-mode:active"></textarea>
  69. <p class="txt_cnt"><span id="review_cnt" class="c_primary">0</span>/200</p>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </th:block>
  77. </div>
  78. <!-- //주문고객정보 -->
  79. </li>
  80. </ul>
  81. </div>
  82. </div>
  83. <!-- //배송지정보 -->
  84. <script th:inline="javascript">
  85. var dispYn = [[${order.dispYn}]]; // 노출여부
  86. var frontGb = [[${frontGb}]];
  87. //화면노출
  88. var orderGiftInfoDispYn = function(temp) {
  89. if (temp == "Y") {
  90. $("#orderGiftInfo .fold_head").addClass("on");
  91. $("#orderGiftInfo .fold_cont").show();
  92. } else {
  93. $("#orderGiftInfo .fold_head").removeClass("on");
  94. $("#orderGiftInfo .fold_cont").hide();
  95. }
  96. }
  97. //컨텐츠 호출
  98. $(document).ready( function() {
  99. //alert(frontGb);
  100. //var userAgent=navigator.userAgent.toLowerCase();
  101. //alert("userAgent ::: " + userAgent);
  102. });
  103. //2021.04.09 하이픈처리
  104. $(document).on("keyup", "#orderGiftInfo input[name=recipPhnno]", function() {
  105. $(this).val($(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") );
  106. });
  107. //선물 받으실 분 직접입력 글자 제한
  108. $('.doc_review').keyup(function (e){
  109. var content = $(this).val();
  110. $('#review_cnt').html(content.length);
  111. if (content.length > 200){
  112. mcxDialog.alert("최대 200자까지 입력 가능합니다."); //210420_수정 : 시스템 alert -> dialog 변경.
  113. $(this).val(content.substring(0, 200));
  114. $('#review_cnt').html("200");
  115. }
  116. });
  117. </script>
  118. </html>