55 lines
1.9 KiB
Vue
55 lines
1.9 KiB
Vue
<!-- 上一篇 下一篇 -->
|
||
<script setup lang="ts">
|
||
import {detail} from "~/utils/common";
|
||
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
|
||
import {getNext, getPrevious} from "~/api/cms/cmsArticle";
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
articleId?: number;
|
||
}>(),
|
||
{}
|
||
);
|
||
|
||
const i18n = useI18n();
|
||
const previousArticle = ref<CmsArticle>();
|
||
const nextArticle = ref<CmsArticle>();
|
||
|
||
// 上一篇
|
||
previousArticle.value = await getPrevious({
|
||
articleId: props.articleId,
|
||
lang: i18n.locale.value
|
||
})
|
||
// 下一篇
|
||
nextArticle.value = await getNext({
|
||
articleId: props.articleId,
|
||
lang: i18n.locale.value
|
||
})
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex justify-between my-3 gap-4">
|
||
<nuxt-link :to="previousArticle ? detail(previousArticle) : ''" class="w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
|
||
<span class="text-lg text-gray-800">{{ previousArticle?.title || '没有了' }}</span>
|
||
<span class="text-gray-400">{{ $t('previous') }}</span>
|
||
</nuxt-link>
|
||
<nuxt-link :to="nextArticle ? detail(nextArticle) : ''" class="w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
|
||
<span class="text-lg text-gray-800">{{ nextArticle?.title || '没有了' }}</span>
|
||
<span class="text-gray-400">{{ $t('next') }}</span>
|
||
</nuxt-link>
|
||
</div>
|
||
<!-- <div class="page flex flex-col">-->
|
||
<!-- <span class="text-left">-->
|
||
<!-- {{ $t('previous') }}：<a :href="detail(previousArticle)">{{ previousArticle?.title }}</a>-->
|
||
<!-- </span>-->
|
||
<!-- <span class="text-left">-->
|
||
<!-- {{ $t('next') }}：<a :href="detail(nextArticle)">{{ nextArticle?.title }}</a>-->
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
</style>
|