style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
							<!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  : OneToOneQnaFormWeb.html
 * @desc    : 1:1문의 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.19   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<main role="" id="" class="container cs">
		<!-- 고객센터 Gnb -->
		<nav class="pnb" id="callcenterGnb">
		</nav>
		<!-- //고객센터 Gnb -->
		
		<!-- ★ 컨텐츠 시작 -->
		<section class="content cs_contactUs_1">
			<div class="inner sr-only"><h2 class="title">1:1문의</h2></div>
			<div class="inner wide">
				<!-- 게시판info -->
				<ul class="inquiry_box">
					<li>
						<p id="qnaTotCnt"></p>
						<p>총 문의</p>
					</li>
					<li>
						<p id="qnaAnsCnt"></p>
						<p>답변완료</p>
					</li>
					<li>
						<p id="qnaIngCnt"></p>
						<p>처리 중</p>
					</li>
				</ul>
				<!-- //게시판info -->
			</div>
			
			<div class="inner wide">
				<!-- 폴딩리스트2 -->
				<div class="ui_row" id="divQna"> <!-- 데이터 없을시 클래스 nodata 추가 -->
					<div class="foldGroup case2">
						<!-- list2 -->
						<ul id="ulQna">
						</ul>
						<!-- //list2 -->
					</div>
				</div>
				<div class="ui_foot">
					<button class="btn btnM btnIcon_more" id="btnQnaMore">더보기</button>
				</div>
			</div>
		</section>
		<!-- ★ 컨텐츠 종료 -->
	</main>
	
	<nav id="tabbar" class="tabbar fixed">
		<div class="tabbar-btn">
			<a href="#none" class="questionMy"><p>1:1문의</p></a>
		</div>
		<div class="tabbar-inner">
			<a href="javascript:menu;" class="btn-menu" data-popup-trigger="" data-target="#menu">Menu</a>
			<a href="javascript:myPage" class="btn-my">Mypage</a>
			<a href="javascript:home" class="btn-home">Home</a>
			<a href="javascript:wish" class="btn-wish">Wish</a>
			<a href="javascript:history" class="btn-history">History</a>
		</div>
	</nav>
	
	<!-- 모달영역 -->
	<div>
		<!-- 문의이미지슬라이드 -->
		<div class="modal pop_full fade" id="thumb_pic" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true" style="display: none;">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title sr-only">문의이미지슬라이드</h5>
					</div>
					<div class="modal-body">
						<div class="pop_cont">
							<!-- Swiper -->
							<div class="swiper-container cs_pop">
								<div class="swiper-wrapper" id="qnaImg">
									<div class="swiper-slide"><div class="pop_img" style="background-image: url(//image.istyle24.com/Style24/images/mo/cs_pop_people.png);"></div></div>
									<div class="swiper-slide"><div class="pop_img" style="background-image: url(//image.istyle24.com/Style24/images/mo/cs_pop_people2.png);"></div></div>
								</div>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- //문의이미지슬라이드 -->
		
		<!-- 문의등록 -->
		<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="qnaRegisterForm" id="qnaRegisterForm" th:action="@{'/callcenter/onetoone/qna/create'}" method="post" onsubmit="$('#qnaRegisterForm').trigger('click'); return false;">
									<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> -->
												</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="내용을 입력해 주세요. (필수)" 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="fileAdds" class="fileAdd">업로드</label>
														<input type="file" id="fileAdds" name="file2">
													</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="modal-footer">
					<div class="btn_group_flex">
						<div><button type="button" class="btn btn_dark" id="btnSaveQna"><span>등록</span></button></div>
					</div>
				</div>
			</div>
		</div>
		<!-- //문의등록 -->
	</div>
	<!-- //모달끝 -->
		
	<form id="qnaForm" name="qnaForm" action="#" th:action="@{'/callcenter/onetoone/qna/list'}">
		<input type="hidden" name="pageNo" value ="1"/>
		<input type="hidden" name="pageSize" value ="10"/>
	</form>

