This commit is contained in:
quantulr
2023-10-29 18:37:44 +08:00
commit 373b3d9dff
1813 changed files with 131892 additions and 0 deletions

View File

@ -0,0 +1,88 @@
<template>
<div class="min-h-full flex flex-col">
<div class="text-4xl mb-5">
<span v-if="route.query.keywords">
查找"{{ route.query.keywords }}"
</span>
<span v-else>{{ route.query.name || getSourceText }}</span>
</div>
<div v-loading="pending">
<div
class="bg-white px-5 rounded overflow-hidden"
v-if="data.lists.length"
>
<div class="pt-5 text-tx-secondary" v-if="route.query.keywords">
为您找到相关结果 {{ data.count }}
</div>
<InformationItems
v-for="item in data.lists"
:key="item.id"
:id="item.id"
:title="item.title"
:desc="item.intro"
:click="item.visit"
:author="item.author"
:create-time="item.createTime"
:image="item.image"
:only-title="false"
/>
<div class="py-4 flex justify-end">
<el-pagination
v-model:current-page="params.pageNo"
:total="data.count"
:page-size="params.pageSize"
hide-on-single-page
@current-change="refresh()"
/>
</div>
</div>
<div v-else class="flex-1 flex justify-center items-center">
<el-empty
:image="empty_news"
description="暂无资讯"
:image-size="250"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ElPagination, ElEmpty } from 'element-plus'
import empty_news from '@/assets/images/empty_news.png'
import { getArticleList } from '~~/api/news'
const route = useRoute()
const sort = computed(() =>
route.params.source == 'search' ? '' : route.params.source
)
const keyword = computed(() => route.query.keywords || '')
const cid = computed(() => route.query.cid || '')
const params = reactive({
pageNo: 1,
pageSize: 15,
keyword,
cid,
sort
})
const { data, refresh, pending } = await useAsyncData(
() => getArticleList(params),
{
initialCache: false
}
)
const getSourceText = computed(() => {
switch (route.params.source) {
case 'hot':
return '热门资讯'
case 'new':
return ' 最新资讯'
default:
return '全部资讯'
}
})
watch([() => route.query.keywords, () => route.query.cid], () => {
refresh()
})
</script>
<style lang="scss" scoped></style>

View File

@ -0,0 +1,132 @@
<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 }}&nbsp;|&nbsp;
</span>
<span class="mr-5">{{ newsDetail.createTime }}</span>
<div class="flex items-center">
<Icon name="el-icon-View" />
<span>&nbsp;{{ 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>

View File

@ -0,0 +1,83 @@
<template>
<div>
<div class="text-4xl mb-5">资讯中心</div>
<div class="flex flex-wrap gap-4">
<InformationCard
v-for="item in newsLists"
style="width: calc(50% - 8px)"
:key="item.id"
:header="item.name"
:data="item.article"
:link="`/information/search?cid=${item.id}&name=${item.name}`"
>
<template #content="{ data }">
<div class="px-4 py-5">
<div class="flex gap-2.5">
<div
class="w-[180px] bg-page rounded overflow-hidden"
v-for="(item, index) in splitData(data)
.topThree"
:key="item.id"
>
<InformationItems
:index="index"
:id="item.id"
:title="item.title"
:author="item.author"
:create-time="item.createTime"
:image="item.image || placeholder"
:only-title="false"
:border="false"
:show-author="false"
:show-desc="false"
:show-time="false"
:show-click="false"
:is-horizontal="true"
>
<template #title="{ title }">
<span class="line-clamp-2">{{
title
}}</span>
</template>
</InformationItems>
</div>
</div>
<div
v-for="item in splitData(data).remain"
:key="item.id"
>
<InformationItems
:id="item.id"
:title="item.title"
:author="item.author"
:create-time="item.createTime"
:image="item.image"
:only-title="true"
:show-time="false"
>
<template #title="{ title }">
<span class="line-clamp-1">{{
title
}}</span>
</template>
</InformationItems>
</div>
</div>
</template>
</InformationCard>
</div>
</div>
</template>
<script lang="ts" setup>
import { getArticleCenter } from '~~/api/news'
import placeholder from '@/assets/images/placeholder.png'
const { data: newsLists } = await useAsyncData(() => getArticleCenter())
const splitData = (data) => {
const size = 3
return {
topThree: data.slice(0, size),
remain: data.slice(size)
}
}
</script>
<style lang="scss" scoped></style>