init
This commit is contained in:
88
pc/pages/information/[source]/index.vue
Normal file
88
pc/pages/information/[source]/index.vue
Normal 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>
|
132
pc/pages/information/detail/[id].vue
Normal file
132
pc/pages/information/detail/[id].vue
Normal 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 }} |
|
||||
</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>
|
83
pc/pages/information/index.vue
Normal file
83
pc/pages/information/index.vue
Normal 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>
|
Reference in New Issue
Block a user