|
|
@@ -0,0 +1,344 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org"
|
|
|
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
+ layout:decorator="mob/common/layout/LoginLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : JoinFormMob.html
|
|
|
+ * @desc : 회원정보 입력 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2021 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.04.16 jsshin 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+<th:block layout:fragment="content">
|
|
|
+<style>
|
|
|
+ .hide{display:none}
|
|
|
+</style>
|
|
|
+<main class="container mb">
|
|
|
+ <!-- ★ 컨텐츠 시작 -->
|
|
|
+ <section class="content mb_join_2">
|
|
|
+ <div class="inner">
|
|
|
+ <div class="close">
|
|
|
+ <a href="javascript:void(0);" class="btn_close" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);"><span></span><span></span></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inner">
|
|
|
+ <h2 class="title">회원정보 입력</h2>
|
|
|
+ </div>
|
|
|
+ <div class="inner">
|
|
|
+ <form id="joinForm" name="joinForm" class="form_wrap form_full" role="form">
|
|
|
+ <div class="form_head">
|
|
|
+ <h2 class="title sr-only">회원정보 입력</h2>
|
|
|
+ </div>
|
|
|
+ <!-- //아이디 사용가능시 -->
|
|
|
+ <!-- 오류시 부모 div에서 제어 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label sr-only">이메일</label>
|
|
|
+ <div class="input_wrap form_full">
|
|
|
+ <input type="text" id="email" name="email" placeholder="이메일" class="form_control" required="required" data-valid-name="이메일" maxlength="30" autocomplete="no" autocapitalize="no"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
+ <!-- case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
|
|
|
+ <div class="help_block">
|
|
|
+ <!-- 이메일 형식이 바르지않을경우 -->
|
|
|
+ <p id="failEmail" class="t_err hide">
|
|
|
+ 이메일 형식이 올바르지 않습니다.
|
|
|
+ </p>
|
|
|
+ <!-- //이메일 형식이 바르지않을경우 -->
|
|
|
+ <!-- 이미 가입되어있는 이메일인경우 -->
|
|
|
+ <p id="dupEmail" class="t_err hide">
|
|
|
+ 이미 가입된 이메일 주소입니다. 다른 이메일 주소를 입력하여 주세요.
|
|
|
+ </p>
|
|
|
+ <div id="dupEmailDiv" class="mt20 hide">
|
|
|
+ <button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
+ <span>로그인</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
|
|
|
+ <span>아이디 찾기</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <!-- //이미 가입되어있는 이메일인경우 -->
|
|
|
+ </div>
|
|
|
+ <!-- //case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 210415_수정 : 휴대폰 인증 수정 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <label class="input_label sr-only">휴대폰번호</label>
|
|
|
+ <!-- 휴대폰 인증 입력 전 -->
|
|
|
+ <div class="input_wrap form_full">
|
|
|
+ <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"/>
|
|
|
+ <button type="button" id="btnCellPhoneCertify" class="btn btn_dark btn_hp_certi">
|
|
|
+ <span>본인인증</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <!-- //휴대폰 인증 입력 전 -->
|
|
|
+
|
|
|
+ <!-- case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
|
|
|
+ <div class="help_block">
|
|
|
+ <p id="failPhnno" class="t_err hide">휴대폰번호를 형식에 맞게 정확히 입력해주세요</p>
|
|
|
+ <p id="dupPhnno" class="t_err hide">I***D로 가입된 핸드폰 번호 입니다.</p>
|
|
|
+ <div id="dupPhnnoDiv" class="mt20 hide">
|
|
|
+ <button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
+ <span>로그인</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
|
|
|
+ <span>아이디 찾기</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn_group_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" id="btnJoin" class="btn btn_primary btn_block" disabled="disabled">
|
|
|
+ <span>동의하고 가입하기</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //210415_수정 : 버튼 형식 변경. -->
|
|
|
+ <div class="desc_wrap t_c mt20">
|
|
|
+ <p>
|
|
|
+ 본인은 만 14세 이상이며 <a href="javascript:void(0)" onclick="cfnUseTermsLayer();">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>,<br>
|
|
|
+ <a href="javascript:void(0)" onclick="cfnPrivacyPolicyLayer('join');">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,
|
|
|
+ <a href="javascript:void(0)" onclick="cfnPrivacyTrustLayer();">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a><br>
|
|
|
+ 내용을 확인 하였으며,동의합니다.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <input type="hidden" name="snsId" value=""/>
|
|
|
+ <input type="hidden" name="snsType" value=""/>
|
|
|
+ <input type="hidden" name="ci" value=""/>
|
|
|
+ <input type="hidden" name="memNo" value=""/>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <!-- ★ 컨텐츠 종료 -->
|
|
|
+</main>
|
|
|
+
|
|
|
+<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
|
|
|
+<script th:inline="javascript">
|
|
|
+ /*<![CDATA[*/
|
|
|
+ const sEncData = [[${sEncData}]]; //인증 후 해당 페이지로 리다이렉트함
|
|
|
+ const authMethod = [[${authMethod}]]; //인증 후 해당 페이지로 리다이렉트함
|
|
|
+ const custParams = [[${custParams}]];
|
|
|
+ const custSnsInfo = [[${custSnsInfo}]];
|
|
|
+
|
|
|
+ let emailCheck = false;
|
|
|
+ let authCheck = false;
|
|
|
+
|
|
|
+
|
|
|
+ // 이메일 확인
|
|
|
+ $('#email').on('blur', function () {
|
|
|
+ const $failEmail = $('#failEmail');
|
|
|
+ const $dupEmail = $('#dupEmail');
|
|
|
+ const $dupEmailDiv = $('#dupEmailDiv');
|
|
|
+ $failEmail.hide();
|
|
|
+ $dupEmail.hide();
|
|
|
+ $dupEmailDiv.hide();
|
|
|
+
|
|
|
+ let email = $(this).val();
|
|
|
+ let validation;
|
|
|
+
|
|
|
+ if(!gagajf.isNull(email)) {
|
|
|
+ if (!fnCheckValidationEmail(email)) {
|
|
|
+ $failEmail.show();
|
|
|
+ emailCheck = false;
|
|
|
+ validation = false;
|
|
|
+ } else {
|
|
|
+ validation = true;
|
|
|
+ $failEmail.hide();
|
|
|
+ }
|
|
|
+ if (validation) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.email = email;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/email/check', jsonData, fnEmailConfirmCallBack);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 이메일 확인 결과
|
|
|
+ var fnEmailConfirmCallBack = function (result) {
|
|
|
+ const $dupEmail = $('#dupEmail');
|
|
|
+ const $dupEmailDiv = $('#dupEmailDiv');
|
|
|
+ if (result.isFind) { // 중복된 아이디가 존재
|
|
|
+ $dupEmail.show();
|
|
|
+ $dupEmailDiv.show();
|
|
|
+ emailCheck = false;
|
|
|
+ } else {
|
|
|
+ $dupEmail.hide();
|
|
|
+ $dupEmailDiv.hide();
|
|
|
+ emailCheck = true;
|
|
|
+ }
|
|
|
+ fnPossibleJoin();
|
|
|
+ };
|
|
|
+
|
|
|
+ //휴대폰 인증
|
|
|
+ $('#btnCellPhoneCertify').on('click', function () {
|
|
|
+ let joinForm = $('#joinForm').serializeObject();
|
|
|
+ let custParams = joinForm.email +','+ joinForm.snsId +','+ joinForm.snsType +','+ joinForm.ci +','+ joinForm.memNo;
|
|
|
+ cfnOpenCellphoneCertify(_PAGE_CUSTOMER_SNS_JOIN, custParams);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 나이스 본인인증 후 콜백
|
|
|
+ var fnNiceCallBack = function(encData) {
|
|
|
+ if (!gagajf.isNull(encData)) {
|
|
|
+ let ci = $('#joinForm input[name=ci]').val();
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.encData = encData;
|
|
|
+ if (!gagajf.isNull(ci)) custInfo.ci = ci;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/authentication/check', jsonData, fnInfoConfirmCallBack);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 본인인증 후 결과
|
|
|
+ var fnInfoConfirmCallBack = function (result) {
|
|
|
+ const $cellPhnno = $('#cellPhnno');
|
|
|
+ const $dupPhnno = $('#dupPhnno');
|
|
|
+ const $dupPhnnoDiv = $('#dupPhnnoDiv');
|
|
|
+ const $btnCellPhoneCertify = $('#btnCellPhoneCertify');
|
|
|
+ $cellPhnno.val(result.cellPhnno);
|
|
|
+
|
|
|
+ if (result.isFind) { // 가입된 고객 정보가 있으면
|
|
|
+ let msg = '';
|
|
|
+ if (result.custStat === 'G104_30') {
|
|
|
+ msg = "탈퇴한 회원입니다. 탈퇴 후 60일 동안 재가입이 불가능합니다.";
|
|
|
+ } else {
|
|
|
+ msg = result.maskingCustId+"로 가입된 이력이 있습니다.";
|
|
|
+ }
|
|
|
+ $dupPhnno.html(msg);
|
|
|
+ $dupPhnno.show();
|
|
|
+ $dupPhnnoDiv.show();
|
|
|
+ authCheck = false;
|
|
|
+ } else {
|
|
|
+ $dupPhnno.hide();
|
|
|
+ $dupPhnnoDiv.hide();
|
|
|
+ authCheck = true;
|
|
|
+ }
|
|
|
+ $btnCellPhoneCertify.find('span').text('인증완료');
|
|
|
+ $btnCellPhoneCertify.attr('disabled', true);
|
|
|
+ fnPossibleJoin();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 저장
|
|
|
+ $('#btnJoin').on('click', function () {
|
|
|
+ mcxDialog.confirm("회원가입을 하시겠습니까?", {
|
|
|
+ cancelBtnText: "취소",
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $('#btnJoin').attr('disabled', true);
|
|
|
+ let jsonData = JSON.stringify($('#joinForm').serializeObject());
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/sns/join/save', jsonData, fnJoinSaveCallback);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ var fnJoinSaveCallback = function (result) {
|
|
|
+ cfnGoToPage(_PAGE_CUSTOMER_JOIN_COMPLETE);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ // 가입 가능한지 확인
|
|
|
+ var fnPossibleJoin = function () {
|
|
|
+ const $btnJoin = $('#btnJoin');
|
|
|
+ if (emailCheck && authCheck ) {
|
|
|
+ $btnJoin.attr('disabled', false);
|
|
|
+ } else {
|
|
|
+ $btnJoin.attr('disabled', true);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 본인인증 후 데이터 입력 값 셋팅
|
|
|
+ var fnDataSet = function (custParams) {
|
|
|
+ const $email = $('#joinForm input[name=email]');
|
|
|
+ const $snsId = $('#joinForm input[name=snsId]');
|
|
|
+ const $snsType = $('#joinForm input[name=snsType]');
|
|
|
+ const $ci = $('#joinForm input[name=ci]');
|
|
|
+ const $memNo = $('#joinForm input[name=memNo]');
|
|
|
+
|
|
|
+ let arrayParams = custParams.split(',');
|
|
|
+ //[0]이메일/[1]SNS_ID/[2]SNS_TYPE/[3]CI/[4]memNo
|
|
|
+ let email = arrayParams[0];
|
|
|
+ let snsId = arrayParams[1];
|
|
|
+ let snsType = arrayParams[2];
|
|
|
+ let ci = arrayParams[3];
|
|
|
+ let memNo = arrayParams[4];
|
|
|
+
|
|
|
+ // console.log(arrayParams);
|
|
|
+ if (!gagajf.isNull(email)) {
|
|
|
+ $email.val(email);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(snsId)) {
|
|
|
+ $snsId.val(snsId);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(snsType)) {
|
|
|
+ $snsType.val(snsType);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(ci)) {
|
|
|
+ $ci.val(ci);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(memNo)) {
|
|
|
+ $memNo.val(memNo);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(email)) {
|
|
|
+ $email.val(email);
|
|
|
+ $email.trigger('blur');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ var fnDataInit = function (custSnsInfo) {
|
|
|
+ const $email = $('#joinForm input[name=email]');
|
|
|
+ const $snsId = $('#joinForm input[name=snsId]');
|
|
|
+ const $snsType = $('#joinForm input[name=snsType]');
|
|
|
+ const $ci = $('#joinForm input[name=ci]');
|
|
|
+ const $memNo = $('#joinForm input[name=memNo]');
|
|
|
+
|
|
|
+ let email = custSnsInfo.email;
|
|
|
+ let snsId = custSnsInfo.snsId;
|
|
|
+ let snsType = custSnsInfo.snsType;
|
|
|
+ let ci = custSnsInfo.ci;
|
|
|
+ let memNo = custSnsInfo.memNo;
|
|
|
+
|
|
|
+ if (!gagajf.isNull(email)) {
|
|
|
+ $email.val(email);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(snsId)) {
|
|
|
+ $snsId.val(snsId);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(snsType)) {
|
|
|
+ $snsType.val(snsType);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(ci)) {
|
|
|
+ $ci.val(ci);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(memNo)) {
|
|
|
+ $memNo.val(memNo);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(email)) {
|
|
|
+ $email.val(email);
|
|
|
+ $email.trigger('blur');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ if (!gagajf.isNull(custSnsInfo)) {
|
|
|
+ fnDataInit(custSnsInfo);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(custParams)) {
|
|
|
+ fnDataSet(custParams);
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(sEncData)) {
|
|
|
+ fnNiceCallBack(sEncData, authMethod);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /*]]>*/
|
|
|
+</script>
|
|
|
+</th:block>
|
|
|
+</body>
|
|
|
+</html>
|
jsshin