315 lines
9.9 KiB
Vue
Executable File
315 lines
9.9 KiB
Vue
Executable File
<template>
|
|
<div class="q-pa-md row items-start q-gutter-md">
|
|
<q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
|
|
|
|
<q-card :class="getmycardcl()" v-if="!!myproduct && endload" bordered>
|
|
<q-img
|
|
:src="`` + myproduct.img"
|
|
:alt="myproduct.name"
|
|
:class="getclimgproduct()"
|
|
></q-img>
|
|
|
|
<q-list>
|
|
<q-item>
|
|
<q-btn
|
|
v-if="!complete"
|
|
fab
|
|
color="primary"
|
|
icon="fas fa-info"
|
|
class="absolute semi-transparent"
|
|
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>
|
|
<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>
|
|
</q-item-label>
|
|
<!--<q-item-label v-if="myproduct.scontisticas && myproduct.scontisticas.length > 0">
|
|
<div
|
|
class="prod_sconti"
|
|
v-for="(sconti, index) of myproduct.scontisticas"
|
|
:key="index"
|
|
>
|
|
{{ sconti.description }}
|
|
</div>
|
|
</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"
|
|
v-if="myproduct.unit">
|
|
{{ 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
|
|
:clickable="tools.isManager()"
|
|
@click="tools.isManager() ? (openlistorders = true) : null"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
:color="getQtyAvailable() >= 0 ? 'green' : 'blue'"
|
|
:name="getQtyAvailable() >= 0 ? 'fas fa-store' : 'fas fa-edit'"
|
|
/>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<span v-if="getQtyAvailable() < 0">
|
|
{{ t('ecomm.preorders') }}
|
|
</span>
|
|
<span v-else>
|
|
{{ t('ecomm.available') }}
|
|
</span>
|
|
</q-item-label>
|
|
<q-item-label>
|
|
<span class="prod_disp">
|
|
<span v-if="getQtyAvailable() < 0">
|
|
{{ -getQtyAvailable() }}
|
|
</span>
|
|
<span v-else>
|
|
{{ getQtyAvailable() }}
|
|
</span>
|
|
</span>
|
|
<div class="prod_qtywarn">
|
|
{{ getQtyWarn() }}
|
|
|
|
<div
|
|
v-if="
|
|
tools.isManager() && myproduct.QuantitaOrdinateInAttesa && myproduct.QuantitaOrdinateInAttesa > 0
|
|
"
|
|
>
|
|
{{
|
|
$t('ecomm.qta_in_attesa', {
|
|
qty: myproduct.QuantitaOrdinateInAttesa,
|
|
})
|
|
}}
|
|
</div>
|
|
</div>
|
|
</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
|
|
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
|
|
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>
|
|
<q-dialog v-model="openlistorders">
|
|
<q-card class="dialog_card">
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title>
|
|
{{ t('ecomm.listaord') }} - {{ myproduct.name }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section class="q-pa-xs inset-shadow">
|
|
<q-markup-table
|
|
wrap-cells
|
|
bordered
|
|
separator="horizontal"
|
|
class="listaev__table"
|
|
>
|
|
<thead>
|
|
<th>Data</th>
|
|
<th>Persona</th>
|
|
<th>Stato</th>
|
|
<th>Quantita</th>
|
|
<th>Note</th>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr
|
|
v-for="(ordcart, index) of arrordersCart"
|
|
:key="index"
|
|
class="listaev listaev__table"
|
|
>
|
|
<td class="text-center">
|
|
<div>
|
|
{{ func_tools.getDateTimeShortStr(ordcart.created_at) }}
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<strong
|
|
>{{ ordcart.user.name }} {{ ordcart.user.surname }}</strong
|
|
>
|
|
</td>
|
|
<td class="text-center">
|
|
<strong>{{
|
|
shared_consts.getStatusStr(ordcart.status)
|
|
}}</strong>
|
|
</td>
|
|
<td class="text-center">
|
|
<div v-for="(singleord, index) in ordcart.items" :key="index">
|
|
<span v-if="singleord.order.idProduct === myproduct._id">{{
|
|
singleord.order.quantity
|
|
}}</span>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
{{ ordcart.note }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td> </td>
|
|
<td> </td>
|
|
<td class="text-center">
|
|
Totali:
|
|
<span class="totali">{{
|
|
products.getSumQtyOrderProductInOrdersCart(myproduct._id)
|
|
}}</span>
|
|
</td>
|
|
<td> </td>
|
|
</tr>
|
|
</tbody>
|
|
</q-markup-table>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CProductCard.ts">
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './CProductCard.scss';
|
|
</style>
|