133 lines
5.1 KiB
Vue
133 lines
5.1 KiB
Vue
<template>
|
||
<div>
|
||
<div class="flex items-center">
|
||
当前位置：
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item :to="{ path: '/information' }">
|
||
资讯中心
|
||
</el-breadcrumb-item>
|
||
<el-breadcrumb-item
|
||
:to="{
|
||
path: `/information/search`,
|
||
query: {
|
||
cid: newsDetail.cid,
|
||
name: newsDetail.category
|
||
}
|
||
}"
|
||
>
|
||
{{ newsDetail.category }}
|
||
</el-breadcrumb-item>
|
||
<el-breadcrumb-item>文章详情</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="flex gap-4 mt-5">
|
||
<div class="w-[750px] bg-body rounded-[8px] flex-none p-5">
|
||
<div class="border-b border-br pb-4">
|
||
<span class="font-medium text-[22px]">
|
||
{{ newsDetail.title }}
|
||
</span>
|
||
<div
|
||
class="mt-3 text-tx-secondary flex items-center flex-wrap"
|
||
>
|
||
<span v-if="newsDetail.author">
|
||
{{ newsDetail.author }} |
|
||
</span>
|
||
<span class="mr-5">{{ newsDetail.createTime }}</span>
|
||
<div class="flex items-center">
|
||
<Icon name="el-icon-View" />
|
||
<span> {{ newsDetail.visit }}人浏览</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="newsDetail.summary"
|
||
class="bg-page mt-4 p-3 rounded-lg"
|
||
>
|
||
摘要：{{ newsDetail.summary }}
|
||
</div>
|
||
<div class="py-4" v-html="newsDetail.content"></div>
|
||
<div class="flex justify-center mt-[40px]">
|
||
<ElButton size="large" round @click="handelCollectLock">
|
||
<Icon
|
||
:name="`el-icon-${
|
||
newsDetail.isCollect ? 'StarFilled' : 'Star'
|
||
}`"
|
||
:size="newsDetail.isCollect ? 22 : 18"
|
||
:color="
|
||
newsDetail.isCollect ? '#FF2C2F' : 'inherit'
|
||
"
|
||
/>
|
||
{{ newsDetail.isCollect ? '取消收藏' : '点击收藏' }}
|
||
</ElButton>
|
||
</div>
|
||
<div class="border-t border-br mt-[30px]">
|
||
<div class="mt-5 flex">
|
||
<span class="text-tx-regular">上一篇：</span>
|
||
<NuxtLink
|
||
v-if="newsDetail.prev"
|
||
class="flex-1 hover:underline"
|
||
:to="`/information/detail/${newsDetail.prev?.id}`"
|
||
>
|
||
{{ newsDetail.prev?.title }}
|
||
</NuxtLink>
|
||
<span v-else> 暂无相关文章 </span>
|
||
</div>
|
||
<div class="mt-5 flex">
|
||
<span class="text-tx-regular">下一篇：</span>
|
||
<NuxtLink
|
||
v-if="newsDetail.next"
|
||
class="flex-1 hover:underline"
|
||
:to="`/information/detail/${newsDetail.next?.id}`"
|
||
>
|
||
{{ newsDetail.next?.title }}
|
||
</NuxtLink>
|
||
<span v-else> 暂无相关文章 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<InformationCard
|
||
class="flex-1"
|
||
header="相关资讯"
|
||
:data="newsDetail.news"
|
||
:only-title="false"
|
||
image-size="mini"
|
||
:show-author="false"
|
||
:show-desc="false"
|
||
:show-click="false"
|
||
:border="false"
|
||
:title-line="2"
|
||
source="new"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ElBreadcrumb, ElBreadcrumbItem, ElButton } from 'element-plus'
|
||
import { addCollect, cancelCollect, getArticleDetail } from '~~/api/news'
|
||
import feedback from '~~/utils/feedback'
|
||
const route = useRoute()
|
||
const { data: newsDetail, refresh } = await useAsyncData(
|
||
() =>
|
||
getArticleDetail({
|
||
id: route.params.id
|
||
}),
|
||
{
|
||
initialCache: false
|
||
}
|
||
)
|
||
|
||
const handelCollect = async () => {
|
||
const articleId = route.params.id
|
||
if (newsDetail.value.isCollect) {
|
||
await cancelCollect({ articleId })
|
||
feedback.msgSuccess('已取消收藏')
|
||
} else {
|
||
await addCollect({ articleId })
|
||
feedback.msgSuccess('收藏成功')
|
||
}
|
||
refresh()
|
||
}
|
||
const { lockFn: handelCollectLock } = useLockFn(handelCollect)
|
||
</script>
|
||
<style lang="scss" scoped></style>
|