style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<!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  : FaqFormMob.html
 * @desc    : FAQ 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">
	<main role="" id="" class="container cs">
		<!-- 고객센터 Gnb -->
		<nav class="pnb" id="callcenterGnb">
		</nav>
		<!-- //고객센터 Gnb -->
		
		<!-- ★ 컨텐츠 시작 -->
		<section class="cs_faq_1">
			<div class="inner sr-only"><h2 class="title">FAQ 리스트</h2></div>
			<div class="inner">
				<!-- 탭 -->
				<div class="search_wrap">
					<form id="faqForm" name="faqForm" action="#" th:action="@{'/callcenter/faq/list'}" th:method="post" onsubmit="fnSearchFaq(); return false;">
						<input type="hidden" name="faqType"/>
						<input type="hidden" name="pageNo" value ="1"/>
						<input type="hidden" name="pageSize" value ="10"/>
						<input type="text" class="form_control cs_search_input" name="searchTxt" placeholder="검색어를 입력해주세요" maxlength="50"/>
						<button class="btn_x" type="button" onclick="fnRemoveFaq()"><span>검색어 지우기</span></button> <!-- 210514_ 추가 : 검색어 지우기 버튼 [.btn_x] 추가. -->
						<button class="btn_sch" type="button" onclick="fnSearchFaq(); return false;">search</button> <!-- 210514_ 추가 : .btn_sch 클래스 추가. -->
						<p>찾으시는 문의 내용이 없으시면 1:1 문의를 이용해 주세요.</p>
					</form>
				</div>
				<div class="fold_nav">
					<ul id="ulFaqType">
						<li><a href="#none;" onclick="fnGetList(this, '', true);" class="on">전체</a></li>
						<li th:if="${faqTypeList != null and !faqTypeList.empty}" th:each="oneData, status : ${faqTypeList}">
							<a href="javascript:void(0);" th:onclick='fnGetList(this, [[${oneData.cd}]], true);' th:text="${oneData.cdNm}">상품문의</a>
						</li>
					</ul>
				</div>
				<!-- //탭 -->
			</div>
			<div class="inner wide">
				<!-- 폴딩리스트 -->
				<div class="ui_row" id="divFaq"> <!-- 데이터 없을시 클래스 nodata 추가 -->
					<div class="foldGroup case1">
						<!-- 리스트1 -->
						<ul id="ulFaq">
						</ul>
						<!-- //리스트1 -->
					</div>
				</div>
				<div class="ui_foot">
					<button class="btn btnM btnIcon_more" id="btnFaqMore">더보기</button>
				</div>
				<!-- //폴딩리스트 -->
			</div>
		</section>
		<!-- ★ 컨텐츠 종료 -->	
		
	</main>
	
<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		// 타이틀명
		$('#htopTitle').text('고객센터');
		
		// 고객센터 GNB 설정
		fnSetCallcenterGnb(1);
		
		$('#btnFaqMore').trigger('click');
	});
	
	// 더보기
	$('#btnFaqMore').on('click', function() {
		gagajf.ajaxFormSubmit($('#faqForm').prop('action'), '#faqForm', fnGetListCallback);
	});
	
	// FAQ 목록
	var fnGetList = function(obj, faqType, isCallTab) {
		if (typeof(obj) != 'undefined') {
			$li = $(obj).parent('li').parent('ul').find('li>a');
			$li.each(function(i) {
				$(this).removeClass('on');
			});
			$(obj).addClass('on');
		}
		
		if (!gagajf.isNull(faqType)) {
			$('#faqForm input[name=faqType]').val(faqType);
		} else {
			$('#faqForm input[name=faqType]').val('');
		}
		
		if (isCallTab) {
			$('#faqForm input[name=searchTxt]').val('');
		}
		
		$('#faqForm input[name=pageNo]').val(1);
		
		$('#ulFaq').html('');
		
		$('#btnFaqMore').trigger('click');
	}
	
	// FAQ 목록 콜백함수
	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="prod">' + item.faqTypeNm + '</span>\n';
				tag += '					</div>\n';
				tag += '					<div class="lap2"><span>' + item.question + '</span></div>\n';
				tag += '				</div>\n';
				tag += '			</div>\n';
				tag += '		</a>\n';
				tag += '	</div>\n';
				tag += '	<div class="fold_cont">\n';
				tag += '		<div class="fold_answer">\n';
				tag += '			<div class="answer_body">' + item.answer.escapeHtml().replace(/\n/g,'<br/>') + '</div>\n';
				tag += '		</div>\n';
				tag += '	</div>\n';
				tag += '</li>\n';
				
				$('#ulFaq').append(tag);
			});
			$('#divFaq').removeClass('nodata');
		} else {
			// 퍼블로 처리함으로 아래 2줄 주석 처리
// 			let tag = '<li>검색어 조건에 맞는 항목이 없습니다.</li>\n';
// 			$('#ulFaq').append(tag);
			$('#divFaq').addClass('nodata');
		}

		if (result.paging.pageable.totalPage > result.paging.pageable.pageNo) {
			$('#btnFaqMore').parent().show();
			$('#faqForm input[name=pageNo]').val(result.paging.pageable.pageNo + 1);
		} else {
			$('#btnFaqMore').parent().hide();
		}
	}
	
	// 검색어 입력
	let fnSearchFaq = function() {
		if (gagajf.isNull($('#faqForm input[name=searchTxt]').val())) {
			mcxDialog.alert('검색어를 입력해 주세요.');
			return;
		}
		
		$('#faqForm input[name=faqType]').val('');
		
// 		$('#btnFaqMore').trigger('click');
		fnGetList($('#ulFaqType>li').eq(0).find('a'));
	}
	
	// 검색어 삭제
	let fnRemoveFaq = function() {
		$("#faqForm input[name=searchTxt]").val('');
		
	}
/*]]>*/
</script>

</th:block>

</body>
</html>