Merge pull request #262 from lotteon2/develop

Develop
lotteon2 · Jan 21, 2024 · 1123fc6 · 1123fc6
2 parents 35cd588 + 901272c
commit 1123fc6
Show file tree

Hide file tree

Showing 13 changed files with 186 additions and 139 deletions.
diff --git a/src/apis/order/orderDto.ts b/src/apis/order/orderDto.ts
@@ -40,6 +40,7 @@ export interface OrderSheet {
   deliveryInfo: DeliveryInfo | null
   paymentType: String
   referralCode: String | null
+  auctionId: String | null
 }
 
 export interface OrderItem {

diff --git a/src/apis/product/ProductDto.ts b/src/apis/product/ProductDto.ts
@@ -55,7 +55,7 @@ export interface ProductInfo {
   productId: Number
   productName: String
   imgUrl: String
-  categoryId: Number
+  categoryId: Number | null
   sizeId: Number
   sizeName: String
   orderPrice: number

diff --git a/src/assets/css/order/order-history.css b/src/assets/css/order/order-history.css
@@ -4,45 +4,110 @@
   font-size: 30px;
   font-style: normal;
   font-weight: 700;
-  line-height: 50px;
+  line-height: 50px; /* 166.667% */
   margin-bottom: 10px;
 }
 
-.inner-title-container {
-  display: flex;
-  margin-top: 10px;
-  margin-bottom: 37px;
-  align-items: flex-end;
-  height: 50px;
-}
-
-.container-inner-title {
-  color: var(--Grayscale7, #000);
-  font-family: 'TheJamsil';
-  font-size: 25px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 50px;
-}
-
-.container-inner-title2 {
-  color: var(--Grayscale7, #000);
-  font-family: 'TheJamsil';
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 45px;
-}
-
 .container-line {
   width: 100%;
   height: 2px;
   background: #000;
 }
 
+.table-block {
+  padding-bottom: 10px;
+
+  & table {
+    width: 100%;
+
+    & thead {
+      font-size: 1.25vw;
+      font-weight: bold;
+      border-top: black 2px solid;
+      border-bottom: black 1px solid;
+
+      & tr {
+        & th {
+          padding-top: 10px;
+          padding-bottom: 10px;
+        }
+      }
+    }
+
+    & tbody {
+      & tr {
+        border-bottom: 1px solid #c6c6c6;
+
+        & td {
+          font-size: 1vw;
+          padding-top: 10px;
+          padding-bottom: 10px;
+          text-align: center;
+        }
+      }
+
+      & tr:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
+
+& tbody {
+  & tr {
+    border-bottom: 1px solid #c6c6c6;
+
+    & td {
+      font-size: 1vw;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      text-align: center;
+    }
+  }
+
+  & tr:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}
 .order-check-container {
   display: flex;
   flex-direction: column;
+  width: 54vw;
+  padding: 10px;
+  font-family: TheJamsil;
+}
+
+.use-button {
+  width: 67px;
+  height: 29px;
+  background: var(--Grayscale7, #000);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--Grayscale1, #fff);
+  text-align: center;
+  font-family: The Jamsil;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px; /* 250% */
+  cursor: pointer;
+}
+
+.use-button-disable {
+  width: 67px;
+  height: 29px;
+  /* background: var(--Grayscale7, #000); */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--Grayscale1, #fff);
+  text-align: center;
+  font-family: The Jamsil;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px; /* 250% */
 }
 
 .process-container {

diff --git a/src/components/order/OrderComponent.vue b/src/components/order/OrderComponent.vue
@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { ref } from 'vue'
 import OrderDetailComponent from '@/components/order/orderDetail/OrderDetailComponent.vue'
 import type { OrderDetailResponse } from '@/apis/order/orderDto'
@@ -19,23 +19,29 @@ const toggleCard = async (orderNo: string) => {
 }
 </script>
 
-<template v-if='props.orders'>
-  <tbody v-for='(order, index) in props.orders' :key="'row-' + index">
-  <tr @click='toggleCard(order.orderNo)' class='table-inner-header'>
-    <th>{{ order.orderNo }}</th>
-    <th>{{ order.productsName }}</th>
-    <th>{{ order.totalAmount.toLocaleString() }}</th>
-    <th>{{ order.status }}</th>
-    <th>{{ order.createdAt }}</th>
-  </tr>
+<template v-if="props.orders">
+  <tbody>
+    <tr
+      v-for="(order, index) in props.orders"
+      :key="'row-' + index"
+      @click="toggleCard(order.orderNo)"
+      class="table-inner-header"
+    >
+      <td>{{ order.orderNo }}</td>
+      <td>{{ order.productsName }}</td>
+      <td>{{ order.totalAmount.toLocaleString() }} 원</td>
+      <td>{{ order.usedPoints.toLocaleString() }} 원</td>
+      <td>{{ order.status }}</td>
+      <td>{{ order.createdAt }}</td>
+    </tr>
 
-  <tr v-if='selectedRowIndex === order.orderNo' :key="'card-' + index">
-    <td colspan='6'>
-      <div class='order-history'>
-        <OrderDetailComponent :orderNo='order.orderNo' />
-      </div>
-    </td>
-  </tr>
+    <!-- <tr v-if="selectedRowIndex === order.orderNo" :key="'card-' + index">
+      <td colspan="6">
+        <div class="order-history">
+          <OrderDetailComponent :orderNo="order.orderNo" />
+        </div>
+      </td>
+    </tr> -->
   </tbody>
 </template>
 

diff --git a/src/components/order/OrderHistoryComponent.vue b/src/components/order/OrderHistoryComponent.vue
@@ -78,12 +78,7 @@ const handleSelectedOptionChange = async (
 <template>
   <div class="order-check-container">
     <div class="container-title">주문/배송 조회</div>
-    <div class="container-line"></div>
     <div>
-      <div class="container-inner-line"></div>
-      <div class="inner-title-container">
-        <div class="container-inner-title">주문 내역&nbsp;&nbsp;</div>
-      </div>
       <div class="order-type-select-wrapper">
         <Select
           class="order-type-select"
@@ -93,24 +88,30 @@ const handleSelectedOptionChange = async (
         >
         </Select>
       </div>
-      <table>
-        <col width="200px" />
-        <col width="200px" />
-        <col width="200px" />
-        <col width="200px" />
-        <col width="200px" />
-        <tr class="table-header">
-          <th>주문번호</th>
-          <th>상품명</th>
-          <th>결제금액</th>
-          <th>주문상태</th>
-          <th>결제일시</th>
-        </tr>
-        <OrderComponent v-if="orders.length !== 0"  :orders="orders" @showModal="(index) => open(index)" />
-        <td v-else colspan='5' style='width: 100%; text-align: center'>
-          <WhitePageComponent message="주문 내역이 없습니다" />
-        </td>
-      </table>
+      <div class="table-block">
+        <table>
+          <thead>
+            <tr>
+              <th>주문번호</th>
+              <th>상품명</th>
+              <th v-if="selectedOption === 'AUCTION'">낙찰금액</th>
+              <th v-else>결제금액</th>
+              <th>포인트 차감액</th>
+              <th>주문상태</th>
+              <th>결제일시</th>
+              <th></th>
+            </tr>
+          </thead>
+          <OrderComponent
+            v-if="orders.length !== 0"
+            :orders="orders"
+            @showModal="(index) => open(index)"
+          />
+          <td v-else colspan="5" style="width: 100%; text-align: center">
+            <WhitePageComponent message="주문 내역이 없습니다" />
+          </td>
+        </table>
+      </div>
 
       <div v-if="showModal" class="modal" @click="closeModal">
         <div class="modal-content" @click.stop>

diff --git a/src/components/product/ProductListPriceDisplay.vue b/src/components/product/ProductListPriceDisplay.vue
@@ -53,6 +53,7 @@ const hasDiscount = computed(() => props.discountPercentage > 0)
 .product-price__original,
 .product-price__discount,
 .product-price__final {
+  font-family: 'TheJamsil';
   font-size: 18px;
   line-height: 24px;
   width: 100%;
@@ -66,6 +67,7 @@ const hasDiscount = computed(() => props.discountPercentage > 0)
 }
 
 .product-price__discount {
+  font-family: 'TheJamsil';
   width: 20%;
   color: #c22727;
   font-size: 18px;

diff --git a/src/components/promotion/EventComponent.vue b/src/components/promotion/EventComponent.vue
@@ -5,9 +5,12 @@ import type {
   ReadAuctionHistoryPageResponse,
   ReadAuctionHistoryResponse
 } from '@/apis/auction/AuctionDto'
+import type { ProductInfo } from '@/apis/product/ProductDto'
 import WhitePageComponent from '@/components/wishcart/WhitePageComponent.vue'
 import { getAuctionHistory } from '@/apis/auction/AuctionClient'
-
+import { useProductStore } from '@/stores/product/ProductStore'
+import router from '@/router'
+const productStore = useProductStore()
 const requestSize: number = 4
 const requestPage = ref<number>(0)
 const totalPages = ref<number>(0)
@@ -22,63 +25,6 @@ const fetchData = async () => {
   totalPages.value = response.totalPages
   totalElements.value = response.totalElements
   histories.value = response.responses
-
-  // dummy data
-  // totalElements.value = 3
-  // totalPages.value = 1
-  // histories.value = [
-  //   {
-  //     id: 'AH1',
-  //     memberId: '1',
-  //     auctionId: 'A1',
-  //     auctionName: 'A1',
-  //     auctionProductId: 101,
-  //     auctionProductImg: 'https://dummyimage.com/200',
-  //     auctionProductName: '상품A',
-  //     auctionProductSizeId: 1,
-  //     auctionProductSizeName: '소형',
-  //     winner: true,
-  //     paid: false,
-  //     amountToPay: 10000,
-  //     memberHighestBid: 12000,
-  //     auctionWinnerBid: 10000,
-  //     createdAt: '2024-02-01T00:00:00'
-  //   },
-  //   {
-  //     id: 'AH2',
-  //     memberId: '1',
-  //     auctionId: 'A2',
-  //     auctionName: 'A2',
-  //     auctionProductId: 102,
-  //     auctionProductImg: 'https://dummyimage.com/200',
-  //     auctionProductName: '상품B',
-  //     auctionProductSizeId: 2,
-  //     auctionProductSizeName: '중형',
-  //     winner: false,
-  //     paid: false,
-  //     amountToPay: 20000,
-  //     memberHighestBid: 22000,
-  //     auctionWinnerBid: 20000,
-  //     createdAt: '2024-02-01T00:00:00'
-  //   },
-  //   {
-  //     id: 'AH3',
-  //     memberId: '1',
-  //     auctionId: 'A3',
-  //     auctionName: 'A3',
-  //     auctionProductId: 103,
-  //     auctionProductImg: 'https://dummyimage.com/200',
-  //     auctionProductName: '상품C',
-  //     auctionProductSizeId: 3,
-  //     auctionProductSizeName: '대형',
-  //     winner: true,
-  //     paid: true,
-  //     amountToPay: 30000,
-  //     memberHighestBid: 33000,
-  //     auctionWinnerBid: 30000,
-  //     createdAt: '2024-02-01T00:00:00'
-  //   }
-  // ]
 }
 
 const onChangePage = async (page: number) => {
@@ -96,8 +42,23 @@ watch(requestPage, async (afterPage: number, beforePage: number) => {
   }
 })
 
-const orderAuctionProduct = (history: ReadAuctionHistoryResponse) => {
-  console.log(history)
+const orderAuctionProduct = async (history: ReadAuctionHistoryResponse) => {
+  const productInfo: ProductInfo[] = [
+    {
+      productId: history.auctionProductId,
+      productName: history.auctionProductName,
+      categoryId: null,
+      imgUrl: history.auctionProductImg,
+      sizeId: history.auctionProductSizeId,
+      sizeName: history.auctionProductSizeName,
+      orderPrice: history.auctionWinnerBid,
+      quantity: 1,
+      couponInfoId: null,
+      discountAmount: 0
+    }
+  ]
+  await productStore.setProducts(productInfo, 'AUCTION', null, history.auctionId)
+  router.push('/orders')
 }
 
 const formatDate = (localDateTime: string) => {

diff --git a/src/components/promotion/coupon/checkout/CheckoutCouponModal.vue b/src/components/promotion/coupon/checkout/CheckoutCouponModal.vue
@@ -147,7 +147,7 @@ const applyCouponDatas = () => {
     }
   })
 
-  productStore.setProducts(updatedProducts, productStore.orderType, null)
+  productStore.setProducts(updatedProducts, productStore.orderType, null, null)
 }
 
 onMounted(async () => {