style24.front/src/main/webapp/WEB-INF/views/web/popup/RefundAccountAddPopupFormWeb.html

<!-- 환불계좌 등록 팝업 -->
<div class="modal-header">
	<h5 class="modal-title" id="refundLabel">환불계좌등록</h5>
</div>
<div class="modal-body">
	<div class="pop_cont">
		<form class="form_wrap" id="refundAccountForm">
			<table>
				<colgroup>
					<col width="90">
					<col width="380">
				</colgroup>
				<tbody>
					<tr>
						<th>
							<span>예금주</span>
						</th>
						<td>
							<div class="form_field">
								<div class="input_wrap">
									<input type="text" class="form_control" name="accountNm" th:value="${accountNm}" disabled="">
								</div>
							</div>
							<div class="txt_info">
								<ul>
									<li>
										회원명 본인이 예금주인 통장으로만 환불이 가능합니다.
									</li>
								</ul>
							</div>
						</td>
					</tr>
					<tr>
						<th>
							<span>은행명</span>
						</th>
						<td>
							<div class="form_field">
								<div class="select_custom select_bank">
									<div class="combo">
										<div class="select">은행명</div>
										<ul class="list">
											<li id="bankCd_" class="selected">
												<div text="선택"></div>
												<input type="hidden" name="bankCd" value=""/>
											</li>
											<th:block th:if="${bankList}" th:each="oneData, status : ${bankList}">
												<li th:id="|bankCd_${oneData.cd}|">
													<div th:text="${oneData.cdNm}"></div>
													<input type="hidden" name="bankCd" th:value="${oneData.cd}"/>
												</li>
											</th:block>
										</ul>
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<th>
							<span>계좌번호</span>
						</th>
						<td>
							<div class="form_field">
								<div class="input_wrap">
									<input type="text" class="form_control" name="accountNo" value="" placeholder="계좌번호를 입력해주세요.">
									<button type="button" id="confirmAccount" class="btn btn_dark btn_sm"><span>계좌인증</span></button>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
</div>
<div class="modal-footer">
	<button type="button" id="registerAccount" class="btn btn_dark"><span>계좌등록 후 환불신청</span></button>
</div>

<script th:inline="javascript">
	let ordNo = [[${ordNo}]];
	let isValid;

	$(document).ready( function() {
		var bank_selector = new sCombo('.select_custom.select_bank');
	});

	// 계좌인증 버튼 클릭 이벤트
	$('#confirmAccount').click(function() {
		let url = '/mypage/account/check';
		let accountNm = $('#refundAccountForm input[name=accountNm]').val();
		let accountNo = $('#refundAccountForm input[name=accountNo]').val();
		let bankCd = $('#refundAccountForm input[name=bankCd]').val();

		let data = {};
		data.accountNm = accountNm;
		data.accountNo = accountNo;
		data.bankCd = bankCd;
		data.ordNo = ordNo;

		let jsonData = JSON.stringify(data);

		gagajf.ajaxJsonSubmit(url, jsonData, function(result) {
			isValid = result.isValid;
			if (isValid) {
				mcxDialog.alert('계좌인증에 성공했습니다.')
			} else {
				mcxDialog.alert('계좌정보를 다시 확인해주세요.');
			}
		});
	});

	// 계좌등록 후 환불신청 버튼 클릭 이벤트
	$('#registerAccount').click(function() {
		if (isValid) {
			let accountNm = $('#refundAccountForm input[name=accountNm]').val();
			let accountNo = $('#refundAccountForm input[name=accountNo]').val();
			let bankCd = $('#refundAccountForm input[name=bankCd]').val();

			let data = {};
			data.accountNm = accountNm;
			data.accountNo = accountNo;
			data.bankCd = bankCd;

			// 부모창으로 정보 전달
			fnRegisterAccountCallback(data);

			// 팝업 닫기
			$(".close-modal").trigger("click");
		} else {
			mcxDialog.alert('계좌인증을 해주세요.');
		}
	});
</script>