127 lines
4.0 KiB
Vue
127 lines
4.0 KiB
Vue
|
<template>
|
||
|
|
<q-page>
|
||
|
|
<div class="text-center">
|
||
|
|
<q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
|
||
|
|
</div>
|
||
|
|
<div v-if="loadpage" class="panel">
|
||
|
|
<!--<div>
|
||
|
|
<CSelectUserActive></CSelectUserActive>
|
||
|
|
<div class="text-center text-h7 text-blue">Filtra per:</div>
|
||
|
|
<div class="text-center">
|
||
|
|
<q-btn-toggle
|
||
|
|
v-model="cosa"
|
||
|
|
push
|
||
|
|
:size="tools.isMobile() ? '0.75rem' : '1rem'"
|
||
|
|
rounded
|
||
|
|
glossy
|
||
|
|
toggle-color="primary"
|
||
|
|
:options="[
|
||
|
|
{ value: shared_consts.PROD.TUTTI, slot: 'tutti' },
|
||
|
|
{ value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
|
||
|
|
{ value: shared_consts.PROD.GAS, slot: 'gas' },
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<template v-slot:tutti>
|
||
|
|
<div class="row items-center no-wrap">
|
||
|
|
<div class="text-center">
|
||
|
|
{{ t('ecomm.tutti') }}
|
||
|
|
</div>
|
||
|
|
<q-icon right name="fas fa-check-square" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-slot:gas>
|
||
|
|
<div class="row items-center no-wrap">
|
||
|
|
<div class="text-center">
|
||
|
|
{{ t('gas.ordina_sul_gas') }}
|
||
|
|
</div>
|
||
|
|
<q-icon right name="fas fa-user-friends" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-slot:bottega>
|
||
|
|
<div class="row items-center no-wrap">
|
||
|
|
<div class="text-center">
|
||
|
|
{{ t('gas.bottega') }}
|
||
|
|
</div>
|
||
|
|
<q-icon right name="fas fa-store" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</q-btn-toggle>
|
||
|
|
</div>
|
||
|
|
</div>-->
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<q-slide-transition>
|
||
|
|
<div
|
||
|
|
v-show="isFixed || tools.scrollTop() < 300"
|
||
|
|
:class="
|
||
|
|
'column text-center q-mx-auto q-py-sm q-mb-sm ' +
|
||
|
|
(isFixed ? 'fixed-group ' : '')
|
||
|
|
"
|
||
|
|
style="width: 350px; max-width: 100%"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<q-input
|
||
|
|
ref="componentToFixRef"
|
||
|
|
filled
|
||
|
|
stack-label
|
||
|
|
rounded
|
||
|
|
:dense="tools.isMobile() ? true : false"
|
||
|
|
:label="t('ecomm.code_o_text_search')"
|
||
|
|
v-model="search"
|
||
|
|
debounce="300"
|
||
|
|
class="q-ml-md"
|
||
|
|
>
|
||
|
|
<template v-slot:append>
|
||
|
|
<q-icon name="search" />
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-slide-transition>
|
||
|
|
<div class="row q-gutter-xs justify-center q-mx-auto">
|
||
|
|
<div v-for="(reccat, index) in getCatProds()" :key="index">
|
||
|
|
<q-btn
|
||
|
|
:push="cat === reccat.value"
|
||
|
|
dense
|
||
|
|
:size="tools.isMobile() ? '0.70rem' : '1rem'"
|
||
|
|
:icon="reccat.icon ? reccat.icon : undefined"
|
||
|
|
:color="cat === reccat.value ? 'primary' : undefined"
|
||
|
|
:text-color="cat === reccat.value ? 'white' : 'black'"
|
||
|
|
rounded
|
||
|
|
:label="reccat.label"
|
||
|
|
@click="cat = reccat.value"
|
||
|
|
>
|
||
|
|
</q-btn>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-center q-py-sm prod_trov">
|
||
|
|
<span v-show="productStore.getNumProdTot() !== arrProducts.length">{{
|
||
|
|
t('ecomm.prodotti_trovati', {
|
||
|
|
qta: arrProducts.length,
|
||
|
|
qtatot: productStore.getNumProdTot(),
|
||
|
|
})
|
||
|
|
}}</span>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-around">
|
||
|
|
<div
|
||
|
|
class="q-pa-xs row items-start"
|
||
|
|
v-for="(product, index) in arrProducts"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<CProductCard :id="product._id" :complete="false" :cosa="cosa" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-page>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" src="./catalogo.ts">
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './catalogo';
|
||
|
|
</style>
|