swarnamath/pages/index.vue

<template>
  <v-container>

    <v-row>
      <v-col>
        <v-card>
          <center>
            <h2>সবজি</h2>
          </center>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col v-for="Service in catVegetables" :key="catVegetables.id" sm="6" lg="4" xl="3">
        <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-row>
      <v-col>
        <v-card>
          <center>
            <h2>ফল</h2>
          </center>
        </v-card>
      </v-col>
    </v-row>

    <v-row>
      <v-col v-for="Service in catFruits" :key="catFruits.id" sm="6" lg="4" xl="3">
        <nuxt-link :to="`/${Service.slug}`">
          <v-card class>
            <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-row>
      <v-col>
        <v-card>
          <center>
            <h2>মুদি </h2>
          </center>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col v-for="Service in catGrocery" :key="catGrocery.id" sm="6" lg="4" xl="3">
        <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-row>
      <v-col>
        <v-card>
          <center>
            <h2> সার্ভিস </h2>
          </center>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col v-for="Service in catServices" :key="catServices.id" sm="6" lg="4" xl="3">
        <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-row>
      <v-col>
        <v-card>
          <center>
            <h2> গয়না </h2>
          </center>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col v-for="Service in catJewlry" :key="catJewlry.id" sm="6" lg="4" xl="3">
        <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-row>
      <v-col>
        <v-card>
          <center>
            <h2> প্রসাধনী </h2>
          </center>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col v-for="Service in catCosmetics" :key="catCosmetics.id" sm="6" lg="4" xl="3">
        <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-row>
      <v-col>
        <v-card>
          <center>
            <h2> জামা কাপড়  </h2>
          </center>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col v-for="Service in catCloths" :key="catCloths.id" sm="6" lg="4" xl="3">
        <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>
    <!-- <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: [],
      // product: [],
      // shoppingCart: []
    }
  },
  // methods: {
  //   addToCart(product) {
  //     // const product = [slug, name, price]
  //     this.shoppingCart.push({
  //       ...product,
  //       amount: 1,
  //     })
  //   }
  // },
  // watch: {
  //   shoppingCart: {
  //     handler(newValue) {
  //       /// Updates the item in local storage

  //       localStorage.setItem('shoppingCart', JSON.stringify(newValue));

  //     }, deep: true
  //   }
  // },
  // mounted() {
  //   /// Retrieves cart from local storage when user first loads

  //   this.shoppingCart = JSON.parse(
  //     localStorage.getItem('shoppingCart') || "[]")

  // },
  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)
  },
  fetchOnServer: false,
  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'
        }
      ]
    }
  }
}
</script>
<style scoped>
a {
  text-decoration: none;
}
</style>