File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<%@ 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="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("input:text[numberOnly]").on("keyup", function() {
$(this).val($(this).val().replace(/[^0-9]/g,""));
});
$("input[name='customType']").change(function(e){
var customId = "customPay"+$(this).val();
selectPayCalculation(customId);
});
// 제작형태 변경시 이미지 등록된 값 초기화 설정
// $("input[name='customType']").change(function(e){
// var popupType = $("#customPopupType").val();
// if(popupType == "insert"){
// $("[id^='tempImg']").val('');
// $("[data-tempImg]").children("img").remove(); //이미지 테크 제거
// $("[data-tempImg]").children(".img_close").css( 'display', 'none' ); //삭제 이미지 제거
// $("[data-tempImg]").children(".img_add").css( 'display', 'block' ); // 추가 이미지 등록
// $("[data-tempImg]").addClass("no_img"); //li 테그에 클래스 추가
// }
// });
$(".input-image-file").change(function(e){
var id = $(this).attr("id");
var files = $("#"+id)[0].files;
temImg(files);
selectMyImg(this); //파일업로드
});
});
//샘플 이미지 리스트
function popupImgList(pageNo){
var form = document.customPopupImgForm;
var data = new FormData(form);
$.ajax({
cache : false
,url : "<c:url value='/web/mjon/custom/selectCustomPopupImgListAjax.do'/>"
,async:false
,type : 'POST'
,data : data
,dataType:'json'
,processData: false
,contentType: false
,success : function(returnData, status){
if(status == "success") {
$("#scrollPaging").html("");
var html = "";
for(var i=0; i<returnData.resultCustomList.length; i++) {
var strImgPath = returnData.resultCustomList[i].fileStreCours+"/"+returnData.resultCustomList[i].streFileNm + "." +returnData.resultCustomList[i].fileExtsn;
var imgId = returnData.resultCustomList[i].attachFileId;
var fileSn = returnData.resultCustomList[i].fileSn;
html += "<li>";
html += "<a ref='#' onclick='selectAddImg(\""+imgId+"\",\""+fileSn+"\",\"sample\");'>";
html += "<img id='img"+i+"' src='"+strImgPath+"'>";
html += "<input type='hidden' id='"+imgId+"' value='"+strImgPath+"'/>"
html += "</a>";
html += "</li>";
}
$("#scrollPaging").append(html);
scrollbar();
}else{
alert("ERROR!");return;
}
}
,error : function(request , status, error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
}
function selectPayCalculation(customId){
var customPay = $("#"+customId).val();
var userMoney = $("#userMoney").val();
var userBalance = (userMoney - customPay);
if(userBalance < 0){
alert("잔액이 부족합니다. 결제 페이지로 이동됩니다.");
return location.href="/web/member/pay/PayView.do";
}
$("#customAmount").val(customPay);
}
//샘플 이미지 조회
function searchSampleImg() {
$("#scrollPaging").html("");
var form = document.customPopupImgForm;
form.searchKeyword.value = $("#sampleSearching").val();
form.categoryCode.value = $("#sampleTemplate option:selected").val();
popupImgList(1);
}
/*파일 드래그앤 드롭*/
/* 파일등록 */
var _fileIdx = 0;
var _fileForm2 = new Array();
function temImg(files){
var fd = new FormData();
fd.append('file', files[0]);
var tmpObj = new Object();
tmpObj.name = "file_" + _fileIdx;
tmpObj.fileObj = files[0];
_fileForm2.push(tmpObj);
_fileIdx++;
}
//이미지 선택 조건 확인
function selectAddImg(id, fileSn, type){
var typeVal = $("input:radio[name='customType']:checked").val(); // 제작형태
var imgLength = $('.no_img').length; // 등록된 첨부파일 수
if(typeVal != '03'){
if(imgLength != "3"){
alert("더이상 첨부파일을 등록할 수 없습니다.");
return;
}
}else if(typeVal == '03'){
}
if(type == "my"){
$('#'+id).click();
}else if(type == "sample"){
selectSampleImg(id,fileSn);
}
};
//샘플파일 이미지 선택
function selectSampleImg(id, fileSn){
var noImgIdx = $('.no_img').length;
if(noImgIdx != 0){
$('.no_img').each(function(idx) {
var tempImg = $(this).attr("data-tempImg");
$("#"+tempImg).val(id);
$("#"+tempImg+"FileSn").val(fileSn);
var html = "<img src='"+$("#"+id).val()+"'>";
$(this).prepend(html);
$(this).children(".img_close").css( 'display', 'block' );
$(this).children(".img_add").css( 'display', 'none' );
$(this).removeClass("no_img");
return false
});
}else{
alert("이미지를 3개 이상 추가할 수 없습니다.")
}
}
//첨부파일 이미지 선택
function selectMyImg(img){
if (img.files && img.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
imgSrc = e.target.result
$('.no_img').each(function(idx) {
var tempImg = $(this).attr("data-tempImg");
var html = "<img src='"+imgSrc+"'>";
$(this).prepend(html);
$(this).children(".img_close").css( 'display', 'none' );
$(this).children(".img_add").css( 'display', 'none' );
$(this).removeClass("no_img");
return false
});
}
reader.readAsDataURL(img.files[0]);
}
$("#customUploadYn").val("Y");
}
//내보관함 이미지 선택
function selectMyCustomImg(id){
/*
var imgPath = $("#"+id+"_imgPath").val();
var fileId = $("#"+id+"_fileId").val();
var fileSn = $("#"+id+"_fileSn").val();
var noImgIdx = $('.no_img').length;
if(noImgIdx != 0){
$('.no_img').each(function(idx) {
var tempImg = $(this).attr("data-tempImg");
$("#"+tempImg).val(fileId);
$("#"+tempImg+"FileSn").val(fileSn);
var html = "<img src='"+imgPath+"'>";
$(this).prepend(html);
$(this).children(".img_close").css( 'display', 'block' );
$(this).children(".img_add").css( 'display', 'none' );
$(this).removeClass("no_img");
return false
});
}else{
alert("이미지를 3개 이상 추가할 수 없습니다.")
} */
//맞춤제작 완료된 건의 경우 이미지를 추가로 첨부할 수 없도록 수정_220429
$(".custom_put5").hide();
}
// 선택이미지 삭제
function deleteSelectImg(tempId){
$("#"+tempId).val(''); //이미지
$("[data-tempImg="+tempId+"]").children("img").remove(); //이미지 테크 제거
$("[data-tempImg="+tempId+"]").children(".img_close").css( 'display', 'none' ); //삭제 이미지 제거
$("[data-tempImg="+tempId+"]").children(".img_add").css( 'display', 'block' ); // 추가 이미지 등록
$("[data-tempImg="+tempId+"]").addClass("no_img"); //li 테그에 클래스 추가
}
// 맞춤제작 등록
function insertCustomInfo(){
var frm = document.customPopupImgForm;
if(frm.customPhoneNo.value == ''){
alert("연락처를 입력해주세요.");
return;
}
if(frm.customRequest.value == ''){
alert("요청사항을 입력해주세요.");
return;
}
var noImgIdx = $('.no_img').length;
if(noImgIdx == 3){
alert("제작하실 이미지를 등록해 주세요.");
return;
}
var data = new FormData(frm);
_fileForm2.forEach(function(obj, idx) {
if (obj) data.append("file"+idx, obj.fileObj);
});
$.ajax({
type: "POST"
, enctype: 'multipart/form-data'
, url: "/web/mjon/custom/insertCustomImgInfoAjax.do"
, data: data
, dataType:'json'
, async: false
, processData: false
, contentType: false
, cache: false
, success: function (returnData, status) {
if(returnData.result == 'success'){
alert("그림문자 맞춤제작이 접수되었습니다.");
$("body").find(".mask").removeClass("on");
customPopup();
location.href = "/web/mjon/custom/selectMsgCustomView.do";
} else if(returnData.result == 'notMoney'){
alert("보유 잔액이 부족 합니다.");
}
}
,error: function (e) { alert("저장에 실패하였습니다."); console.log("ERROR : ", e); }
});
}
function customProvisionView(obj){
var v=$(obj).val();
if(v == 02 || v == 03){
$('.custom_provision').addClass('active');
}else{
$('.custom_provision').removeClass('active').find('input[type=radio]').prop('checked','');
}
}
</script>
</head>
<body>
<form id="customPopupImgForm" name="customPopupImgForm" method="post">
<input type="hidden" id="userMoney" name="userMoney" value="${userMoney}"/>
<input type="hidden" id="customAmount" name="customAmount" value=""/>
<input type="hidden" id="customPopupType" name="customPopupType" value=""/>
<input type="hidden" id="categoryCode" name="categoryCode" value=""/>
<input type="hidden" id="searchKeyword" name="searchKeyword" value=""/>
<input type="hidden" id="tempImg1" name="tempImg1" value="">
<input type="hidden" id="tempImg1FileSn" name="tempImg1FileSn" value="">
<input type="hidden" id="tempImg2" name="tempImg2" value="">
<input type="hidden" id="tempImg2FileSn" name="tempImg2FileSn" value="">
<input type="hidden" id="tempImg3" name="tempImg3" value="">
<input type="hidden" id="tempImg3FileSn" name="tempImg3FileSn" value="">
<input type="hidden" id="customUploadYn" name="customUploadYn" value="N">
<div class="popup-com custom_layer popup01" tabindex="0" data-tooltip-con="popup01" data-focus="popup01" data-focus-prev="popup01-close">
<div class="popup_heading">
<p>맞춤제작</p>
<button type="button" class="tooltip-close" data-focus="popup01-close">
<img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기">
</button>
</div>
<div class="layer_in">
<div class="header_cont">
<h3>템플릿 선택</h3>
<div class="search_box">
<label for="" class="label">추천 템플릿 검색 입력</label>
<input type="text" name="sampleSearching" id="sampleSearching" placeholder="템플릿 검색" onfocus="this.placeholder=''" onblur="this.placeholder='템플릿 검색'" onkeyup="searchSampleImg()">
<label for="" class="label">추천 템플릿 검색</label>
<button>
<img src="/publish/images/popup/search.png" alt="검색">
</button>
<label for="" class="label">추천 템플릿 선택</label>
<select name="sampleTemplate" id="sampleTemplate" onchange="searchSampleImg();">
<option value="">All</option>
<c:forEach items="${cateConfList}" var="cateList">
<option value="<c:out value='${cateList.cateCode}'/>"><c:out value="${cateList.cateNm}"/></option>
</c:forEach>
</select>
</div>
<div class="contWrap_scroll" id="scrollPagingWrap">
<ul class="contWrap" id="scrollPaging">
</ul>
</div>
</div>
<div class="body_cont">
<p>
<span class="text_deco3"></span>제작비용
</p>
<table>
<caption>제작비용 형태, 제공방법, 연락처, 요청사항, 이미지 등록 표</caption>
<colgroup>
<col style="width: 105px;">
<col style="width: auto">
</colgroup>
<tbody>
<tr class="custom_put1">
<th>제작형태</th>
<td>
<c:forEach var="code" items="${codeResult}" varStatus="status">
<div id="customType${code.code}">
<input id="radio${status.count}" type="radio" name="customType" value="${code.code}" onclick="customProvisionView(this);">
<label for="radio${status.count}">${code.codeNm}</label><span><fmt:formatNumber value="${code.codeDc}" type="number" pattern="####,###"/>원</span>
<input type="hidden" id="customPay${code.code}" name="customPay${code.code}" value="${code.codeDc}">
</div>
</c:forEach>
</td>
</tr>
<tr class="custom_put2">
<th>제공방법</th>
<td>
<input type="checkbox" id="storage" checked="checked"> <label for="storage">내보관함</label>
<div class="custom_provision">
<input id="radio11" type="radio" name="customProvision" value="1">
<label for="radio11">카카오톡</label>
<input id="radio12" type="radio" name="customProvision" value="2">
<label for="radio12">이메일</label>
</div>
<!-- <span>중복선택 가능(최대2개)</span> -->
</td>
</tr>
<tr class="custom_put3">
<th>연락처</th>
<td>
<label for="" class="label"></label>
<input type="text" name="customPhoneNo" numberOnly placeholder="완료 메세지를 받을 전화번호를 기재 해주세요." onfocus="this.placeholder=''" onblur="this.placeholder='완료 메세지를 받을 전화번호를 기재 해주세요.'">
</td>
</tr>
<tr class="custom_put4">
<th>요청사항</th>
<td>
<label for="" class="label"></label>
<textarea name="customRequest" placeholder="수정사항을 상세히 기입해 주세요.이미지위치, 문구위치, 원하시는 폰트, 색상등을 적어주세요. 미 기입시 기존 이미지의 폰트, 색상이 그대로 사용됩니다.약도를 추가할 경우 지번을 정확히 입력해 주세요" onfocus="this.placeholder=''" onblur="this.placeholder='수정사항을 상세히 기입해 주세요.이미지위치, 문구위치, 원하시는 폰트, 색상등을 적어주세요. 미 기입시 기존 이미지의 폰트, 색상이 그대로 사용됩니다.약도를 추가할 경우 지번을 정확히 입력해 주세요'"></textarea>
</td>
</tr>
<tr class="custom_put5">
<th>이미지 등록</th>
<td>
<ul>
<li class="no_img" data-tempImg="tempImg1">
<button type="button" class="img_add" title="이미지 추가 버튼" style="display: block;" onclick="selectAddImg('input-file1','','my');"><i></i></button>
<button type="button" class="img_close" title="이미지 삭제 버튼" style="display: none;" onclick="deleteSelectImg('tempImg1')"><i></i></button>
<input type="file" accept=".jpg" class="input-image-file" multiple id="input-file1" style="width:0px !important;height:0px !important"/>
</li>
<li class="no_img" data-tempImg="tempImg2">
<button type="button" class="img_add" title="이미지 추가 버튼" style="display: block;" onclick="selectAddImg('input-file2','','my');"><i></i></button>
<button type="button" class="img_close" title="이미지 삭제 버튼" style="display: none;" onclick="deleteSelectImg('tempImg2')"><i></i></button>
<input type="file" accept=".jpg" class="input-image-file" multiple id="input-file2" style="width:0px !important;height:0px !important"/>
</li>
<li class="no_img" data-tempImg="tempImg3">
<button type="button" class="img_add" title="이미지 추가 버튼" style="display: block;" onclick="selectAddImg('input-file3','','my');"><i></i></button>
<button type="button" class="img_close" title="이미지 삭제 버튼" style="display: none;" onclick="deleteSelectImg('tempImg3')"><i></i></button>
<input type="file" accept=".jpg" class="input-image-file" multiple id="input-file3" style="width:0px !important;height:0px !important"/>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<div class="custom_btn">
<button type="button" onclick="insertCustomInfo()">신청하기</button>
<button type="button" class="tooltip-close" data-focus="popup01-close" data-focus-next="popup01">취소</button>
</div>
</div>
</div>
</div>
</form>
</body>