|
|
@@ -0,0 +1,219 @@
|
|
|
+<!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/CallcenterLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : OneToOneQnaRegisterFormMob.html
|
|
|
+ * @desc : 1:1문의 등록 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.03.09 gagamel 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <!-- 모달영역 -->
|
|
|
+ <div>
|
|
|
+ <!-- 모달1 -->
|
|
|
+ <div class="modal pop_full fade" id="myQuestion" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">
|
|
|
+ <div class="modal-dialog" role="document">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="modal-title">1:1문의</h5>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="pop_cont">
|
|
|
+ <div class="content cs_contactUs_my">
|
|
|
+ <form class="form_wrap" role="form" name="qnaForm" id="qnaForm" th:action="@{'/callcenter/onetoone/qna/create'}" method="post">
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="ui_col_12 form_full">
|
|
|
+ <div class="input_wrap">
|
|
|
+ <div class="select">
|
|
|
+ <select class="select_hidden" name="counselClsf" required="required" data-valid-name="문의유형">
|
|
|
+ <option value="">(필수) 문의 유형을 선택해 주세요</option>
|
|
|
+ <option th:if="${counselClsfList}" th:each="oneData, status : ${counselClsfList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
|
|
|
+ </select>
|
|
|
+ <!-- <div class="select_dress">(필수) 문의 유형을 선택해 주세요<span></span></div> -->
|
|
|
+ <ul class="select_options">
|
|
|
+ <li rel="">(필수) 유형을 선택해 주세요</li>
|
|
|
+ <li th:if="${counselClsfList}" th:each="oneData, status : ${counselClsfList}" th:rel="${oneData.cd}" th:text="${oneData.cdNm}"></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="ui_col_12 form_full">
|
|
|
+ <div class="input_wrap test">
|
|
|
+ <span class="input_group_addon"><span class="ico"></span></span>
|
|
|
+ <input type="text" class="form_control" placeholder="(필수) 문의 제목을 입력해 주세요" maxlength="30" name="questTitle" required="required" data-valid-name="제목"/>
|
|
|
+ </div>
|
|
|
+ <!-- 숫자, 특수문자, 불완성형 한글 제외하여 입력 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="ui_col_12 form_full">
|
|
|
+ <div class="input_wrap">
|
|
|
+ <textarea class="doc_contactus" name="questContent" cols="30" rows="10" style="resize: none;" placeholder="내용을 입력해 주세요. (500자 이내)" required="required" data-valid-name="내용"></textarea>
|
|
|
+ <p class="txt_cnt">
|
|
|
+ <span id="contactus_cnt" class="contactus_cnt"><em class="c_primary">0</em>/500</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <!-- 특수문자 : \ / : < > 사용 불가 > 입력 시, “특수문자 \ / : < > 는 사용할 수 없습니다.” 얼럿 호출 스크립트 입력 불가능 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="ui_col_12 form_full">
|
|
|
+ <div class="input_wrap">
|
|
|
+ <!-- 이미지첨부 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="imgUpload">
|
|
|
+ <label for="fileAdd" class="fileAdd">첫번째업로드</label>
|
|
|
+ <input type="file" id="fileAdd" name="file1"/>
|
|
|
+ <input type="hidden" name="file1OrgFileNm"/>
|
|
|
+ <input type="hidden" name="file1SysFileNm"/>
|
|
|
+ </div>
|
|
|
+ <div class="imgUpload">
|
|
|
+ <label for="fileAdds" class="fileAdd">두번째업로드</label>
|
|
|
+ <input type="file" id="fileAdds" name="file2"/>
|
|
|
+ <input type="hidden" name="file2OrgFileNm"/>
|
|
|
+ <input type="hidden" name="file2SysFileNm"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지첨부 -->
|
|
|
+ <div class="info_addfile">
|
|
|
+ <ul>
|
|
|
+ <li>사진은 이미지당 10MB 이하의 JPEG, JPG, PNG 파일 2장까지 첨부 가능합니다.</li>
|
|
|
+ <li>파일명에 한글은 사용 불가입니다.</li>
|
|
|
+ <li>첨부된 사진은 문의 외의 목적으로는 사용되지 않습니다.</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="ui_col_12 cellphone">
|
|
|
+ <div class="input_wrap">
|
|
|
+ <span class="tt">알림톡 수신 여부</span>
|
|
|
+ <!-- 알림 신청 체크박스(선택 _ 기본값) -->
|
|
|
+ <div>
|
|
|
+ <div class="ck_box">
|
|
|
+ <input type="radio" name="smsReqYn" id="smsReqYn1" value="Y" checked="checked"/>
|
|
|
+ <label for="smsReqYn1"><span>수신</span></label>
|
|
|
+ </div>
|
|
|
+ <div class="ck_box">
|
|
|
+ <input type="radio" name="smsReqYn" id="smsReqYn2" value="N">
|
|
|
+ <label for="smsReqYn2"><span>미수신</span></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cs_contactUs_my_footer">
|
|
|
+ <a href="#none" class="myQuestion" id="btnSaveQna"><p>등록</p></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //모달1 -->
|
|
|
+ </div>
|
|
|
+ <!-- //모달끝 -->
|
|
|
+
|
|
|
+<script th:inline="javascript">
|
|
|
+/*<![CDATA[*/
|
|
|
+ $(document).ready(function() {
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ // text_area
|
|
|
+ $('.doc_contactus').keyup(function (e) {
|
|
|
+ var content = $(this).val();
|
|
|
+ $('#contactus_cnt').html("(<em class='c_primary'>" + content.length + "</em>/500자)");
|
|
|
+ if (content.length > 500) {
|
|
|
+ alert("최대 500자까지 입력 가능합니다.");
|
|
|
+ $(this).val(content.substring(0, 500));
|
|
|
+ $('#contactus_cnt').html("(<em class='c_primary'>500</em>/500자)");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 파일첨부 선택 시
|
|
|
+ $('#fileAdd').on('change', function() { fnChooseFile(this); });
|
|
|
+ $('#fileAdds').on('change', function() { fnChooseFile(this); });
|
|
|
+
|
|
|
+ var fnChooseFile = function(obj) {
|
|
|
+ // multiple 속성이 있으면 files에는 다수의 객체가 할당됨
|
|
|
+ var file = obj.files[0];
|
|
|
+
|
|
|
+ if (!gagajf.isNull(file.name)) {
|
|
|
+ var extension = "\.(jpg|jpeg|png)$";
|
|
|
+ if (!(new RegExp(extension, "i")).test(file.name)) {
|
|
|
+ mcxDialog.alertC('이미지는 [jpg, jpeg, png] 파일만 가능합니다.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $(obj).parent('.imgUpload').find('.removes').trigger('click');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!gagajf.isNull(file.size) && Number(file.size) > 20 * 1000000) {
|
|
|
+ mcxDialog.alertC('이미지는 최대 20MB 이하 파일만 가능합니다.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $(obj).parent('.imgUpload').find('.removes').trigger('click');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 파일 업로드
|
|
|
+ gagajf.ajaxFileUpload('/common/file/upload?subDir=/counsel'
|
|
|
+ , file
|
|
|
+ , function(result) {
|
|
|
+ // 업로드한 파일명 설정
|
|
|
+ $('input[name=' + obj.name + 'OrgFileNm]').val(result.oldFileName);
|
|
|
+ $('input[name=' + obj.name + 'SysFileNm]').val(result.newFileName);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 저장
|
|
|
+ $('#btnSaveQna').on('click', function() {
|
|
|
+ // 입력 값 체크
|
|
|
+ if (!gagajf.validation('#qnaForm'))
|
|
|
+ return false;
|
|
|
+
|
|
|
+ mcxDialog.confirm("저장하시겠습니까?", {
|
|
|
+ cancelBtnText: "취소",
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ gagajf.ajaxFormSubmit($('#qnaForm').prop('action')
|
|
|
+ , '#qnaForm'
|
|
|
+ , function() {
|
|
|
+ cfnGoToPage(_PAGE_ONETOONE_QNA);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+/*]]>*/
|
|
|
+</script>
|
|
|
+
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
gagamel