style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							<!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/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : OrderNoMemberWeb.html
 * @desc    : 비회원 주문/결제 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.01   jsh77b     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">

<!-- 회원 -->
<th:block th:if="${isLogin}">
	<form class="form_wrap form_col_c form_full" id="nomemberForm" th:action="@{'/order/form'}" th:method="post">
		<input type="hidden" name="shotDelvUseYn" th:value="${order.shotDelvUseYn}" /><!-- 장바구니화면 총알배송사용여부 -->
		<!-- 장바구니화면 시퀀스 배열 등록 -->
		<th:block th:each="cartSq , index : ${order.cartSqArr}">
			<input type="hidden" name="cartSqArr" th:value="${cartSq}" />
		</th:block>
		<script>$("#nomemberForm").submit();</script>
	</form>
</th:block>
<!-- //회원 -->

<!-- 비회원 -->
<th:block th:if="${!isLogin}">
	<!--  container -->
	<div id="container" class="container od">
		<!-- 비회원 -->
		<div class="wrap">
			<div class="content nonMBorder"> <!-- 페이지특정 클래스 = nonMBorder -->
				<div class="cont_head">
					<h2>비회원 주문하기</h2>
					<div class="text_box">
						<p>비회원 주문을 위한 주문자 정보 입력 및 개인정보 수집/이용 동의에<br>체크하신 후 주문을 완료하실 수 있습니다.</p>
					</div>
				</div>
				
				<div class="cont_body">
					<form class="form_wrap form_col_c form_full" id="orderForm" th:action="@{'/order/form'}" th:method="post">
						<input type="hidden" name="shotDelvUseYn" th:value="${order.shotDelvUseYn}" /><!-- 장바구니화면 총알배송사용여부 -->
						<input type="hidden" name="sexGb" />
						<input type="hidden" name="birthYmd" />
						<!-- 장바구니화면 시퀀스 배열 등록 -->
						<th:block th:each="cartSq , index : ${order.cartSqArr}">
							<input type="hidden" name="cartSqArr" th:value="${cartSq}" />
						</th:block>
						
						<div class="form_field">
							<label class="input_label sr-only">이름(주문자명)</label>
							<div class="input_wrap"> 
								<input type="text" class="form_control" name="custNm" placeholder="이름(주문자명)" value="" readonly="readonly" >
							</div>
						</div>	
						
						<!-- 휴대폰 본인인증 대기 -->
						<div class="form_field">
							<label class="input_label sr-only">휴대폰 번호</label>
							<div class="ui_col_9">
								<div class="input_wrap"> 
									<input type="text" id="cellPhnno" name="cellPhnno" placeholder="휴대폰 인증을 해주세요." class="form_control" minlength="10" maxlength="11" required="required" data-valid-type="numeric" data-valid-name="휴대폰" readonly="readonly"/>
								</div>
							</div>
							
							<!-- 본인인증전-->
							<div class="ui_col_3 beforeAuth">
								<button type="button" class="btn btn_dark btn_block" onclick="cfnOpenCellphoneCertify();"><span>본인인증</span></button>
							</div>
							
							<!-- 본인인증후-->
							<div class="ui_col_3 afterAuth" style="display:none">
								<button type="button" class="btn btn_dark btn_block"><span>인증완료</span></button>
							</div>
						</div>	
						<!-- //휴대폰 본인인증 대기 -->
						   
						<div class="form_field">
							<label class="input_label sr-only">이메일주소</label>
							<div class="input_wrap"> 
								<input type="text" id="email" name="email" placeholder="이메일" class="form_control" required="required" data-valid-name="이메일" maxlength="30"/><!-- 잘못기입된 경우 class "err" 추가 -->
							</div>
						</div>	
						
						<div class="form_field">
							<label class="input_label sr-only">배송주소</label>
							<div class="ui_col_9">
								<div class="input_wrap">
									<input type="hidden" class="form_control" name="recipZipcode" placeholder="우편번호" readonly="readonly" value="">
									<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" readonly="readonly" value="">
									<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" readonly="readonly">
								</div>
							</div>
							<div class="ui_col_3">
								<button type="button" class="btn btn_dark btn_block" onclick="fnOpenDaumAddr();"><span>우편번호 찾기</span></button>
							</div>
						</div>
						<div class="form_field">
							<label class="input_label sr-only">상세주소</label>
							<div class="input_wrap"> 
								<input type="text" class="form_control" name="recipDtlAddr" placeholder="상세주소" value="">
							</div>
						</div>
			
						<div class="form_field">
							<div class="agree_nombPrivacy">
								<input id="chk-nombPrivacy-agr" type="checkbox">
								<label for="chk-nombPrivacy-agr"><span>비회원 개인정보 수집&#47;이용 동의&nbsp;&nbsp;<em class="tmark_required">(필수)</em></span></label>
							</div>
						</div>
						
						<div class="agree_nomb_txt_box">
							<div>
								<!-- 내용 -->
								(1) "iSTYLE24"는 비회원 주문의 경우에도 배송, 대금결제, 주문내역 조회 및 구매확인, 실명여부 확인을 위하여 필요한 개인정보만을 요청하고 있으며, 이 경우 그 정보는 대금결제 및 상품의 배송에 관련된 용도 이외에는 다른 어떠한 용도로도 사용되지 않습니다.<br>
								(2) 비회원의 개인정보 수집/이용 목적 및 항목<br>
								① 성명<br>
								② 원활한 구매/판매 진행, 본인의사의 확인, 불만 및 분쟁처리, 고지 및 정보 안내 등 : 전화번호, 이동전화번호, e-mail<br>
								③ 대금결제서비스의 제공 등 : 은행계좌정보, 신용카드정보<br>
								④ 상품, 경품배송 : 주소, 전화번호, e-mail<br>
								⑤ 부정 이용방지, 전자금융거래기록보관 : IP address, 방문일시<br>
								(3) 비회원 서비스 이용의 경우에는 회원 서비스 내용을 제외한 "iSTYLE24" 개인정보 처리방침의 모든 내용이 동일하게 적용됩니다.<br>
								(4) "iSTYLE24"는 회원의 개인정보와 동일한 수준으로 비회원의 개인정보를 보호합니다.
								<!-- //내용 -->
							</div>   
						</div>
						<div class="btn_group_block btn_group_md ui_row">
							<div class="ui_col_6">
								<button type="button" class="btn btn_default btn_block" id="btn_cancel"><span>취소</span></button>
							</div>
							<div class="ui_col_6">
								<button type="button" class="btn btn_dark btn_block" id="btn_order"><span>주문하기</span></button>
							</div>
						</div>
					</form>
				</div>
				<div class="cont_foot">
					<p>
						<span class="jointit1">STYLE24의 많은 혜택들이 기다리고 있습니다!</span>
						<span class="jointit2">STYLE24에 회원가입을 하시면 더 많은 혜택을 받아보세요!</span>
					</p>
					<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);" title="회원가입" class="btn_gojoin" id="btn_join_member">회원가입</a>
				</div>
			</div>
		</div>		
	</div>
