99 lines
3.7 KiB
Vue
99 lines
3.7 KiB
Vue
<template>
|
|
<!-- *****************komli shaker chobi nei tai akta consule prolem show hocce -->
|
|
<v-container>
|
|
<v-layout row wrap>
|
|
<v-row>
|
|
<v-col v-for="Service in catServices" :key="catServices.id" sm="6" md="6" lg="2">
|
|
<nuxt-link :to="`/${Service.slug}`">
|
|
<v-card class="mx-auto mb-1">
|
|
<v-img :src="`https://api7.siliconpin.com/assets/${Service.img}`" aspect-ratio="1.2"></v-img>
|
|
|
|
<v-card-text>
|
|
<h3> {{Service.name}}</h3>
|
|
</v-card-text>
|
|
<v-rating half-increments dense size="20" v-model="Service.rating" background-color="orange lighten-3"
|
|
color="orange"></v-rating>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{Service.description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{Service.price}} টাকা ।</span>
|
|
<span v-if="Service.p2" style="font-weight:bold"> মূল্য {{Service.p2}} টাকা ।</span>
|
|
</p>
|
|
|
|
</v-card>
|
|
</nuxt-link>
|
|
</v-col>
|
|
|
|
<v-col v-for="Service in catServices" :key="catServices.id" sm="6" md="6" lg="2">
|
|
<nuxt-link :to="`/${Service.slug}`">
|
|
<v-card class="mx-auto mb-1">
|
|
<v-img :src="`https://api7.siliconpin.com/assets/${Service.img}`" aspect-ratio="1.2"></v-img>
|
|
|
|
<v-card-text>
|
|
<h3> {{Service.name}}</h3>
|
|
</v-card-text>
|
|
<v-rating half-increments dense size="20" v-model="Service.rating" background-color="orange lighten-3"
|
|
color="orange"></v-rating>
|
|
<p style="font-size:16px;padding:0 5px 10px 5px;"> {{Service.description}} <br>
|
|
<span style="font-weight:bold"> মূল্য {{Service.price}} টাকা ।</span>
|
|
<span v-if="Service.p2" style="font-weight:bold"> মূল্য {{Service.p2}} টাকা ।</span>
|
|
</p>
|
|
|
|
</v-card>
|
|
</nuxt-link>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
</v-layout>
|
|
<!-- <div>
|
|
<p v-if="$fetchState.pending">Fetching mountains...</p>
|
|
<p v-else-if="$fetchState.error">An error occurred :(</p>
|
|
<div v-else>
|
|
<h1>Nuxt Mountains {{mountains}} </h1>
|
|
<ul>
|
|
<li v-for="mountain of mountains">{{ mountain.title }}</li>
|
|
</ul>
|
|
<button @click="$fetch">Refresh</button>
|
|
</div>
|
|
</div> -->
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
smProducts: [],
|
|
catFruits: [],
|
|
catVegetables: [],
|
|
catGrocery: [],
|
|
catServices: [],
|
|
catJewlry: [],
|
|
catCosmetics: [],
|
|
catCloths: []
|
|
}
|
|
},
|
|
async fetch() {
|
|
this.smProducts = await fetch(
|
|
'https://api7.siliconpin.com/items/swarnamath?offset=0&limit=90'
|
|
).then(res => res.json())
|
|
|
|
this.catFruits = this.smProducts.data.filter(item => { if (item.cat == "fruits") return item });
|
|
this.catVegetables = this.smProducts.data.filter(item => { if (item.cat == "vegetables") return item });
|
|
this.catGrocery = this.smProducts.data.filter(item => { if (item.cat == "grocery") return item });
|
|
this.catServices = this.smProducts.data.filter(item => { if (item.cat == "services") return item });
|
|
this.catJewlry = this.smProducts.data.filter(item => { if (item.cat == "jewlry") return item });
|
|
this.catCosmetics = this.smProducts.data.filter(item => { if (item.cat == "cosmetics") return item });
|
|
this.catCloths = this.smProducts.data.filter(item => { if (item.cat == "cloths") return item });
|
|
// console.log(this.catFruits)
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#flas {
|
|
height: 100px;
|
|
width: 100%;
|
|
}
|
|
</style> |