You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
4 months ago
|
<template>
|
||
|
|
<view v-if="!isLoading" class="container b-f p-b">
|
||
|
|
<view class="article-title">
|
||
|
|
<text class="f-32">{{ 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 }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="article-content m-top20">
|
||
|
|
<jyf-parser :html="detail.content"></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.detail
|
||
|
|
})
|
||
|
|
.finally(() => app.isLoading = false)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container {
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 20rpx;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.article-content {
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
</style>
|