style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/CallcenterLayoutWeb">
<!--
 *******************************************************************************
 * @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 th:text="${qnaCountInfo.totCnt}">999</p>
						<p>총 문의</p>
					</li>
					<li>
						<p th:text="${qnaCountInfo.ansCnt}">456</p>
						<p>답변완료</p>
					</li>
					<li>
						<p th:text="${qnaCountInfo.ingCnt}">690</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" id="nextPage">
					<button class="btn btnM btnIcon_more" onclick="fnGetList();">더보기</button>
				</div>
			</div>
		</section>
		<!-- ★ 컨텐츠 종료 -->
	</main>
	
	<div class="cs_contactUs_my_footer">
		<a href="#none" class="questionMy"><p>1:1문의</p></a>
	</div>
	
	<!-- 모달영역 -->
	<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">
									<div class="swiper-slide"><div class="pop_img" style="background-image: url(/images/mo/cs_pop_people.png);"></div></div>
									<div class="swiper-slide"><div class="pop_img" style="background-image: url(/images/mo/cs_pop_people2.png);"></div></div>
								</div>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</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 src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	// JQUERY를 이용한 버튼 모달 팝업
	$(".thumb_pic").click(function() {
		$("#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() {
		// 고객센터 GNB 설정
		fnSetCallcenterGnb(2);
		
		fnGetList(1);
	});
	
	let fnGetList = function(page) {
		// Initialize a pagination
		gagaPaging.init('qnaForm', fnGetListCallback, 'pageNav', 10);

		// Load data
		gagaPaging.load(page);
	}
	
	var fnGetListCallback = function(result) {
		$('#ulQna').html('');

		// 목록
		if (result.dataList != null && result.dataList.length > 0) {
			$.each(result.dataList, function(idx, item) {
				let tag = '<li>\n';
				tag += '	<div class="inner wide">\n';
				tag += '		<div class="ui_row">\n'; //데이터 없을시 클래스 nodata 추가
				tag += '			<div class="foldGroup case2">\n';
				tag += '				<ul>\n';
				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>' + item.questContent + '</p>\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 += '					</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 += '					</span>\n';
					}
					
					tag += '				</p>\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 + '</div>\n';
					tag += '					<div class="answer_foot">\n';
					tag += '						<span class="data">' + item.ansDt + '</span>\n';
					
					if (item.ansStat == 'G060_10') { // 처리중일때
// 					tag += '						<button type="button" class="btn_delete" onclick="fnDeleteQna(' + item.counselSq + ');"><span>삭제</span></button>
					}
					tag += '					</div>\n';
					tag += '				</div>\n';
					tag += '			</div>\n';
				}
				
				tag += '		</div>\n';
				tag += '	</div>\n';
				tag += '</li>\n';

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

		// 더보기 버튼 노출/미노출
		if (result.paging.pageable.totalPage == result.paging.pageable.currPage) {
			$('#nextPage').hide();
		} else {
			$('#nextPage').show();
		}
	}
	
	// 삭제
	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() {
							fnGetList();
						});
			}
		});
	}
/*]]>*/
</script>

</th:block>

</body>
</html>