home-page

pages/home-page/index.vue

@@ -11,7 +11,7 @@
       </div>
       <v-row>
         <v-col
-          v-for="(item, i) in items"
+          v-for="(item, i) in categories"
           :key="i"
           cols="12"
           md="3"
@@ -21,6 +21,7 @@
             :elevation="hover ? 12 : 2"
             :class="{ 'on-hover': hover }"
           >
+            <nuxt-link :to="`/home-page/categories/${item.id}`">
               <v-card
                 :elevation="hover ? 16 : 2"
                 :class="{ 'on-hover': hover }"
@@ -30,7 +31,7 @@
               >
                 <div>
                   <v-img
-                  :src="item.images"
+                    :src="item.image"
                     height="250px"
                     cover
                   />
@@ -39,6 +40,7 @@
                   {{ item.name }}
                 </v-card-title>
               </v-card>
+            </nuxt-link>
           </v-hover>
         </v-col>
       </v-row>
@@ -353,7 +355,47 @@ export default {
           title: '20% Off Coupon for CyberWeek',
           content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
         }
-      ]
+      ],
+      categories: [],
+      product: []
+    }
+  },
+  mounted () {
+    this.getCategories()
+    this.getNewProducts()
+  },
+  methods: {
+    getCategories () {
+      this.$axios
+        .get('/guest/categories/main-categories/', {
+          headers: {
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal(
+              'token'
+            )}`
+          }
+        })
+        .then((response) => {
+          this.categories = response.data.data
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
+    },
+    getNewProducts () {
+      this.$axios
+        .get('/guest/products/new-release/', {
+          headers: {
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal(
+              'token'
+            )}`
+          }
+        })
+        .then((response) => {
+          this.product = response.data.data
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
     }
   }
 }