src/main/resources/templates/purchase/purchase.html

<!DOCTYPE html>
<html lang="utf-8">

<head>
<meta charset="utf-8">
<!-- Customized Bootstrap Stylesheet -->
<link th:href="@{/ordercss/style.css}" rel="stylesheet">

<style>
.home {
	width: 100%;
	height: 182px;
	background: #f2f4f5;
	border-bottom: solid 1px #edeff0;
}

.breadcrumbs_container {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: 1px;
	padding-left: 3px;
}

.breadcrumbs ul li {
	display: inline-block;
	position: relative;
}

.breadcrumbs ul li:not(:last-child)::after {
	display: inline-block;
	font-family: 'FontAwesome';
	content: '\f105';
	margin-left: 7px;
	margin-right: 4px;
	color: #384158;
}

.breadcrumbs ul li a {
	font-size: 14px;
	font-weight: 400;
	color: #384158;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.breadcrumbs ul li a:hover {
	color: #005b00;
}

/* point */
.tbl_edit01 {
	width: 100%;
	border-top: 1px solid #0085d2;
	box-sizing: border-box;
}

.tbl_edit01 tr {
	height: 46px;
	border-bottom: 1px solid #b2c4d0;
	box-sizing: border-box;
}

.tbl_edit01 th {
	background-color: #e9f1f6;
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	vertical-align: top;
	line-height: 46px;
}

.tbl_edit01 td {
	height: 46px;
	border-bottom: 1px solid #b2c4d0;
	color: #333333;
	font-size: 14px;
	box-sizing: border-box;
	padding: 5px;
}

.modal-title {
	font-size: 17px;
	text-align: left;
	font-weight: bold;
}

.modal_table {
	width: 100%;
}

#modal_coupon {
	width: 200px;
}

#modal_usebtn {
	margin: 10px;
	text-align: right;
}

#use_btn {
	margin: 10px;
	text-align: right;
	border-radius: 10px;
}
</style>
<!-- jQuery -->
<script type="text/javascript"
	src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- iamport.payment.js -->
<script type="text/javascript"
	src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script>
<script th:src="@{/plugins/colorbox/jquery.colorbox-min.js}"></script>
<script>
	//point
	function pointchange() {
		var userpoint = '[[${session.loginuser.userpoint}]]';
		var x = Number(document.getElementById("writepoint").value);
		var u = Number(document.getElementById("userpoint").value);
		var p = Number(document.getElementById("mentoringprice").value);
		var w = Number(document.getElementById("totalsale").value);
		
		var xx = $('#writepoint').val();
		var uu = $('#willusecoupon1').val();
		var pp = $('#mentoringprice').val();

			if (event.keyCode == 13) {
				//사용자가 양수를 입력했을 때
				if (x > 0) {
					//사용자가 가지고 있는 것보다 더 많은 포인트를 입력했을 때
					if (x > u) {
						var msg = "사용할 포인트를 초과하였습니다.";
						alert(msg);
					} else {
						// 사용할 포인트 띄우기
						var t = w+x;
						document.getElementById("willusepoint").innerHTML = x;
						document.getElementById("total_price").innerHTML = p-uu - x;
						var a = userpoint - x;
						$('#userpoint').val(a);

						//input hidden
						$('#willusepoint1').val(x);
						$('#total_price1').val(p-uu - x);
						$('#totalsale').val(uu+x);

					}

				} else {
					var msg = "포인트를 입력하세요";
					alert(msg);
				}
		}
	};

	//point 전체사용
	function chkPoint() {
		var u = '[[${session.loginuser.userpoint}]]';
		var p = Number(document.getElementById("mentoringprice").value);
		var checkbox = document.getElementById('chk_use');
		var w = Number(document.getElementById("totalsale").value);
		
		var xx = $('#writepoint').val();
		var pp = $('#mentoringprice').val();
		var uu = $('#willusecoupon1').val();

			//쓴 구폰이 있을 때(point는 안썼을 때)
			if (checkbox.checked != true) {
				document.getElementById("writepoint").value = null;
				document.getElementById("willusepoint").innerHTML = null;
				document.getElementById("total_price").innerHTML = p-uu;
				document.getElementById("willusepoint1").value = 0;
				document.getElementById("total_price1").value = p-uu;
				document.getElementById("userpoint").value = '[[${session.loginuser.userpoint}]]';

			} else {
				//point를 다썼을 때
				document.getElementById("writepoint").value = u;
				document.getElementById("willusepoint").innerHTML = u;
				document.getElementById("willusepoint1").value = u;
				document.getElementById("total_price").innerHTML = p-uu - u;
				document.getElementById("total_price1").value = p-uu - u;
				document.getElementById("userpoint").value = 0;

			}
		};
