master
parent
9590e31c0f
commit
13b923b939
|
|
@ -35,7 +35,7 @@
|
|||
<router-link to="/category/cosmetics" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> প্রসাধন </router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/category/" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> সব </router-link>
|
||||
<router-link to="/category/" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> সব বিভাগ </router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,83 @@
|
|||
<template>
|
||||
<div class="container-fluid mx-auto object-center bg-white p-2">
|
||||
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals.</h1>
|
||||
<hr class="">
|
||||
|
||||
<div v-if="loading" class="loading"> <h2> Loading... </h2> </div>
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<div v-if="itemByCategory.data" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 p-1">
|
||||
<div v-for="(item, index) in itemByCategory.data" class="">
|
||||
<router-link :to="'/item/' + item.slug">
|
||||
<div class="flex items-center justify-center ">
|
||||
<img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||
</div>
|
||||
<h3 class="text-center text-1xl ">{{ item.name }}</h3>
|
||||
<p class="text-center">Qty - 2 </p>
|
||||
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="post">
|
||||
|
||||
<div v-if="post" class="content">
|
||||
<h2>{{ post.title }}</h2>
|
||||
<p>{{ post.body }}</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
itemByCategory: null,
|
||||
error: null,
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.getItemByCategory()
|
||||
// console.log(this.$route.query.cat)
|
||||
// console.log(this.fruits)
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
// watch the params of the route to fetch the data again
|
||||
// this.$watch(
|
||||
// () => this.$route.params,
|
||||
// () => {
|
||||
// this.fetchData()
|
||||
// },
|
||||
// // fetch the data when the view is created and the data is
|
||||
// // already being observed
|
||||
// { immediate: true }
|
||||
// )
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
// console.log(this.$route.params.id,)
|
||||
this.error = this.post = null
|
||||
this.loading = true
|
||||
fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=forhim')
|
||||
.then(response => response.json())
|
||||
.then(data => this.itemByCategory = data)
|
||||
console.log(this.itemByCategory)
|
||||
console.log('itemByCategory')
|
||||
this.loading = false
|
||||
// replace `getPost` with your data fetching util / API wrapper
|
||||
// getPost(this.$route.params.id, (err, post) => {
|
||||
// this.loading = false
|
||||
// if (err) {
|
||||
// this.error = err.toString()
|
||||
// } else {
|
||||
// this.post = post
|
||||
// }
|
||||
// })
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,87 +1,141 @@
|
|||
<!-- <route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"title": "Home"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script setup>
|
||||
useHead({
|
||||
title: 'Home',
|
||||
title: computed(() => siteData.title),
|
||||
meta: [
|
||||
{
|
||||
name: `description`,
|
||||
content: computed(() => siteData.description),
|
||||
},
|
||||
]
|
||||
})
|
||||
</script> -->
|
||||
<template>
|
||||
|
||||
</template>
|
||||
<div class="container-fluid ">
|
||||
|
||||
|
||||
|
||||
<h1 class="font-medium text-center leading-tight text-xl p-4 "> গয়না </h1>
|
||||
<hr class="">
|
||||
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||
<div v-for="(item, index) in catJewlry.slice(0,8)" class="">
|
||||
<div class="flex items-center justify-center ">
|
||||
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||
</div>
|
||||
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||
<p class="text-center">{{index}} </p>
|
||||
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 class="font-medium text-center leading-tight text-xl p-4 "> প্রসাধনী </h1>
|
||||
<hr class="">
|
||||
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||
<div v-for="(item, index) in catCosmetics.slice(0,8)" class="">
|
||||
<div class="flex items-center justify-center ">
|
||||
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||
</div>
|
||||
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||
<p class="text-center">{{index}} </p>
|
||||
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="font-medium text-center leading-tight text-xl p-4 "> সার্ভিস </h1>
|
||||
<hr class="">
|
||||
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||
<div v-for="(item, index) in catServices.slice(0,8)" class="">
|
||||
<div class="flex items-center justify-center ">
|
||||
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||
</div>
|
||||
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||
<p class="text-center">{{index}} </p>
|
||||
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="font-medium text-center leading-tight text-xl p-4 "> সবজি </h1>
|
||||
<hr class="">
|
||||
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||
<div v-for="(item, index) in catVegetables.slice(0,8)" class="">
|
||||
<div class="flex items-center justify-center ">
|
||||
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||
</div>
|
||||
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||
<p class="text-center">{{index}} </p>
|
||||
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="font-medium text-center leading-tight text-xl p-4 "> ফল </h1>
|
||||
<hr class="">
|
||||
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||
<div v-for="(item, index) in catFruits.slice(0,8)" class="">
|
||||
<div class="flex items-center justify-center ">
|
||||
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||
</div>
|
||||
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||
<p class="text-center">{{index}} </p>
|
||||
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="font-medium text-center leading-tight text-xl p-4 "> মুদি </h1>
|
||||
<hr class="">
|
||||
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||
<div v-for="(item, index) in catGrocery.slice(0,8)" class="">
|
||||
<div class="flex items-center justify-center ">
|
||||
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||
</div>
|
||||
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||
<p class="text-center">{{index}} </p>
|
||||
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
// data() {
|
||||
// return {
|
||||
// smProducts: [],
|
||||
// catFruits: [],
|
||||
// catVegetables: [],
|
||||
// catGrocery: [],
|
||||
// catServices: [],
|
||||
// catJewlry: [],
|
||||
// catCosmetics: [],
|
||||
// catCloths: [],
|
||||
// // product: [],
|
||||
// // shoppingCart: []
|
||||
// }
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
smProducts: {},
|
||||
catFruits: [],
|
||||
catVegetables: {},
|
||||
catGrocery: {},
|
||||
catServices: {},
|
||||
catJewlry: {},
|
||||
catCosmetics: {},
|
||||
catCloths: {}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.getItemByCategory()
|
||||
// console.log(this.smProducts)
|
||||
// console.log(this.$route.query.cat)
|
||||
// console.log(this.fruits)
|
||||
},
|
||||
methods: {
|
||||
getItemByCategory() {
|
||||
fetch('https://api7.siliconpin.com/items/swarnamath?offset=0&limit=90')
|
||||
// fetch('https://api7.siliconpin.com/items/ecom55')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.smProducts = data
|
||||
// console.log(data)
|
||||
this.catFruits = data.data.filter(item => { if (item.cat == "fruits") return item });
|
||||
this.catVegetables = data.data.filter(item => { if (item.cat == "vegetables") return item });
|
||||
this.catGrocery = data.data.filter(item => { if (item.cat == "grocery") return item });
|
||||
this.catServices = data.data.filter(item => { if (item.cat == "services") return item });
|
||||
this.catJewlry = data.data.filter(item => { if (item.cat == "jewlry") return item });
|
||||
this.catCosmetics = data.data.filter(item => { if (item.cat == "cosmetics") return item });
|
||||
this.catCloths = data.data.filter(item => { if (item.cat == "cloths") return item });
|
||||
|
||||
// head() {
|
||||
// return {
|
||||
// title: 'Swarna Math - Delivery App',
|
||||
// meta: [
|
||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
// {
|
||||
// hid: 'description',
|
||||
// name: 'description',
|
||||
// content: 'Swarna Math - Delivery App'
|
||||
// },
|
||||
// {
|
||||
// hid: 'og:description',
|
||||
// name: 'og:description',
|
||||
// content: 'Swarna Math - Delivery App'
|
||||
// },
|
||||
// {
|
||||
// hid: 'og:title',
|
||||
// name: 'og:title',
|
||||
// content: 'Swarna Math - Delivery App'
|
||||
// },
|
||||
// {
|
||||
// hid: 'og:url',
|
||||
// name: 'og:url',
|
||||
// content: 'https://swarnamath.com/'
|
||||
// },
|
||||
// {
|
||||
// hid: 'og:image',
|
||||
// name: 'og:image',
|
||||
// content: 'https://api7.siliconpin.com/icon.png'
|
||||
// },
|
||||
// {
|
||||
// hid: 'og:image:secure_url',
|
||||
// name: 'og:image:secure_url',
|
||||
// content: 'https://api7.siliconpin.com/icon.png'
|
||||
// },
|
||||
// {
|
||||
// hid: 'og:type',
|
||||
// name: 'og:type',
|
||||
// content: 'Delivery App'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
this.isLoading = false
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue