myprojplanet_vite/src/components/CProductCard/CProductCard.vue

<template>
  <div class="q-pa-md row items-start q-gutter-md">
    <q-card :class="getmycardcl()" v-if="!!myproduct" bordered>
      <!--<q-img :src="`` + myproduct.img" :alt="myproduct.name" :class="getclimg()"></q-img>-->
      <img src="https://cdn.quasar.dev/img/parallax2.jpg" />

      <q-list>
        <q-item>
          <q-btn
            v-if="!complete"
            fab
            color="primary"
            icon="fas fa-info"
            class="absolute"
            style="top: 0; right: 12px; transform: translateY(-50%)"
            :to="`/product/` + myproduct.code"
          />

          <div class="row items-center centeritems">
            <div class="text-h7 boldhigh">
              {{ myproduct.name }}
            </div>
          </div>
        </q-item>
        <q-item>
          <div v-if="complete" class="row items-center">
            <div class="text-title text-grey-9">
              <span class="text-grey-7" v-html="myproduct.description"></span>
            </div>
          </div>
        </q-item>
        <q-item clickable>
          <q-item-section avatar>
            <q-icon color="moneygreen" name="fas fa-euro-sign" />
          </q-item-section>

          <q-item-section>
            <q-item-label>
              {{ t('products.price') }}
            </q-item-label>
            <q-item-label>
              <span class="prod_price" v-if="!!myproduct.price">{{
                myproduct.price ? myproduct.price.toFixed(2) : 0
              }}</span>
              <span v-if="!!myproduct.after_price">{{
                myproduct.after_price
              }}</span>

              tempTotalQty : {{ myproduct.tempTotalQty }}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
      <div>
        <div v-if="complete && myproduct.producer && myproduct.producer.city">
          <div class="text-grey text-title row items-center q-mt-sm">
            <q-icon name="map" class="q-mr-xs" />
            {{ t('products.origine') }}:
            <span class="text-blue q-ml-xs text-h8">
              {{ myproduct.producer.city }} ({{
                myproduct.producer.region
              }})</span
            >
          </div>
        </div>
        <div
          v-if="complete && myproduct.producer && myproduct.producer.name"
          class="text-grey text-title row items-center"
        >
          <q-icon name="place" class="q-mr-xs" />
          {{ t('products.producer') }}:
          <span class="text-black q-ml-xs text-h8">
            {{ myproduct.producer.name }}</span
          >
        </div>
        <div
          v-if="complete && myproduct.weight"
          class="text-grey text-title row items-center"
        >
          <q-icon name="fas fa-balance-scale" class="q-mr-xs" />
          {{ t('products.weight') }}:
          <span class="text-black q-ml-xs text-h8">
            {{ myproduct.weight }}
            {{ tools.getUnitsMeasure(myproduct.unit, true) }}</span
          >
        </div>
      </div>

      <!--<q-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->

      <q-list>
        <q-item>
          <q-item-section avatar>
            <q-icon color="green" name="fas fa-store" />
          </q-item-section>

          <q-item-section>
            <q-item-label>
              {{ t('ecomm.available') }}
            </q-item-label>
            <q-item-label>
              <span class="prod_disp">
                {{ getQtyAvailable() }}
              </span>
              <span class="prod_qtywarn">
                {{ getQtyWarn() }}
              </span>
            </q-item-label>
            <q-item-label> </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
      <div class="row q-mb-sm no-wrap items-center centeritems">
        <!--<q-btn
          round
          size="xs"
          text-color="grey"
          icon="fas fa-minus"
          @click="decqty()"
        ></q-btn>-->

        <q-btn
          icon="fas fa-cart-arrow-down"
          :color="enableSubQty() ? 'negative' : 'grey'"
          :disable="checkifCartDisable() || !enableSubQty()"
          rounded
          size="md"
          :label="t('products.subcart', { qta: 1 })"
          @click="addtoCart(false)"
        >
        </q-btn>

        <q-field
          outlined
          dense
          style="width: 40px; height: 30px"
          class="q-mx-xs"
        >
          <template v-slot:control>
            <div class="self-center no-outline" tabindex="0">
              {{ myorder.quantity }}
            </div>
          </template>
        </q-field>

        <!--<q-btn round size="xs" text-color="grey" icon="fas fa-plus" @click="addqty()"></q-btn>-->
        <q-btn
          icon-right="fas fa-cart-plus"
          color="positive"
          :disable="checkifCartDisable() || !enableAddQty()"
          rounded
          size="md"
          :label="t('products.addcart', { qta: 1 })"
          @click="addtoCart(true)"
        >
        </q-btn>
      </div>
      <div v-if="complete || getnumstore() > 1">
        <div class="text-blue text-title row items-center q-mr-md centeritems">
          <q-icon size="sm" name="fas fa-shipping-fast" class="q-mr-sm" />
          {{ t('products.ritiro_presso') }}:
        </div>
        <div
          class="text-green-6 text-title row items-center q-my-sm centeritems"
        >
          <div v-if="getnumstore() > 1">
            <q-select
              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              outlined
              v-model="storeSelected"
              :options="getStorehouses()"
              :label="t('products.magazzino') + `:`"
              emit-value
              map-options
            >
            </q-select>
          </div>
          <div v-else>
            <span class="text-title text-center">{{
              getSingleStorehouse()
            }}</span>
          </div>
        </div>
      </div>

      <q-card-actions vertical align="center">
        <q-btn
          v-if="myorder.quantity > 0"
          rounded
          icon="fas fa-shopping-cart"
          color="primary"
          :label="$t('ecomm.btn_cassa')"
          class="q-mb-sm"
          to="/checkout"
        ></q-btn>
        <!--
      <q-btn :icon="iconWhishlist(myproduct)" flat color="primary" rounded label="Lista Desideri">
      </q-btn>
      -->
      </q-card-actions>
    </q-card>
  </div>
</template>

<script lang="ts" src="./CProductCard.ts">
</script>

<style lang="scss" scoped>
@import './CProductCard.scss';
</style>