</script>
<script>
	function usingcoupon() {
		var userid = '[[${session.loginuser.userid}]]';

		$.ajax({
					type : "POST",
					data : {
						'userid' : userid
					},
					url : "[[@{/coupon}]]",
					dateType : "JSON",
					success : function(data) {
						//ajax를 이용해서 받아온 couponlist들
						list = data;
						console.log(list);
						//받아온 list(Object의 형태)들의 key(column명)을 뽑아냄.
						//또한 받아온 list(Object의 형태)의 개수가 여러개 일 수 있기 때문에 후에 while문을 돌리기 위한 Object들의 개수를 길이를 측정해서 뽑아냄.
						var size = Object.keys(list).length;
						console.log(size);
						var i = 0;
						//위에 column name
						console.log(Object.keys(list[0]));
						//받아온 Object객체 중에서 첫번째 객체를 뽑아줌.
						var list1 = Object.keys(list[0]);
						//위에서 뽑은 첫번째 객체의 3,4,5번째 column명들을 뽑아줌.
						var str = '<thead><tr>';
						str += '<th>'
								+ JSON.stringify(list1[2]).replace(/\"/gi, "")
								+ '</th>'; //couponid
						str += '<th>'
								+ JSON.stringify(list1[3]).replace(/\"/gi, "")
								+ '</th>'; //couponname
						str += '<th>'
								+ JSON.stringify(list1[4]).replace(/\"/gi, "")
								+ '</th>'; //couponprice
						str += '</tr></thead>';

						//body시작
						//Object의 개수가 여러개 나오기 때문에 위에서 구한 size만큼 돌려서 column의 value값들을 각각 뽑아줌.
						while (i < size) {
							console.log(Object.values(list[i]));
							//받아온 list(Object의 형태)들의 value를 뽑아냄. 해당 i에 맞는 객체가 나올 것
							var list2 = Object.values(list[i]);

							var bt1 = 'id="my-button1' + i + '"';

							var on1 = 'onclick="usecp('
									+ JSON.stringify(list2[4]) + ')"';
							//위에서 뽑은 value의 객체에서 3,4,5번째 value들을 뽑아줌
							console.log(JSON.stringify(list2[2]));
							str += '<tbody><tr>';
							str += '<td>' + JSON.stringify(list2[2]) + '</td>';
							str += '<td>'
									+ JSON.stringify(list2[3]).replace(/\"/gi,
											"") + '</td>';
							str += '<td id="couponprice">'
									+ JSON.stringify(list2[4]) + '</td>';
							str += '<td>'
									+ '<button data-dismiss="modal" type="button"' + bt1 + on1 + 'class="btn btn-outline-primary" style="border-radius:5px;">사용하기</button>'
									+ '</td>';
							str += '</tr></tbody>';
							//while안의 조건이 끝날때까지 돌아가기 위한 장치
							i = i + 1;

						}
						console.log(str);
						$('.modal_table').append(str);
					}
				});
	}
</script>
<script>
	function usecp(couponprice) {
		var p = Number(document.getElementById("mentoringprice").value);
		var u = parseInt(couponprice);
		
		var uu = $('#willusepoint1').val();
		var xx = $('#writepoint').val();
		var pp = $('#mentoringprice').val();
		
			document.getElementById("willusecoupon").innerHTML = u;
			document.getElementById("total_price1").value = p - u - uu;
			document.getElementById("total_price").innerHTML = p - u - uu;
			$('#willusecoupon1').val(u)
		}
</script>
</head>


<body>
	<div class="home">
		<div class="breadcrumbs_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="breadcrumbs">
							<ul>
								<li><a th:href="@{/}">홈</a></li>
								<li><a th:href="@{/mentoring/defaultmentoring}">멘토링</a></li>
								<li><a th:href="@{/mentoring/mentoringdetail}">멘토링 디테일</a></li>
								<li>구매</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Checkout Start -->

	<div class="container">
		<div class="row px-xl-5">
			<div class="col-lg-8">
				<h5 class="section-title position-relative text-uppercase mb-3">
					<span class="bg-secondary pr-3">Billing Address</span>
				</h5>
				<div class="bg-light p-30 mb-5">
					<div class="row">
						<div class="col-md-6 form-group">
							<label>멘토링 번호</label> <input id="mentoringid"
								class="form-control" type="text"
								th:value="${pur.mentoring_mentoringid}" readonly="readonly">
						</div>

						<div class="col-md-6 form-group">
							<label>멘토링 이름</label> <input id="mtitle"
								class="form-control" type="text"
								th:value="${pur.mentoring_mtitle}" readonly="readonly">
						</div>
						<div class="col-md-6 form-group">
							<label>멘토 아이디</label> <input id="mentorname"
								class="form-control" type="text" th:value="${pur.mentor_userid}"
								readonly="readonly">
						</div>
						<div class="col-md-6 form-group">
							<label>멘토링 날짜</label> <input id="mentoringdate"
								class="form-control" type="text"
								th:value="${pur.mentoring_mentoringdate}" readonly="readonly">
						</div>
						<div class="col-md-6 form-group">
							<label>멘토링 시간</label> <input id="mentoringtime"
								class="form-control" type="text"
								th:value="${pur.mentoringoption_mentoringtime}"
								readonly="readonly">
						</div>
						<div class="col-md-6 form-group">
							<label>멘토링 장소</label> <input id="mplace"
								class="form-control" type="text"
								th:value="${pur.mentoring_mplace}" readonly="readonly">
						</div>
						<div class="col-md-6 form-group">
							<label>멘토링 가격</label> <input id="mentoringprice"
								class="form-control" type="text"
								th:value="${pur.mentoring_mentoringprice}" readonly="readonly">
						</div>
						<input type="hidden" id="mentoringoptionid"
							th:value="${mto.mentoringoptionid}">
						<div class="col-md-12">
							<div class="custom-control custom-checkbox"
								style="margin-bottom: 20px;">
								<input type="checkbox" class="custom-control-input" id="shipto">
								<label class="custom-control-label" for="shipto"
									data-toggle="collapse" data-target="#shipping-address">
									포인트 사용하기</label>
							</div>
							<!-- 쿠폰사용버튼 -->
							<div>
								<button type="button" id="coupon_btn" th:onclick="usingcoupon()"
									data-toggle="modal" data-target="#couponModal"
									class="comment_button trans_200"
									style="color: black; width: 120px; height: 30px; background-color:#FFD333; border:none; border-color:#FFD333; border-radius: 10px;"><strong>쿠폰
									사용하기</strong></button>
							</div>
						</div>
					</div>
				</div>
				<div class="collapse mb-5" id="shipping-address">
					<h5 class="section-title position-relative text-uppercase mb-3">
						<span class="bg-secondary pr-3">Point</span>
					</h5>
					<div class="bg-light p-30">
						<div class="row">
							<div class="col-md-5 form-group">
								<!-- session에서 cust의 poinr값을 가지고옴 -->
								<label>내 포인트</label><span><input class="form-control"
									type="text" id="writepoint" placeholder="포인트를 입력하여 주세요."
									th:onkeypress="pointchange()"><input type="checkbox"
									id="chk_use" th:onclick="chkPoint()">포인트 전체 사용</span><input
									class="form-control" type="text" id="userpoint"
									th:value="${session.loginuser.userpoint}" readonly="readonly">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-4">
				<h5 class="section-title position-relative text-uppercase mb-3">
					<span class="bg-secondary pr-3">Order Total</span>
				</h5>
				<div class="bg-light p-30 mb-5">
					<div class="border-bottom">
						<div class="d-flex justify-content-between">
							<p>멘토링 가격</p>
							<p th:text="${pur.mentoring_mentoringprice}+${'원'}"
								id="ordermentoring_price"></p>
							<input type='hidden'
								th:value="${pur.mentoring_mentoringprice}+${'원'}"
								id="ordermentoring1_price1">
						</div>
						<div class="d-flex justify-content-between">
							<p>포인트</p>
							<p>
								<span id="willusepoint" th:text="${willusepoint}"></span> <input type='hidden'
									th:value="${totalsale}" name='totalsale' id="totalsale">
								<input type='hidden' th:value="${zero}" name='point'
									id="willusepoint1">
							</p>
						</div>
						<div class="d-flex justify-content-between">
							<p>쿠폰</p>
							<p>
								<span id="willusecoupon" th:text="${willusecoupon}"></span> <input type='hidden'
									th:value="${totalsale}" name='totalsale' id="totalsale">
								 <input type='hidden'
									th:value="${zero}" name='willusecoupon1' id="willusecoupon1">
							</p>
						</div>
					</div>
					<div class="pt-2">
						<div class="d-flex justify-content-between mt-2">
							<h5 style="font-family: 'IBM Plex Sans KR', sans-serif;">총 가격</h5>
							<h5 th:text="${pur.mentoring_mentoringprice}" id="total_price"></h5>
							<input type='hidden' th:value="${pur.mentoring_mentoringprice}"
								name='price' id="total_price1">
						</div>
					</div>
				</div>
				<div class="mb-5">
					<h5 class="section-title position-relative text-uppercase mb-3">
						<span class="bg-secondary pr-3">Payment</span>
					</h5>
					<button class="btn btn-block btn-primary font-weight-bold py-3"
						th:onclick="requestPay()">구매하기</button>

				</div>
			</div>
		</div>
	</div>

	<!------------- Modal --------------->
	<div class="modal fade" id="couponModal" data-backdrop="static"
		data-keyboard="false">
		<div class="modal-dialog modal-xl modal-dialog-centered"
			style="width: 700px;">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">보유 쿠폰</h4>
					<button type="button" class="close" data-dismiss="modal">×</button>

				</div>
				<div class="modal-body">
					<table class="modal_table">
					</table>
				</div>
				<div id="count" value="1"></div>
			</div>
		</div>
	</div>


</body>
<script>
	//일반 결제
	function requestPay() {
		//import
		var IMP = window.IMP;
		IMP.init("imp82873338");

		var today = new Date();
		var hours = today.getHours(); // 시
		var minutes = today.getMinutes(); // 분
		var seconds = today.getSeconds(); // 초
		var milliseconds = today.getMilliseconds();
		var makeMerchantUid = hours + minutes + seconds + milliseconds;

		//order시에 필요한 값들 변수로 다 선언해주기
		var mentoringid = $('#mentoringid').val();
		var mtitle = $('#mtitle').val();
		var mentorname = $('#mentorname').val();
		var mentoringdate = $('#mentoringdate').val();
		var mentoringtime = $('#mentoringtime').val();
		var mplace = $('#mplace').val();
		var mentoringoption_mentoringoptionid = $('#mentoringoptionid').val();//mentoringoptionid(purchasedetail)
		var total_price = $('#total_price1').val();//purprice(purchase)
		var userid = '[[${session.loginuser.userid}]]';//userid(purchase)
		var willusepoint = $('#willusepoint1').val();
		var willusecoupon = $('#willusecoupon1').val();
		var mentoringprice = $('#mentoringprice').val();

		IMP.request_pay({
			pg : 'html5_inicis',
			pay_method : 'card',
			merchant_uid : "IMP" + makeMerchantUid,
			name : mtitle,
			amount : total_price
		}, function(rsp) { // callback
			if (rsp.success) {
				var msg = '결제가 완료되었습니다.';
				var c = confirm(msg);
				if (c == true) {
					//성공시 이동할 페이지
					location.href = '[[@{/purchase/purchasefinish?userid=}]]'
							+ userid + '&[[@{mentoring_mentoringid=}]]'
							+ mentoringid + '&[[@{mentoring_mtitle=}]]'
							+ rsp.name + '&[[@{user_mentorname=}]]'
							+ mentorname + '&[[@{mentoring_mentoringdate=}]]'
							+ mentoringdate
							+ '&[[@{mentoringoption_mentoringtime=}]]'
							+ mentoringtime + '&[[@{mentoring_mplace=}]]'
							+ mplace
							+ '&[[@{mentoringoption_mentoringoptionid=}]]'
							+ mentoringoption_mentoringoptionid
							+ '&[[@{purprice=}]]' + rsp.paid_amount
							+ '&[[@{purpay=}]]' + rsp.pay_method
							+ '&[[@{purcard=}]]' + rsp.card_name
							+ '&[[@{willusepoint=}]]' + willusepoint
							+ '&[[@{willusecoupon=}]]' + willusecoupon
							+ '&[[@{mentoringprice=}]]' + mentoringprice;
				}
			} else {
				var msg = '결제에 실패하였습니다.';
				alert(msg);
			}
		})
	};
</script>
</html>