-
Notifications
You must be signed in to change notification settings - Fork 4
/
purchase.html
529 lines (484 loc) · 16.3 KB
/
purchase.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
<!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>