feat(order-service, customer-vue): 주문 페이지 추가

- 장바구니 데이터 조회
- 주문 페이지 개발

customer-vue/src/api/order.js

@@ -16,5 +16,13 @@ export default {
     }
     item.itemOptionIds.push(item.requireOption)
     return axios.post(process.env.VUE_APP_ORDER_API_URL+'/order/item', item);
-  }
+  },
+  saveOrder(order){
+    //만약 동시요청으로 장바구니가 두개 생겨버린다면?
+    return axios.post(process.env.VUE_APP_ORDER_API_URL + "/order/orders", order);
+  },
+  getOrder() {
+    return axios.get(process.env.VUE_APP_ORDER_API_URL + "/order/orders");
+  },
+
 }

customer-vue/src/components/AppNavigation.vue

@@ -4,18 +4,22 @@
       dense
       color="white"
       elevation="1"
+
   >
-    <v-app-bar-nav-icon>
-      <v-icon>mdi-arrow-left</v-icon>
-    </v-app-bar-nav-icon>
-    <v-spacer></v-spacer>
-    <v-toolbar-title>
-      <v-img :src="require('@/assets/just-logo.png')"></v-img>
-    </v-toolbar-title>
-    <v-spacer></v-spacer>
-    <v-btn icon>
-      <v-icon>mdi-magnify</v-icon>
-    </v-btn>
+
+    <v-row class="d-flex" style="max-width: 768px;display: table; margin-left: auto; margin-right: auto; width: 100%" align="center">
+      <v-app-bar-nav-icon>
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-app-bar-nav-icon>
+      <v-spacer></v-spacer>
+      <v-toolbar-title>
+        <v-img :src="require('@/assets/just-logo.png')"></v-img>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon>
+        <v-icon>mdi-magnify</v-icon>
+      </v-btn>
+    </v-row>
   </v-app-bar>
 </template>
 

customer-vue/src/router/router.js

@@ -59,13 +59,19 @@ const routes = [
         name: 'login',
         component: () => import('../views/LoginPage')
       },
+      {
+        path: "/item/:storeId/:itemId",
+        name: 'itemDetail',
+        component: () => import('../views/ItemDetail')
+      },
+      {
+        path: "/order",
+        name: 'orderPage',
+        component: () => import('../views/OrderPage')
+      },
     ]
   },
