style24.front/src/main/webapp/WEB-INF/views/mob/popup/DelvAddrModifyPopMob.html

<form name="deliveryModifyForm" id="deliveryModifyForm">
	<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
	
	<div class="modal-header htop">
		<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
	</div>
	<div class="modal-body">
		<div class="pop_cont">
			<div class="inner wide">
				<div class="tbl_wrap">
					<div class="tbl tbl_dlvr">
						<table>
							<colgroup>
								<col width="*">
							</colgroup>
							<tbody>
								<tr>
									<td>
										<span class="sr-only">받는분</span>
										<input type="text"class="form_control" name="recipNm" placeholder="받는분" th:value="${deliveryAddrInfo.recipNm}">
									</td>
								</tr>
								<tr>
									<td>
										<span class="sr-only">휴대폰 번호</span>
										<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" th:value="${deliveryAddrInfo.recipPhnno}">
									</td>
								</tr>
								<tr>
									<td>
										<span class="sr-only">배송 주소</span>
										<div class="input_wrap">
											<input type="hidden" name="recipZipcode" placeholder="우편번호" th:value="${deliveryAddrInfo.recipZipcode}" readonly="readonly">
											<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소"th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
							
											<input type="text" class="form_control" placeholder="배송주소" name="recipAddr" th:value="${deliveryAddrInfo.recipZipcode} + '    '+ ${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
											<input type="text" class="form_control" placeholder="상세주소" name="recipDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
											<button type="button" class="btn btn_sch" onclick="fnOpenDaumAddr();">
												<span class="sr-only">우편번호 찾기</span>
											</button>
										</div>
										<div class="default_addrs">
											<div class="form_field">
												<th:block th:if="${deliveryAddrInfo.defaultYn} == 'Y'">
													<input id="chk-default-addrs1" type="checkbox" name="defaultYn" checked>
												</th:block>
												<th:block th:if="${deliveryAddrInfo.defaultYn} == 'N'">
													<input id="chk-default-addrs1" type="checkbox" name="defaultYn">
												</th:block>
												<label for="chk-default-addrs1"><span>기본배송지로 등록</span></label>
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="tbl_wrap">
					<div class="tbl_tit">
						<h3>배송 요청사항</h3>
					</div>
					<div class="tbl tbl_request">
						<table>
							<colgroup>
								<col width="*">
							</colgroup>
							<tbody>
								<tr>
									<th class="sr-only">문 앞</th>
									<td>
										<div class="form_field">
											<input type="radio" name="rdi-request1" id="rdi-1" value="문 앞">
											<label for="rdi-1"><span>문 앞</span></label>
										</div>
									</td>
								</tr>
								<tr>
									<th class="sr-only">직접 받고 부재 시 문 앞</th>
									<td>
										<div class="form_field">
											<input type="radio" name="rdi-request1" id="rdi-2" value="직접 받고 부재 시 문 앞">
											<label for="rdi-2"><span>직접 받고 부재 시 문 앞</span></label>
										</div>
									</td>
								</tr>
								<tr>
									<th class="sr-only">경비실</th>
									<td>
										<div class="form_field">
											<input type="radio" name="rdi-request1" id="rdi-3" value="경비실"><label
												for="rdi-3"><span>경비실</span></label>
										</div>
									</td>
								</tr>
								<tr>
									<th class="sr-only">택배함</th>
									<td>
										<div class="form_field">
											<input type="radio" name="rdi-request1" id="rdi-4" value="택배함">
											<label for="rdi-4"><span>택배함</span></label>
										</div>
									</td>
								</tr>
								<tr>
									<th class="sr-only">기타사항</th>
									<td>
										<div class="form_field">
											<input type="radio" name="rdi-request1" id="rdi-5" value="5">
											<label for="rdi-5"><span>기타사항</span></label>
										</div>
									</td>
								</tr>
								<tr>
									<th class="sr-only">보관 장소만 입력(필수)</th>
									<td>
										<div class="form_text">
											<input type="text" name="delvMemoText"  placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
											<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn_dark" id="btn_delivery_modi_save"><span>배송지 등록</span></button>
	</div>
</form>

