myprojplanet_vite/src/components/CSingleCart/CSingleCart.vue

<template>
  <div v-if="order && order.product" class="q-pa-xs q-gutter-xs">

    <div v-if="order.product" class="row items-center justify-evenly no-wrap">
      <div class="col-2 text-h6 ellipsis">
        <q-img v-if="order.product && order.product.img" :src="`` + order.product.img" :alt="order.product.name"
          :class="myimgclass">
        </q-img>
      </div>
      <div class="col-4 q-ml-xs">
        {{ order.product.name }}
        <div v-if="showall">
          <br><span class="text-grey">{{ order.product.description }}</span>
        </div>
      </div>
      <div class="col-3">
        <div class="row q-mb-xs no-wrap items-center centeritems">
          <q-btn v-if="showall && !nomodif" round size="xs" text-color="grey" icon="fas fa-minus"
            @click="addsubqty(false, true)"></q-btn>
          <!--<q-field outlined dense style="width: 25px; height: 20px; " class="q-mx-xs text-subtitle4">
            <template v-slot:control>
              <div class="self-center no-outline" tabindex="0" >{{ order.quantity }}</div>
            </template>
          </q-field>-->
          <div v-if="order.quantity > 0" :class="`q-mx-sm text-blue-14`">{{ order.quantity + order.quantitypreordered }}</div>
          <q-btn v-if="showall && !nomodif" round size="xs" text-color="grey" icon="fas fa-plus"
            @click="addsubqty(true, false)"></q-btn>
        </div>
      </div>
      <div class="col-2 no-wrap text-subtitle3_short q-mr-sm">
        <span :class="isApplicatoSconto() ? 'ordine_scontato_nuovo' : ''">€&nbsp;{{ order.TotalPriceProduct ? order.TotalPriceProduct.toFixed(2) : 0 }}</span>
        <span v-if="isApplicatoSconto()">
          &nbsp;<span class="ordine_scontato">(<span class="barrato">€ {{((order.price * order.quantity) + (order.price * order.quantitypreordered)).toFixed(2) }}</span>)</span>&nbsp;
        </span>
        <span v-if="isApplicatoSconto()" class="ordine_scritta_sconto">{{ $t('ecomm.sconto_applicato', {risparmio: getRisparmio()}) }}</span>
      </div>
      <div class="col-1">
        <q-btn v-if="!nomodif" icon="fas fa-times" color="negative" round size="xs" @click="removeFromCard">
        </q-btn>
      </div>
    </div>

  </div>
</template>

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

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