483 lines
15 KiB
Plaintext
483 lines
15 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>문자온</title>
|
|
|
|
<script type="text/javascript">
|
|
var pageType = '${msgcampain}';
|
|
var loginVO = '${loginVO}';
|
|
var popCustomScrT=0;
|
|
$(document).ready(function(){
|
|
|
|
// 맞춤제작 셈플 리스트
|
|
customSampleListAjax(1);
|
|
|
|
customPopup();
|
|
customPopupDetail();
|
|
|
|
// 맞춤제작 팝업 내보관함 리스트 로그인이 완료된 경우에만 로드되도록
|
|
if(loginVO != "" && loginVO != null){
|
|
myCustomListAjax(1);
|
|
}
|
|
|
|
// 전체,기업, 개인 선택 옵션 처리
|
|
$('.tDep1_mType').click(function(){
|
|
|
|
var mType = $(this).find('.on_active').text();
|
|
var form = document.customSampleForm;
|
|
|
|
if(mType == "전체"){
|
|
|
|
form.memberType.value = "";
|
|
|
|
}else if(mType == "기업"){
|
|
|
|
form.memberType.value = "B";
|
|
|
|
}else{
|
|
|
|
form.memberType.value = "P";
|
|
|
|
}
|
|
|
|
//문자 리스트 불러오기
|
|
form.letterType.value = "C";
|
|
form.categoryCode.value = "";
|
|
form.hashTag.value = "";
|
|
form.pageIndex.value = 1;
|
|
|
|
//문자 리스트 불러오기
|
|
customSampleListAjax(1);
|
|
});
|
|
|
|
$('.tDep1_cateCode').click(function(){ // 카테고리 선택 시 옵션 처리
|
|
|
|
var cateCode = $(this).find('.on').attr("value");
|
|
var form = document.customSampleForm;
|
|
|
|
if(cateCode == "all"){ //전체 선택시
|
|
cateCode = "";
|
|
} else {
|
|
//카테고리 코드 클릭 시 해쉬태그 초기화 후 전체 선택
|
|
form.hashTag.value="";
|
|
$('.tDep2_hashTag').find('.on').removeClass('on');
|
|
$('.tDep2_hashTag').find('.hashAll').addClass('on');
|
|
}
|
|
|
|
form.categoryCode.value = cateCode;
|
|
form.pageIndex.value = 1;
|
|
|
|
// 맞춤제작 셈플 리스트
|
|
var pageUnit = $("#CPageUnit").val();
|
|
customSampleListAjax(1);
|
|
});
|
|
|
|
$('.tDep2_hashTag').click(function(){ //해시 태그 선택 시 옵션 처리
|
|
var hashTag = $(this).find('.on').attr("value");
|
|
var form = document.customSampleForm;
|
|
|
|
//해쉬태그 클릭 시 카테고리코드 초기화 후 전체 선택
|
|
form.categoryCode.value="";
|
|
$('.tDep1_cateCode').find('.on').removeClass('on');
|
|
$('.tDep1_cateCode').find('.cateAll').addClass('on');
|
|
|
|
form.hashTag.value = hashTag;
|
|
form.pageIndex.value = 1;
|
|
|
|
//문자 리스트 불러오기
|
|
customSampleListAjax(1);
|
|
});
|
|
|
|
if(pageType == "msgcampain"){
|
|
$(".tDep1_cateCode a").each(function(index, item){
|
|
if($(this).text() == "선거"){
|
|
$('.tDep1_cateCode').find('.on').removeClass('on');
|
|
$(this).addClass('on');
|
|
}
|
|
})
|
|
}
|
|
});
|
|
|
|
function fnCPageUnit(){
|
|
var pageUnit = $("#CPageUnit").val();
|
|
document.customSampleForm.pageUnit.value = pageUnit;
|
|
customSampleListAjax(1);
|
|
}
|
|
|
|
function fnMPageUnit(){
|
|
var pageUnit = $("#myPageUnit").val();
|
|
document.myCustomForm.pageUnit.value = pageUnit;
|
|
customSampleListAjax(1);
|
|
}
|
|
|
|
// 맞춤제작 셈플 리스트
|
|
function customSampleListAjax(pageNo){
|
|
document.customSampleForm.pageIndex.value = pageNo;
|
|
var sendData= $(document.customSampleForm).serializeArray();
|
|
$("#customSampleLoad").load("/web/mjon/custom/selectMsgCustomSampleListAjax.do", sendData ,function(response, status, xhr){
|
|
photoLayerView();
|
|
});
|
|
}
|
|
|
|
//맞춤제작 내보관함 리스트
|
|
function myCustomListAjax(pageNo){
|
|
|
|
if(!fn_cmndataValueChk("startDate", "endDate", 12)){
|
|
return;
|
|
};
|
|
|
|
document.myCustomForm.pageIndex.value = pageNo;
|
|
var sendData= $(document.myCustomForm).serializeArray();
|
|
$("#myCustomLoad").load("/web/mjon/custom/selectMsgMyCustomListAjax.do", sendData ,function(response, status, xhr){
|
|
photoLayerView();
|
|
});
|
|
}
|
|
|
|
//맞춤제작 내보관함 정렬 조회
|
|
function fnMyCustomSearchListOrd(){
|
|
|
|
var form = document.myCustomForm;
|
|
var sortOrd = form.searchSortOrd.value;
|
|
|
|
if(sortOrd == 'desc'){
|
|
|
|
form.searchSortOrd.value = 'asc';
|
|
$('#sortCnd').text('등록순');
|
|
|
|
}else{
|
|
|
|
form.searchSortOrd.value = 'desc';
|
|
$('#sortCnd').text('최근순');
|
|
|
|
}
|
|
|
|
//내문자함 내용 검색하기
|
|
myCustomListAjax(1);
|
|
|
|
}
|
|
//맞춤제작 등록 Popup
|
|
function customPopup(){
|
|
$("#customPopup").load("/web/mjon/custom/selectMsgCustomPopupAjax.do", "" ,function(response, status, xhr){
|
|
popupImgList(1);
|
|
});
|
|
}
|
|
|
|
function openMsgCustomPopup() {
|
|
if(loginVO == "" || loginVO == null){
|
|
alert("로그인 후 이용이 가능합니다.");
|
|
return false;
|
|
} else {
|
|
$("#customPopupOpen").trigger("click");
|
|
}
|
|
$("#customType04").hide();
|
|
popCustomScrT=$(window).scrollTop();
|
|
popScrTarget();
|
|
}
|
|
|
|
//맞춤제작 등록 Popup
|
|
function customPopupDetail(){
|
|
$("#customPopupDetail").load("/web/mjon/custom/MsgCustomVeiwPopupAjax.do", "" ,function(response, status, xhr){
|
|
|
|
});
|
|
}
|
|
|
|
function linkPhoPage(pageNo){
|
|
customSampleListAjax(pageNo);
|
|
}
|
|
|
|
function myCustomPage(pageNo){
|
|
myCustomListAjax(pageNo);
|
|
}
|
|
|
|
function fnCustomImgSendMsg(atchFileId, fileSn, strImgPath){
|
|
|
|
var form = document.customImgSendForm;
|
|
|
|
form.atchFileId1.value = atchFileId;
|
|
form.fileSn.value = fileSn;
|
|
form.strImgPath.value = strImgPath;
|
|
form.customImgFlag.value = "Y";
|
|
|
|
form.action = "<c:url value='/web/mjon/msgdata/selectMsgDataView.do'/>";
|
|
form.submit();
|
|
|
|
}
|
|
|
|
$(function(){
|
|
sitemapTabView();
|
|
});
|
|
function sitemapTabView(){
|
|
var oldUrl=window.location.href;
|
|
var idx=oldUrl.slice(-1);
|
|
var n=oldUrl.indexOf('?');
|
|
var changeUrl=oldUrl.slice(0,n);
|
|
|
|
/* if(typeof (history.pushState) != 'undefined' && oldUrl.indexOf('?') !== -1){
|
|
history.pushState(null, null, changeUrl);
|
|
}else{} */
|
|
if(oldUrl.indexOf('?') !== -1){
|
|
$('.tabType4 li').removeClass('active').eq(idx-1).addClass('active');
|
|
$('.custom_content').removeClass('current');
|
|
$('.custom_content.custom'+idx).addClass('current');
|
|
|
|
TabType4(this, idx);
|
|
}
|
|
}
|
|
|
|
$(window).on('load',function(){
|
|
setTimeout(function(){
|
|
popScrTarget();
|
|
},500);
|
|
});
|
|
|
|
function popScrTarget(){
|
|
var closeTarget=$('.custom_layer .tooltip-close');
|
|
closeTarget.attr('onclick','popScrCloseSetting();');
|
|
}
|
|
|
|
function popScrCloseSetting(){
|
|
setTimeout(function(){
|
|
$(window).scrollTop(popCustomScrT);
|
|
},1);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- content 영역 -->
|
|
<div class="inner">
|
|
<input type="hidden" id="msgcampain" value="${msgcampain}"/>
|
|
<!-- 공통 visal -->
|
|
<div class="custom_visual">
|
|
<div class="custom_visual_image"></div>
|
|
</div>
|
|
<!-- send top -->
|
|
<div class="send_top">
|
|
<!-- tab button -->
|
|
<ul class="tabType4">
|
|
<li class="tab active">
|
|
<button type="button" onclick="TabType4(this,'1');">맞춤제작 샘플</button>
|
|
</li>
|
|
<li class="tab">
|
|
<button type="button" onclick="TabType4(this,'2');">제작방법 및 이용안내</button>
|
|
</li>
|
|
<li class="tab">
|
|
<button type="button" onclick="TabType4(this,'3');">내보관함</button>
|
|
</li>
|
|
</ul>
|
|
<form id="customImgSendForm" name="customImgSendForm" method="post">
|
|
<input type="hidden" id="atchFileId1" name="atchFileId1" value=""/>
|
|
<input type="hidden" id="fileSn" name="fileSn" value=""/>
|
|
<input type="hidden" id="strImgPath" name="strImgPath" value=""/>
|
|
<input type="hidden" id="customImgFlag" name="customImgFlag" value="N"/>
|
|
</form>
|
|
<!--// tab button -->
|
|
<form id="customSampleForm" name="customSampleForm" method="post">
|
|
<input type="hidden" name="pageIndex" />
|
|
<input type="hidden" name="hashTag" id="hashTag" />
|
|
<input type="hidden" name="letterType" id="letterType" />
|
|
<input type="hidden" name="memberType" id="memberType" />
|
|
<input type="hidden" name="pageUnit" id="pageUnit" value="${searchVO.pageUnit}"/>
|
|
<input type="hidden" name="categoryCode" id="categoryCode"
|
|
<c:if test="${msgcampain eq 'msgcampain'}">
|
|
value="${searchVO.categoryCode}"
|
|
</c:if>
|
|
/>
|
|
<!-- tab content1 맞춤제작 샘플 -->
|
|
<div class="custom_content current custom1" id="tab4_1">
|
|
<div class="area_tabs">
|
|
<div class="top_tab">
|
|
<!-- <div class="tab_depth1 tDep1_mType">
|
|
<a href="#none" class="on" value="">전체</a>
|
|
<a href="#none" value="B">기업</a>
|
|
<a href="#none" class="on" value="P">개인</a>
|
|
<div class="on_active">전체</div>
|
|
</div> -->
|
|
<div class="customReq">
|
|
<input type="hidden" id="customPopupOpen" data-tooltip="popup01">
|
|
<button type="button" onclick="openMsgCustomPopup(); return false;"><i></i>맞춤제작 요청</button>
|
|
</div>
|
|
<select name="CPageUnit" id="CPageUnit" class="selType2" onChange="fnCPageUnit(); return false;">
|
|
<option value="10">2줄보기</option>
|
|
<option value="20">4줄보기</option>
|
|
<option value="30">6줄보기</option>
|
|
</select>
|
|
</div>
|
|
<div class="bottom_tab">
|
|
<div class="tab_depth3 tDep1_cateCode">
|
|
<a href="#none" class="on cateAll" value="">All</a>
|
|
<a href="#none" value="best">BEST</a>
|
|
<c:forEach var="cateList" items="${cateCodeList}" varStatus="status">
|
|
<a href="#none" value="<c:out value='${cateList.cateCode}'/>"><c:out value="${cateList.cateNm}"/></a>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="tab_depth4 tDep2_hashTag">
|
|
<a href="#none" class="on hashAll" value="">전체</a>
|
|
<c:forEach var="hashList" items="${hashTagList}" varStatus="status">
|
|
<a href="#none" value="${hashList.hashNm}">#<c:out value="${hashList.hashNm}"/></a>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="customSampleLoad">
|
|
</div>
|
|
</div>
|
|
<!--// tab content1 맞춤제작 샘플 -->
|
|
</form>
|
|
<!-- tab content2 제작방법 및 이용안내 -->
|
|
<div class="custom_content custom2" id="tab4_2">
|
|
<div class="heading">
|
|
<h2>제작방법 및 이용안내</h2>
|
|
</div>
|
|
<div class="cont_top">
|
|
<table>
|
|
<caption>제작방법 및 이용안내에 대한 구분, 용도, 가격, 제공방법 표</caption>
|
|
<colgroup>
|
|
<col style="width: 520px;">
|
|
<col style="width: 15%;">
|
|
<col style="width: 15%;">
|
|
<col style="width: 25%;">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">구분</th>
|
|
<th scope="col">용도</th>
|
|
<th scope="col">가격<span>(VAT별도)</span></th>
|
|
<th scope="col">구분</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>문자온 샘플 수정(글자, 색상, 폰트 등)</td>
|
|
<td>문자/카톡</td>
|
|
<td>${customSamplePrice}원</td>
|
|
<td>내보관함/카톡/이메일</td>
|
|
</tr>
|
|
<tr>
|
|
<td>이미지 편집(첨부이미지 1장)</td>
|
|
<td>문자/카톡</td>
|
|
<td>${customEditPrice}원</td>
|
|
<td>내보관함/카톡/이메일</td>
|
|
</tr>
|
|
<tr>
|
|
<td>이미지 편집(첨부이미지 3장이하)</td>
|
|
<td>문자/카톡</td>
|
|
<td>${customEdit3Price}원</td>
|
|
<td>내보관함/카톡/이메일</td>
|
|
</tr>
|
|
<tr>
|
|
<td>텍스트 단순수정</td>
|
|
<td>문자/카톡</td>
|
|
<td>${customTextPrice}원</td>
|
|
<td>내보관함/카톡/이메일</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="custom_notice">
|
|
<div>
|
|
<i></i>
|
|
<p>유의사항</p>
|
|
</div>
|
|
<ul>
|
|
<li>
|
|
<p>- 모든 완성본은 1장만 제공됩니다.</p>
|
|
<p>- 제작 완료 후 추가 수정 시 별도 비용이 발생됩니다.</p>
|
|
</li>
|
|
<li>
|
|
<p>- 제작기간은 영업일 기준 1~3일 정도 소요됩니다.</p>
|
|
<p>- 제작 완료된 이미지는 내보관함에 자동 저장됩니다.</p>
|
|
</li>
|
|
<li>
|
|
<p>- PSD 원본 파일은 제공하지 않습니다.</p>
|
|
<p>- 제작비용은 신청 시 즉시 차감됩니다.</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="cont_bottom">
|
|
<div class="custom_step">
|
|
<div class="step_title">
|
|
<p><span>샘플</span> 제작 요청방법</p>
|
|
<span class="summary">전문 디자이너가 직접 제작하는 고퀄리티 맞춤제작 서비스</span>
|
|
</div>
|
|
<ol>
|
|
<li>
|
|
<div class="step">STEP <strong>01</strong></div>
|
|
<div class="text">문자온 문자 샘플 목록에서<br><strong>원하는 이미지 선택</strong></div>
|
|
</li>
|
|
<li>
|
|
<div class="step">STEP <strong>02</strong></div>
|
|
<div class="text">작업 요청내역 입력 후<br><strong>신청하기 버튼 클릭</strong></div>
|
|
</li>
|
|
<li>
|
|
<div class="step">STEP <strong>03</strong></div>
|
|
<div class="text"><strong>내보관함</strong>에서<br>완성된 이미지 확인<span>(문자, 카톡 등)</span></div>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--// tab content2 제작방법 및 이용안내 -->
|
|
|
|
<!-- tab content3 내 보관함 -->
|
|
<form id="myCustomForm" name="myCustomForm" method="post">
|
|
<input type="hidden" name="pageIndex" />
|
|
<input type="hidden" name="pageUnit" id="pageUnit" value="${searchVO.pageUnit}"/>
|
|
<input name="searchSortOrd" type="hidden" value="desc"/>
|
|
<div class="custom_content custom3" id="tab4_3">
|
|
<div class="search_wrap clearfix">
|
|
<div class="btn_left">
|
|
<span>· 기간</span>
|
|
<div class="calendar_wrap">
|
|
<input type="text" class="startDate inp calendar" title="검색 시작일" id="startDate" name="searchStartDate" value="${myStartDate}" data-datecontrol="true">
|
|
<span class="dateEtc">~</span>
|
|
<input type="text" class="endDate inp calendar" title="검색 종료일" id="endDate" name="searchEndDate" value="${myEndDate}" data-datecontrol="true">
|
|
</div>
|
|
<div class="search">
|
|
<!-- <label for="searchWord" class="label"></label> -->
|
|
<!-- <input type="text" id="searchWord" name="searchWord" placeholder="내보관함 검색" onfocus="this.placeholder=''" onblur="this.placeholder='내보관함 검색'"> -->
|
|
<button type="button" class="btnType btnType2" onclick="javascript:myCustomListAjax(1); return false;">검색</button>
|
|
</div>
|
|
</div>
|
|
<div class="btn_right">
|
|
<button type="button" id="sortOrd" name="sortOrd" onClick="javascript:fnMyCustomSearchListOrd(); return false;"><span id="sortCnd">최근순</span><i></i></button>
|
|
<!-- <label for="" class="label">검색조건 선택</label>
|
|
<select name="" id="" class="selType2">
|
|
<option value="">전체보기</option>
|
|
<option value="">전체보기</option>
|
|
<option value="">전체보기</option>
|
|
</select> -->
|
|
<label for="pageUnit" class="label"></label>
|
|
<select name="myPageUnit" id="myPageUnit" class="selType2" onChange="fnMPageUnit(); return false;">
|
|
<option value="10">2줄보기</option>
|
|
<option value="20">4줄보기</option>
|
|
<option value="30">6줄보기</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="myCustomLoad">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!--//tab content3 내 보관함 -->
|
|
<!-- 맞춤제작 요청 레이어 팝업 -->
|
|
<div class="tooltip-wrap" id="customPopup">
|
|
</div>
|
|
<!--// 맞춤제작 요청 레이어 팝업 -->
|
|
<!-- 내 보관함 상세보기 레이어 팝업 -->
|
|
<div class="tooltip-wrap" id="customPopupDetail">
|
|
</div>
|
|
<!--// 내 보관함 상세보기 레이어 팝업 -->
|
|
</div>
|
|
<!--// send top -->
|
|
</div>
|
|
<!--// content 영역 -->
|
|
</body>
|
|
</html>
|