feat: new settings and mainpage blocks
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div
|
||||
class="tw:bg-white dark:tw:bg-slate-800 tw:rounded-lg tw:shadow-sm tw:border tw:border-slate-200 dark:tw:border-slate-700 tw:p-6 tw:mb-3">
|
||||
<div class="tw:flex tw:justify-between tw:items-start">
|
||||
<div>
|
||||
<h3 class="p-card-title">
|
||||
{{ title }}
|
||||
</h3>
|
||||
|
||||
<slot/>
|
||||
</div>
|
||||
<div class="tw:flex tw:items-center tw:gap-2">
|
||||
<Button
|
||||
icon="fa fa-cog"
|
||||
severity="contrast"
|
||||
rounded
|
||||
text
|
||||
size="large"
|
||||
@click="$emit('onShowSettings')"
|
||||
/>
|
||||
|
||||
<Button
|
||||
icon="fa fa-trash"
|
||||
severity="danger"
|
||||
rounded
|
||||
text
|
||||
size="large"
|
||||
@click="confirmedRemove($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Button, useConfirm} from "primevue";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const confirm = useConfirm();
|
||||
const emit = defineEmits(['onRemove', 'onShowSettings']);
|
||||
|
||||
function confirmedRemove(event) {
|
||||
confirm.require({
|
||||
group: 'popup',
|
||||
target: event.currentTarget,
|
||||
message: 'Удалить блок?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectProps: {
|
||||
label: 'Отмена',
|
||||
severity: 'secondary',
|
||||
outlined: true
|
||||
},
|
||||
acceptProps: {
|
||||
label: 'Удалить',
|
||||
severity: 'danger'
|
||||
},
|
||||
accept: () => emit('onRemove'),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<BaseBlock
|
||||
:title="`Топ категорий - ${value.title || 'Без заголовока'}`"
|
||||
@onRemove="$emit('onRemove')"
|
||||
@onShowSettings="$emit('onShowSettings')"
|
||||
>
|
||||
<div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
|
||||
<div><span class="tw:font-bold tw:dark:text-slate-200">Описание:</span> {{
|
||||
value.description
|
||||
}}
|
||||
</div>
|
||||
<div><span class="tw:font-bold tw:dark:text-slate-200">Кол-во категорий:</span>
|
||||
{{ value.data.count }}
|
||||
</div>
|
||||
</div>
|
||||
</BaseBlock>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
|
||||
|
||||
const emit = defineEmits(['onRemove', 'onShowSettings']);
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<BaseBlock
|
||||
:title="`Лента товаров - ${value.title || 'Без заголовока'}`"
|
||||
@onRemove="$emit('onRemove')"
|
||||
@onShowSettings="$emit('onShowSettings')"
|
||||
>
|
||||
<div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
|
||||
<div>
|
||||
<span class="tw:font-bold tw:dark:text-slate-200">Описание:</span>
|
||||
{{ value.description }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="tw:font-bold tw:dark:text-slate-200">Максимальное кол-во страниц:</span>
|
||||
{{ value.data.max_page_count }}
|
||||
</div>
|
||||
</div>
|
||||
</BaseBlock>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
|
||||
|
||||
const emit = defineEmits(['onRemove', 'onShowSettings']);
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<BaseBlock
|
||||
:title="`Слайдер - ${value.title || 'Без заголовока'}`"
|
||||
@onRemove="$emit('onRemove')"
|
||||
@onShowSettings="$emit('onShowSettings')"
|
||||
>
|
||||
<div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
|
||||
<div><span class="tw:font-bold tw:dark:text-slate-200">Статус:</span>
|
||||
{{ value.is_enabled ? 'Включен' : 'Выключен' }}
|
||||
</div>
|
||||
<div><span class="tw:font-bold tw:dark:text-slate-200">Эффект:</span>
|
||||
{{ sliderEffectOptions[value.data.effect] || value.data.effect }}
|
||||
</div>
|
||||
<div><span class="tw:font-bold tw:dark:text-slate-200">Авто:</span>
|
||||
{{ value.data.autoplay ? 'Включен' : 'Выключен' }}
|
||||
</div>
|
||||
<div><span class="tw:font-bold tw:dark:text-slate-200">Цель Яндекс.Метрики:</span>
|
||||
{{ value.goal_name || 'Не задана' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tw:mt-6 tw:flex tw:flex-wrap tw:gap-4">
|
||||
<img
|
||||
v-if="value.data.slides && value.data.slides.length > 0"
|
||||
v-for="slide in value.data.slides"
|
||||
:alt="slide.title"
|
||||
class="tw:w-24 tw:h-24 tw:object-cover tw:rounded-md tw:border-2 tw:border-slate-200 dark:tw:border-slate-600"
|
||||
:src="getThumb(slide.image)"
|
||||
/>
|
||||
</div>
|
||||
</BaseBlock>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getThumb} from "@/utils/helpers.js";
|
||||
import {sliderEffectOptions} from "@/utils/constants..js";
|
||||
import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
|
||||
|
||||
const emit = defineEmits(['onRemove', 'onShowSettings']);
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<Tabs value="0">
|
||||
<TabList>
|
||||
<Tab value="0">Настройки блока</Tab>
|
||||
<Tab value="1">Основные настройки</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel value="0">
|
||||
<div class="tw:space-y-6">
|
||||
<!-- Статус -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Статус
|
||||
</label>
|
||||
<ToggleSwitch v-model="model.is_enabled"/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Показывать этот блок
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Заголовок блока -->
|
||||
<div>
|
||||
<div class="tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Заголовок блока
|
||||
</label>
|
||||
|
||||
<InputText
|
||||
v-model="model.title"
|
||||
placeholder="заголовок блока"
|
||||
class="tw:w-full"
|
||||
/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Текст, который будет выводиться в качестве заголовка блока на главной странице. Оставьте
|
||||
пустым, если заголовок не требуется.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Описание блока -->
|
||||
<div>
|
||||
<div class="tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Описание блока
|
||||
</label>
|
||||
|
||||
<InputText
|
||||
v-model="model.description"
|
||||
placeholder="Описание блока"
|
||||
class="tw:w-full"
|
||||
/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Описание выводится под заголовком блока уменьшенным шрифтом. Оставьте пустым, если
|
||||
описание не требуется.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Цель Яндекс.Метрики -->
|
||||
<div>
|
||||
<div class="tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Цель Яндекс.Метрики
|
||||
</label>
|
||||
|
||||
<InputText
|
||||
v-model="model.goal_name"
|
||||
placeholder="Название цели для Яндекс.Метрики"
|
||||
class="tw:w-full"
|
||||
/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Цель в Яндекс.Метрике для отслеживания кликов по блоку.
|
||||
Оставьте пустым, если не нужно отслеживать клики по этому блоку.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel value="1">
|
||||
<slot></slot>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
|
||||
<Divider/>
|
||||
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:gap-4">
|
||||
<div class="tw:flex tw:gap-2">
|
||||
<Button
|
||||
label="Применить"
|
||||
icon="fa fa-check"
|
||||
v-tooltip.top="isChanged ? 'Применить изменения' : 'Нет изменений для сохранения'"
|
||||
:disabled="isChanged === false"
|
||||
@click="onApply"
|
||||
/>
|
||||
<Button label="Отмена" severity="secondary" @click="$emit('cancel')"/>
|
||||
</div>
|
||||
<div v-if="isChanged" class="tw:flex tw:items-center tw:gap-2 tw:text-amber-600">
|
||||
<i class="fa fa-exclamation-triangle"></i>
|
||||
<span class="tw:text-sm">Есть несохранённые изменения</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Button, Divider, InputText, Panel, ToggleSwitch} from 'primevue';
|
||||
import Tabs from 'primevue/tabs';
|
||||
import TabList from 'primevue/tablist';
|
||||
import Tab from 'primevue/tab';
|
||||
import TabPanels from 'primevue/tabpanels';
|
||||
import TabPanel from 'primevue/tabpanel';
|
||||
|
||||
|
||||
const model = defineModel();
|
||||
const emit = defineEmits(['onApply', 'cancel']);
|
||||
const props = defineProps({
|
||||
isChanged: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
function onApply() {
|
||||
emit('onApply');
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div v-if="draft">
|
||||
<BaseForm
|
||||
v-model="draft"
|
||||
:isChanged="isChanged"
|
||||
@onApply="onApply"
|
||||
@cancel="$emit('cancel')"
|
||||
>
|
||||
<div class="tw:space-y-6">
|
||||
<!-- Количество категорий -->
|
||||
<FormItem label="Количество категорий">
|
||||
<template #default>
|
||||
<InputNumber
|
||||
v-model="draft.data.count"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="10"
|
||||
:showButtons="true"
|
||||
/>
|
||||
<span class="tw:text-gray-600 tw:whitespace-nowrap">шт.</span>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Количество категорий, которое нужно выводить в блоке. Если поставить 0, то будет
|
||||
выводиться только кнопка "Каталог".
|
||||
</template>
|
||||
</FormItem>
|
||||
</div>
|
||||
</BaseForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, defineExpose, onMounted, ref} from "vue";
|
||||
import {md5} from "js-md5";
|
||||
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
|
||||
import {InputNumber, Panel} from "primevue";
|
||||
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
|
||||
|
||||
const draft = ref(null);
|
||||
const model = defineModel();
|
||||
const emit = defineEmits(['cancel']);
|
||||
|
||||
const isChanged = computed(() => md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value)));
|
||||
|
||||
function onApply() {
|
||||
model.value = JSON.parse(JSON.stringify(draft.value));
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
draft.value = JSON.parse(JSON.stringify(model.value));
|
||||
});
|
||||
|
||||
defineExpose({isChanged});
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<!-- Расстояние между слайдами -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:gap-4">
|
||||
<label v-if="label" class="tw:font-medium tw:text-gray-700 tw:flex-shrink-0">
|
||||
{{ label }}
|
||||
</label>
|
||||
<div class="tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
<slot name="help"/>
|
||||
</small>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div v-if="draft">
|
||||
<BaseForm
|
||||
v-model="draft"
|
||||
:isChanged="isChanged"
|
||||
@onApply="onApply"
|
||||
@cancel="$emit('cancel')"
|
||||
>
|
||||
<div class="tw:space-y-6">
|
||||
<!-- Максимальное количество страниц -->
|
||||
<FormItem label="Максимальное количество страниц">
|
||||
<template #default>
|
||||
<InputNumber
|
||||
v-model="draft.data.max_page_count"
|
||||
:min="1"
|
||||
:max="100"
|
||||
placeholder="10"
|
||||
:showButtons="true"
|
||||
/>
|
||||
<span class="tw:text-gray-600 tw:whitespace-nowrap">страниц</span>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Укажите, сколько страниц товаров можно подгружать при бесконечной прокрутки.
|
||||
После достижения этого лимита подгрузка остановится.
|
||||
Ограничение страниц снижает нагрузку на сервер.
|
||||
</template>
|
||||
</FormItem>
|
||||
</div>
|
||||
</BaseForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, defineExpose, onMounted, ref} from "vue";
|
||||
import {md5} from "js-md5";
|
||||
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
|
||||
import {InputNumber} from "primevue";
|
||||
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
|
||||
|
||||
const draft = ref(null);
|
||||
const model = defineModel();
|
||||
const emit = defineEmits(['cancel']);
|
||||
|
||||
const isChanged = computed(() => md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value)));
|
||||
|
||||
function onApply() {
|
||||
model.value = JSON.parse(JSON.stringify(draft.value));
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
draft.value = JSON.parse(JSON.stringify(model.value));
|
||||
});
|
||||
|
||||
defineExpose({isChanged});
|
||||
</script>
|
||||
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div v-if="draft">
|
||||
<BaseForm
|
||||
v-model="draft"
|
||||
:isChanged="isChanged"
|
||||
@onApply="onApply"
|
||||
@cancel="$emit('cancel')"
|
||||
>
|
||||
<!-- Основные настройки -->
|
||||
<Panel header="Основные настройки" class="tw:mb-4">
|
||||
<div class="tw:space-y-6">
|
||||
<!-- Эффект смены слайдов -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Эффект смены слайдов
|
||||
</label>
|
||||
<Dropdown
|
||||
v-model="draft.data.effect"
|
||||
:options="effectOptionsList"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="Выберите эффект"
|
||||
class="tw:w-64"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Пагинация -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Пагинация
|
||||
</label>
|
||||
<ToggleSwitch v-model="draft.data.pagination"/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Показывать точки под слайдером для индикации текущего слайда.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Полоса прокрутки -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Полоса прокрутки
|
||||
</label>
|
||||
<ToggleSwitch v-model="draft.data.scrollbar"/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Показывать полосу прокрутки под слайдером для навигации между слайдами.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Расстояние между слайдами -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:gap-4">
|
||||
<label class="tw:font-medium tw:text-gray-700 tw:flex-shrink-0">
|
||||
Расстояние между слайдами
|
||||
</label>
|
||||
<div class="tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
|
||||
<InputNumber
|
||||
v-model="draft.data.space_between"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="30"
|
||||
:showButtons="true"
|
||||
/>
|
||||
<span class="tw:text-gray-600 tw:whitespace-nowrap">px</span>
|
||||
</div>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Расстояние между слайдами в пикселях. По умолчанию - 30.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Свободный режим -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Свободный режим
|
||||
</label>
|
||||
<ToggleSwitch v-model="draft.data.free_mode"/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Позволяет свободно прокручивать слайды без привязки к конкретным позициям.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Бесконечная прокрутка -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Бесконечная прокрутка
|
||||
</label>
|
||||
<ToggleSwitch v-model="draft.data.loop"/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Включите этот режим, чтобы после последнего слайда слайдер продолжал прокрутку с
|
||||
первого, создавая бесконечный цикл.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Автоматическая прокрутка -->
|
||||
<div>
|
||||
<div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
|
||||
<label class="tw:font-medium tw:text-gray-700">
|
||||
Автоматическая прокрутка
|
||||
</label>
|
||||
<ToggleSwitch v-model="draft.data.autoplay"/>
|
||||
</div>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Слайдер будет автоматически листать изображения каждые 3 секунды.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- Слайды -->
|
||||
<Panel header="Слайды">
|
||||
<template #icons>
|
||||
<Button
|
||||
severity="success"
|
||||
text
|
||||
rounded
|
||||
aria-label="Добавить слайд"
|
||||
@click="addSlide"
|
||||
>
|
||||
<i class="fa fa-plus"></i> Добавить новый слайд
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<div v-if="draft.data.slides.length === 0" class="tw:text-center tw:py-8 tw:text-gray-500">
|
||||
<i class="fa fa-image fa-3x tw:mb-4"></i>
|
||||
<p class="tw:font-bold">Слайды не добавлены</p>
|
||||
<Button
|
||||
label="Добавить первый слайд"
|
||||
severity="success"
|
||||
outlined
|
||||
class="tw:mt-4"
|
||||
@click="addSlide"
|
||||
>
|
||||
<i class="fa fa-plus"></i>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-else class="tw:space-y-4">
|
||||
<div
|
||||
v-for="(slide, index) in draft.data.slides"
|
||||
:key="index"
|
||||
class="tw:bg-white tw:rounded-lg tw:border tw:border-gray-200 tw:p-4 tw:shadow-sm tw:relative"
|
||||
>
|
||||
<div class="tw:absolute tw:top-2 tw:right-2">
|
||||
<Button
|
||||
severity="danger"
|
||||
text
|
||||
rounded
|
||||
aria-label="Удалить слайд"
|
||||
@click="removeSlide($event, index)"
|
||||
|
||||
>
|
||||
<i class="fa fa-trash tw:text-lg"></i>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="tw:flex">
|
||||
<!-- Изображение -->
|
||||
<div class="tw:mr-5">
|
||||
<label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
|
||||
Изображение
|
||||
</label>
|
||||
<OcImagePicker v-model="slide.image"/>
|
||||
</div>
|
||||
|
||||
<!-- Поля -->
|
||||
<div class="tw:space-y-4">
|
||||
<div>
|
||||
<label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
|
||||
Заголовок слайда
|
||||
</label>
|
||||
<InputText
|
||||
v-model="slide.title"
|
||||
placeholder="Введите заголовок слайда"
|
||||
class="tw:w-full"
|
||||
/>
|
||||
<small class="tw:block tw:text-sm tw:text-gray-500">
|
||||
Заголовок слайда будет отправляться в цели Яндекс.Метрики
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
|
||||
Ссылка
|
||||
</label>
|
||||
<LinkSelector v-model="slide.link"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</BaseForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, defineExpose, onMounted, ref} from "vue";
|
||||
import OcImagePicker from "@/components/OcImagePicker.vue";
|
||||
import LinkSelector from "@/components/Slider/LinkSelector.vue";
|
||||
import {Button, Dropdown, InputNumber, InputText, Panel, ToggleSwitch, useConfirm} from 'primevue';
|
||||
import {sliderEffectOptions} from "@/utils/constants..js";
|
||||
import {md5} from "js-md5";
|
||||
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
|
||||
|
||||
const confirm = useConfirm();
|
||||
|
||||
const draft = ref(null);
|
||||
const slider = defineModel();
|
||||
|
||||
const isChanged = computed(() => md5(JSON.stringify(slider.value)) !== md5(JSON.stringify(draft.value)));
|
||||
|
||||
const effectOptionsList = computed(() => {
|
||||
return Object.entries(sliderEffectOptions).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}));
|
||||
});
|
||||
|
||||
function removeSlide(event, index) {
|
||||
confirm.require({
|
||||
group: 'popup',
|
||||
target: event.currentTarget,
|
||||
message: 'Удалить слайд?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectProps: {
|
||||
label: 'Отмена',
|
||||
severity: 'secondary',
|
||||
outlined: true
|
||||
},
|
||||
acceptProps: {
|
||||
label: 'Удалить',
|
||||
severity: 'danger'
|
||||
},
|
||||
accept: () => draft.value.data.slides.splice(index, 1),
|
||||
});
|
||||
}
|
||||
|
||||
function addSlide() {
|
||||
draft.value.data.slides.push({
|
||||
title: '',
|
||||
link: {
|
||||
type: 'none',
|
||||
value: null,
|
||||
},
|
||||
image: '',
|
||||
});
|
||||
}
|
||||
|
||||
function onApply() {
|
||||
slider.value = JSON.parse(JSON.stringify(draft.value));
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
draft.value = JSON.parse(JSON.stringify(slider.value));
|
||||
});
|
||||
|
||||
defineExpose({isChanged});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="tw:flex tw:gap-4">
|
||||
<section class="tw:w-1/3 tw:p-4 tw:bg-gray-100 tw:rounded-xl">
|
||||
<header class="tw:font-bold tw:uppercase">Доступные блоки</header>
|
||||
<div class="tw:mb-6">Перетяните блок, чтобы добавить на главную страницу</div>
|
||||
|
||||
<draggable
|
||||
v-model="availableBlocks"
|
||||
:group="{ name: 'blocks', pull: 'clone', put: false }"
|
||||
:clone="cloneBlock"
|
||||
item-key="type"
|
||||
class="tw:space-y-2"
|
||||
chosenClass="tw:scale-98"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<Card class="tw:cursor-move">
|
||||
<template #title>
|
||||
<i class="fa fa-arrows"></i>
|
||||
{{ element.title }}
|
||||
</template>
|
||||
<template #content>
|
||||
<p class="m-0">
|
||||
{{ element.description }}
|
||||
</p>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
</draggable>
|
||||
</section>
|
||||
|
||||
<section class="tw:w-full tw:rounded-xl tw:p-4 tw:bg-gray-100 tw:min-h-[400px] tw:relative">
|
||||
<header class="tw:font-bold tw:uppercase">Блоки на главной странице</header>
|
||||
<div class="tw:mb-6">Эти блоки будут отображены на главной странице в том же порядке. Перетяните блок, если хотите изменить порядок.</div>
|
||||
|
||||
<draggable
|
||||
v-model="settings.items.mainpage_blocks"
|
||||
:group="{ name: 'blocks', put: true }"
|
||||
item-key="type"
|
||||
class="tw:w-full tw:h-full tw:min-h-[400px]"
|
||||
@change="onChange"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<template v-if="blockToComponentMap[element.type]">
|
||||
<component
|
||||
:is="blockToComponentMap[element.type]"
|
||||
:value="element"
|
||||
@onRemove="removeBlock(index)"
|
||||
@onShowSettings="showDrawer(index)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div v-else>неподдерживаемый блок</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div
|
||||
v-if="!hasBlocks"
|
||||
class="tw:absolute tw:inset-0 tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-center tw:py-12 tw:px-4 tw:pointer-events-none"
|
||||
>
|
||||
<div class="tw:mb-6 tw:text-6xl tw:text-gray-400">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<h3 class="tw:text-xl tw:font-semibold tw:text-gray-700 tw:mb-2">
|
||||
Нет блоков на главной странице
|
||||
</h3>
|
||||
<p class="tw:text-gray-500 tw:max-w-md tw:mb-4">
|
||||
Перетащите блок из левой панели, чтобы добавить его на главную страницу
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Drawer
|
||||
:visible="isDrawerSettingsVisible"
|
||||
@update:visible="closeDrawer"
|
||||
:header="drawerTitle"
|
||||
position="right"
|
||||
:baseZIndex="1000"
|
||||
class="tw:!w-full tw:md:!w-80 tw:lg:!w-[50rem]"
|
||||
>
|
||||
<template v-if="currentBlock && blockToFormMap[currentBlock.type]">
|
||||
<component
|
||||
:is="blockToFormMap[currentBlock.type]"
|
||||
ref="currentBlockForm"
|
||||
@cancel="closeDrawer"
|
||||
:modelValue="settings.items.mainpage_blocks[drawerBlockIndex]"
|
||||
@update:modelValue="updateBlockData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div v-else>Unsupported block type</div>
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import draggable from 'vuedraggable';
|
||||
import {Card, Drawer, useConfirm} from 'primevue';
|
||||
import {computed, nextTick, ref} from "vue";
|
||||
import {useSettingsStore} from "@/stores/settings.js";
|
||||
import {
|
||||
blocks,
|
||||
blockToComponentMap,
|
||||
blockToFormMap
|
||||
} from "@/components/MainPageConfigurator/availableBlocks.js";
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const confirm = useConfirm();
|
||||
const availableBlocks = ref(blocks);
|
||||
|
||||
const isDrawerSettingsVisible = ref(null);
|
||||
const drawerBlockIndex = ref(null);
|
||||
const currentBlockForm = ref(null);
|
||||
|
||||
const currentBlock = computed(() => {
|
||||
if (drawerBlockIndex.value >= 0) {
|
||||
return settings.items.mainpage_blocks[drawerBlockIndex.value];
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
const drawerTitle = computed(() => {
|
||||
if (currentBlock.value) {
|
||||
return `Редактирование ${currentBlock?.value?.type} - ${currentBlock?.value?.title || 'Без заголовка'}`;
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
|
||||
const hasBlocks = computed(() => {
|
||||
return settings.items.mainpage_blocks && settings.items.mainpage_blocks.length > 0;
|
||||
});
|
||||
|
||||
function removeBlock(index) {
|
||||
settings.items.mainpage_blocks.splice(index, 1);
|
||||
}
|
||||
|
||||
function cloneBlock(block) {
|
||||
const newBlock = JSON.parse(JSON.stringify(block));
|
||||
newBlock.title = '';
|
||||
newBlock.description = '';
|
||||
return newBlock;
|
||||
}
|
||||
|
||||
function showDrawer(blockIndex) {
|
||||
if (currentBlock) {
|
||||
drawerBlockIndex.value = blockIndex;
|
||||
isDrawerSettingsVisible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
// Проверяем, есть ли несохраненные изменения
|
||||
if (currentBlockForm.value?.isChanged === true) {
|
||||
confirm.require({
|
||||
message: 'У вас есть несохраненные изменения. Вы уверены, что хотите закрыть форму?',
|
||||
header: 'Подтверждение закрытия',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectProps: {
|
||||
label: 'Отмена',
|
||||
severity: 'secondary',
|
||||
outlined: true
|
||||
},
|
||||
acceptProps: {
|
||||
label: 'Закрыть',
|
||||
severity: 'danger'
|
||||
},
|
||||
accept: () => {
|
||||
drawerBlockIndex.value = null;
|
||||
isDrawerSettingsVisible.value = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
drawerBlockIndex.value = null;
|
||||
isDrawerSettingsVisible.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onChange(update) {
|
||||
if (update.added && update.added?.newIndex >= 0) {
|
||||
showDrawer(update.added.newIndex);
|
||||
}
|
||||
}
|
||||
|
||||
function updateBlockData(newBlockData) {
|
||||
if (drawerBlockIndex.value !== null && drawerBlockIndex.value >= 0) {
|
||||
settings.items.mainpage_blocks.splice(drawerBlockIndex.value, 1, newBlockData);
|
||||
nextTick(() => closeDrawer());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
import SliderBlock from "@/components/MainPageConfigurator/Blocks/SliderBlock.vue";
|
||||
import CategoriesTopBlock from "@/components/MainPageConfigurator/Blocks/CategoriesTopBlock.vue";
|
||||
import SliderForm from "@/components/MainPageConfigurator/Forms/SliderForm.vue";
|
||||
import CategoriesTopForm from "@/components/MainPageConfigurator/Forms/CategoriesTopForm.vue";
|
||||
import ProductsFeedBlock from "@/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue";
|
||||
import ProductsFeedForm from "@/components/MainPageConfigurator/Forms/ProductsFeedForm.vue";
|
||||
|
||||
export const blockToComponentMap = {
|
||||
slider: SliderBlock,
|
||||
categories_top: CategoriesTopBlock,
|
||||
products_feed: ProductsFeedBlock,
|
||||
};
|
||||
|
||||
export const blockToFormMap = {
|
||||
slider: SliderForm,
|
||||
categories_top: CategoriesTopForm,
|
||||
products_feed: ProductsFeedForm,
|
||||
};
|
||||
|
||||
export const blocks = [
|
||||
{
|
||||
type: 'slider',
|
||||
title: 'Слайдер',
|
||||
description: 'Изображения объединённые в слайдер.',
|
||||
is_enabled: true,
|
||||
goal_name: '',
|
||||
data: {
|
||||
effect: "slide",
|
||||
pagination: true,
|
||||
scrollbar: false,
|
||||
free_mode: false,
|
||||
space_between: 30,
|
||||
autoplay: false,
|
||||
loop: false,
|
||||
slides: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'categories_top',
|
||||
title: 'Топ категорий',
|
||||
description: 'Виджет с кнопками популярных категорий и кнопкой «Каталог» для всех категорий.',
|
||||
is_enabled: true,
|
||||
goal_name: '',
|
||||
data: {
|
||||
count: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'products_feed',
|
||||
title: 'Лента товаров',
|
||||
description: 'Отображает товары в виде прокручиваемой ленты с возможностью подгрузки новых элементов по мере скролла.',
|
||||
is_enabled: true,
|
||||
goal_name: '',
|
||||
data: {
|
||||
max_page_count: 10,
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,182 +0,0 @@
|
||||
<template>
|
||||
<input type="hidden" name="module_tgshop_mainpage_slider" :value="JSON.stringify(slider)">
|
||||
<div class="alert alert-info">
|
||||
<p>Здесь настраивается слайдер, который выводится на главной странице.</p>
|
||||
<p>Рекомендуемые размеры изображений: <span class="text-bold">370×200px</span>, <span
|
||||
class="text-bold">740×400px</span>,
|
||||
<span class="text-bold">1110×600px</span> либо другие, в тех же пропорциях (1.85:1)<br>
|
||||
Изображение будет автоматически обрезана под нужный формат. <br>
|
||||
Заголовок можно оставить пустым, но рекомендуется заполнить для корректной работы целей
|
||||
Яндекс.Метрики.</p>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<SettingsItem label="Статус">
|
||||
<template #default>
|
||||
<Switcher v-model="slider.is_enabled"/>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Показывать слайдер на главной странице.
|
||||
Для отображения слайдера нужно добавить минимум 1 слайд.
|
||||
</template>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem label="Эффект смены слайдов">
|
||||
<template #default>
|
||||
<select v-model="slider.effect" class="form-control">
|
||||
<option value="slide">Слайд</option>
|
||||
<option value="flip">Переворот</option>
|
||||
<option value="cards">Карточки</option>
|
||||
<option value="cube">Куб</option>
|
||||
<option value="coverflow">Перекрывающиеся слайды</option>
|
||||
</select>
|
||||
</template>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem label="Пагинация">
|
||||
<template #default>
|
||||
<Switcher v-model="slider.pagination"/>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Показывать точки под слайдером для индикации текущего слайда.
|
||||
</template>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem label="Полоса прокрутки">
|
||||
<template #default>
|
||||
<Switcher v-model="slider.scrollbar"/>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Показывать полосу прокрутки под слайдером для навигации между слайдами.
|
||||
</template>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem label="Расстояние между слайдами">
|
||||
<template #default>
|
||||
<div class="tw:max-w-2xl">
|
||||
<div class="input-group">
|
||||
<input
|
||||
v-model="slider.space_between"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
class="form-control"
|
||||
placeholder="30"
|
||||
/>
|
||||
<span class="input-group-addon">px</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Расстояние между слайдами в пикселях. По умолчанию - 30.
|
||||
</template>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem label="Свободный режим">
|
||||
<template #default>
|
||||
<Switcher v-model="slider.free_mode"/>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Позволяет свободно прокручивать слайды без привязки к конкретным позициям.
|
||||
</template>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem label="Бесконечная прокрутка">
|
||||
<template #default>
|
||||
<Switcher v-model="slider.loop"/>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Включите этот режим, чтобы после последнего слайда слайдер продолжал прокрутку с первого, создавая бесконечный цикл.
|
||||
</template>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem label="Автоматическая прокрутка">
|
||||
<template #default>
|
||||
<Switcher v-model="slider.autoplay"/>
|
||||
</template>
|
||||
|
||||
<template #help>
|
||||
Слайдер будет автоматически листать изображения каждые 3 секунды
|
||||
</template>
|
||||
</SettingsItem>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="text-left">Заголовок</td>
|
||||
<td class="text-left">Ссылка</td>
|
||||
<td class="text-center">Изображение</td>
|
||||
<td>Действия</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(slide, index) in slider.slides">
|
||||
<td class="text-left">
|
||||
<input v-model="slide.title" type="text" placeholder="Заголовок слайда"
|
||||
class="form-control"/>
|
||||
</td>
|
||||
<td class="text-left" style="width: 30%;">
|
||||
<LinkSelector v-model="slide.link"/>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<OcImagePicker v-model="slide.image"/>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<button type="button" class="btn btn-danger" @click="removeSlide(index)">
|
||||
<i class="fa fa-minus-circle"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"></td>
|
||||
<td class="text-left">
|
||||
<button @click="addSlide" type="button" class="btn btn-primary">
|
||||
<i class="fa fa-plus-circle"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
import OcImagePicker from "@/components/OcImagePicker.vue";
|
||||
import LinkSelector from "@/components/Slider/LinkSelector.vue";
|
||||
import SettingsItem from "@/components/SettingsItem.vue";
|
||||
import Switcher from "@/components/Switcher.vue";
|
||||
|
||||
const slider = defineModel();
|
||||
|
||||
function removeSlide(index) {
|
||||
slider.value.slides.splice(index, 1);
|
||||
}
|
||||
|
||||
function addSlide() {
|
||||
slider.value.slides.push({
|
||||
title: '',
|
||||
link: {
|
||||
type: 'none',
|
||||
value: null,
|
||||
},
|
||||
image: '',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user