[Spring][쇼핑몰 프로젝트][41] 주문 구현(주문 페이지) - 4
https://kimvampa.tistory.com/275
This commit is contained in:
SeoJin Kim
@@ -161,10 +161,82 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 상품 정보 -->
|
||||
<div class="orderGoods_div">
|
||||
<!-- 상품 종류 -->
|
||||
<div class="goods_kind_div">
|
||||
주문상품 <span class="goods_kind_div_kind"></span>종 <span class="goods_kind_div_count"></span>개
|
||||
</div>
|
||||
<!-- 상품 테이블 -->
|
||||
<table class="goods_subject_table">
|
||||
<colgroup>
|
||||
<col width="15%">
|
||||
<col width="45%">
|
||||
<col width="40%">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>이미지</th>
|
||||
<th>상품 정보</th>
|
||||
<th>판매가</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="goods_table">
|
||||
<colgroup>
|
||||
<col width="15%">
|
||||
<col width="45%">
|
||||
<col width="40%">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<c:forEach items="${orderList}" var="ol">
|
||||
<tr>
|
||||
<td>
|
||||
<!-- 이미지 <td>-->
|
||||
</td>
|
||||
<td>${ol.bookName}</td>
|
||||
<td class="goods_table_price_td">
|
||||
<fmt:formatNumber value="${ol.salePrice}" pattern="#,### 원" /> | 수량 ${ol.bookCount}개
|
||||
<br><fmt:formatNumber value="${ol.totalPrice}" pattern="#,### 원" />
|
||||
<br>[<fmt:formatNumber value="${ol.totalPoint}" pattern="#,### 원" />P]
|
||||
<input type="hidden" class="individual_bookPrice_input" value="${ol.bookPrice}">
|
||||
<input type="hidden" class="individual_salePrice_input" value="${ol.salePrice}">
|
||||
<input type="hidden" class="individual_bookCount_input" value="${ol.bookCount}">
|
||||
<input type="hidden" class="individual_totalPrice_input" value="${ol.salePrice * ol.bookCount}">
|
||||
<input type="hidden" class="individual_point_input" value="${ol.point}">
|
||||
<input type="hidden" class="individual_totalPoint_input" value="${ol.totalPoint}">
|
||||
<input type="hidden" class="individual_bookId_input" value="${ol.bookId}">
|
||||
</td>
|
||||
</tr>
|
||||
</c:forEach>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 포인트 정보 -->
|
||||
<div class="point_div">
|
||||
<div class="point_div_subject">포인트 사용</div>
|
||||
<table class="point_table">
|
||||
<colgroup>
|
||||
<col width="25%">
|
||||
<col width="*">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>포인트 사용</th>
|
||||
<td>
|
||||
${memberInfo.point} | <input class="order_point_input" value="0">원
|
||||
<a class="order_point_input_btn order_point_input_btn_N" data-state="N">모두사용</a>
|
||||
<a class="order_point_input_btn order_point_input_btn_Y" data-state="Y" style="display: none;">사용취소</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 주문 종합 정보 -->
|
||||
</div>
|
||||
|
||||
@@ -285,6 +357,52 @@ function execution_daum_address(){
|
||||
}
|
||||
|
||||
|
||||
/* 포인트 입력 */
|
||||
//0 이상 & 최대 포인트 수 이하
|
||||
$(".order_point_input").on("propertychange change keyup paste input", function(){
|
||||
|
||||
const maxPoint = parseInt('${memberInfo.point}');
|
||||
|
||||
let inputValue = parseInt($(this).val());
|
||||
|
||||
if(inputValue < 0){
|
||||
$(this).val(0);
|
||||
} else if(inputValue > maxPoint){
|
||||
$(this).val(maxPoint);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* 포인트 모두사용 취소 버튼
|
||||
* Y: 모두사용 상태 / N : 모두 취소 상태
|
||||
*/
|
||||
$(".order_point_input_btn").on("click", function(){
|
||||
|
||||
const maxPoint = parseInt('${memberInfo.point}');
|
||||
|
||||
let state = $(this).data("state");
|
||||
|
||||
if(state == 'N'){
|
||||
console.log("n동작");
|
||||
/* 모두사용 */
|
||||
//값 변경
|
||||
$(".order_point_input").val(maxPoint);
|
||||
//글 변경
|
||||
$(".order_point_input_btn_Y").css("display", "inline-block");
|
||||
$(".order_point_input_btn_N").css("display", "none");
|
||||
} else if(state == 'Y'){
|
||||
console.log("y동작");
|
||||
/* 취소 */
|
||||
//값 변경
|
||||
$(".order_point_input").val(0);
|
||||
//글 변경
|
||||
$(".order_point_input_btn_Y").css("display", "none");
|
||||
$(".order_point_input_btn_N").css("display", "inline-block");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -247,6 +247,90 @@ a{
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 주문상품 정보 */
|
||||
.orderGoods_div{
|
||||
margin-top:30px;
|
||||
}
|
||||
.goods_kind_div{
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goods_subject_table{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.goods_subject_table th{
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
border-top: 2px solid #3084d9;
|
||||
background: #f4f9fd;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.goods_table{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
.goods_table tr{
|
||||
height: 110px;
|
||||
}
|
||||
.goods_table_price_td{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* 포인트 영역 */
|
||||
.point_div{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.point_div_subject{
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.point_table{
|
||||
border-color: #ddd;
|
||||
border-spacing: 0;
|
||||
border-top: 1px solid #363636;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
}
|
||||
.point_table th{
|
||||
border-color: #ddd;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
background: #fbfbfb;
|
||||
text-indent: 0;
|
||||
padding: 12px 5px 12px 20px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.point_table_td{
|
||||
border-color: #ddd;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
.order_point_input_btn{
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
border: 1px solid #aaa;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -161,10 +161,82 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 상품 정보 -->
|
||||
<div class="orderGoods_div">
|
||||
<!-- 상품 종류 -->
|
||||
<div class="goods_kind_div">
|
||||
주문상품 <span class="goods_kind_div_kind"></span>종 <span class="goods_kind_div_count"></span>개
|
||||
</div>
|
||||
<!-- 상품 테이블 -->
|
||||
<table class="goods_subject_table">
|
||||
<colgroup>
|
||||
<col width="15%">
|
||||
<col width="45%">
|
||||
<col width="40%">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>이미지</th>
|
||||
<th>상품 정보</th>
|
||||
<th>판매가</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="goods_table">
|
||||
<colgroup>
|
||||
<col width="15%">
|
||||
<col width="45%">
|
||||
<col width="40%">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<c:forEach items="${orderList}" var="ol">
|
||||
<tr>
|
||||
<td>
|
||||
<!-- 이미지 <td>-->
|
||||
</td>
|
||||
<td>${ol.bookName}</td>
|
||||
<td class="goods_table_price_td">
|
||||
<fmt:formatNumber value="${ol.salePrice}" pattern="#,### 원" /> | 수량 ${ol.bookCount}개
|
||||
<br><fmt:formatNumber value="${ol.totalPrice}" pattern="#,### 원" />
|
||||
<br>[<fmt:formatNumber value="${ol.totalPoint}" pattern="#,### 원" />P]
|
||||
<input type="hidden" class="individual_bookPrice_input" value="${ol.bookPrice}">
|
||||
<input type="hidden" class="individual_salePrice_input" value="${ol.salePrice}">
|
||||
<input type="hidden" class="individual_bookCount_input" value="${ol.bookCount}">
|
||||
<input type="hidden" class="individual_totalPrice_input" value="${ol.salePrice * ol.bookCount}">
|
||||
<input type="hidden" class="individual_point_input" value="${ol.point}">
|
||||
<input type="hidden" class="individual_totalPoint_input" value="${ol.totalPoint}">
|
||||
<input type="hidden" class="individual_bookId_input" value="${ol.bookId}">
|
||||
</td>
|
||||
</tr>
|
||||
</c:forEach>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 포인트 정보 -->
|
||||
<div class="point_div">
|
||||
<div class="point_div_subject">포인트 사용</div>
|
||||
<table class="point_table">
|
||||
<colgroup>
|
||||
<col width="25%">
|
||||
<col width="*">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>포인트 사용</th>
|
||||
<td>
|
||||
${memberInfo.point} | <input class="order_point_input" value="0">원
|
||||
<a class="order_point_input_btn order_point_input_btn_N" data-state="N">모두사용</a>
|
||||
<a class="order_point_input_btn order_point_input_btn_Y" data-state="Y" style="display: none;">사용취소</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 주문 종합 정보 -->
|
||||
</div>
|
||||
|
||||
@@ -285,6 +357,52 @@ function execution_daum_address(){
|
||||
}
|
||||
|
||||
|
||||
/* 포인트 입력 */
|
||||
//0 이상 & 최대 포인트 수 이하
|
||||
$(".order_point_input").on("propertychange change keyup paste input", function(){
|
||||
|
||||
const maxPoint = parseInt('${memberInfo.point}');
|
||||
|
||||
let inputValue = parseInt($(this).val());
|
||||
|
||||
if(inputValue < 0){
|
||||
$(this).val(0);
|
||||
} else if(inputValue > maxPoint){
|
||||
$(this).val(maxPoint);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* 포인트 모두사용 취소 버튼
|
||||
* Y: 모두사용 상태 / N : 모두 취소 상태
|
||||
*/
|
||||
$(".order_point_input_btn").on("click", function(){
|
||||
|
||||
const maxPoint = parseInt('${memberInfo.point}');
|
||||
|
||||
let state = $(this).data("state");
|
||||
|
||||
if(state == 'N'){
|
||||
console.log("n동작");
|
||||
/* 모두사용 */
|
||||
//값 변경
|
||||
$(".order_point_input").val(maxPoint);
|
||||
//글 변경
|
||||
$(".order_point_input_btn_Y").css("display", "inline-block");
|
||||
$(".order_point_input_btn_N").css("display", "none");
|
||||
} else if(state == 'Y'){
|
||||
console.log("y동작");
|
||||
/* 취소 */
|
||||
//값 변경
|
||||
$(".order_point_input").val(0);
|
||||
//글 변경
|
||||
$(".order_point_input_btn_Y").css("display", "none");
|
||||
$(".order_point_input_btn_N").css("display", "inline-block");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -247,6 +247,90 @@ a{
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 주문상품 정보 */
|
||||
.orderGoods_div{
|
||||
margin-top:30px;
|
||||
}
|
||||
.goods_kind_div{
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goods_subject_table{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.goods_subject_table th{
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
border-top: 2px solid #3084d9;
|
||||
background: #f4f9fd;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.goods_table{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
.goods_table tr{
|
||||
height: 110px;
|
||||
}
|
||||
.goods_table_price_td{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* 포인트 영역 */
|
||||
.point_div{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.point_div_subject{
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.point_table{
|
||||
border-color: #ddd;
|
||||
border-spacing: 0;
|
||||
border-top: 1px solid #363636;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
}
|
||||
.point_table th{
|
||||
border-color: #ddd;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
background: #fbfbfb;
|
||||
text-indent: 0;
|
||||
padding: 12px 5px 12px 20px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.point_table_td{
|
||||
border-color: #ddd;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
.order_point_input_btn{
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
border: 1px solid #aaa;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user