Detail

src/components/Home.vue

@@ -1,30 +1,59 @@
-<!--<template>-->
-<!--  <v-container>-->
-<!--  -->
-<!--    <product-page-->
-<!--  </v-container>-->
-<!--</template>-->
-<!--<style>-->
-<!--  h1, h2 {-->
-<!--  }-->
-<!--</style>-->
-<!--<script>-->
-<!--export default {-->
-<!--  data: () => ({-->
+<template>
+  <v-container>
+    <v-dialog
+            v-model="buyDialog"
+            width="800"
+    >
+      <order
+              v-if="buyDialog"
+              v-model="buy"
+              @cancel="buyDialog=false"
+      ></order>
+    </v-dialog>
 
-<!--  }),-->
-<!--  methods:{-->
-<!--    buyValue(item){-->
-<!--      this.buy=item-->
-<!--      this.buyDialog = true-->
-<!--    },-->
-<!--    editValue(item){-->
-<!--      this.edit=item-->
-<!--      this.editDialog = true-->
-<!--    }-->
+    <v-dialog
+            v-model="editDialog"
+            width="500"
+    >
+      <product-add
+              v-if="editDialog"
+              v-model="edit"
+              @cancel="editDialog=false"
+      ></product-add>
+    </v-dialog>
 
-<!--  }-->
+    <product-list
+            @buyItem="buyValue"
+            @editItem="editValue"
+    ></product-list>
+  </v-container>
+</template>
+<style>
+  h1, h2 {
+  }
+</style>
+<script>
+export default {
+    data() {
+        return {
+            buy: '',
+            edit: '',
+            buyDialog: false,
+            editDialog: false
+        }
+  },
+  methods:{
+    buyValue(item){
+      this.buy=item
+      this.buyDialog = true
+    },
+    editValue(item){
+      this.edit=item
+      this.editDialog = true
+    }
 
-<!--};-->
-<!--</script>-->
+  }
+
+};
+</script>
 

src/components/products/Product.vue

@@ -19,7 +19,7 @@
             <div align="right">
                 <v-btn text v-if='$store.state.role == "USER_ADMIN"' @click="showEdit"> Edit</v-btn>
                 <v-btn text @click="showDetail"> DETAIL</v-btn>
-                <v-btn text @click="showBuy"> BUY</v-btn>
+                <v-btn text v-if="$store.state.login == true" @click="showBuy"> BUY</v-btn>
             </div>
         </v-list>
     </v-card>

src/components/products/ProductDetail.vue

@@ -65,7 +65,7 @@
 
                 <v-card-actions>
                     <div class="flex-grow-1"></div>
-                    <v-btn color="primary accent-4" text @click="payment">결제하기</v-btn>
+                    <v-btn color="primary accent-4" v-if="$store.state.login == true" text @click="payment">결제하기</v-btn>
                     <v-btn color="red accent-4" text @click="close">나가기</v-btn>
                 </v-card-actions>
             </v-card>

src/main.js

@@ -8,6 +8,7 @@ import 'vuetify/dist/vuetify.min.css';
 import VueNumberInput from '@chenfengyuan/vue-number-input';
 import VueTheMask from 'vue-the-mask'
 
+import Home from "./components/Home";
 import ProductList from "./components/products/ProductList.vue";
 import ProductOrder from "./components/products/ProductDetail.vue";
 import ProductRecommend from "./components/marketing/ProductRecommend.vue";
@@ -40,6 +41,7 @@ if (process.env.NODE_ENV == "development") {
 } else {
     window.API_HOST = process.env.VUE_APP_API_HOST
 }
+Vue.component('Home',Home)
 Vue.component('Login', Login);
 Vue.component('ProductPage', ProductPage)
 Vue.component('ProductList', ProductList);