feat: 服务支持页懒加载
- 骨架屏调整:服务支持页骨架屏布局调整 - 懒加载:服务支持页添加懒加载机制
This commit is contained in:
@ -1,34 +1,47 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="pending" class="flex justify-center items-center h-64">
|
||||
<el-skeleton :rows="6" animated />
|
||||
<support-tabs model-value="faq" />
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('navigation.faq') }}</h1>
|
||||
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<support-tabs model-value="faq" />
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('navigation.faq') }}</h1>
|
||||
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<question-filter
|
||||
v-model="filters"
|
||||
:product-type-options="productTypeOptions"
|
||||
:product-options="productOptions"
|
||||
:question-type-options="questionTypeOptions"
|
||||
/>
|
||||
<div v-if="pending" class="page-content">
|
||||
<el-skeleton :rows="10" animated class="py-4" throttle="100">
|
||||
<template #template>
|
||||
<div class="flex flex-col gap-xl">
|
||||
<el-skeleton-item
|
||||
variant="rect"
|
||||
style="width: 100%; height: 100px"
|
||||
/>
|
||||
<el-skeleton-item
|
||||
v-for="i in 10"
|
||||
:key="i"
|
||||
variant="h1"
|
||||
style="height: 60px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</div>
|
||||
<div v-else class="page-content">
|
||||
<question-filter
|
||||
v-model="filters"
|
||||
:product-type-options="productTypeOptions"
|
||||
:product-options="productOptions"
|
||||
:question-type-options="questionTypeOptions"
|
||||
/>
|
||||
|
||||
<question-list :questions="paginatedQuestions" />
|
||||
<question-list :questions="paginatedQuestions" />
|
||||
|
||||
<el-pagination
|
||||
v-model:current-page="page"
|
||||
class="justify-center pagination-container"
|
||||
layout="prev, pager, next"
|
||||
hide-on-single-page
|
||||
:page-size="questionsPerPage"
|
||||
:total="filteredQuestions.length"
|
||||
/>
|
||||
</div>
|
||||
<el-pagination
|
||||
v-model:current-page="page"
|
||||
class="justify-center pagination-container"
|
||||
layout="prev, pager, next"
|
||||
hide-on-single-page
|
||||
:page-size="questionsPerPage"
|
||||
:total="filteredQuestions.length"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -57,7 +70,7 @@
|
||||
{ label: $t('navigation.faq') },
|
||||
];
|
||||
|
||||
const { data: questions, pending, error } = await useQuestionList();
|
||||
const { data: questions, pending, error } = useQuestionList();
|
||||
|
||||
const questionTypeOptions = computed(() => {
|
||||
const types: QuestionTypeView[] = [];
|
||||
|
||||
Reference in New Issue
Block a user