101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
|
|
<template>
|
|
<div v-loading="loading">
|
|
<div class="box sort_menu">
|
|
<el-menu
|
|
default-active="1"
|
|
@select="handleSelect"
|
|
>
|
|
<template v-for="(item,index) in category" :key="index">
|
|
<template v-if="item.children && item.children.length > 0">
|
|
<el-sub-menu :index="`${index}`">
|
|
<template #title>{{ item.title }}</template>
|
|
<template v-for="(sub,subIndex) in item.children" :key="subIndex">
|
|
<template v-if="sub.children && sub.children.length > 0">
|
|
<el-sub-menu :index="`${index}-${subIndex}`">
|
|
<template #title>{{ sub.title }}</template>
|
|
<el-menu-item v-for="(sub2,sub2Index) in sub.children" :key="sub2Index" :index="`${index}-${subIndex}-${sub2Index}`">
|
|
{{ sub2.title }}
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
</template>
|
|
<template v-else>
|
|
<el-menu-item :index="`${index}-${subIndex}`">
|
|
<el-space>
|
|
<el-avatar v-if="item.icon" size="small" :src="item.icon" />
|
|
{{ sub.title }}
|
|
</el-space>
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
</el-sub-menu>
|
|
</template>
|
|
<el-menu-item v-else :index="`${index}`">
|
|
<el-space>
|
|
<el-avatar v-if="item.icon" size="small" :src="item.icon" />
|
|
{{ item.title }}
|
|
</el-space>
|
|
</el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
|
|
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
|
|
import type {CmsLink} from "~/api/cms/cmsLink/model";
|
|
import {pageCmsArticle} from "~/api/cms/cmsArticle";
|
|
import {pageCmsLink} from "~/api/cms/cmsLink";
|
|
import {navigateTo, useMenu, useSubMenu} from "#imports";
|
|
import {
|
|
ArrowRight
|
|
} from '@element-plus/icons-vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
category?: CmsNavigation[];
|
|
title?: string;
|
|
}>(),
|
|
{}
|
|
);
|
|
|
|
const i18n = useI18n();
|
|
const list = ref<CmsArticle[]>([]);
|
|
const hotKeys = ref<CmsLink[]>([]);
|
|
const loading = ref<boolean>(true);
|
|
|
|
|
|
// 加载数据
|
|
pageCmsArticle({
|
|
limit: 5,
|
|
recommend: 1,
|
|
status: 0,
|
|
categoryId: i18n.locale.value == 'en' ? 1080 : 1005,
|
|
lang: i18n.locale.value
|
|
}).then(data => {
|
|
if(data){
|
|
list.value = data?.list;
|
|
}
|
|
loading.value = false;
|
|
})
|
|
|
|
// 热门关键词
|
|
pageCmsLink({
|
|
limit: 8,
|
|
categoryId: i18n.locale.value == 'en' ? 1115 : 1106,
|
|
lang: i18n.locale.value
|
|
}).then(res => {
|
|
if(res){
|
|
hotKeys.value = res.list;
|
|
}
|
|
})
|
|
|
|
const handleSelect = (index: any) => {
|
|
if(props.category){
|
|
const item = props.category[index];
|
|
navigateTo(item.path)
|
|
}
|
|
}
|
|
</script>
|