55 lines
1.6 KiB
Vue
55 lines
1.6 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>();
|
|
|
|
// 上一篇
|
|
getPrevious({
|
|
articleId: props.articleId,
|
|
lang: i18n.locale.value
|
|
}).then(res => {
|
|
previousArticle.value = res;
|
|
}).catch(() => {
|
|
})
|
|
// 下一篇
|
|
getNext({
|
|
articleId: props.articleId,
|
|
lang: i18n.locale.value
|
|
}).then(data => {
|
|
nextArticle.value = data;
|
|
}).catch(() => {
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-between flex-col sm:flex-row my-3 gap-4">
|
|
<nuxt-link :to="previousArticle ? detail(previousArticle) : ''"
|
|
class="w-auto sm: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-auto sm: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>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|