MoreStrive
71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
|
|
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
|
|
|
|
const props = defineProps<{
|
|
type: string;
|
|
id: any;
|
|
}>();
|
|
|
|
import { useDynamicPageStore } from '~/stores/dynamic-page';
|
|
const store = reactive({
|
|
dynamicPage: useDynamicPageStore(),
|
|
});
|
|
|
|
const { currentPage } = storeToRefs(useDynamicPageStore());
|
|
|
|
const defineTypeRecusive = {
|
|
COMPONENT: "component",
|
|
SECTION: "section",
|
|
};
|
|
|
|
const findDataPosition = computed(() => {
|
|
let result = {};
|
|
switch (props.type) {
|
|
case defineTypeRecusive.COMPONENT:
|
|
result = currentPage.value.components && currentPage.value.components.find((component: any) => component.id === props.id);
|
|
break;
|
|
case defineTypeRecusive.SECTION:
|
|
result = currentPage.value.sections && currentPage.value.sections.find((section: any) => section.id === props.id);
|
|
break;
|
|
default:
|
|
result = {};
|
|
break;
|
|
}
|
|
return result;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<template v-if="props.type === defineTypeRecusive.COMPONENT">
|
|
<DynamicComponent
|
|
v-if="findDataPosition && findDataPosition?.id"
|
|
:settings="findDataPosition.settings"
|
|
:component="findDataPosition"
|
|
/>
|
|
<div v-else class="empty"></div>
|
|
</template>
|
|
<template v-else-if="props.type === defineTypeRecusive.SECTION">
|
|
<DynamicSection
|
|
v-if="findDataPosition && findDataPosition?.id"
|
|
:settings="findDataPosition.settings"
|
|
:content="findDataPosition.content ? JSON.parse(findDataPosition.content) : null"
|
|
:section="findDataPosition"
|
|
/>
|
|
<div v-else class="empty"></div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="empty"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.empty {
|
|
min-height: 100px;
|
|
border-radius: 6px;
|
|
background: #409eff;
|
|
}
|
|
</style>
|