surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aa1

Browse Source
This commit is contained in:
Surya Paolo
2023-12-11 16:51:51 +01:00
parent 1ce6d765ee
commit 4ac6cacf19
7 changed files with 154 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/CProductCard/CProductCard.scss
View File

@@ -10,3 +10,16 @@
place-content: center;
}
.prod_price{
font-size: 1.25rem;
}
.prod_disp{
font-size: 1.2rem;
}
.prod_qtywarn{
padding-left: 10px;
font-size: 1rem;
color: grey;
}

38
src/components/CProductCard/CProductCard.ts
View File

@@ -115,11 +115,15 @@ export default defineComponent({
}
function getSingleStorehouse() {
const mystore = myproduct.value.storehouses[0]
if (mystore)
return mystore.name + ' (' + mystore.city + ')'
else
try {
const mystore = myproduct.value.storehouses[0]
if (mystore)
return mystore.name + ' (' + mystore.city + ')'
else
return ''
} catch (e) {
return ''
}
}
function getStorehouses() {
@@ -145,6 +149,23 @@ export default defineComponent({
return !myorder.value.idStorehouse
}
function updateQtyAvailable() {
myproduct.value.quantityAvailable = myproduct.value.stockQty - myorder.value.quantity
}
function getQtyAvailable() {
updateQtyAvailable()
let qty = myproduct.value.quantityAvailable
return qty
}
function getQtyWarn() {
if (myorder.value.quantity > 0){
return t('ecomm.di_cui_x_in_carrello', {qty: myorder.value.quantity})
}
return ''
}
watch(() => props.code, (newval, oldval) => {
console.log('change code')
load()
@@ -179,7 +200,7 @@ export default defineComponent({
}
function getmycardcl() {
return (props.complete) ? 'my-card-big' : 'my-card'
return (props.complete) ? 'my-card-big' : 'my-card-prod'
}
function getclimg() {
@@ -190,6 +211,10 @@ export default defineComponent({
return myorder.value ? myorder.value.quantity > 0 : true
}
function enableAddQty() {
return getQtyAvailable() > 0
}
onMounted(load)
return {
@@ -209,6 +234,9 @@ export default defineComponent({
t,
storeSelected,
enableSubQty,
enableAddQty,
getQtyAvailable,
getQtyWarn,
}
}
})

191
src/components/CProductCard/CProductCard.vue
View File

@@ -1,79 +1,100 @@
<template>
<q-card :class="getmycardcl()" v-if="!!myproduct">
<q-img
:src="`` + myproduct.img"
:alt="myproduct.name"
:class="getclimg()"
></q-img>
<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-card-section>
<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"
/>
<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>
<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>
<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>
</q-item-label>
</q-item-section>
</q-item>
</q-list>
<div>
<div v-if="complete && myproduct.producer.city">
<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
>
}})</span>
</div>
</div>
<div
v-if="complete && myproduct.producer.name"
class="text-grey text-title row items-center"
>
<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
>
{{ myproduct.producer.name }}</span>
</div>
<div
v-if="complete && myproduct.weight"
class="text-grey text-title row items-center"
>
<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
>
{{ tools.getUnitsMeasure(myproduct.unit, true) }}</span>
</div>
</div>
<!--<q-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->
<div class="row q-mb-sm no-wrap items-center centeritems">
<div class="text-price no-wrap">
<span v-if="!!myproduct.price"
>€ {{ myproduct.price ? myproduct.price.toFixed(2) : 0 }}</span
>
<span v-if="!!myproduct.after_price">{{
myproduct.after_price
}}</span>
</div>
</div>
<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
@@ -83,23 +104,12 @@
@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 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"
>
<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 }}
@@ -108,15 +118,8 @@
</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()"
rounded
size="md"
:label="t('products.addcart', { qta: 1 })"
@click="addtoCart(true)"
>
<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">
@@ -124,19 +127,10 @@
<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 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 :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>
@@ -146,26 +140,17 @@
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions vertical align="center">
<q-btn
v-if="myorder.quantity > 0"
rounded
icon="fas fa-shopping-cart"
color="green"
:label="$t('ecomm.btn_cassa')"
class="q-mb-sm"
to="/checkout"
></q-btn>
<!--
<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-card-actions>
</q-card>
</div>
</template>
<script lang="ts" src="./CProductCard.ts">

15
src/css/app.scss
View File

@@ -361,6 +361,21 @@ h3 {
}
}
.my-card-prod {
width: 100%;
max-width: 300px;
padding: 1rem 1rem;
box-shadow: none;
@media (max-width: 718px) {
// PER VERSIONE MOBILE
max-width: 400px;
padding: 1rem 1rem;
}
}
.text-trans {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

2
src/layouts/menuone/menuOne.scss
View File

@@ -109,7 +109,7 @@
min-width: 30px;
}
.q-item__section--side{
.OLD_q-item__section--side{
padding-right: 8px;
}

4
src/model/Products.ts
View File

@@ -14,8 +14,8 @@ export interface IProduct {
after_price?: string,
color?: string,
size?: string,
quantityAvailable?: number,
stockQty?: number,
quantityAvailable: number,
stockQty: number,
canBeShipped?: boolean,
canBeBuyOnline?: boolean,
weight?: number,

2
src/statics/lang/it.js
View File

@@ -1620,6 +1620,8 @@ const msg_it = {
order: 'Ordine',
ord_confirmed: 'Ordine Confermato',
btn_cassa: 'Vai alla Cassa',
available: 'Disponibili',
di_cui_x_in_carrello: '({qty} nel tuo carrello)',
},
install: {