feat(customer-vue): Just Pick-up 주문내역 페이지 구현

- 주문내역 페이지 카드 구현
- API 호출 부 구현

customer-vue/.env

@@ -1,4 +1,6 @@
 VUE_APP_BASEURL=https://just-pickup.com:8080
 VUE_APP_OWNER_SERVICE_BASEURL=https://just-pickup.com:8001
 VUE_APP_CUSTOMER_SERVICE_BASEURL=https://just-pickup.com:8000
-VUE_APP_STORE_API_URL=https://just-pickup.com:8000/store-service/api/customer
+
+VUE_APP_STORE_API_URL=https://just-pickup.com:8000/store-service/api/customer
+VUE_APP_ORDER_API_URL=https://just-pickup.com:8000/order-service/api/customer

customer-vue/src/api/order.js

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+export default {
+  requestOrderHistory(page) {
+    const options = {
+      params: {
+        page: page
+      }
+    }
+    return axios.get(process.env.VUE_APP_ORDER_API_URL + "/order/history", options);
+  }
+}

customer-vue/src/components/BottomNavigation.vue

@@ -6,25 +6,9 @@
       :value="value"
       color="primary"
   >
-    <v-btn>
+    <v-btn v-for="(item, index) in links" v-bind:key="index" @click="clickGo(index, item.url)">
-      <span>홈</span>
+      <span>{{ item.name }}</span>
-      <v-icon>mdi-home-outline</v-icon>
+      <v-icon>{{ item.icon }}</v-icon>
-    </v-btn>
-    <v-btn>
-      <span>검색</span>
-      <v-icon>mdi-magnify</v-icon>
-    </v-btn>
-    <v-btn>
-      <span>즐겨찾기</span>
-      <v-icon>mdi-cards-heart-outline</v-icon>
-    </v-btn>
-    <v-btn>
-      <span>주문내역</span>
-      <v-icon>mdi-clipboard-check-outline</v-icon>
-    </v-btn>
-    <v-btn>
-      <span>마이페이지</span>
-      <v-icon>mdi-account-outline</v-icon>
     </v-btn>
   </v-bottom-navigation>
 </template>
@@ -34,7 +18,20 @@ export default {
   name: "BottomNavigation",
   data: function() {
     return {
-      value: 0
+      value: 0,
+      links: [
+        {name: "홈", url: "/", icon: "mdi-home-outline"},
+        {name: "검색", url: "/search", icon: "mdi-magnify"},
+        {name: "즐겨찾기", url: "/", icon: "mdi-cards-heart-outline"},
+        {name: "주문내역", url: "/history", icon: "mdi-clipboard-check-outline"},
+        {name: "마이페이지", url: "/", icon: "mdi-account-outline"}
+      ]
+    }
+  },
+  methods: {
+    clickGo: function (index, url) {
+      this.value = index;
+      this.$router.push(url);
     }
   }
 }

customer-vue/src/components/OrderHistoryCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-card
+      class="mx-auto mb-5"
+      outlined
+
+  >
+    <v-list-item three-line>
+      <v-list-item-content>
+        <v-list-item-title class="text-h5 mb-3">
+          {{ card.storeName }}
+          <div class="grey--text caption">
+            {{ card.orderTime }}
+          </div>
+        </v-list-item-title>
+        <v-list-item-subtitle class="mb-5">
+          {{ card.orderStatus }}
+        </v-list-item-subtitle>
+        <div class="text-body-1 mb-5">
+          {{ card.orderItemNames }}
+        </div>
+        <div class="text--primary">
+          합계 : <b>{{ card.orderPrice }}원</b>
+        </div>
+      </v-list-item-content>
+
+      <v-list-item-avatar
+          tile
+          size="100"
+      >
+        <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
+      </v-list-item-avatar>
+
+    </v-list-item>
+
+    <v-card-actions class="pb-1">
+      <v-btn block color="primary">재주문하기</v-btn>
+    </v-card-actions>
+
+    <v-card-actions class="pt-1">
+      <v-btn block outlined color="primary">자세히보기</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "OrderHistoryCard",
+  props: {
+    card: {
+      storeName: String,
+      orderTime: String,
+      orderStatus: String,
+      orderItemNames: String,
+      orderPrice: String
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

customer-vue/src/main.js

@@ -29,19 +29,17 @@ axios.interceptors.response.use(
       const originalRequest = error.config;
       if (error.response.status === 401) {
         let code = error.response.data.code;
-        if (code === "EXPIRED") {
+        try {
-          console.log("## expired");
+          if (code === "EXPIRED") {
-          try {
             const accessToken = await auth.requestReissue();
             originalRequest.headers.Authorization = "Bearer " + accessToken;
             return axios(originalRequest);
-          } catch (reissueError) {
-            window.location.href = process.env.VUE_APP_BASEURL+"/login";
-            alert("권한이 없습니다. 다시 로그인 해주세요");
           }
+        } catch (error2) {
+          window.location.href = process.env.VUE_APP_BASEURL+"/login";
+          alert("권한이 없습니다. 다시 로그인 해주세요");
+          return Promise.reject(error2);
         }
-        window.location.href = process.env.VUE_APP_BASEURL+"/login";
-        alert("권한이 없습니다. 다시 로그인해주세요.");
       }
       return Promise.reject(error);
     }

customer-vue/src/router/router.js

@@ -28,7 +28,12 @@ const routes = [
         path: "/search",
         name: 'search-store',
         component: () => import('../views/SearchStore')
-      }
+      },
+      {
+        path: "/history",
+        name: 'order-history',
+        component: () => import('../views/OrderHistory')
+      },
     ]
   },
   {

customer-vue/src/views/OrderHistory.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+
+    <order-history-card
+        v-for="card in cards"
+        v-bind:key="card.orderId"
+        :card="card"
+    ></order-history-card>
+
+    <br>
+
+    <v-row justify="center" v-if="hasNext">
+      <v-btn @click="more"
+             elevation="2"
+             color="blue-grey"
+             class="ma-2 white--text"
+      >
+        <b>더보기</b>
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+    </v-row>
+
+    <v-overlay :value="isLoading">
+      <v-progress-circular
+          indeterminate
+          size="64"
+      ></v-progress-circular>
+    </v-overlay>
+  </div>
+</template>
+
+<script>
+import orderApi from "../api/order.js"
+
+import OrderHistoryCard from "../components/OrderHistoryCard";
+
+export default {
+  name: "OrderHistory",
+  components: {OrderHistoryCard},
+  mounted() {
+    this.search();
+  },
+  data: function() {
+    return {
+      isLoading: true,
+      page: 0,
+      cards: [],
+      hasNext: false
+    }
+  },
+  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.isLoading = false;
+    },
+    more: async function() {
+      this.isLoading = true;
+      try {
+        this.page += 1;
+        const response = await orderApi.requestOrderHistory(this.page);
+        this.renderCard(response.data)
+      } catch (error) {
+        console.log(error);
+      }
+      this.isLoading = false;
+    },
+    renderCard: function(json) {
+      const data = json.data;
+
+      this.hasNext = data.hasNext;
+      const orders = data.orders;
+
+      orders.forEach( (order) => {
+        let orderItemNames = [];
+        order.orderItems.forEach(orderItem => {
+          orderItemNames.push(orderItem.orderItemName);
+        })
+
+        this.cards.push({
+          orderId: order.orderId,
+          orderTime: order.orderTime,
+          storeName: order.storeName,
+          orderPrice: order.orderPrice,
+          orderStatus: order.orderStatus,
+          orderItemNames: orderItemNames.join(", ")
+        })
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>