-  {
-    path: "/item/:storeId/:itemId",
-    name: 'itemDetail',
-    component: () => import('../views/ItemDetail')
-  },
+
 
   {
     path: '/auth',

customer-vue/src/views/ItemDetail.vue

@@ -1,6 +1,5 @@
 <template>
-  <v-main>
-    <v-container >
+    <div >
       <v-row>
         <v-col>
           <v-img :src="require('@/assets/store.jpeg')"
@@ -8,33 +7,29 @@
           />
         </v-col>
       </v-row>
-      <v-row >
-        <v-col >
-          <v-subheader >
+      <v-row class="mt-5" >
+        <v-col  >
+          <div class="text-h3" >
             {{itemData.name}}
-          </v-subheader>
+          </div>
         </v-col>
       </v-row>
-      <v-row >
-        <v-col class="text-h3">
-          <v-container>
-            <span class="text-h3">가격</span>
-          </v-container>
+      <v-row class="mt-5" >
+        <v-col class="text-h5">
+            <span class="text-h5">가격</span>
         </v-col>
         <v-spacer></v-spacer>
         <v-spacer></v-spacer>
         <v-col >
           <v-container>
-            <div class="text-h3">{{ itemData.price }}원</div>
+            <div class="text-h5">{{ itemData.price }}원</div>
           </v-container>
         </v-col>
       </v-row>
       <v-divider/>
-      <v-row >
-        <v-col >
-          <v-container>
-            <div class="text-h3">수량</div>
-          </v-container>
+      <v-row class="mt-5">
+        <v-col>
+            <div class="text-h5">수량</div>
         </v-col>
         <v-spacer></v-spacer>
         <v-spacer></v-spacer>
@@ -45,7 +40,6 @@
                 append-outer-icon="mdi-plus"
                 prepend-icon="mdi-minus"
                 filled
-                label="수량"
                 type="number"
                 @click:append-outer="addItemCount(1)"
                 @click:prepend="addItemCount(-1)"
@@ -55,10 +49,9 @@
         </v-col>
       </v-row>
       <v-divider/>
-      <v-row>
+      <v-row class="mt-5">
         <v-col>
-          <v-container>
-          <div class="text-h3"> 필수 옵션</div>
+          <div class="text-h5"> 필수 옵션</div>
           <v-radio-group v-model="setItem.requireOption">
             <v-radio
                 v-for="itemOption in requireGroup"
@@ -67,14 +60,12 @@
                 :value="itemOption.id"
             />
           </v-radio-group>
-          </v-container>
         </v-col>
       </v-row>
       <v-divider/>
-      <v-row>
+      <v-row class="mt-5">
         <v-col>
-          <v-container>
-          <div class="text-h3"> 추가 옵션</div>
+          <div class="text-h5"> 추가 옵션</div>
             <v-checkbox
                 class="shrink mr-2 mt-0"
                 v-model="setItem.otherOptions"
@@ -83,15 +74,13 @@
                 :label="itemOption.name"
                 :value="itemOption.id"
             />
-          </v-container>
         </v-col>
       </v-row>
       <v-btn
           block
           @click="addItem"
       >담기</v-btn>
-    </v-container>
-  </v-main>
+    </div>
 </template>
 
 <script>
@@ -100,12 +89,12 @@ import orderApi from "@/api/order";
 
 export default {
   name: "ItemDetail",
-  mounted() {
+  async beforeMount() {
     console.log(this.$route.params)
     this.storeId = this.$route.params.storeId
     this.itemId = this.$route.params.itemId
     this.setItem.storeId = this.storeId;
-    this.getItemData()
+    await this.getItemData()
   },
   computed: {
     requireGroup:function(){
@@ -114,7 +103,6 @@ export default {
     otherGroup:function(){
       return this.parseGroup('OTHER')
     }
-
   },
   data: function() {
     return {
@@ -134,7 +122,7 @@ export default {
     }
   },
   methods: {
-    getItemData: function (){
+    getItemData: async function (){
       storeApi.getItemById(this.itemId)
       .then(response=>{
         console.log(response)
@@ -144,6 +132,7 @@ export default {
       })
       .catch(error=>{
         console.log(error)
+        this.$router.replace("/")
       })
     },
     parseGroup: function (type){
@@ -158,10 +147,10 @@ export default {
           this.setItem.count+v >=0? this.setItem.count+v: 0;
     },
     addItem: function(){
-      console.log(this.setItem)
       orderApi.addItemToBasket(this.setItem)
           .then(response=>{
             console.log(response)
+            this.$router.replace("/store/"+this.storeId)
           })
           .catch(error=>{
             console.log(error)
@@ -172,12 +161,4 @@ export default {
 </script>
 
 <style scoped>
-.container {
-  max-width: 768px;
-  background-color: white;
-  height: 100%;
-}
-main {
-  background-color: #f2f2f2!important;
-}
 </style>

customer-vue/src/views/OrderPage.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <v-row>
+      <v-col>
+        <div class="text-h4" style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ orderData.storeId }}</div>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        v-for=" orderItem in orderData._orderItemDtos"
+        :key = "orderItem.itemId"
+      >
+        <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">
+                {{ orderItem.itemId }}
+              </v-list-item-title>
+              <div class="text-body-1 mb-5">
+                {{ orderItem.itemOptionIds.join(', ')}}
+              </div>
+              <div class="text--primary">
+                합계 : <b> {{ orderItem.price }} 원</b>
+              </div>
+            </v-list-item-content>
+
+            <v-list-item-avatar
+                tile
+                size="100"
+            >
+              <v-img :src="require('@/assets/store.jpeg')"></v-img>
+            </v-list-item-avatar>
+
+          </v-list-item>
+
+          <v-card-actions class="pb-2">
+            <v-btn block color="warning">삭제하기</v-btn>
+          </v-card-actions>
+
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <div> 합계 : {{orderData.totalPrice}} 원</div>
+      </v-col>
+    </v-row>
+        <v-btn
+            block
+            @click="saveOrder"
+            color="primary"
+        >주문하기</v-btn>
+<!--    <v-btn-->
+<!--        style="position: absolute; bottom: 0;transform: translateY(-100%); width: 100%"-->
+<!--        @click="orderItems"-->
+<!--    >주문하기</v-btn>-->
+
+  </div>
+</template>
+
+<script>
+import orderApi from "@/api/order";
+export default {
+  name: "OrderPage",
+  mounted() {
+    this.getOrder();
+  },
+  data: function(){
+    return {
+      orderData:{
+        storeId:Number,
+        _orderItemDtos:[{
+          itemId:Number,
+          itemOptionIds:Array,
+          price:Number,
+        }],
+        totalPrice:Number,
+
+      },
+    }
+  },
+  computed:{
+    test:function (a){
+
+      return a;
+    }
+  },
+  methods:{
+    saveOrder: function(){
+
+      orderApi.saveOrder()
+          .then(()=>{
+            alert('주문되었습니다.')
+            this.$router.replace("/")
+          })
+          .catch(error=>{
+            console.log(error)
+            //this.$router.replace("/")
+          })
+    },
+    getOrder: function(){
+      orderApi.getOrder()
+          .then(response=>{
+            this.orderData=response.data.data
+          })
+          .catch(error=>{
+            console.log(error)
+            this.$router.replace("/")
+          })
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>