fix(customer-vue): 주문내역 상세보기 로직 추가

- 주문내역 메뉴에서 상세보기 버튼 클릭 시 상세보기 페이지로 이동

customer-vue/src/api/order.js

@@ -24,5 +24,7 @@ export default {
   getOrder() {
     return axios.get(process.env.VUE_APP_ORDER_API_URL + "/order/orders");
   },
-
+  getOrderDetail(orderId) {
+    return axios.get(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL + "/order-service/api/order-detail/" + orderId);
+  }
 }

customer-vue/src/components/OrderHistoryCard.vue

@@ -12,7 +12,7 @@
           </div>
         </v-list-item-title>
         <v-list-item-subtitle class="mb-5">
-          {{ card.orderStatus }}
+          {{ card.orderStatus | getOrderStatusName }}
         </v-list-item-subtitle>
         <div class="text-body-1 mb-5">
           {{ card.orderItemNames }}
@@ -50,6 +50,7 @@ export default {
   name: "OrderHistoryCard",
   props: {
     card: {
+      orderId: String,
       storeId: Number,
       storeName: String,
       orderTime: String,
@@ -66,7 +67,10 @@ export default {
       })
     },
     clickDetail: function() {
-      alert("준비 중입니다.");
+      this.$router.push({
+        name: "order-detail",
+        params: {orderId: this.card.orderId}
+      });
     }
   }
 }

customer-vue/src/main.js

@@ -19,10 +19,29 @@ axios.interceptors.request.use(function (config) {
   config.headers.Authorization = "Bearer " + jwt.getToken();
   return config;
 });
+
 Vue.filter('currency', function (value) {
   var num = new Number(value);
   return num.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
 });
+Vue.filter('getOrderStatusName', function (orderStatus) {
+  switch (orderStatus) {
+    case "PLACED":
+      return "주문신청";
+    case "ACCEPTED":
+      return "주문수락";
+    case "REJECTED":
+      return "주문거절";
+    case "WAITING":
+      return "픽업대기";
+    case "FINISHED":
+      return "픽업완료";
+    case "FAILED":
+      return "주문실패";
+    default:
+      break;
+  }
+});
 
 axios.interceptors.response.use(
     (response) => {
@@ -43,6 +62,8 @@ axios.interceptors.response.use(
           alert("권한이 없습니다. 다시 로그인 해주세요");
           return Promise.reject(error2);
         }
+      } else {
+        if (error.response.data.message) alert(error.response.data.message);
       }
       return Promise.reject(error);
     }

customer-vue/src/router/router.js

@@ -82,6 +82,13 @@ const routes = [
         name: 'mypage',
         component: () => import('../views/MyPage')
       },
