style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
							<!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/MypageLayoutMob">
<!--
 *******************************************************************************
 * @source  : MypageCustModifyFormMob.html
 * @desc    : 마이페이지 > 회원정보 수정 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.26   jsshin      최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<main class="container my">
	<section class="content my_page_edit">
		<form id="custModiFyForm" name="custModiFyForm" class="form_wrap">
			<div class="inner">
				<div class="tbl_wrap">
					<div class="tbl_tit">
						<h3>회원 정보</h3>
						<button type="button" id="btnNameCerify" class="btn_popup">
							<span>개명 본인인증</span>
						</button>
					</div>
					<div class="tbl">
						<div class="tbl_row">
							<table>
								<colgroup>
									<col width="*">
								</colgroup>
								<tr>
									<th>이름</th>
									<td>
										<div class="form_field">
											<input type="text" id="custNm" name="custNm" class="form_control" readonly="readonly">
										</div>
									</td>
								</tr>
								<tr>
									<th>생년월일</th>
									<td>
										<div class="form_field">
											<input type="text" id="birthYmd" name="birthYmd" class="form_control" readonly="readonly"/>
										</div>
									</td>
								</tr>
							</table>
							<p class="desc_txt">본인인증을 통해 자동으로 수집되는 정보입니다.</p>
						</div>
						<div class="tbl_row">
							<table>
								<colgroup>
									<col width="*">
								</colgroup>
								<tr>
									<th>아이디</th>
									<td>
										<div class="form_field">
											<input type="text" id="custId" name="custId" class="form_control" placeholder="" readonly="readonly"/>
										</div>
									</td>
								</tr>
								<tr>
									<th>비밀번호</th>
									<td>
										<div class="form_field password">
											<button type="button" id="btn_password_pop" class="btn btn_primary" onclick="cfnPasswordModify();">
												<span>비밀번호 변경하기</span>
											</button>
										</div>
									</td>
								</tr>
								<tr>
									<th>이메일</th>
									<td>
										<div class="form_field">
											<input type="text" id="email" name="email" class="form_control"/>
										</div>
									</td>
								</tr>
								<tr>
									<th>휴대폰 인증</th>
									<td>
										<div class="input_wrap certi_wrap">
											<input type="text" id="cellPhnno" name="cellPhnno" class="form_control" readonly="readonly"/>
											<button type="button" id="btnCellCertify" class="btn btn_dark">
												<span>본인인증</span>
											</button>
										</div>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="inner">
				<div class="tbl_wrap">
					<div class="tbl_tit">
						<h3>마케팅 정보 수신설정</h3>
					</div>
					<div class="tbl tbl_radio">
						<table>
							<colgroup>
								<col width="*">
							</colgroup>
							<tr>
								<th class="sr-only">이름</th>
								<td>
									<div class="form_field">
										<input type="checkbox" id="emailAgreeYn" name="emailAgreeYn" value="Y"/>
										<label for="emailAgreeYn"><span>이메일</span></label>
									</div>
								</td>
							</tr>
							<tr>
								<th class="sr-only">생년월일</th>
								<td>
									<div class="form_field">
										<input type="checkbox" id="smsAgreeYn" name="smsAgreeYn" value="Y"/>
										<label for="smsAgreeYn"><span>SMS</span></label>
									</div>
								</td>
							</tr>
						</table>
						<p class="desc_txt">회원정보, 구매 정보 및 서비스 주요 정책 관련 내용은 수신동의 여부와<br>관계없이 발송됩니다.</p>
					</div>
				</div>
			</div>
			<div class="inner">
				<div class="tbl_wrap">
					<div class="tbl_tit">
						<h3>환불 계좌정보</h3>
					</div>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="*">
							</colgroup>
							<tr>
								<th>예금주</th>
								<td>
									<div class="form_field">
										<input type="text" id="accountNm" name="accountNm" class="form_control" placeholder="" readonly="readonly"/>
									</div>
								</td>
							</tr>
							<tr>
								<th>은행명</th>
								<td>
									<div class="form_field">
										<div class="select_custom select_bank"> <!-- 210408_ 수정 : select_bank 클래스 변경  -->
											<div class="combo">
												<div class="select">선택</div>
												<input type="hidden" name="bankCd" value=""/>
											</div>
										</div>
									</div>
								</td>
							</tr>
							<tr>
								<th>계좌번호</th>
								<td>
									<div class="input_wrap certi_wrap">
										<input type="text" id="accountNo" name="accountNo" class="form_control" maxlength="20" data-valid-type="numeric"  placeholder="계좌번호를 입력해 주세요"/>
										<button type="button" id="btnAccountCheck" class="btn btn_dark">
											<span>계좌인증</span>
										</button>
									</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="btn_group_flex">
					<div class="">
						<button type="button" id="btnConfirm" class="btn btn_dark btn_block">
							<span>확인</span>
						</button>
					</div>
				</div>
			</div>
			<!-- 210408_ 추가 : 은행 선택 팝업 -->
			<div id="refundBankPop" class="popup_box refundBankPop">
				<div class="lap">
					<div class="popup_close">카테고리닫기</div>
					<div class="popup_head sr-only">
						<h2 class="">은행 선택 팝업</h2>
					</div>
					<div class="popup_con">
						<div class="button_list clear">
							<th:block th:if="${bankList}" th:each="oneData, status : ${bankList}">
								<button type="button" th:id="|bankCd_${oneData.cd}|" th:with="cd = ${oneData.cd}">
									<span th:text="${oneData.cdNm}"></span>
									<input type="hidden" name="bankCd" th:value="${cd}"/>
								</button>
							</th:block>
						</div>
					</div>
				</div>
			</div>
			<!-- //210408_ 추가 : 은행 선택 팝업 -->
		</form>
	</section>
