13_마이페이지>포인트 ③ 포인트 충전, 인출 팝업

⑥ 포인트충전팝업

⑦ 포인트인출팝업

이제 포인트 쪽 팝업 2개만 남았다.

 

고럼 충전부터 ㄱㄱ,,,

⑥ 포인트충전팝업

1) 충전 form 관련 처리

    : 충전폼 금액 최대 200만원까지만 입력 가능 & 숫자만 입력 가능 & 입력 안하거나 계좌 선택 안하면 submit 안되게 처리

2) 회원의 계좌 목록 가져오기 (대표계좌 selected 처리) → 계좌관리에서 했던 쿼리 쓰면 됨

3) 포인트 충전

1) 충전 form 관련 처리

    : 충전폼 금액 최대 200만원까지만 입력 가능 & 숫자만 입력 가능 & 입력 안하거나 계좌 선택 안하면 submit 안되게 처리

$(".chargeBtn").click(function()
{
    $('#chargePointErrMsg').css('display', 'none');
    $('#chargeAccountErrMsg').css('display', 'none');

    if ($('#amount').val() === null || $('#amount').val() === '' || Number($('#amount').val()) > 2000000)
    {
        $('#chargePointErrMsg').css('display', 'block');
        $('#amount').focus();
        return false;
    }
    if ($('#account-select').val() === '0')
    {
        $('#chargeAccountErrMsg').css('display', 'block');
        return false;
    }

    $('#pointChargeForm').submit();
});

2) 회원의 계좌 목록 가져오기 (대표계좌 selected 처리)

<select id="account-select" name="account_code" class="form-select bank-select chargeAccount-select">
    <option value="0" selected>------- 계좌를 선택해주세요 -------</option>
    <c:forEach var="account" items="${accountList }">
        <c:choose>
            <c:when test="${account.is_main_account == 1 }">
                <option value="${account.code }" selected>
                	${account.bank_name } ${account.account_number }
                </option>
            </c:when>
            <c:otherwise>
                <option value="${account.code }">${account.bank_name } ${account.account_number }</option>
            </c:otherwise>
        </c:choose>
    </c:forEach>
</select>

3) 포인트 충전

충전테이블에 insert 해주기만 하면 된다. 간단간단

M11 회원의 포인트를 10000원 충전해보자ㅏㅏ (충전하기 전: 78465 원)

충전 완료 후 알림창

<확인> 버튼을 누르면 충전 팝업은 닫히고, 기존 페이지는 새로고침된다.

그래서 헤더의 보유 포인트에서도, 사용내역에서도 10000원 충전된 것을 확인할 수 있다~~

 

 

⑥ 포인트인출팝업

1) 인출 form 필요 데이터 : 회원의 현재 포인트 & 계좌 목록(포인트 충전과 동일)

2) 인출할 포인트: 회원의 현재 보유 포인트보다 큰 금액 입력하면, 자동으로 보유 포인트로 입력되게 처리

3) 인출 계좌: 포인트 충전과 동일하게 대표계좌 selected 처리

4) 포인트 인출

1) 인출 form 필요 데이터 : 회원의 현재 포인트 & 계좌 목록

2) 인출할 포인트: 회원의 현재 보유 포인트보다 큰 금액 입력하면, 자동으로 보유 포인트로 입력되게 처리

3) 인출 계좌: 포인트 충전과 동일하게 대표계좌 selected 처리

 

계좌목록 selectbox는 충전 쪽과 동일하니 생략하고,

아래는 form 제출 전 검사를 진행하는 스크립트 코드이다.

회원의 현재 보유 포인트를 가져올 때 천의 자리마다 찍혀있는 『,』를 먼저 제거해주고

인출할 포인트에 입력 후, focusout 했는데 입력 포인트가 현재 보유 포인트보다 크다면,,!!!

인출 포인트 값을 현재 보유 포인트로 바꾼다.

let point = '${point }';
point = point.replaceAll(',', '');

$('#amount').focusout(function()
{
    if (Number($('#amount').val()) > Number(point))
    {
        $('#withdrawPointErrMsg').css('display', 'none');
        $('#amount').val(point);
    }
});

인출 포인트 입력 여부와 계좌 선택 여부 검사 코드이다.

$(".point-withdrawBtn").click(function()
{
    $('#withdrawPointErrMsg').css('display', 'none');
    $('#withdrawAccountErrMsg').css('display', 'none');


    if ($('#amount').val() === null || $('#amount').val() === '' 
    		|| Number($('#amount').val()) > Number(point))
    {
        $('#withdrawPointErrMsg').css('display', 'block');
        $('#amount').focus();
        return false;
    }
    if ($('#account-select').val() === '0')
    {
        $('#withdrawAccountErrMsg').css('display', 'block');
        return false;
    }

    $('#pointWithdrawForm').submit();
});

 

4) 포인트 인출

이것도 인출테이블에 insert 해주기만 하면 된다! (인출 전 포인트: 110454 원)

딱 100,000원 맞추게 10454원을 인출해보자

 

인출 완료 후 알림

<확인> 버튼을 누르면 인출 팝업은 닫히고, 기존 페이지는 새로고침된다.

인출 후, 헤더의 보유 포인트와 사용내역에서 100,000원이 된 것과 10,454원을 인출한 것을 확인할 수 있다~~

selectbox에서 [인출] 선택하면 인출내역만 확인 가능

 

 

회원>마이페이지>포인트 파트 끝 !!