This commit is contained in:
MoreStrive
2024-07-06 16:34:43 +07:00
5 changed files with 120 additions and 51 deletions
@@ -69,9 +69,6 @@ const handleRouteChange = async (query: any) => {
}
};
onBeforeMount(() => {
if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
});
const loadPage = async (page: number) => {
let newDataQuery = "";
@@ -92,6 +89,8 @@ const loadPage = async (page: number) => {
}
};
if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
const handleNextPrev = (type: "+" | "-") => {
if (listArticleByCategory.value?.length > 0) {
if (type === "+") {
@@ -128,25 +127,11 @@ const mapActivesToItems = (index: number) => {
</template>
<div class="button-page flex">
<span class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
<i class="el-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
></path>
</svg>
</i>
<Icon name="ooui:previous-ltr"></Icon>
</span>
<span :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</span>
<span class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
<i class="el-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
></path>
</svg>
</i>
<Icon name="ooui:previous-rtl"></Icon>
</span>
</div>
</div>
@@ -1,4 +1,11 @@
<script setup lang="ts">
import Poll from "~/components/article/immerse/Poll.vue";
import Quiz from "~/components/article/immerse/Quiz.vue";
import Survey from "~/components/article/immerse/Survey.vue";
import Document from "~/components/article/immerse/Document.vue";
import Attachment from "@/components/article/immerse/Attachment.vue";
import Tag from "@/components/article/immerse/Tag.vue";
// import articlerelation from "@/components/article/immerse/ArticleRelation.vue";
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
import { getInputValue } from "@/utils/parseSQL";
import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
@@ -92,6 +99,8 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
}
return null;
}
console.log(currentArticle.value ,'currentArticle')
</script>
<template>
@@ -296,7 +305,8 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
<p class="my-10px" v-if="currentArticle.intro" v-html="currentArticle.intro">
</p>
<div v-html="currentArticle.detail" class="[&_p_>_span]:!font-raleway [&_p]:mb-10px"></div>
<!-- <div v-html="currentArticle.detail" class="[&_p_>_span]:!font-raleway [&_p]:mb-10px"></div> -->
<component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
</div>
</div>
<div class="content__bottom__right">