feat(customer-vue, order service): 장바구니 아이템 삭제기능 추가

- 장바구니 아이템 삭제기능 추가

customer-vue/src/api/order.js

@@ -24,5 +24,8 @@ export default {
   getOrder() {
     return axios.get(process.env.VUE_APP_ORDER_API_URL + "/order/orders");
   },
+  deleteOrderItem(orderItemId){
+    return axios.delete(process.env.VUE_APP_ORDER_API_URL + "/orderItem/"+orderItemId);
+  }
 
 }

customer-vue/src/router/router.js

@@ -64,12 +64,12 @@ const routes = [
         name: 'notification',
         component: () => import('../views/NotificationView')
       },
-      {
-        path: "/item/:itemId",
-        beforeEnter: authCheck,
-        name: 'itemDetail',
-        component: () => import('../views/ItemDetail')
-      },
+      // {
+      //   path: "/item/:itemId",
+      //   beforeEnter: authCheck,
+      //   name: 'itemDetail',
+      //   component: () => import('../views/ItemDetail')
+      // },
       {
         path: "/order",
         beforeEnter: authCheck,
@@ -103,6 +103,19 @@ const routes = [
       },
     ]
   },
+  {
+    path: '/item',
+    redirect: 'item',
+    component: StoreLayout,
+    children: [
+      {
+        path: "/item/:itemId",
+        beforeEnter: authCheck,
+        name: 'itemDetail',
+        component: () => import('../views/ItemDetail')
+      },
+    ]
+  },
   {
     path: '/auth',
     name: 'auth',

customer-vue/src/views/Layout/StoreLayout.vue

@@ -8,17 +8,6 @@
         <router-view
             v-on:getStoreId="renderNavigation">
         </router-view>
-        <div align="right" >
-          <v-btn
-              color="primary"
-              dark
-              right
-              fab
-              @click="toOrder"
-          >
-            <v-icon>mdi-basket</v-icon>
-          </v-btn>
-        </div>
       </v-container>
     </v-main>
     <bottom-navigation></bottom-navigation>
@@ -56,11 +45,6 @@ export default {
 
       const response = await storeApi.requestStore(this.store.id);
       this.store = response.data.data;
-    },
-    toOrder(){
-      if(confirm("주문화면으로 이동할까요?")){
-        this.$router.push("/order")
-      }
     }
   }
 }

customer-vue/src/views/OrderPage.vue

@@ -40,7 +40,7 @@
           </v-list-item>
 
           <v-card-actions class="pb-2">
-            <v-btn block color="warning" @click="message('준비중입니다.')">삭제하기</v-btn>
+            <v-btn block color="warning" @click="deleteOrderItem(orderItem)">삭제하기</v-btn>
           </v-card-actions>
 
         </v-card>
@@ -98,7 +98,6 @@ export default {
     getOrder: function(){
       orderApi.getOrder()
           .then(response=>{
-            console.log(response)
             this.orderData=response.data.data
           })
           .catch(error=>{
@@ -107,9 +106,27 @@ export default {
             console.log(error.response)
           })
     },
-    message: function(message){
-      alert(message)
-    }
+    deleteOrderItem: function(orderItem){
+      var vm = this
+      const deleteOrderItemId = orderItem.id
+      console.log(deleteOrderItemId)
+      orderApi.deleteOrderItem(deleteOrderItemId)
+          .then(response=>{
+            console.log(response)
+            alert(response.data.data+"삭제되었습니다.")
+            vm.orderData.orderPrice -=orderItem.price
+            vm.orderData.orderItemDtoList.splice(
+                vm.orderData.orderItemDtoList.indexOf(orderItem),1
+            )
+            if(vm.orderData.orderItemDtoList.length ==0)
+              this.$router.back()
+          })
+          .catch(error=>{
+            alert("문제가 발생하였습니다.")
+            console.log(error.response)
+          })
+
+    },
   }
 }
 </script>

customer-vue/src/views/StoreView.vue

@@ -54,6 +54,17 @@
         <br>
       </div>
     </div>
+    <div align="right" >
+      <v-btn
+          color="primary"
+          dark
+          right
+          fab
+          @click="toOrder"
+      >
+        <v-icon>mdi-basket</v-icon>
+      </v-btn>
+    </div>
   </div>
 </template>
 
@@ -94,6 +105,11 @@ export default {
     },
     itemDetail: function (itemId) {
       this.$router.push("/item/"+itemId)
+    },
+    toOrder(){
+      if(confirm("주문화면으로 이동할까요?")){
+        this.$router.push("/order")
+      }
     }
   }
 }