<script th:inline="javascript">
/*<![CDATA[*/
	// JQUERY를 이용한 버튼 모달 팝업
	$(document).on('click', '.thumb_pic', function() {
		let oImg = $(this).parent('.img_group').find('.thumb_pic');
		$('#qnaImg').html('');
		for (let i = 0; i < oImg.length; i++) {
			$('#qnaImg').append('<div class="swiper-slide"><div class="pop_img"><img src="' + oImg.find('img').eq(i).attr("src") + '"/></div></div>');
		}
		$("#thumb_pic").modal("show");
		
		// 슬라이더_팝업에 이미지슬라이드
		var swiper = new Swiper('#thumb_pic .swiper-container.cs_pop', {
			observer: true,
			observeParents: true,
			pagination: {
				el: '#thumb_pic .swiper-pagination',
			}
		});
	});
	
	$(document).ready(function() {
		$('select').each(function() {
			var $this = $(this), numberOfOptions = $(this).children('option').length;
			
			$this.addClass('select_hidden');
			$this.wrap('<div class="select"></div>');
			$this.after('<div class="select_dress"></div>');
			
			var $dressSelect = $this.next('div.select_dress');
			$dressSelect.text($this.children('option').eq(0).text());
			
			var $selList = $('<ul />', {
				'class': 'select_options'
			}).insertAfter($dressSelect);
			
			for (var i = 0; i < numberOfOptions; i++) {
				$('<li />', {
					text: $this.children('option').eq(i).text(),
					rel: $this.children('option').eq(i).val(),
					class: $this.children('option').eq(i).attr('disabled')
				}).appendTo($selList);
			}
			
			var $selListItems = $selList.children('li');
			
			$dressSelect.click(function(e) {
				e.stopPropagation();
				$('div.select_dress.active').not(this).each(function(){
					$(this).removeClass('active').next('ul.select_options').hide();
				});
				$(this).toggleClass('active').next('ul.select_options').toggle();
			});
			
			$selListItems.click(function(e) {
				e.stopPropagation();
				
				if($(this).hasClass('disabled')){
					$this.val($(this).attr('rel',false));
				} else {
					$dressSelect.text($(this).text()).removeClass('active');
					$this.val($(this).attr('rel'));
					$selList.hide();
					fnChangeCounselClsf($(this).attr('rel'));
				}
			});
			
			$(document).click(function() {
				$dressSelect.removeClass('active');
				$selList.hide();
			});
		});
		
		// 타이틀명
		$('#htopTitle').text('고객센터');
		
		// 고객센터 GNB 설정
		fnSetCallcenterGnb(2);
		
		fnGetOneToOneQnaCountInfo();
		
		$('#btnQnaMore').trigger('click');
		
		$('#qnaRegisterForm textarea[name=questContent]').bind('input paste', function() {
			$(this).trigger('keyup');
		});
	});
	
	// 더보기
	$('#btnQnaMore').on('click', function() {
		gagajf.ajaxFormSubmit($('#qnaForm').prop('action'), '#qnaForm', fnGetListCallback);
	});
	
	// QNA 콜백함수
	var fnGetListCallback = function(result) {
		// 목록
		if (result.dataList != null && result.dataList.length > 0) {
			$.each(result.dataList, function(idx, item) {
				let tag = '<li>\n';
				tag += '	<div class="fold_head">\n';
				tag += '		<a href="javascript:void(0)">\n';
				tag += '			<div>\n';
				tag += '				<div class="fold_tit">\n';
				tag += '					<div class="lap1">\n';
				tag += '						<span class="fold_state ' + (item.ansStat == "G060_10" ? "doing" : "done") + '">' + item.ansStatNm + '</span>\n'; //답변완료 : done / 처리중 : doing
				tag += '						<span class="prod">' + item.counselClsfNm + '</span>\n';
				tag += '					</div>\n';
				tag += '					<div class="lap2"><span>' + item.questTitle + '</span></div>\n';
				tag += '				</div>\n';
				tag += '				<span class="data">' + item.questDt + '</span>\n';
				tag += '			</div>\n';
				tag += '		</a>\n';
				tag += '	</div>\n';
				tag += '	<div class="fold_cont">\n';
				tag += '		<div class="fold_detail">\n';
				tag += '			<div><p>' + item.questContent.replace(/(\r\n)/g, '<br/>') + '</p></div>\n';
				
				if (!gagajf.isNull(item.sysFileNm1) || !gagajf.isNull(item.sysFileNm2)) {
					tag += '		<p class="img_group">\n';
					
					if (!gagajf.isNull(item.sysFileNm1)) {
						tag += '		<span class="thumb_pic">\n';
// 						tag += '			<img src="' + _uploadImageUrl + '/counsel/' + item.sysFileNm1 + '" alt="" onerror="this.src=\'/image/bg_profile.png\'">\n';
						tag += '			<img src="' + _uploadImageUrl + '/' + item.sysFileNm1 + '" alt="">\n';
						tag += '		</span>\n';
					}
					
					if (!gagajf.isNull(item.sysFileNm2)) {
						tag += '		<span class="thumb_pic">\n';
// 						tag += '			<img src="' + _uploadImageUrl + '/counsel/' + item.sysFileNm2 + '" alt="" onerror="this.src=\'/image/bg_profile.png\'">\n';
						tag += '			<img src="' + _uploadImageUrl + '/' + item.sysFileNm2 + '" alt="">\n';
						tag += '		</span>\n';
					}
					
					tag += '		</p>\n';
				}
				
				if (item.ansStat != 'G060_20') { // 답변완료가 아닐 때
					tag += '		<div class="answer_foot">\n';
					tag += '			<button type="button" class="btn_delete" onclick="fnDeleteQna(' + item.counselSq + ');"><span>삭제</span></button>\n';
					tag += '		</div>\n';
				}
				
				tag += '		</div>\n';
				
				if (item.ansStat == 'G060_20') { // 답변완료 상태일 때
					tag += '	<div class="fold_answer">\n';
					tag += '		<div>\n';
					tag += '			<div class="answer_body">' + item.ansContent.replace(/(\r\n)/g, '<br/>') + '</div>\n';
					tag += '			<div class="answer_foot">\n';
					tag += '				<span class="data">' + item.ansDt + '</span>\n';
					tag += '			</div>\n';
					tag += '		</div>\n';
					tag += '	</div>\n';
				}
				
				tag += '	</div>\n';
				tag += '</li>\n';

				$('#ulQna').append(tag);
			});
			$('#divQna').removeClass('nodata');
		} else {
// 			let tag = '<li>내역이 없습니다.</li>\n';
// 			$('#ulQna').append(tag);
			$('#divQna').addClass('nodata');
		}

		if (result.paging.pageable.totalPage > result.paging.pageable.pageNo) {
			$('#btnQnaMore').parent().show();
			$('#qnaForm input[name=pageNo]').val(result.paging.pageable.pageNo + 1);
		} else {
			$('#btnQnaMore').parent().hide();
		}
	}
	
	// 삭제
	let fnDeleteQna = function(counselSq) {
		mcxDialog.confirm("등록된 내용을 삭제하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				let params = new Object();
				params.counselSq = counselSq;
				
				var jsonData = JSON.stringify(params);
				gagajf.ajaxJsonSubmit('/callcenter/onetoone/qna/delete'
						, jsonData
						, function() {
							$('#qnaForm input[name=pageNo]').val(1);
							$('#ulQna').html('');
							$('#btnQnaMore').trigger('click');
							
							fnGetOneToOneQnaCountInfo();
						});
			}
		});
	}
	
	// JQUERY를 이용한 버튼 모달 팝업
	$(".questionMy").click(function() {
		$("#myQuestion").modal("show");
	});
	
	// 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) {
					// 업로드한 파일명 설정
					$(".pics").children().last().append("<input type='hidden' name='orgFileNmArr' value='"+result.oldFileName+"'>");
					$(".pics").children().last().append("<input type='hidden' name='sysFileNmArr' value='"+result.newFileName+"'>");
				}
		);
	}
	
	// 저장
	$('#btnSaveQna').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#qnaRegisterForm'))
			return false;

		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#qnaRegisterForm').prop('action')
						, '#qnaRegisterForm'
						, function() {
							cfnGoToPage(_PAGE_ONETOONE_QNA);
						}
				); 
			}
		});
	});
	
	// 문의유형 선택 시
	var fnChangeCounselClsf = function(counselClsf) {
		var actionUrl = '/callcenter/onetoone/qna/answer/template/' + counselClsf;
		$.get(actionUrl
			, function(data) {
				if (!gagajf.isNull(data)) {
					$('textarea[name=questContent]').val(data);
					$('.doc_contactus').trigger('keyup');
				} else {
					// 초기화
					$('textarea[name=questContent]').val('');
					$('.doc_contactus').trigger('keyup');
				}
			});
	}
	
	let fnGetOneToOneQnaCountInfo = function() {
		$.get('/callcenter/onetoone/qna/count/info'
				, function(result) {
					$('#qnaTotCnt').html(result.totCnt);
					$('#qnaAnsCnt').html(result.ansCnt);
					$('#qnaIngCnt').html(result.ingCnt);
				}
			);
	}
/*]]>*/
</script>

</th:block>

</body>
</html>