93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<template>
|
|
<view class="app-container">
|
|
<template v-if="articleInfo">
|
|
<HeaderBar :title="articleInfo.title || '文章详情'" text-align="center" enable-back/>
|
|
<view class="article-content">
|
|
<view class="article-info">
|
|
<text class="article-time">发布于 {{ articleInfo.createTime | dv}}</text>
|
|
</view>
|
|
<u-parse :content="articleInfo.content" :options="parseOptions"></u-parse>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<HeaderBar title="文章详情" text-align="center" enable-back/>
|
|
<view class="no-data">
|
|
<u-empty mode="data" text="暂无数据"></u-empty>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { appGetOneArticle } from '@/api/app/article'
|
|
import HeaderBar from '@/components/HeaderBar.vue'
|
|
|
|
export default {
|
|
name: 'ArticleDetail',
|
|
components: {
|
|
HeaderBar
|
|
},
|
|
data() {
|
|
return {
|
|
articleInfo: null,
|
|
parseOptions: {
|
|
// 富文本解析配置
|
|
tagStyle: {
|
|
table: 'border-collapse:collapse;border-top:1px solid #dfe2e5;border-left:1px solid #dfe2e5;',
|
|
th: 'border-right:1px solid #dfe2e5;border-bottom:1px solid #dfe2e5;padding:8px;',
|
|
td: 'border-right:1px solid #dfe2e5;border-bottom:1px solid #dfe2e5;padding:8px;'
|
|
}
|
|
},
|
|
queryParams: {}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options) {
|
|
Object.assign(this.queryParams, options)
|
|
}
|
|
this.getArticleDetail()
|
|
},
|
|
methods: {
|
|
getArticleDetail() {
|
|
appGetOneArticle(this.queryParams)
|
|
.then(res => {
|
|
if (res.code === 200) {
|
|
this.articleInfo = res.data
|
|
} else {
|
|
this.articleInfo = null
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.articleInfo = null
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding-bottom: 128rpx;
|
|
}
|
|
|
|
.article-content {
|
|
background-color: #fff;
|
|
margin: 32rpx 20rpx;
|
|
padding: 24rpx 24rpx 64rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
.article-info {
|
|
margin-bottom: 30rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.article-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.no-data {
|
|
padding: 100rpx 0;
|
|
}
|
|
</style>
|