</th:block>
<!-- //비회원 -->

<script th:inline="javascript">
// 컨텐츠 호출
$(document).ready( function() {
	// 2021.04.08 테스트데이타
	/*
	$("#orderForm input[name=custNm]").val("전석훈");
	$("#orderForm input[name=cellPhnno]").val("01065565294");
	$("#orderForm input[name=email]").val("email@email.com");
	$("#orderForm input[name=recipZipcode]").val("13245");
	$("#orderForm input[name=recipBaseAddr]").val("서울시 영등포구 은행로 11, 8층(여의도동, 일신빈딩)");
	$("#orderForm input[name=recipDtlAddr]").val("8층 ISTYLE24 개발실");
	$("#orderForm input[name=recipAddr]").val("13245" + '    ' + "서울시 영등포구 은행로 11, 8층(여의도동, 일신빈딩)");
	*/
});
	
// 주문하기버튼
$("#btn_order").on("click", function() {
	// TODO 유효성 체크 추가
	// 2021.04.08 본인인증을 완료후 이름정보 업데이트로 변경
	if (gagajf.isNull($("#orderForm input[name=cellPhnno]").val())) {
		mcxDialog.alert("본인인증을 완료해 주세요.");
		$('#orderForm input[name=cellPhnno]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#orderForm input[name=email]").val())) {
		mcxDialog.alert("이메일을 입력해주세요.");
		$('#orderForm input[name=email]').focus();
		return false;
	}
	
	if (!fnCheckValidationEmail($("#orderForm input[name=email]").val())) {
		mcxDialog.alert("이메일 주소를 다시 확인해주세요.");
		$('#orderForm input[name=email]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#orderForm input[name=recipZipcode]").val())) {
		mcxDialog.alert("배송주소를 입력해주세요.");
		$('#orderForm input[name=recipAddr]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#orderForm input[name=recipBaseAddr]").val())) {
		mcxDialog.alert("배송주소를 입력해주세요.");
		$('#orderForm input[name=recipAddr]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#orderForm input[name=recipDtlAddr]").val())) {
		mcxDialog.alert("상세주소를 입력해주세요.");
		$('#orderForm input[name=recipDtlAddr]').focus();
		return false;
	}
	
	if (!$("#chk-nombPrivacy-agr").is(":checked")) {
		mcxDialog.alert("비회원 개인정보 수집 이용에 동의해주세요.");
		return false;
	}
	
	// 주문서전송
	$("#orderForm").submit();
});

// 나이스 본인인증 후 콜백
var fnNiceCallBack = function(encData) {
	if (!gagajf.isNull(encData)) {
		let custInfo 		= {};
		custInfo.encData 	= encData;
		let jsonData 		= JSON.stringify(custInfo);
		gagajf.ajaxJsonSubmit('/order/customer/auth', jsonData, fnUpdateAuthInfoCallback);
	}
};
	
// 고객정보 데이터
var fnUpdateAuthInfoCallback = function (result) {
	// 인정후처리
	$("#orderForm .beforeAuth").hide();
	$("#orderForm .afterAuth").show();
	
	$('#orderForm input[name=custNm]').val(result.sName);
	$('#orderForm input[name=cellPhnno]').val(result.sMobileNo);
	$('#orderForm input[name=sexGb]').val(result.sGender);
	$('#orderForm input[name=birthYmd]').val(result.sBirthDate);
}

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

/**
 * 이메일 유효성 체크
 * @param email - 이메일
 * @return boolean - 통과(true)/실패(false)
 * @author jsshin
 * @since 2021. 02. 15
 */
var fnCheckValidationEmail = function (email) {
	const regexp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
	let result = true;
	if (!regexp.test(email)) {
		result = false;
	}
	return result;
};
</script>
</th:block>

</body>
</html>