style24.front/src/main/webapp/WEB-INF/views/web/order/OrderDelvAddrModifyPopWeb.html

<div class="modal-header">
	<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
</div>
<div class="modal-body">
	<div class="pop_cont">
		<form class="form_wrap form_full" name="deliveryModifyForm" id="deliveryModifyForm">
			<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
			
			<div class="area_adrsinfo">
				<h6>배송지 정보</h6>
				<div class="default_addrs">
					<div class="form_field">
						<th:block th:if="${deliveryAddrInfo.defaultYn} == 'Y'">
							<input id="chk-default-addrs" type="checkbox" name="defaultYn" checked>
						</th:block>
						<th:block th:if="${deliveryAddrInfo.defaultYn} == 'N'">
							<input id="chk-default-addrs" type="checkbox" name="defaultYn">
						</th:block>
						<label for="chk-default-addrs"><span>기본 배송지로 등록</span></label>
					</div>
				</div>
				<div class="form_field">
					<label class="input_label sr-only">받는 분</label>
					<div class="ui_col_12">
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="recipNm" placeholder="받는 분" id="" th:value="${deliveryAddrInfo.recipNm}">
						</div>
					</div>
				</div>	
				<div class="form_field">
					<label class="input_label sr-only">휴대폰 번호</label>
					<div class="ui_col_12">
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" id="" th:value="${deliveryAddrInfo.recipPhnno}">
						</div>
					</div>
				</div>
				<div class="form_field">
					<label class="input_label sr-only">배송주소</label>
					<div class="ui_col_12">
						<div class="input_wrap"> 
							<input type="hidden" name="recipZipcode" placeholder="우편번호" th:value="${deliveryAddrInfo.recipZipcode}">
							<input type="text" class="form_control" name="recipBaseAddr" placeholder="기본주소" id="" th:value="${deliveryAddrInfo.recipBaseAddr}" disabled>
						</div>
						<button type="button" class="btn btn_dark btn_sm" onclick="fnOpenDaumAddr();">
							<span>우편번호 찾기</span>
						</button>
					</div>
				</div>
				<div class="form_field">
					<label class="input_label sr-only">상세주소</label>
					<div class="ui_col_12">
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="recipDtlAddr" placeholder="상세주소" id="" th:value="${deliveryAddrInfo.recipDtlAddr}">
						</div>
					</div>
				</div>
			</div>
			<div class="area_request">       
				<h6>배송요청 사항</h6> 
				<div class="form_field">
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request11" value="문앞">
						<label for="rdi-request11"><span>문앞</span></label>
					</div>
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request12" value="직접받고 부재시 문 앞">
						<label for="rdi-request12"><span>직접받고 부재시 문 앞</span></label>
					</div>
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request13" value="경비실">
						<label for="rdi-request13"><span>경비실</span></label>
					</div>
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request14" value="택배함">
						<label for="rdi-request14"><span>택배함</span></label>
					</div>
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request15" value="기타사항">
						<label for="rdi-request15"><span>기타사항</span></label>
						<div class="info_box">
							<div class="input_wrap">
								<input type="text" name="delvMemoText" class="form_control" maxlength="30" placeholder="보관장소만 입력 (필수)" disabled>
								<p>보관 장소 외 다른 내용 입력시 통보없이 삭제 될 수 있습니다.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="modal-footer">
	<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
</div>

<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);
		$("input[name=delvMemoText]").attr("disabled", false);
		$("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);
			}
		});
	});
});

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

// 배송지등록버튼
$("#btn_delivery_addr_save").on("click", function(){
	// 기본배송지여부
	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();
	}
	
	// 배송지정보설정
	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);jsonObj
	
	$.ajax( {
		type		: "POST",
		url 		: '/order/updateCustDeliveryAddr',
		data		: jsonData,
		dataType 	: 'html',
		beforeSend : function(xhr, settings) {
			xhr.setRequestHeader("AJAX"			, "true");
			xhr.setRequestHeader('Accept'		, 'application/json');
			xhr.setRequestHeader('Content-Type'	, 'application/json');
			gagajf.showProgressbar(true);
		},
		success 	: function(result) {
			
			// 배송지변경팝업호출
			$.ajax( {
				type		: "POST",
				url 		: '/order/delvAddrChangePop',
				data		: jsonData,
				dataType 	: 'html',
				beforeSend : function(xhr, settings) {
					xhr.setRequestHeader("AJAX"			, "true");
					xhr.setRequestHeader('Accept'		, 'application/json');
					xhr.setRequestHeader('Content-Type'	, 'application/json');
					gagajf.showProgressbar(true);
				},
				success 	: function(result) {
					$("#adrsChangePop .modal-dialog .modal-content").html(result);
					$("#adrsChangePop").modal("show");
				}
			});	
		}
	});
});
</script>