<script th:inline="javascript">
var delvMemo = [[${deliveryAddrInfo.delvMemo}]];
//컨텐츠 호출
$(document).ready( function() {
	
	var delvMemoArr = ["문 앞", "직접 받고 부재 시 문 앞", "경비실", "택배함"];
	var tempMemo = true;
	
	// 배송요청사항설정
	for (i=0 ; i<delvMemoArr.length ; i++) {
		if (delvMemoArr[i] == delvMemo) {
			tempMemo = false;
		}
	}
	
	if (tempMemo) {
		$("#deliveryModifyForm input[name=rdi-request1]").eq(4).attr("checked", true);
		$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
		$("#deliveryModifyForm input[name=delvMemoText]").val(delvMemo);
	}
	
	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
		var temp = $(this).parent().find('span').text();
		if (delvMemo == temp) {
			$(this).attr("checked", true);
		}
	});
	
	// 배송요청사항 버튼기능
	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
		// 버튼기능
		$(this).on("click", function(){
			var temp = $(this).parent().find('span').text();
			$("#deliveryModifyForm input[name=delvMemoText]").val("");
			if (temp == "기타사항") {
				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
			} else {
				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", true);
			}
		});
	});
});

// 배송지등록버튼
$("#btn_delivery_modi_save").on("click", function(){
	
	// 유효성체크
	if (!deliveryModifyFormCheck()){
		return false;
	}
	
	// 기본배송지여부
	var defaultYn = "N";
	if ($("#deliveryModifyForm input[name=defaultYn]").is(":checked")) {
		defaultYn = "Y";
	}
	
	// 기타사항일때 텍스트 등록
	var delvMemo = $("#deliveryModifyForm input[name=rdi-request1]:checked").parent().find('span').text();
	if ("기타사항" == delvMemo) {
		delvMemo = $("#deliveryModifyForm input[name=delvMemoText]").val();
	}
	
	// 2021.04.29 추가
	if (gagajf.isNull(delvMemo)) {
		mcxDialog.alert("기타사항을 입력해주세요.");
		$("#deliveryAddForm input[name=delvMemoText]").focus();
		return false;
	}
	
	// 배송지정보설정
	var jsonObj = {
		"defaultYn"			: defaultYn
		, "custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
		, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
		, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
		, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
		, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
		, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
		, "delvMemo"		: delvMemo
	}
	
	var jsonData = JSON.stringify(jsonObj);
	
	$.ajax( {
		type		: "POST",
		url 		: '/common/updateCustDeliveryAddr',
		data		: jsonData,
		dataType 	: 'html',
		beforeSend : function(xhr, settings) {
			xhr.setRequestHeader("AJAX"			, "true");
			xhr.setRequestHeader('Accept'		, 'application/json');
			xhr.setRequestHeader('Content-Type'	, 'application/json');
		},
		success 	: function(result) {
			// custDelvAddrSq 부모창으로 전달
			var delvObj = {
				"custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
				, "dispYn"			: "Y"
				, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
				, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
				, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
				, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
				, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
				, "delvMemo"		: delvMemo
			}
			
			// 부모장으로 값 전닫
			delvAddrSet(delvObj);
			
			// 팝업닫기
			$(".close-modal").trigger("click");
		}
	});
});

// 유효성체크 함수
var deliveryModifyFormCheck = function() {
	// TODO 유효성 체크 추가
	if (gagajf.isNull($("#deliveryModifyForm input[name=recipNm]").val())) {
		mcxDialog.alert("받는분을 입력해주세요.");
		$('#deliveryModifyForm input[name=custNm]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#deliveryModifyForm input[name=recipZipcode]").val())) {
		mcxDialog.alert("배송주소를 입력해주세요.");
		$('#deliveryModifyForm input[name=recipAddr]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#deliveryModifyForm input[name=recipBaseAddr]").val())) {
		mcxDialog.alert("배송주소를 입력해주세요.");
		$('#deliveryModifyForm input[name=recipAddr]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#deliveryModifyForm input[name=recipDtlAddr]").val())) {
		mcxDialog.alert("상세주소를 입력해주세요.");
		$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
		return false;
	}
	
	return true;
}

// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
var fnOpenDaumAddr = function() {
	$("body").css("overflow", "hidden");
	
	let daumZip = new daum.Postcode({
		oncomplete: function(data) {
			$('#deliveryModifyForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
			$('#deliveryModifyForm input[name=recipZipcode]').val(data.zonecode);
			$('#deliveryModifyForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
			$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
			
			cfnCloseDaumAddr();
			
			$("#adrsModifyPop").modal("show");
		},
		width: '100%'
	});
	
	cfnOpenDaumAddr(daumZip);
}

//2021.04.09 하이픈처리
$(document).on("keyup", "#deliveryModifyForm input[name=recipPhnno]", function() { 
	$(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") ); 
});
</script>