+      {
+        path: "/order-detail/:orderId",
+        beforeEnter: authCheck,
+        name: 'order-detail',
+        props: true,
+        component: () => import('../views/OrderDetail')
+      },
     ]
   },
   {

customer-vue/src/views/OrderDetail.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <v-list-item three-line>
+      <v-list-item-content>
+        <v-list-item-title class="text-h5 mb-3">
+          {{ orderInfo.storeName }}
+          <div class="grey--text caption">
+          </div>
+        </v-list-item-title>
+        <v-list-item-subtitle class="mb-5">
+          {{ orderInfo.orderStatus | getOrderStatusName }}
+        </v-list-item-subtitle>
+        <div class="text-body-1 mb-5">
+          주문번호: {{ orderInfo.id }}
+        </div>
+        <div class="text--primary">
+          주문일시: {{ orderInfo.orderTime }}
+        </div>
+      </v-list-item-content>
+    </v-list-item>
+
+    <v-divider class="my-4"></v-divider>
+
+    <v-list-item two-line
+      v-for="order in orderItems" :key="order.id"
+    >
+      <v-list-item-content>
+        <v-list-item-title class="mb-2">
+          {{order.name}} {{order.count}}개
+        </v-list-item-title>
+        <v-list-item-subtitle v-if="order.options.length > 0">
+          ㄴ {{order.options}}
+        </v-list-item-subtitle>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-list-item-action-text class="text-body-1">
+          {{order.totalPrice | currency}}원
+        </v-list-item-action-text>
+      </v-list-item-action>
+    </v-list-item>
+
+    <v-divider class="my-4"></v-divider>
+
+    <v-simple-table class="no-border-table">
+      <template v-slot:default>
+        <tbody>
+        <tr>
+          <td><span class="orange--text"><b>합계</b></span></td>
+          <td class="text-right">{{orderInfo.orderPrice | currency}}</td>
+        </tr>
+        <tr>
+          <td>포인트사용</td>
+          <td class="text-right">0</td>
+        </tr>
+        <tr>
+          <td>쿠폰 할인</td>
+          <td class="text-right">0</td>
+        </tr>
+        <tr>
+          <td><span class="orange--text"><b>결제금액</b></span></td>
+          <td class="text-right"><b>{{orderInfo.orderPrice | currency}}</b></td>
+        </tr>
+        </tbody>
+      </template>
+    </v-simple-table>
+
+  </div>
+</template>
+
+<script>
+import orderApi from "../api/order";
+
+export default {
+  name: "OrderDetail",
+  props: ["orderId"],
+  data: function() {
+    return {
+      user: {},
+      orderInfo: {},
+      orderItems: []
+    };
+  },
+  mounted() {
+    this.search();
+  },
+  methods: {
+    search: async function() {
+      const response = await orderApi.getOrderDetail(this.orderId);
+      this.render(response.data);
+    },
+    render: function(json) {
+      const orderDetail = json.data;
+
+      const orderUser = orderDetail.user;
+      this.user = {
+        id: orderUser.id,
+        name: orderUser.name,
+        phoneNumber: orderUser.phoneNumber
+      };
+
+      this.orderInfo = {
+        id: orderDetail.id,
+        orderTime: orderDetail.orderTime,
+        orderPrice: orderDetail.orderPrice,
+        orderStatus: orderDetail.orderStatus,
+        storeName: orderDetail.storeName
+      };
+
+      const orderItems = orderDetail.orderItems;
+      orderItems.forEach(orderItem => {
+
+        let orderItemOptions = []
+        orderItem.options.forEach(option => {
+          const optionTypeName = option.optionType == "REQUIRED" ? "필수" : "기타";
+          orderItemOptions.push(option.name + "(" + optionTypeName + ")");
+        });
+
+        this.orderItems.push({
+          id: orderItem.id,
+          itemId: orderItem.itemId,
+          totalPrice: orderItem.totalPrice,
+          count: orderItem.count,
+          name: orderItem.name,
+          options: orderItemOptions.join(",")
+        });
+      });
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .no-border-table tbody tr td {
+    border-bottom: none !important;
+  }
+</style>

customer-vue/src/views/OrderHistory.vue

@@ -51,14 +51,10 @@ export default {
   methods: {
     search: async function() {
       this.isLoading = true;
-      try {
-        this.page = 0;
-        const response = await orderApi.requestOrderHistory(this.page);
-        this.cards = [];
-        this.renderCard(response.data);
-      } catch (error) {
-        console.log(error);
-      }
+      this.page = 0;
+      const response = await orderApi.requestOrderHistory(this.page);
+      this.cards = [];
+      this.renderCard(response.data);
       this.isLoading = false;
     },
     more: async function() {
@@ -85,19 +81,11 @@ export default {
           storeId: order.storeId,
           storeName: order.storeName,
           orderPrice: order.orderPrice,
-          orderStatus: this.getOrderStatusName(order.orderStatus),
+          orderStatus: order.orderStatus,
           orderItemNames: this.getOrderItemName(order.orderItems)
         })
       });
     },
-    getOrderStatusName(orderStatus) {
-      if (orderStatus === "PLACED") return "주문신청";
-      if (orderStatus === "REJECTED") return "주문거절";
-      if (orderStatus === "ACCEPTED") return "주문수락";
-      if (orderStatus === "WAITING") return "픽업대기";
-      if (orderStatus === "FINISHED") return "픽업완료";
-      return orderStatus;
-    },
     getOrderItemName(orderItems) {
       const itemSize = orderItems.length;
       if (itemSize == 1) return orderItems[0].orderItemName;