106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<script setup>
|
|
import { ref, onMounted, inject } from 'vue';
|
|
const jApi = inject('jApi');
|
|
const news = ref([]);
|
|
const showPreview = ref(false);
|
|
const selectedImageSrc = ref('');
|
|
|
|
const fetchData = async () => {
|
|
news.value = await jApi.query(
|
|
`SELECT title, text, image, id
|
|
FROM news
|
|
ORDER BY priority, created DESC`
|
|
);
|
|
};
|
|
|
|
const showImagePreview = src => {
|
|
showPreview.value = true;
|
|
selectedImageSrc.value = src;
|
|
};
|
|
const hideImagePreview = src => {
|
|
showPreview.value = false;
|
|
selectedImageSrc.value = null;
|
|
};
|
|
|
|
onMounted(async () => await fetchData());
|
|
</script>
|
|
|
|
<template>
|
|
<div style="padding: 0">
|
|
<div class="q-pa-sm row items-start">
|
|
<div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
|
|
<QCard>
|
|
<QImg
|
|
:src="`${$app.imageUrl}/news/full/${myNew.image}`"
|
|
@click="
|
|
showImagePreview(
|
|
`${$app.imageUrl}/news/full/${myNew.image}`
|
|
)
|
|
"
|
|
/>
|
|
|
|
<QCardSection>
|
|
<div class="text-h5">
|
|
{{ myNew.title }}
|
|
</div>
|
|
</QCardSection>
|
|
<QCardSection class="new-body">
|
|
<div v-html="myNew.text" class="card-text" />
|
|
</QCardSection>
|
|
</QCard>
|
|
</div>
|
|
</div>
|
|
<QPageSticky>
|
|
<QBtn
|
|
fab
|
|
icon="add_shopping_cart"
|
|
color="accent"
|
|
to="/ecomerce/catalog"
|
|
>
|
|
<QTooltip>{{ $t('startOrder') }}</QTooltip></QBtn
|
|
>
|
|
</QPageSticky>
|
|
</div>
|
|
<QDialog v-model="showPreview" @hide="hideImagePreview">
|
|
<QImg :src="selectedImageSrc" />
|
|
</QDialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.new-card {
|
|
width: 100%;
|
|
|
|
@media screen and (min-width: 800px) and (max-width: 1400px) {
|
|
width: 50%;
|
|
}
|
|
@media screen and (min-width: 1401px) and (max-width: 1920px) {
|
|
width: 33.33%;
|
|
}
|
|
@media screen and (min-width: 19021) {
|
|
width: 25%;
|
|
}
|
|
}
|
|
.new-body {
|
|
font-family: 'Open Sans';
|
|
}
|
|
|
|
.card-text {
|
|
:deep(a) {
|
|
color: $accent;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<i18n lang="yaml">
|
|
en-US:
|
|
startOrder: Start order
|
|
es-ES:
|
|
startOrder: Empezar pedido
|
|
ca-ES:
|
|
startOrder: Començar comanda
|
|
fr-FR:
|
|
startOrder: Lancer commande
|
|
pt-PT:
|
|
startOrder: Comece uma encomenda
|
|
</i18n>
|