</main>
<script th:inline="javascript">
	/*<![CDATA[*/
	let orgCustInfo;
	let orgAccountInfo;
	let accountCheck = false;

	// 고객정보
	var fnGetCustInfo = function () {
		$.get('/mypage/customer/info', fnGetCustInfoCallback);
	}

	// 고객정보 데이터
	var fnGetCustInfoCallback = function (custInfo) {
		orgCustInfo = custInfo; // 원본 데이터저장 수정시 비교 작업
		$('#custModiFyForm td[name=custNm]').text(custInfo.custNm);
		$('#custModiFyForm td[name=birthYmd]').text(custInfo.birthYmd);
		let custId = custInfo.custId;
		if (custInfo.snsType === 'NV') {
			custId = '네이버 간편가입회원'
		}
		if (custInfo.snsType === 'KK') {
			custId = '카카오 간편가입회원'
		}
		if (custInfo.snsType === 'YS') {
			custId = 'YES24 간편가입회원'
		}
		$('#custModiFyForm input[name=custId]').val(custId);
		$('#custModiFyForm input[name=email]').val(custInfo.email);
		$('#custModiFyForm input[name=cellPhnno]').val(custInfo.cellPhnno);
		$('#custModiFyForm input[name=accountNm]').val(custInfo.custNm);

		fnDisplayEmailAgree(custInfo.emailAgreeYn);
		fnDisplaySmsAgree(custInfo.smsAgreeYn);

		// 회원(고객) 계좌 조회
		fnGetCustAccountInfo();
	}

	// 이메일 수신동의
	var fnDisplayEmailAgree = function (emailAgreeYn) {
		const $emailAgreeYn = $('#custModiFyForm input[name=emailAgreeYn]');
		if (emailAgreeYn === 'Y') {
			$emailAgreeYn.prop('checked', true);
		} else {
			$emailAgreeYn.prop('checked', false);
		}

	};

	// SMS 수신동의
	var fnDisplaySmsAgree = function (smsAgreeYn) {
		const $smsAgreeYn = $('#custModiFyForm input[name=smsAgreeYn]');
		if (smsAgreeYn === 'Y') {
			$smsAgreeYn.prop('checked', true);
		} else {
			$smsAgreeYn.prop('checked', false);
		}

	};

	// 고객계좌정보
	var fnGetCustAccountInfo = function () {
		$.get('/mypage/customer/account/info', fnGetCustAccountInfoCallback);
	}

	// 고객계좌 정보 데이터
	var fnGetCustAccountInfoCallback = function (result) {
		orgAccountInfo = {};
		var $accountNm = $('#custModiFyForm input[name=accountNm]');
		if (!gagajf.isNull(result)) {
			orgAccountInfo.accountNo = result.accountNo;
			orgAccountInfo.bankCd = result.bankCd;
			//1. 고객명과 환불계좌 예금주가 다른 경우 현재 고객명을 적어주고 계좌번호, 은행코드 초기화 처리
			let $bankCd = '';
			if ($accountNm.val() === result.accountNm) {
				$('#custModiFyForm input[name=accountNo]').val(result.accountNo);
				$bankCd = '#bankCd_'+result.bankCd;

			} else {
				$('#custModiFyForm input[name=accountNo]').val('');
				$bankCd = '#bankCd_';

			}
			$($bankCd).trigger('click'); // 셀렉트 박스 트리거
		} else {
			orgAccountInfo.accountNo = '';
			orgAccountInfo.bankCd ='';
		}
	}

	// 나이스 본인인증 후 콜백
	var fnNiceCallBack = function(encData) {
		if (!gagajf.isNull(encData)) {
			let custInfo = {};
			custInfo.encData = encData;
			let jsonData = JSON.stringify(custInfo);
			gagajf.ajaxJsonSubmit('/mypage/customer/auth/update', jsonData, fnUpdateAuthInfoCallback);
		}
	};

	var fnUpdateAuthInfoCallback = function (result) {
		if (result.iSsuccess) {
			fnGetCustInfo();
			mcxDialog.alert("본인인증을 통해 정보가 변경 되었습니다.");
			return;
		} else {
			mcxDialog.alert("실패하였습니다.<br/>고객센터에 문의하시 바랍니다.");
			return;
		}
	}

	// 계좌인증
	$('#btnAccountCheck').on('click', function () {
		if (!fnGetAccountValidation()) {
			return;
		}
		let custInfo = {};
		custInfo.accountNm = $('#custModiFyForm input[name=accountNm]').val();
		custInfo.accountNo = $('#custModiFyForm input[name=accountNo]').val();
		custInfo.bankCd = $('#custModiFyForm input[name=bankCd]').val();
		let jsonData = JSON.stringify(custInfo)
		//console.log(jsonData);
		gagajf.ajaxJsonSubmit('/mypage/account/check', jsonData, fnAccountCheckCallback);
	});

	// 계좌인증 콜백
	var fnAccountCheckCallback = function (result) {
		let msg = '계좌인증에 성공했습니다.'
		if (result.isValid) { // 유효하면 true
			accountCheck = true;
		} else {
			accountCheck = false;
			msg = '계좌정보를 다시 확인해주세요.'
		}
		mcxDialog.alertC(msg ,{
			sureBtnText: "확인",
			sureBtnClick: function() {
			}
		});
	};

	// 수정 버튼
	$('#btnConfirm').on('click', function () {
		let custModiFy =  $('#custModiFyForm').serializeObject();
		let $bankCd = $('#custModiFyForm input[name=bankCd]');
		let $accountNo = $('#custModiFyForm input[name=accountNo]');

		let marketingModifyYn = 'N';
		let accountModifyYn = 'N';
		let emailModifyYn = 'N';

		if (gagajf.isNull(custModiFy.email)) {
			mcxDialog.alertC('이메일 주소를 입력해주세요.',{
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#custModiFyForm input[name=email]').focus();
				}
			});
		}

		if (orgCustInfo.email !== custModiFy.email) {
			emailModifyYn = 'Y';
		}

		if (!fnGetAccountValidation()) {
			return;
		}


		// 은행코드가 바꼈는지
		if (orgAccountInfo.bankCd !== $bankCd.val()) {
			accountModifyYn = 'Y';
		}

		if (orgAccountInfo.accountNo !== $accountNo.val()) {
			accountModifyYn = 'Y';
		}

		if (accountModifyYn === 'Y') { // 환불계좌정보 변경 됐으면
			if (!gagajf.isNull($bankCd.val()) && !gagajf.isNull($accountNo.val())) {
				if (!accountCheck) {
					mcxDialog.alertC('계좌인증이 필요합니다.',{
						sureBtnText: "확인",
						sureBtnClick: function() {
						}
					});
					return;
				}
			}
		}

		if (gagajf.isNull(custModiFy.smsAgreeYn)) {
			custModiFy.smsAgreeYn = 'N';
		}

		if (gagajf.isNull(custModiFy.emailAgreeYn)) {
			custModiFy.emailAgreeYn = 'N';
		}

		// SMS 수신여부
		if (orgCustInfo.smsAgreeYn !== custModiFy.smsAgreeYn) {
			marketingModifyYn = 'Y';
		}

		// 이메일 수신여부
		if (orgCustInfo.emailAgreeYn !== custModiFy.emailAgreeYn) {
			marketingModifyYn = 'Y';
		}

		custModiFy.bankCd = $bankCd.val();
		custModiFy.emailModifyYn = emailModifyYn ;
		custModiFy.marketingModifyYn = marketingModifyYn;
		custModiFy.accountModifyYn = accountModifyYn;

		let jsonData = JSON.stringify(custModiFy);
		// console.log('jsonData',jsonData);
		gagajf.ajaxJsonSubmit('/mypage/customer/info/save', jsonData, fnSaveCustomerInfoCallback)
	});

	// 수정 콜백
	var fnSaveCustomerInfoCallback = function (result) {
		if (result.isSuccess) {
			mcxDialog.alert("회원정보가 수정되었습니다.");
			fnGetCustInfo();
			return;
		} else {
			mcxDialog.alert("실패하였습니다.<br/>고객센터에 문의하시 바랍니다.");
			return;
		}
	}

	// 은행계좌 유효성체크
	var fnGetAccountValidation = function () {
		let $bankCd = $('#custModiFyForm input[name=bankCd]');
		let $accountNo = $('#custModiFyForm input[name=accountNo]');

		if (gagajf.isNull($bankCd.val()) && !gagajf.isNull($accountNo.val())) {
			mcxDialog.alertC('은행을 선택해주세요.',{
				sureBtnText: "확인",
				sureBtnClick: function() {
					$bankCd.focus();
				}
			});
			return false
		}
		if (!gagajf.isNull($bankCd.val()) && gagajf.isNull($accountNo.val())) {
			mcxDialog.alertC('계좌번호를 입력해주세요.',{
				sureBtnText: "확인",
				sureBtnClick: function() {
					$accountNo.focus();
				}
			});
			return false;
		}
		return true;
	}


	$(document).ready(function(){
		$('#htopTitle').text('내 정보 관리');

		// 회원(고객) 조회
		fnGetCustInfo();

		//버튼 색
		$(document).on('click','.popup_box .button_list button',function(){
			$('.popup_box .button_list button').removeClass('on');
			$(this).addClass('on');
			$('.combo .select').html($(this)[0].innerHTML); // 값변경
		});

		//210408_ 추가 : 은행선택 팝업 스크립트
		$(document).on("click",".select_bank",function(e){
			$('#refundBankPop').show().addClass("active");
			$('#refundBankPop').css({"z-index":"1000"});
			$("body").css({"overflow":"hidden"});
		});

		//210408_ 추가 : 은행선택 팝업 스크립트 닫기
		$('.refundBankPop .popup_close').on("click",function(){
			$('.refundBankPop').hide().removeClass('active');
			$("body").css({"overflow":"visible"});
		});

	})
	/*]]>*/
</script>
</th:block>
</body>
</html>