88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<template>
|
||
<div>
|
||
<app-header effect="light"></app-header>
|
||
<div class="layout-body">
|
||
<div class="body-inner">
|
||
<!-- 文章标题 -->
|
||
<span class="article-title">{{ article.title }}</span>
|
||
<!-- 其他信息 -->
|
||
<div class="article-info">
|
||
<span v-if="article.author">{{ article.author.realName }}</span>
|
||
<span>{{ article.updateTime | dateFormat2 }}</span>
|
||
</div>
|
||
<!-- 分割线 -->
|
||
<el-divider></el-divider>
|
||
<!-- 文章内容 -->
|
||
<div v-html="article.content" class="article-content ql-editor"></div>
|
||
<!-- 文章附件 -->
|
||
<div v-if="article.files && article.files.length" class="article-file">
|
||
<div v-for="(item, index) in article.files" :key="index">
|
||
<el-link icon="el-icon-download" @click="openNewTab(item.url)">
|
||
附件{{ index + 1 }}：{{ item.name }}
|
||
</el-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<app-footer></app-footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import loadConfig from '@/mixins/load-config'
|
||
import { AppHeader, AppFooter } from '@/layout/components'
|
||
import { openNewTab, dateFormat2 } from '@/utils/common'
|
||
import { queryById } from '@/api/article'
|
||
|
||
export default {
|
||
name: 'AnArticle',
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
default: '',
|
||
description: '文章id'
|
||
},
|
||
uuid: {
|
||
type: String,
|
||
default: '',
|
||
description: '文章uuid'
|
||
}
|
||
},
|
||
mixins: [loadConfig],
|
||
components: { AppHeader, AppFooter },
|
||
filters: {
|
||
dateFormat2
|
||
},
|
||
data() {
|
||
return {
|
||
article: {}
|
||
}
|
||
},
|
||
methods: {
|
||
openNewTab,
|
||
getArticle() {
|
||
queryById(this.id, this.uuid).then(res => {
|
||
if (res.data) {
|
||
this.article = res.data
|
||
} else {
|
||
this.$router.push('/error')
|
||
}
|
||
})
|
||
}
|
||
},
|
||
computed: {
|
||
path() {
|
||
return this.$route.path
|
||
}
|
||
},
|
||
watch: {
|
||
path() {
|
||
this.getArticle()
|
||
}
|
||
},
|
||
created() {
|
||
this.getArticle()
|
||
}
|
||
}
|
||
</script>
|