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>
|