83 lines
1.9 KiB
Vue
83 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view v-if="!isLoading" class="container b-f p-b">
|
||
|
|
<view class="article-title">
|
||
|
|
<text>{{ detail.title }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="article-little dis-flex flex-x-between m-top10">
|
||
|
|
<view class="article-little-left">
|
||
|
|
<text class="article-views f-24 col-8">{{ detail.click }}次浏览</text>
|
||
|
|
</view>
|
||
|
|
<view class="article-little-right">
|
||
|
|
<text class="article-views f-24 col-8">{{ detail.createTime | timeFormat('yyyy-mm-dd hh:MM') }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="article-content m-top20">
|
||
|
|
<jyf-parser :html="detail.description"></jyf-parser>
|
||
|
|
</view>
|
||
|
|
<!-- 快捷导航 -->
|
||
|
|
<shortcut />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import jyfParser from '@/components/jyf-parser/jyf-parser'
|
||
|
|
import Shortcut from '@/components/shortcut'
|
||
|
|
import * as ArticleApi from '@/api/article'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Shortcut
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 当前文章ID
|
||
|
|
articleId: null,
|
||
|
|
// 加载中
|
||
|
|
isLoading: true,
|
||
|
|
// 当前文章详情
|
||
|
|
detail: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面加载
|
||
|
|
*/
|
||
|
|
onLoad(options) {
|
||
|
|
// 记录文章ID
|
||
|
|
this.articleId = options.articleId;
|
||
|
|
// 获取文章详情
|
||
|
|
this.getArticleDetail();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
// 获取文章详情
|
||
|
|
getArticleDetail() {
|
||
|
|
const app = this
|
||
|
|
app.isLoading = true
|
||
|
|
ArticleApi.detail(app.articleId)
|
||
|
|
.then(result => {
|
||
|
|
app.detail = result.data.articleInfo;
|
||
|
|
})
|
||
|
|
.finally(() => app.isLoading = false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container {
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 30rpx;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.article-title {
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
font-size: 35rpx;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.article-content {
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
</style>
|